How to reuse common modules like headers and footers in AnQiCMS templates to display content?

In the process of website construction, headers, footers, navigation bars, and other common modules are almost indispensable parts of each page.If you always write these codes manually, it is not only inefficient but also difficult to ensure the consistency of the overall style of the website, and the subsequent maintenance work will become extremely繁琐.AnQiCMS as an efficient content management system, its powerful template engine provides various flexible ways to reuse these common modules, thereby greatly enhancing the efficiency and maintainability of template development.

The way to reuse common modules in AnQiCMS templates

Firstly, understanding the basic structure of AnQiCMS templates is crucial. All template files are usually stored in/templatedirectory, and named with.htmlAs a file extension. Its template syntax is borrowed from the Django template engine, variables are usually enclosed in double curly braces.{{变量}}References, while conditional judgments, loop controls, and other logical tags are used.{% 标签 %}and{% end标签 %}The form of. Static resources such as styles, scripts, and images are stored in one place/public/static/In the catalog.

In AnQiCMS, there are mainly three powerful and flexible mechanisms to achieve the reuse of common modules:includetags,extendsTag (template inheritance) andmacroLabel.

1. Useincludetag embedded code snippet

includeTags are the most direct and commonly used module reuse method, allowing you to insert an independent HTML code snippet into any template file that requires it. Imagine, the page header and footer content of a website is almost the same on every page, and you can save them separately aspartial/header.htmlandpartial/footer.htmlSuch an independent file.

For example, create a folder named under your theme template directory,partialand createheader.htmlandfooter.html:

partial/header.htmlExample:

<header>
    <div class="logo">
        <a href="/">{% system with name="SiteLogo" %}<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" /></a>
    </div>
    <nav>
        <ul>
            {% navList navs %}
            {% for item in navs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
            {% endnavList %}
        </ul>
    </nav>
</header>

partial/footer.htmlExample:

<footer>
    <p>{% system with name="SiteCopyright" %}</p>
    <p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</footer>

Then in your main page template (such asindex.htmlorarchive/detail.htmlIn 【en】, just simply reference these files: 

{% include "partial/header.html" %}

<main>
    <!-- 页面主体内容 -->
</main>

{% include "partial/footer.html" %}

The advantage of this method is that when you need to modify the page header or footer, you only need to edit one file, and all pages that reference the file will be automatically updated. In addition, includethe label also supportswithPass variables through keywords, even usingonlyLimit the scope of variables with keywords, making the referenced module more flexible. For example,{% include "partial/sidebar.html" with user_name="访客" only %}You can pass specific user information to the sidebar. You can also use to enhance the robustness of the template.if_existsEnsure that the keyword does not cause an error if the referenced template file does not exist, but is elegantly ignored.

2. UtilizeextendsTag for template inheritance

extendsTags provide a more powerful reuse mechanism, allowing you to define a basic "skeleton" template (usually namedbase.htmlIt includes the basic structure shared by all pages of the website, such as the HTML document type, the head section, and the main layout container. The skeleton template goes through{% block 名称 %}and{% endblock %}Define areas that can be overwritten or filled by child templates.

base.htmlExample of a skeleton template:

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% block page_title %}<title>{% tdk with name="Title" siteName=true %}</title>{% endblock %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    {% block page_meta %}{% tdk with name="Keywords" %}{% tdk with name="Description" %}{% endblock %}
</head>
<body>
    {% include "partial/header.html" %} {# 依然可以include公共部分 #}

    <div class="container">
        {% block main_content %}
            <!-- 默认内容，子模板可重写 -->
        {% endblock %}
    </div>

    {% include "partial/footer.html" %} {# 依然可以include公共部分 #}
    <script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
    {% block page_scripts %}{% endblock %}
</body>
</html>

Next, your specific page template (such as)index.html) can inherit thisbase.html, and focus only on its unique content.

index.htmlChild template example:.

{% extends "base.html" %}

{% block page_title %}<title>首页 - {% system with name="SiteName" %}</title>{% endblock %}

{% block main_content %}
    <section class="hero-section">
        <h1>欢迎来到AnQiCMS</h1>
        <p>您的内容管理专家</p>
    </section>
    <section class="latest-articles">
        <h2>最新文章</h2>
        <ul>
            {% archiveList archives with type="list" limit="5" %}
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
            {% endarchiveList %}
        </ul>
    </section>
{% endblock %}

{% block page_scripts %}
    <script>
        console.log("这是首页特有的脚本。");
    </script>
{% endblock %}

Useextends{% extends ... %}It must be the first tag in the child template. This method ensures that all pages of the website follow the same basic layout, while the specific content of each page is in their respectiveblockDefined in, greatly enhances the consistency and development efficiency of design.

3. WithmacroDefining reusable functional components

macroTags provide a functionality similar to functions, which you can use to define a reusable code block with parameters. When you have multiple similar HTML components with different parameters,macrowill be very useful, for example, generating buttons of different colors or links, or product cards with a unified style.

You can define macro functions in a separate auxiliary file (such as)macro/components.html).

macro/components.htmlExample:

{% macro render_button(text, url, css_class="btn-primary") %}
    <a href="{{ url }}" class="btn {{ css_class }}">{{ text }}</a>
{% endmacro %}

{% macro render_product_card(product) %}
    <div class="product-card">
        <img src="{{ product.Thumb }}" alt="{{ product.Title }}">
        <h3><a href="{{ product.Link }}">{{ product.Title }}</a></h3>
        <p class="price">¥{{ product.Price }}</p>
        {{ render_button("立即购买", product.Link, "btn-success") }}
    </div>
{% endmacro %}

Then in your main template, throughimportintroduce and use these macros:

{% import "macro/components.html" as comps %}

<section class="call-to-action">
    <h2>了解更多我们的服务</h2>
    {{ comps.render_button("点击这里", "/services", "btn-info") }}
</section>

<section class="featured-products">
    <h2>热门产品</h2>
    <div class="product-grid">
        {% archiveList products with moduleId="2" limit="3" %}
        {% for product in products %}
            {{ comps.render_product_card(product) }}
        {% endfor %}
        {% endarchiveList %}
    </div>
</section>

macroThe strength lies in its ability to allow you to create highly abstract and parametric UI components, reduce code redundancy, and make templates more concise and logical.

【en】###