如何通过AnqiCMS模板的extends标签实现模板继承，统一网站的视觉风格？

在网站运营中，保持一致的视觉风格是品牌形象和用户体验的关键。设想一下，如果您的网站每个页面布局都不一样，导航位置变来变去，用户会感到困惑，甚至流失。幸运的是，AnqiCMS 提供了一种强大而优雅的方式来解决这个问题——那就是通过模板继承机制中的 extends 标签。

AnqiCMS 采用了类似 Django 的模板引擎语法，这使得模板开发变得直观且高效。extends 标签正是这一机制的核心，它能帮助您轻松实现网站风格的统一，同时又不失灵活性。

理解模板继承的核心价值

为什么模板继承如此重要呢？我们可以从以下几个方面来体会它的优势：

  1. 统一的视觉风格：您的网站可能有成百上千个页面，每个页面都包含页眉、页脚、导航栏等公共区域。如果这些公共区域的代码散落在每个模板文件中，一旦需要修改（比如更换 Logo、调整导航菜单），您就不得不逐一修改所有文件，这无疑是巨大的工作量。通过模板继承，您可以将这些公共元素定义在一个“基础模板”中，所有页面都继承它，从而确保全站风格的统一。
  2. 提升开发效率：无需重复编写相同的代码，只需定义一次，即可在所有相关页面复用。这大幅减少了开发时间，让您能更专注于页面内容的定制化。
  3. 降低维护成本：当网站设计需要更新，或者出现 Bug 时，您只需修改基础模板中的一处代码，所有继承它的页面都会自动同步更新，大大简化了维护工作。这符合 AnqiCMS “高效、可定制、易扩展”的设计理念。
  4. 增强内容灵活性：虽然保持统一风格很重要，但有些特殊页面（如活动专题页、联系我们页）可能需要独特的布局或功能。模板继承允许子模板在不影响整体结构的前提下，局部覆盖或扩展父模板的内容，实现灵活的页面定制。

extends 标签如何让魔法发生？

AnqiCMS 的模板继承机制，围绕着“基础模板”和“子模板”展开。

1. 基础模板：网站的骨架

首先，您需要创建一个基础模板文件，通常我们将其命名为 base.html，放在您的模板根目录（例如 /template/default/）下。这个文件就像您网站的骨架，包含了所有页面都应该有的共同结构和元素，比如 HTML 的头部信息、页眉、主导航、页脚等。

在基础模板中，您需要使用 block 标签来定义那些可被子模板填充或覆盖的区域。这些 block 标签会有一个唯一的名称。

base.html 示例：

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    {# 定义一个可被子模板覆盖的标题区域 #}
    {% block title %}
        <title>{% tdk with name="Title" siteName=true %}</title>
    {% endblock %}
    <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">
    {# 其他公共样式或脚本 #}
</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>
                            {# 如果有二级导航，这里可以继续嵌套 #}
                        </li>
                    {% endfor %}
                </ul>
            {% endnavList %}
        </nav>
    </header>

    <div class="container">
        {# 定义一个主内容区域，子模板将在这里填充各自的独特内容 #}
        {% block content %}
            <p>这是默认内容，如果子模板不定义，就会显示这里。</p>
        {% endblock %}
    </div>

    <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>
    </footer>
    <script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
    {# 其他公共脚本 #}
</body>
</html>

2. 子模板：填充与定制

接下来，您可以创建实际的页面模板，比如 index.html（网站首页）、article/detail.html（文章详情页）或 page/about.html（关于我们单页），并让它们继承 base.html。

要实现继承，您需要在子模板的第一行使用 {% extends 'path/to/base.html' %} 标签。这里的路径是相对于模板根目录的路径。例如，如果 base.html 在模板根目录，那么就是 {% extends 'base.html' %}。

在子模板中，您可以重写（或填充）基础模板中定义的 block 区域。只要在子模板中定义同名的 block 标签，其中的内容就会替换掉基础模板中对应 block 的内容。

index.html 示例：

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

{% block title %}
    <title>AnqiCMS 首页 - 快速搭建您的企业网站</title> {# 覆盖 base.html 中的 title block #}
{% endblock %}

{% block content %}
    <main class="homepage-content">
        <h1>欢迎来到我们的网站！</h1>
        <p>这里是 AnqiCMS 首页的独特内容。我们致力于提供高效、安全的内容管理解决方案。</p>

        <section class="latest-articles">
            <h2>最新文章</h2>
            {% archiveList archives with type="list" moduleId="1" limit="5" %}
                <ul>
                    {% for item in archives %}
                        <li><a href="{{ item.Link }}">{{ item.Title }}</a> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
                    {% endfor %}
                </ul>
            {% endarchiveList %}
        </section>

        <section class="featured-products">
            <h2>推荐产品</h2>
            {% archiveList products with type="list" moduleId="2" limit="3" flag="c" %}
                <div class="product-grid">
                    {% for item in products %}
                        <div class="product-item">
                            <a href="{{ item.Link }}">
                                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                                <h3>{{ item.Title }}</h3>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            {% endarchiveList %}
        </section>
    </main>
{% endblock %}

神奇的 {{ block.super }}

有时候，您可能不想完全替换父模板中 block 的内容，而是想在其基础上添加一些东西。这时，{{ block.super }} 就派上用场了。在子模板的 block 中使用它，可以引入父模板中对应 block 的内容。

例如，您想在基础模板默认标题后添加一些页面特有的描述：

{% extends 'base.html' %}

{% block title %}
    {{ block.super }} - 文章详情
{% endblock %}

{# ... 其他内容 ... #}

这样，最终的 <title> 标签就会包含父模板的标题和“ - 文章详情”。

实践中的小技巧

  • 合理划分区块：在设计 base.html 时，不要把所有的内容都放在一个 block 里。应该根据逻辑功能（如 block header_nav、block sidebar、block main_content、block scripts 等）进行细致的划分。这样，子模板就能更精准地定制特定部分。
  • 善用 include 标签：对于一些在多个 block 或不同子模板中会重复使用的“代码片段”（例如一个用户登录表单、一个社交分享按钮组），可以使用 {% include "partial/login_form.html" %} 的方式引入。这能进一步提高代码的复用性。AnqiCMS 的模板系统也完美支持这种嵌套。
  • 清晰的块名称：给 block 标签起一个有意义的名称，能帮助您在复杂的模板结构中快速定位和理解每个区块的作用。
  • 静态资源管理：AnqiCMS 约定模板的样式、JS、图片等静态资源存放在 /public/static/ 目录。在模板中引用时，可以使用 {% system with name="TemplateUrl" %} 标签来获取当前模板的静态文件地址，确保路径正确且灵活。

实现统一风格与灵活定制的完美结合

通过 extends 标签和 block 机制，您可以在 AnqiCMS 中轻松实现：

  • **全站一致的页眉