如何在AnQiCMS模板中引用公共的头部和尾部文件？

作为一位资深的网站运营专家，我非常理解在内容管理系统中，保持网站结构的一致性和开发效率是多么重要。特别是在使用像安企CMS（AnQiCMS）这样高效且灵活的系统时，合理地引用公共的头部和尾部文件，不仅能大幅提升模板的维护效率，还能确保全站风格的统一。今天，我们就来深入探讨如何在AnQiCMS模板中实现这一目标。

AnQiCMS以其基于Go语言的高性能架构和Django风格的模板语法，为开发者和运营者提供了极大的便利。它支持我们以模块化的方式管理内容，而模板中的公共部分，例如网站的导航栏、页脚信息、CSS及JavaScript引用等，正是模块化设计的绝佳实践点。通过巧妙地运用AnQiCMS提供的模板标签，我们可以轻松实现公共文件的引用。

运用include标签：实现局部代码的灵活复用

在AnQiCMS的模板系统中，include标签是引用公共代码片段最直接、最常用的方式。它允许我们将小的、独立的模板文件插入到任何需要它们的主模板中。想象一下，您的网站头部包含Logo、主导航、搜索框等元素，这些几乎每个页面都会出现。如果每个页面都重复编写这些代码，那么一旦需要修改，工作量将是巨大的。而include标签就是解决这个问题的利器。

通常，我们会将这些可复用的代码片段存放在模板目录下的partial/子文件夹中。例如，您可以在当前使用的模板目录下创建partial/header.html和partial/footer.html。

让我们来看看这些文件可能包含什么：

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>

接下来，在您的主页面模板文件，比如index.html、article/detail.html等中，只需简单地使用include标签将它们引入：

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

这样，header.html和footer.html的内容就会被渲染到index.html中。如果有一天需要修改网站Logo或导航结构，您只需修改header.html一个文件，所有引用了它的页面都会随之更新，极大地提升了维护效率。

此外，include标签还支持一些高级用法：

  • if_exists：如果您不确定某个被包含的文件是否存在，可以使用{% include "partial/sidebar.html" if_exists %}，这样即使文件不存在，也不会导致页面报错。
  • with：您可以向被包含的模板传递额外的变量。例如，{% include "partial/ad.html" with ad_type="banner" ad_id="123" %}，在ad.html中就可以使用{{ ad_type }}和{{ ad_id }}。

运用extends标签：构建全局模板骨架

当您需要为网站定义一个统一的整体布局，例如所有页面都共享相同的基本HTML结构、CSS和JS文件引用，而只有特定区域的内容会变化时，extends标签就显得非常强大。它实现了模板继承的概念，就像Office软件中的母版页一样，您定义一个“骨架”模板，然后其他子模板在此基础上进行填充和修改。

我们通常会创建一个名为base.html的文件作为网站的基础骨架。在这个文件中，我们会定义好页面的通用结构，并通过block标签圈定那些允许子模板覆盖或扩展的区域。

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

”`html <!DOCTYPE html> 

<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>