How to reference the common header and footer files in AnQiCMS templates?

As an experienced website operations expert, I fully understand how important it is to maintain consistency in website structure and development efficiency in a content management system.Especially when using a high-efficiency and flexible system like AnQiCMS, it is reasonable to refer to common header and footer files, which can not only greatly improve the maintenance efficiency of templates, but also ensure the consistency of the overall style.Today, let's delve into how to achieve this goal in AnQiCMS templates.

AnQiCMS provides great convenience for developers and operators with its high-performance architecture based on the Go language and Django-style template syntax.It supports us in managing content in a modular way, and the common parts in the template, such as the website's navigation bar, footer information, CSS, and JavaScript references, are excellent practice points for modular design.By cleverly using the template tags provided by AnQiCMS, we can easily achieve the reference of public files.

applyincludeTags: Implementing flexible reuse of local code

In the AnQiCMS template system,includeTags are the most direct and commonly used way to refer to public code snippets.It allows us to insert small, independent template files into any main template that needs them.Imagine, the header of your website includes Logo, main navigation, search box and other elements, which almost appear on every page.If each page repeats the writing of this code, then once it needs to be modified, the workload will be huge.includeLabels are the tools to solve this problem.

Usually, we would place these reusable code snippets in the template directory.partial/In the subfolder. For example, you can create it in the directory of the current template you are usingpartial/header.htmlandpartial/footer.html.

Let's take a look at what these files might contain:

template/你的模板目录/partial/header.html

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    {%- tdk canonical with name="CanonicalUrl" %}
    {%- if canonical %}
    <link rel="canonical" href="{{canonical}}" />
    {%- endif %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
    <!-- 引入其他公共CSS或JS文件 -->
</head>
<body>
    <header class="main-header">
        <div class="logo">
            <a href="{% system with name="BaseUrl" %}">
                <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
            </a>
        </div>
        <nav class="main-nav">
            {% navList navs %}
            <ul>
                {%- for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{item.Title}}</a>
                    {%- if item.NavList %}
                    <dl>
                        {%- for inner in item.NavList %}
                            <dd class="{% if inner.IsCurrent %}active{% endif %}">
                                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                            </dd>
                        {% endfor %}
                    </dl>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endnavList %}
        </nav>
    </header>
    <main>

template/你的模板目录/partial/footer.html

    </main>
    <footer class="main-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>
        <!-- 引入其他公共JS文件，如统计代码等 -->
        {{- pluginJsCode|safe }}
    </footer>
</body>
</html>

Next, in the main page template file, for exampleindex.html/article/detail.htmlIn wait, simply useincludeTags to introduce them:

template/你的模板目录/index.html

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

    <section class="hero-section">
        <h1>欢迎来到 {% system with name="SiteName" %}</h1>
        <p>{% tdk with name="Description" %}</p>
    </section>

    <!-- 首页的其他内容 -->

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

Thus,header.htmlandfooter.htmlThe content will be rendered toindex.htmlIf one day you need to modify the website logo or navigation structure, you just need to modifyheader.htmlA file, all pages that reference it will be updated accordingly, greatly enhancing maintenance efficiency.

Furthermore,includeTags also support some advanced usage:

  • if_existsIf you are not sure whether a file included exists, you can use{% include "partial/sidebar.html" if_exists %}, even if the file does not exist, it will not cause the page to report an error.
  • withYou can pass additional variables to the included template. For example,{% include "partial/ad.html" with ad_type="banner" ad_id="123" %}, inad.htmlYou can use it in{{ ad_type }}and{{ ad_id }}.

applyextendsTag: Build the global template skeleton

When you need to define a unified overall layout for a website, such as all pages sharing the same basic HTML structure, CSS and JS file references, while only the content of specific areas changes,extendsThe label is very powerful. It implements the concept of template inheritance, like the master page in Office software, where you define a "skeleton" template, and other sub-templates fill in and modify it on this basis.

We usually create a file namedbase.htmlas the basic framework of a website. In this file, we define the common structure of the page and throughblockLabels delineate areas where child templates are allowed to override or extend.

template/你的模板目录/base.html

`html &lt;!DOCTYPE html&gt;

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head_meta %}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
{% endblock head_meta %}

{% block head_css %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<!-- 全局CSS引用 -->
{% endblock head_css %}

{% block head_js %}
<!-- 全局JS引用 -->
{% endblock head_js %}


{% block header %}
<header class="main-header">
    <div class="logo">
        <a href="{% system with name="BaseUrl" %}">
            <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
        </a>
    </div>
    <nav class="main-nav">
        {% navList navs %}
        <ul>
            {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{item.Title}}</a>
                {%- if item.NavList %}
                <dl>
                    {%- for inner in item.NavList %}
                        <dd class="{% if inner.IsCurrent %}active{% endif %}">
                            <a href="{{ inner.Link }}">{{inner.Title}}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endnavList %}
    </nav>
</header>
{% endblock header %}

<main>
    {% block content %}
    <!-- 子模板将在这里填充具体内容 -->
    {% endblock content %}
</main>

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