In website development and operation, the header (Header) and footer (Footer) are almost indispensable parts of every page.They carry important content such as navigation, brand identification, copyright information, and contact details.However, if each page is written with these codes independently, it not only causes a lot of redundant work, but also makes subsequent modifications and maintenance extremely complex.Imagine if a website has hundreds of pages, and each time you need to modify the navigation menu or footer copyright information, you have to manually adjust them one by one. It would be incredibly inefficient and prone to errors.

Why is it crucial to manage page headers and footers in a modular way?

The benefits of fragmenting and centrally managing page header and footer code are evident:

  • Enhance maintenance efficiencyThis modification of all headers or footers in the site can be done in a single file, affecting the entire site. This greatly reduces redundant work and minimizes the risk of errors.
  • Ensure consistency across the entire site[en] Whether it is brand visual, navigation structure, or legal statements, modular management can ensure consistency across all pages, enhancing user experience and brand professionalism.
  • [en] 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 readabilityThe page template only contains core content code, with a clearer structure, easier to read and understand.
  • Beneficial for SEOAvoid large amounts of redundant code to allow search engine crawlers to more efficiently crawl and understand page content.

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

Method one: useincludeTags, flexible combination of code snippets

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

Basic usage:

Assuming you have saved the header code inpartial/header.htmlthe file, and the footer code is saved inpartial/footer.htmlthe file (partialThe catalog is the place recommended by AnQiCMS to store code snippets, so you can introduce them in any page template by the following method:

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

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

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

Pass the variable:

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 toincludePass variables to the template:

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

Then inpartial/header.html, you can use it like a normal variable:{{ pageTitle }}.

Pass only the specified variables:

If you want the template to use only the variables you explicitly pass and not inherit all variables from 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 advantage of the tag is its lightness and flexibility, making it suitable for code snippets that are relatively independent and can be freely combined across different pages or layouts.

Method two: useextendsTag builds the template skeleton

If we sayincludeIs building blocks, thenextendsIt's more like designing the framework of a newspaper layout. It allows you to define a "master" template (usually namedbase.htmlAmong them are the common structures of a website, such as the framework of the entire HTML file, header, footer, sidebar, and so on, and using{% block %}Label areas that can be rewritten or filled by child templates.

Define a master template.base.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, we use{% block title %}/{% block head_extra %}/{% block page_header %}/{% block content %}and{% block body_extra %}Defined areas that can be replaced or extended.

Child 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 %}

PassextendsTags, child templates inherit clearly:base.htmlstructure, focusing only on its unique content and style, greatly simplifying page development. Please remember, `{