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

It is crucial to maintain consistency in the display of web pages in website operation.A unified website appearance can not only enhance brand professionalism but also optimize the user experience.AnqiCMS provides a powerful and flexible template mechanism, allowing us to efficiently manage common website elements such as headers and footers, thus avoiding redundant code writing and ensuring the consistency of the entire site style.

The AnqiCMS template system borrows the syntax of the 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 building with LEGO bricks, 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. Template inheritance is like the overall architectural blueprint of this building.All floors (specific pages) will follow this basic blueprint structure, 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 namedbase.htmlThe file with a similar name serves as the overall layout file for the website. This file includes the common structure of the website, such as the HTML document type declaration,headThe area (including CSS imports, metadata, etc.), header, footer, and a reserved area for the main content.

in thisbase.htmlWe use in the file,{% block 块名 %}{% endblock %}This tag defines an area that can be filled 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 named{% 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 page-specific content, greatly improving the maintainability of the template.

Flexible reference of code snippets (Include)

If template inheritance is the "skeleton" of a website, thenincludeThe tag is the "lego bricks" that make up the skeleton or the "muscles" on the skeleton.It is used to insert smaller, reusable code snippets (such as navigation menus, sidebars, copyright information blocks) into the specified location of any template file.

These small code snippets are usually stored in the template directory.partial/In the subdirectory, it is convenient to manage. For example, you can createpartial/header.htmlStore the header content,partial/footer.htmlStore the footer content.

Inbase.htmlOr any other template, the way to refer 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:

  • Passing variablesYou can usewithkeywords to pass additional variables to the included fragments. For example, if your page header needs to display some specific information about the current page:
    
{% include 'partial/header.html' with current_page='index' user_name='游客' %}
    Thenpartial/header.htmlYou can use it in{{ current_page }}and{{ user_name }}.
  • Conditional inclusionIf you are not sure if 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 included, and if it does not exist, it will be ignored.

Application in practice: Page header, footer, and navigation

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

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

The page header usually includes the website logo, main navigation, search box, etc. Through the system tags provided by AnqiCMS, we can easily obtain these dynamic data.

`