As an experienced CMS website operation person, I am well aware of the importance of an efficient and unified template mechanism for website operation.AnQi CMS, with its high-performance architecture based on the Go language and flexible template system, provides us with powerful tools to ensure the consistency of content display, the unity of brand image, and greatly improves the efficiency of content management and publication.
The importance of unifying the layout and structure of the website
In website operation, maintaining consistency in the overall layout and structure of the website is the key to attracting and retaining users.A chaotic and inconsistent interface not only damages the brand's professionalism but also confuses users while browsing, thereby reducing the user experience.The template inheritance mechanism of AnQi CMS is exactly designed to solve this pain point.It allows us to define a set of common website skeletons and make local modifications on this basis, thereby achieving flexible customization of page content while ensuring that the core layout remains unchanged.This pattern not only enhances the visual consistency of the website, but also demonstrates excellent efficiency in subsequent content updates, feature expansion, and SEO optimization.
The basic structure of the Anqi CMS template mechanism
The AnQi CMS template system uses a syntax similar to the Django template engine, making it easy to learn and master. All template files are stored in the root directory./templateIn the folder, and use.htmlAs the file extension. Static resources such as styles, JavaScript scripts, and images related to the template are stored separately./public/static/Under the directory, dynamic and static separation has been implemented, which is convenient for management and performance optimization.
In the template file, we use double curly braces.{{变量}}Output variable content, while logical tags such as conditional judgment and loop control use single curly braces and percentage signs{% 标签 %}Defined, and corresponding end tags need to appear in pairs, such as{% if 条件 %}...{% endif %}This clear syntax structure allows template developers to quickly understand and build complex page logic.
AnQi CMS also supports various website modes, including adaptive, code adaptation, and PC+mobile independent site modes, which provides the possibility of consistent or customized user experience on different devices. Especially in the PC+mobile independent site mode, we can/templateCreate one under the directorymobileDirectory containing a mobile-specific template similar to the PC-side template structure, ensuring good presentation on mobile devices.
Core layout consistency is achieved through template inheritance.
The core of the inheritance of Anqi CMS templates lies in{% extends %}and{% block %}the clever combination of tags.
We will first create a basic template, usually namedbase.htmlIt defines the outermost common structure of a website, such as the header (Header), footer (Footer), sidebar (Sidebar), and container of the content area, etc. In this basic template, we will use{% block 区域名称 %}Tags to divide areas that can be overlaid or filled by child templates. For example, we can define{% block title %}Used for page titles,{% block header %}for header content,{% block content %}for the main content area, as well as{% block footer %}for footer information.{% extends %}The tag must be the first tag in the child template, it declares the parent template inherited by the current template, for example{% extends 'base.html' %}.
After the child template inheritsbase.htmlAfter that, you can optionally overwrite the definitions of the parent template.blockThe area. If the sub-template does not overwrite someblockThis area will continue to use the content defined in the parent template. This mechanism ensures that the layout is shared between different pages on the website, while allowing each page to have its unique title, content, or specific functional modules.For example, the homepage template can be rewrittencontentThe area displays the latest articles and products, while the article detail page is rewrittencontentAn area is used to display the main content of the article and related information. This hierarchical design greatly reduces code redundancy and improves the maintainability of the template.
Using common code snippets to improve reusability.
In addition to inheriting the overall layout, Anqi CMS also uses{% include %}Tags implement code snippet reuse. Like navigation menus, breadcrumbs, user login boxes, or specific ad slots, which appear repeatedly on multiple pages, can be extracted into independent HTML files and stored./template/partial/Such code snippet directory.
When we need to insert these code snippets into any template, we just need to use{% include "partial/navigation.html" %}Just do it.includeThe power of tags lies in their ability to automatically inherit all variables of the current template, which allows these reusable components to dynamically display data related to the current page context.For example, a sidebar category list snippet, when referenced on different category pages, will automatically display the corresponding category data.We can still go throughwithKeywords to pass specific variables to the imported snippets, for example{% include "partial/header.html" with title="自定义标题" %}If you worry that the template being introduced may not exist and cause an error, you can useif_existskeywords such as{% include "partial/ad_banner.html" if_exists %}which makes the template system more robust.
Macro function: to achieve logic reuse within the template
For UI components that need to be reused in templates and have specific logic, Anq CMS provides{% macro %}A tag is used to define a macro function. A macro function is similar to a function in programming languages, which can accept parameters and return a fragment of HTML.This is very useful for building configurable and reusable UI elements, such as a macro for rendering article list items, which can dynamically generate HTML structures based on the input article object.
macro functions can be defined in separate.htmlfile, then through{% import %}Label imported into other templates. This method further enhances the modularity and reusability of template code, avoiding the repetition of the same HTML structure and logic.
Template directory structure and predefined conventions
The template directory structure recommended by AnQi CMS helps to further standardize and unify the layout of the website. Usually, the following will be included under each template theme directory:
config.json: Describes the basic information of the template.bash.htmlorbase.html: As the public skeleton of the website, all pages go throughextendsinheriting from it.partial/: Store common code snippets outside of page header and footer, such as sidebars, navigation, breadcrumbs, etc.index/index.html: Website home page template.{模型table}/index.html: Model home page template, for examplearticle/index.html.{模型table}/detail.html: Model detail page template, for examplearticle/detail.html.{模型table}/list.html: Model list page template, for examplearticle/list.html.page/detail.html: Single page detail template, for example, the 'About Us' page。“search/index.htmlSearch Results Page Template.errors/404.html,errors/500.html: Error page template。“mobile/: Store mobile template, with a structure similar to PC template, to adapt to mobile devices.
In addition, Anqi CMS also supports handling independent layouts for specific pages by using custom template names. For example,page/detail-{单页ID}.htmlAllow a specific single-page to specify an exclusive template, which greatly increases the flexibility of customization while not destroying the overall inheritance structure.
Deep manifestation of operational value
By using the template inheritance mechanism of AnQi CMS, we can achieve the following important operational values:
The website consistency is guaranteed, ensuring that all pages follow the unified brand visual and interaction standards, enhancing user trust.The template inheritance simplifies website maintenance, when we want to adjust the overall structure or style of the website, we only need to modify the core parent template, and the changes will be synchronized applied to all inherited child pages, without the need to modify one by one, saving a lot of time.This structured template design is also beneficial for search engines to crawl and understand website content, as it provides a clear and consistent page structure, which helps improve SEO effectiveness.For businesses with multiple sites or sub-brands, by sharing and inheriting a set of basic templates, they can quickly build new sites while maintaining design consistency with the main brand, greatly improving the efficiency and convenience of multi-site management.
In summary, the template inheritance mechanism of Anqi CMS is a major highlight of its status as an enterprise-level content management system. It not only provides an elegant technical solution but also empowers operations, allowing website managers to focus more on content creation and user services without worrying about complex and changing page layouts.
Frequently Asked Questions (FAQ)
1. I modifiedbase.htmlthe template, why do some pages not work?
This is usually because the child template has overwrittenbase.htmlthe correspondingblockcontent. When the child template overwrites a certainblockAfter, the parent templateblockwill no longer display. Instead, the content defined in the child template will be used first. You need to check these child templates that are not yet in effect to see if they contain withbase.htmlThe modified area corresponds to{% block %}Definition. If the sub-template indeed needs to continue the modifications of the parent template, then the corresponding modifications in the sub-template should be deletedblockDefinition, or in the sub-template'sblockis used{{ super() }}to include the content of the parent template.
How to use a custom template for a specific article or category while keeping the header and footer unchanged?
AnQi CMS allows you to specify the "document template" or "category template" field in the article (document) and category editing interface. For example, you can create adownload.htmlTemplate file, then during article editing, set this field todownload.html.download.htmlinternal, you need to use{% extends 'base.html' %}tags to inherit the basic layout of the website. Then, you just need to rewrite{% block content %}The area to place the unique content and layout of the article or category, while the header and footer that have not been rewrittenblockwill be automatically inheritedbase.html.
3. How should I correctly write the path to refer to static resources in a template, such as CSS or JS files?
All static resources (CSS, JS, images, etc.) are recommended to be stored in/public/static/the directory. When referencing these resources in the template, you should use{% system with name="TemplateUrl" %}Use a tag to get the root path of the static files of the current template and then append the specific resource path to it. For example, to include a CSS file, it can be written like this:<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">This ensures that the path references to static resources are always correct across multiple sites or different deployment environments, avoiding issues caused by hard-coded paths.