How to reference common code snippets (such as headers and footers) in an Anqi CMS template to unify page display?

In website operation, maintaining consistency of page display is crucial.An unified website appearance can enhance brand professionalism and optimize user experience.AnqiCMS provides a powerful and flexible template mechanism, allowing us to efficiently manage common elements of the website, such as headers and footers, thus avoiding the repetition of code writing and ensuring the unity of the entire site style.

The template system of AnqiCMS has borrowed the syntax of Django template engine, the core idea of which is to allow developers to define reusable code snippets and page skeletons.This allows us to build websites like a Lego set, maintaining the overall structure stable while being able to flexibly replace and combine local modules.

Core Concept: Template Inheritance (Extends)

Imagine, you are designing a building.The template inheritance is just like the overall architectural blueprint of this building.All floors (specific pages) will follow the basic structure of this blueprint, for example, the location of load-bearing walls and elevator shafts are fixed, but the interior decoration (page content) of each room can be customized as needed.

In AnqiCMS, we usually create a file namedbase.htmlThe file named (or similar name) serves as the overall layout file for the website. This file includes the general structure of the website, such as the HTML document type declaration,headArea (including CSS imports, metadata, etc.), header, footer, and a reserved area for the main content.

in thisbase.htmlWe use in the file,{% block 块名 %}{% endblock %}Such tags define areas of content that can be filled in or overridden by child templates. For example:

<!-- template/你的模板目录/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <!-- 引入公共 CSS/JS 等 -->
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
    {# 这里可以放置网站图标、SEO关键词描述等通用头部信息 #}
</head>
<body>
    <header>
        {# 这里我们将引入页头公共代码片段 #}
    </header>

    <main>
        {% block content %}
            {# 这是主要内容区域，每个具体页面将在这里填充其独特内容 #}
        {% endblock %}
    </main>

    <footer>
        {# 这里我们将引入页脚公共代码片段 #}
    </footer>

    <script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
    {# 这里可以放置其他全局性的 JS 脚本 #}
</body>
</html>

When we need to create a specific page (such as the homepage, article detail page) we just need to declare it inherits from the template file of that page in the first linebase.htmland then through the same name{% block %}Label to fill or override the corresponding content area in the parent template:

<!-- template/你的模板目录/index.html (首页示例) -->
{% extends 'base.html' %} {# 声明此模板继承自 base.html #}

{% block content %}
    <section class="banner">
        {# 这里是首页独有的轮播图内容 #}
        {% bannerList banners %}{% for item in banners %}<img src="{{item.Logo}}" alt="{{item.Alt}}">{% endfor %}{% endbannerList %}
    </section>

    <section class="latest-articles">
        <h2>最新文章</h2>
        <ul>
            {% archiveList archives with type="list" moduleId="1" limit="5" %}
                {% for item in archives %}
                    <li><a href="{{item.Link}}">{{item.Title}}</a></li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </section>
    {# 首页的其他特定内容 #}
{% endblock %}

By using template inheritance, we successfully separated the common layout of the website from the unique content of the page, greatly enhancing the maintainability of the template.

Flexible references (Include) for code snippets

If template inheritance is the "skeleton" of a website, thenincludeThe label is like the 'Legos' that make up this frame or 'muscles' on the frame.It is used to insert smaller, reusable code snippets (such as navigation menus, sidebars, copyright information blocks) into specified positions of any template file.

These small code snippets are usually stored in the template directory.partial/In a subdirectory, for easy management. For example, you can createpartial/header.htmlto store header content,partial/footer.htmlto store footer content.

Inbase.htmlor any other template, referring to these fragments is very simple:

<!-- 在 base.html 中引用页头片段 -->
<header>
    {% include 'partial/header.html' %} {# 引入专门的页头文件 #}
</header>

<!-- 在 base.html 中引用页脚片段 -->
<footer>
    {% include 'partial/footer.html' %} {# 引入专门的页脚文件 #}
</footer>

includeTags also support some advanced usage:

  • Pass variablesYou can usewithkeywords to pass additional variables to the imported segments. For example, if your header needs to display some specific information of the current page:
    
{% include 'partial/header.html' with current_page='index' user_name='游客' %}
    Then inpartial/header.htmlcan be used after that{{ current_page }}and{{ user_name }}.
  • Conditional inclusion：If you are unsure whether a segment exists, you can useif_existsto avoid errors:
    
{% include 'partial/custom_sidebar.html' if_exists %}
    In this way, if the file exists, it will be imported; if it does not exist, it will be ignored.

Application in Practice: Header, Footer and Navigation

Now, let's combine the tag feature built into AnqiCMS and see how to reference dynamic data in these common code snippets to achieve unified display of website content.

1. A unified header (partial/header.html)

The page header usually contains the website logo, main navigation, search box, and so on. We can easily obtain these dynamic data through the system tags provided by AnqiCMS.

`