As an experienced CMS website operation person, I know the importance of a high-efficient and unified template system for website operation.The Anqi CMS provides powerful tools with its high-performance architecture based on the Go language and flexible template system, ensuring consistency in content display and brand image uniformity, and greatly enhancing the efficiency of content management and publication.
The importance of unifying the layout and structure of the website
It is crucial to maintain consistency in the overall layout and structure of the website during website operations to attract and retain users.An interface that is chaotic and not unified will not only damage the brand's professionalism, but will also make users feel confused when 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 universal website skeletons and make local modifications on this basis, thus 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 shows excellent efficiency in subsequent content updates, feature expansion, and SEO optimization.
The basic structure of the AnQi CMS template mechanism
The template system of AnQi CMS adopts a syntax similar to Django template engine, which is easy to learn and master. All template files are stored in the root directory under./templateIn the folder, and use.htmlAs the file extension. Styles, JavaScript scripts, and images related to the template and other static resources are stored independently in/public/static/The directory has implemented static and dynamic separation, which is convenient for management and performance optimization.
We use double curly braces in template files.{{变量}}Output the variable content, and logical tags such as condition judgment and loop control use single curly braces and percent signs{% 标签 %}Defined, and the corresponding end tags should appear in pairs, for example{% if 条件 %}...{% endif %}This clear syntax structure allows template developers to quickly understand and build complex page logic.
The CMS supports various website modes, including responsive, code adaptation, and PC + mobile independent site mode, which provides the possibility of consistent or customized user experience on different devices. Especially in the PC + mobile independent site mode, we can/templatecreate a directory undermobileThe catalog, which includes dedicated mobile templates similar to the PC-side template structure, ensuring good presentation on mobile devices.
Core layout unification is achieved through template inheritance.
The core of the security CMS template inheritance lies in{% extends %}and{% block %}the clever combination of tags.
We will first create a basic template, usually namedbase.htmlIt defines the common structure of the outermost layer of the website, such as the header (Header), footer (Footer), sidebar (Sidebar), and containers for the content area, etc. In this basic template, we will use{% block 区域名称 %}Label 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 %}Used for header content,{% block content %}Used for the main content area, as well as{% block footer %}Used for footer information.{% extends %}The label must be the first label in the child template, which declares the parent template inherited by the current template, for example{% extends 'base.html' %}.
After the child template inheritsbase.htmlYou can optionally overwrite the definitions in the parent template.blockArea. If the child template does not rewriteblockThen, the area will continue to use the content defined in the parent template.This mechanism ensures that most of the layout is shared between different pages on the website, while allowing each page to have its unique title, content, or specific feature modules.contentAreas to display the latest articles and products, while the article detail page is rewrittencontentArea to display the article content and related information. This hierarchical design greatly reduces code redundancy and improves the maintainability of the template.
Enhance reusability by using common code snippets.
In addition to the inheritance of the overall layout, Anqi CMS also{% include %}The label has implemented code snippet reuse. Small modules that repeat in multiple pages, such as navigation menus, breadcrumbs, user login boxes, or specific ad spaces, can be extracted into independent HTML files and stored in/template/partial/This code snippet directory.
When we need to insert these code snippets into any template, just use{% include "partial/navigation.html" %}.includeThe power of the label lies in its ability to automatically inherit all variables from 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 will automatically display the corresponding category data when referenced on different category pages.withkeywords to pass specific variables to the imported snippets, for example{% include "partial/header.html" with title="自定义标题" %}。If you worry that the template referenced may not exist and cause an error, you can useif_existsparameter, for example{% include "partial/ad_banner.html" if_exists %}, which makes the template system more robust.
Macro function: Implement logic reuse inside the template
For UI components that need to be reused with specific logic in the template, Anqi CMS provides{% macro %}Define macro functions using tags.Macros functions are similar to functions in programming languages, which can accept parameters and return a HTML snippet.This is very useful for building configurable and reusable UI elements, such as a macro for rendering list items of articles, which can dynamically generate HTML structures based on the input article object.
macro functions can be defined in independent.htmlfile, then through{% import %}Tag import to other templates for use. This method further enhances the modularity and reusability of template code, avoiding the need to rewrite the same HTML structure and logic.
Template directory structure and predefined conventions
The template directory structure suggested by AnQi CMS helps to further standardize and unify the layout of the website. Under each template theme directory, it usually includes:
config.json: Description template basic information.bash.htmlorbase.html: Serves as the public skeleton of the website, all pages go through.extendsIt inherits from it.partial/: English for storing public code snippets outside of headers and footers, such as sidebars, navigation, breadcrumbs, etc.index/index.html: Website homepage template.{模型table}/index.html: English for model home page template, for examplearticle/index.html.{模型table}/detail.html: English for model detail page template, for examplearticle/detail.html.{模型table}/list.html: English model list page template, for examplearticle/list.html.page/detail.html: Single page detail template, for example the "About Us" page.search/index.html: Search results page template.errors/404.html,errors/500.html: Error page template.mobile/: Store mobile template, its internal structure is similar to PC template, to adapt to mobile devices.
Additionally, the Anqi CMS supports handling specific page layouts independently by customizing template names. For example,page/detail-{单页ID}.htmlAllow specific single-page to specify exclusive templates, greatly enhancing the flexibility of customization while not disrupting the overall inheritance structure.
Deep manifestation of operation value
Through the template inheritance mechanism of AnQi CMS, we can achieve the following important operational values:
The consistency of the website is guaranteed, ensuring that all pages follow unified brand visual and interaction standards, enhancing user trust.Template inheritance simplifies the maintenance of websites. 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 each one individually, saving a lot of time.This structured template design is also beneficial for search engines to crawl and understand the website content, as it provides a clear and consistent page structure, which helps to enhance SEO effects.For enterprises with multiple sites or sub-brands, sharing and inheriting a set of basic templates can quickly set up 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 one of its major highlights as an enterprise-level content management system. It not only provides a technically elegant solution, but also empowers operations, allowing website managers to focus more on content creation and user service without having to worry about complex and variable page layouts.
Common Questions and Answers (FAQ)
1. I am modifying itbase.htmlAfter the template is modified, why do some pages not take effect?
This is usually because the child template has overwrittenbase.htmlthe correspondingblockcontent. When the child template overwrites a certainblockafter, the content in the parent template that corresponds to this will not be displayed, instead, the content defined in the child template will be used first. You need to check these child templates that have not taken effect to see if they contain any that correspond toblock的内容将不再显示，而是优先使用子模板中定义的内容。你需要检查这些未生效的子模板，看它们是否含有与base.htmlModify the corresponding area.{% block %}Define. If the child template indeed needs to continue the modifications from the parent template, then the corresponding definitions in the child template should be deleted.blockDefine, or in the child template'sblockin{{ super() }}to include the content from the parent template.
2. How to use custom templates for specific articles or categories while keeping the header and footer unchanged?
The AnQi CMS allows you to specify the 'Document Template' or 'Category Template' field in the editing interface for articles (documents) and categories. For example, you can create adownload.htmlTemplate file, then set this field to English during article editingdownload.html.download.htmlinternally, you need to use{% extends 'base.html' %}tags to inherit the basic layout of the website. Then, you just need to overwrite{% block content %}Place content and layout specific to the article or category here, while headers and footers that have not been overwritten.blockwill be automatically沿用base.htmlsettings.
3. How should I correctly write the path to static resources, such as CSS or JS files, in the template?
All static resources (CSS, JS, images, etc.) are recommended to be stored in/public/static/Under the directory. When referencing these resources in the template, you should use{% system with name="TemplateUrl" %}Translate the label 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.