如何在AnQiCMS模板中复用页头、页脚等公共显示元素？

在网站运营中，效率和一致性是成功的关键。当您管理一个网站时，会发现很多元素在不同页面上反复出现，比如页头、页脚、导航栏、侧边栏等。如果每次都手动复制粘贴这些代码，不仅效率低下，还容易出错，更别提后续修改时需要逐一调整的繁琐。

好在 AnQiCMS 的模板系统设计得非常灵活，它提供了强大的机制来帮助我们高效地复用这些公共显示元素，确保网站风格统一，维护起来也更加轻松。AnQiCMS 采用类似 Django 模板引擎的语法，即使您不是专业的开发人员，也能很快上手。下面，我们就来详细了解如何在 AnQiCMS 模板中有效地复用这些元素。

方法一：利用 extends 标签构建模板骨架

想象一下，您的网站有一个统一的“骨架”或“母版”：头部区域、底部区域、内容区域，以及一些固定的 CSS 和 JavaScript 文件引用。extends 标签就是用来定义这个“母架”的。

通常，我们会创建一个名为 base.html 的文件，作为所有页面的基础布局。在这个文件中，您可以把所有公共的 HTML 结构、CSS 和 JS 引用都放进去。对于那些会在不同页面中变化的部分，比如页面的标题、主要内容区、侧边栏等，我们使用 {% block 块名称 %}{% endblock %} 这样的标签将其定义为可替换的“内容块”。

例如，一个 base.html 可能会是这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    <!-- 其他公共CSS和JS引用 -->
</head>
<body>
    <header>
        <!-- 这里是公共的网站头部，例如Logo、主导航等 -->
        {% include "partial/header.html" %}
    </header>

    <nav>
        <!-- 公共导航栏 -->
        {% include "partial/nav.html" %}
    </nav>

    <main>
        <div class="container">
            {% block content %}
                <!-- 这里是主要内容区，每个页面都会替换掉这里的内容 -->
                <p>默认内容...</p>
            {% endblock %}
        </div>
    </main>

    <footer>
        <!-- 这里是公共的网站底部，例如版权信息、友情链接等 -->
        {% include "partial/footer.html" %}
    </footer>

    <!-- 底部公共JS -->
    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
</body>
</html>

当您需要创建一个新页面（比如 index.html 或 article_detail.html）时，只需要在该文件的最顶部使用 {% extends 'base.html' %} 来继承这个骨架。然后，您就可以在对应的 block 标签中填充或替换内容了。

{% extends 'base.html' %}

{% block title %}<title>AnQiCMS - 首页</title>{% endblock %}

{% block content %}
    <div class="index-banner">
        <!-- 首页独有的轮播图或其他元素 -->
    </div>
    <section class="latest-articles">
        <h2>最新文章</h2>
        <!-- 调用文章列表标签 -->
        {% archiveList archives with type="list" limit="5" %}
        <ul>
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
        {% endarchiveList %}
    </section>
{% endblock %}

这样，index.html 就只关注自身内容的呈现，而无需重复编写页头页脚等公共代码。

方法二：使用 include 标签插入代码片段

extends 标签用于定义页面的整体结构，而 include 标签则像是“即插即用”的小零件，适用于那些在页面局部重复出现，或者需要在不同 block 之间共享的代码片段。例如，网站的 Logo 部分、面包屑导航、某个分类下的推荐文章列表等。

为了更好地管理这些代码片段，AnQiCMS 推荐在模板目录下创建一个 partial/ 文件夹来存放它们。

比如，您可以在 partial/header.html 中放置网站头部 Logo 和主导航：

<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><a href="{{ inner.Link }}">{{ inner.Title }}</a></dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    {% endnavList %}
</nav>

然后在 base.html 或任何需要的地方，通过 {% include "partial/header.html" %} 简单地引入。

include 标签还可以传递变量。如果您希望某个引入的片段根据不同页面的上下文显示不同的内容，可以通过 with 参数实现：

{% include "partial/sidebar.html" with currentCategory="新闻中心" %}

在 partial/sidebar.html 中，您就可以使用 {{ currentCategory }} 这个变量了。

此外，为了增加模板的健壮性，您可以使用 if_exists 参数，这样即使引入的文件不存在，也不会导致页面报错：

{% include "partial/custom_feature.html" if_exists %}

方法三：借助 macro 标签定义可复用函数

macro 标签是 AnQiCMS 模板系统中的一个高级功能，它允许您定义可重复使用的“函数”。当您发现某个 HTML 结构需要根据不同的数据多次渲染时，macro 就显得非常有用。

例如，您可能在网站的不同位置需要以相同样式展示文章的“卡片”信息（标题、缩略图、简介）。您可以定义一个宏来处理这个结构：

在 macro_helpers.html 文件中定义宏：

{% macro article_card(article) %}
    <div class="article-card">
        <a href="{{ article.Link }}">
            {% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}"/>{% endif %}
            <h3>{{ article.Title }}</h3>
            <p>{{ article.Description|truncatechars:100 }}</p>
            <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </a>
    </div>
{% endmacro %}

然后，在您的页面模板中，通过 import 标签引入这个宏，并在循环中调用它：

{% import "macro_helpers.html" article_card %}

<section class="featured-articles">
    <h2>精选文章</h2>
    <div class="article-grid">
        {% archiveList featuredArchives with flag="c" limit="4" %}
            {% for item in featuredArchives %}
                {{ article_card(item) }} {# 调用宏，传入文章数据 #}
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

这样，无论您需要在哪里展示文章卡片，只需调用 article_card 宏，传入相应的文章数据即可，极大地减少了代码重复。

模板文件组织：让管理更轻松

合理组织模板文件能够让您的网站结构清晰、易于维护。AnQiCMS 模板的根目录是 /template。每个模板包都应该在 /template 下有自己的目录，并包含一个 config.json 文件来描述模板信息。

在模板目录内部，您可以按照以下约定来组织文件：

  • base.html: 作为整个网站的母版布局。
  • index.html: 网站首页模板。
  • {模型table}/: 存放不同内容模型（如 article/、product/）的列表页 (list.html) 和详情页 (detail.html) 模板。
  • page/: 存放单页面 (detail.html) 模板。
  • **`