In website operation, maintaining the consistency and efficient management of the website pages is the key to improving user experience and operational efficiency.For AnQiCMS users, modularizing common parts such as headers, footers, and navigation bars not only ensures consistency in the visual style of the entire site but also greatly simplifies the maintenance and update work in the future.The AutoCMS provides a powerful and flexible template system, allowing you to easily achieve this goal.

Understanding AnQiCMS's template architecture

AnQiCMS's template files are usually stored in/templatedirectory, and named with.htmlEnglish suffix.The system design emphasizes modularity and encourages developers and content operators to extract repeated code snippets and form independent modules.extends）and “template reference”include).

Imagine building a house,extendsIt is like defining the basic structure diagram of a house (such as how many floors there are, where the living room and bedrooms are located), andincludeThis is used to fill in the details of the structure diagram (such as the sofa and television ornaments in the living room). By reasonably utilizing them, we can build a website that is both unified and easy to maintain.

Core modular tool:extendsWithinclude

  1. extendsThe 'skeleton' of building a website: extendsLabels are used to specify a base template so that the current template inherits its content. This is very suitable for defining the overall layout of a website, for example<head>areas, the maindivStructure, as well as the reference locations of the common header and footer. Typically, we would create a file namedbase.html(or as recommended in the AnQiCMS documentation)bash.htmlThe file enclosed as the website's skeleton template. This file contains the common HTML structure and placeholders (through the tag definition), for example:blocktag definition), for example:

    • <html>and<head>Label, including character set, viewport settings, website title (TDK), global stylesheet, and JavaScript file references.
    • Page content<body>The approximate structure, such as the top navigation area, content main area, sidebar area, and bottom footer area.
    • blockTags areextendsThe core mechanism, which defines the areas that child templates can override or extend.

  2. includeEnglish translation: Fill in the reusable 'component' includeTags allow you to insert the content of one template file directly into another template file. This is very suitable for components that are repeated on multiple pages and are relatively independent, such as:

    • Header (Header) of the website: Usually includes Logo, main navigation, search box, etc.
    • Website Footer (Footer)：usually contains copyright information, filing number, contact information, friendship links, etc.
    • Sidebar (Sidebar)：may contain hot articles, ad spaces, category lists, etc.
    • Crumbs navigation: Displays the current page's position in the website structure. These reusable code snippets are usually stored in onepartial/Under the directory, convenient for management and search.

Practice: Modularize your header, footer, and navigation

Below, we demonstrate how to use AnQiCMS template tags and structure to modularize the common parts of a website through specific code examples.

第一步：Create basic layout filebase.html

In your template folder (for example/template/default/), create a file namedbase.html. This file will be the basis for all pages.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# 通过 tdk 标签获取页面的标题、关键词和描述。siteName=true 会自动在标题后附加网站名称 #}
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    
    {# 引入全局 CSS 文件，TemplateUrl 标签获取模板静态文件地址 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    
    {# 预留一个区域供子页面添加特定的 head 内容，例如页面独有的 CSS 或 JS #}
    {% block head_extra %}{% endblock %}
</head>
<body>
    {# 引入公共的页头部分 #}
    {% include "partial/header.html" %}

    <main class="main-content">
        {# 这是主体内容区域，每个子页面将在此填充自己的独特内容 #}
        {% block content %}{% endblock %}
    </main>

    {# 引入公共的页脚部分 #}
    {% include "partial/footer.html" %}

    {# 预留一个区域供子页面添加页面底部的 JS 脚本 #}
    {% block body_extra %}{% endblock %}
</body>
</html>

第二步：Create Public Component File

In your template directory, create apartialfolder (for example `/template/