How to conveniently introduce common header and footer code snippets in AnQiCMS templates?

In website development and operation, headers (Header) and footers (Footer) are almost indispensable parts of each page.They carry navigation, brand identification, copyright information, contact details, and other important content.However, if each page were to write these codes independently, it would not only cause a lot of redundant work, but it would also make subsequent modifications and maintenance extremely complex.Imagine if a website has hundreds of pages, and every time you need to modify the navigation menu or the footer copyright information, you have to manually adjust each one individually, how inefficient and error-prone that would be.

Fortunately, AnQiCMS provides a powerful and flexible template mechanism that can help us solve this problem elegantly.It allows us to extract common header and footer code snippets, manage them centrally, and reuse them, thereby greatly enhancing the development efficiency and maintenance convenience of the website.

Why is it crucial to manage the header and footer modularly?

The benefits of fragmenting the header and footer code and managing them centrally are obvious:

• Improve maintenance efficiency: All header or footer modifications can be made in a single file, affecting the entire site. This greatly reduces repetitive labor and minimizes the risk of errors.
• Ensure consistency across the entire site.: Whether it is brand vision, navigation structure, or legal statement, modular management ensures that they are consistent on all pages, improving user experience and brand professionalism.
• Optimize team collaborationIn a project involving multiple developers, different members can focus on the development of their respective modules, reducing code conflicts and improving collaboration efficiency.
• Improve code readability: The page template only contains core content code, making the structure clearer, easier to read and understand.
• Beneficial for SEOAvoid excessive redundant code to allow search engine crawlers to more efficiently crawl and understand page content.

AnQiCMS uses a syntax similar to the Django template engine, which makes it very easy for content operators and developers to get started. It mainly realizes the modular management of templates through two core mechanisms: includeTags andextends.

Method one: useincludeLabel, flexible combination of code snippets

includeThe role of tags is like building blocks, pre-making commonly used small components, and then embedding them where needed. For those small pieces of code that do not constitute the overall framework of the page but appear repeatedly in multiple places, such as sidebars, breadcrumbs, independent ad blocks, and even simple headers and footers, includeIt is a very convenient choice.

Basic usage:

Suppose you have already saved the header code inpartial/header.htmlthe file, the footer code is saved inpartial/footer.htmlthe file (partialThe directory is where AnQiCMS recommends storing code snippets, and you can include them in any page template in the following way:

{# 引入公共页头 #}
{% include "partial/header.html" %}

{# 页面核心内容 #}
<main>
    <h1>这是页面的主要内容</h1>
    <p>这里是页面的详细信息...</p>
</main>

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

Pass variables:

Sometimes, the header or footer introduced may need some specific information of the current page. For example, the header may need to display the title of the current page. You can usewithkeywords to directincludePassing variables in the template:

{% include "partial/header.html" with pageTitle="当前文章详情" %}

Thenpartial/header.htmlcan be used like ordinary variables{{ pageTitle }}.

Only pass specified variables:

If you want the template you are introducing to use only the variables you explicitly pass and not inherit all the variables of the current template, you can addonlyKeyword:

{% include "partial/header.html" with pageTitle="当前文章详情" only %}

Conditional inclusion:

If a code snippet is not required on all pages or you want it to be included only when the file exists, you can useif_exists:

{# 如果 partial/sidebar.html 存在，则引入，否则忽略 #}
{% include "partial/sidebar.html" if_exists %}

includeThe tag's advantages are light and flexible, it is suitable for those relatively independent code snippets that can be freely combined on different pages or different layouts.

Method two: useextendsThe tag builds the template skeleton.

If we sayincludeIs it building a puzzle, thenextendsIt's more like designing the layout framework of a newspaper. It allows you to define a 'master' template (usually namedbase.html)，which includes the common structure of a website, such as the entire HTML file framework, header, footer, sidebar, and so on, and uses{% block %}Label the areas that can be rewritten or filled by the sub-template.

Define the master templatebase.html:

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% tdk with name="Title" siteName=true %}{% endblock %}</title>
    <meta name="keywords" content="{% tdk with name='Keywords' %}">
    <meta name="description" content="{% tdk with name='Description' %}">
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    {% block head_extra %}{% endblock %} {# 预留给子模板添加额外的head内容 #}
</head>
<body>
    <header>
        {% include "partial/top_nav.html" %} {# 顶部导航，可以是include进来的 #}
        <h1>{% block page_header %}默认页面标题{% endblock %}</h1>
    </header>

    <div class="container">
        {% block content %}
            {# 这里是页面的主要内容区域，由子模板填充 #}
            <p>欢迎来到 AnQiCMS 网站！</p>
        {% endblock %}
    </div>

    <footer>
        {% include "partial/footer.html" %} {# 页脚，也可以是include进来的 #}
        <p>&copy; {% now "2006" %} {% system with name="SiteName" %} All Rights Reserved.</p>
    </footer>

    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block body_extra %}{% endblock %} {# 预留给子模板添加额外的body底部内容 #}
</body>
</html>

Inbase.htmlIn it, we use{% block title %}/{% block head_extra %}/{% block page_header %}/{% block content %}and{% block body_extra %}Defined areas that can be replaced or expanded.

Sub-templatearticle_detail.htmlInherit and override:

{% extends 'base.html' %} {# 必须是模板文件的第一行 #}

{# 重写页面标题，显示文章标题 #}
{% block title %}{{ archive.Title }} - {% system with name="SiteName" %}{% endblock %}

{# 为当前页面添加特定的CSS或JS #}
{% block head_extra %}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/article.css">
{% endblock %}

{# 重写页面大标题 #}
{% block page_header %}
    <h1>{{ archive.Title }}</h1>
    <p>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</p>
{% endblock %}

{# 填充文章内容区域 #}
{% block content %}
    <article>
        <div>{{ archive.Content|safe }}</div>
    </article>
    <aside>
        {# 这里可以放相关文章、评论区等 #}
    </aside>
{% endblock %}

{# 为当前页面添加特定的JS脚本 #}
{% block body_extra %}
    <script src="{% system with name='TemplateUrl' %}/js/article_detail.js"></script>
{% endblock %}

ByextendsThe tag, the child template clearly inheritsbase.htmlstructure, focusing only on its unique content and style, greatly simplifying page development. Please remember, `{