如何在 AnQiCMS 模板中利用 `extends` 标签实现模板继承和内容重写？
在安企CMS的日常运营中，我们深知高质量、结构清晰的网站内容是吸引和留存用户的关键。这不仅体现在文章的字里行间，更体现在页面整体的用户体验和维护效率上。安企CMS凭借其基于Django模板引擎语法的强大功能，为我们提供了一套高效的模板继承机制，这正是我们今天要深入探讨的——如何利用extends标签实现模板继承和内容重写。
模板继承的核心理念
在构建网站时，很多页面会共享相同的外观和结构，例如页头、页脚、侧边栏以及统一的布局框架。传统的做法是每个页面都复制粘贴这些共同的代码，但这种方式会带来维护的噩梦——一旦公共部分需要修改，所有相关文件都必须手动更新。
安企CMS的模板继承机制正是为了解决这一痛点。通过定义一个“基础模板”（或称父模板），我们将网站的通用骨架和默认内容放置其中。然后，其他“子模板”可以继承这个基础模板，并根据自身需求，选择性地“重写”或“填充”父模板中预留的特定区域。这个过程中，extends和block这两个标签扮演着核心角色。
extends 与 block：模板继承的基石
extends标签用于声明一个子模板将继承哪个父模板。它的作用如同设定了一个页面的基因源，告诉安企CMS渲染器，当前模板的结构和大部分内容将来自于指定的父模板。值得注意的是，extends标签在任何子模板中都必须是第一个标签，确保模板解析器能够正确识别其继承关系。
而block标签则像是父模板中预留的“插槽”。在父模板中，我们使用{% block block_name %}和{% endblock %}来定义一个可重写的内容区域。这个区域内可以包含默认内容。当子模板继承父模板后，如果它也定义了一个同名的block，那么子模板中该block内的内容将完全替换掉父模板中同名block的默认内容。如果子模板没有重写某个block，那么父模板中该block内的默认内容将保持不变并被渲染出来。
实践演示：构建一个可继承的基础模板
为了更好地理解，我们首先创建一个名为base.html的基础模板。这个模板将包含我们网站的通用结构，如文档头部信息、主导航、主要内容区域和页脚。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# 页面标题区块，子模板可以重写 #}
{% block title %}<title>安企CMS官网 - 轻松管理您的网站</title>{% endblock %}
{# 额外头部内容区块，例如引入特有的CSS或JS #}
{% block head_extra %}{% endblock %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
</head>
<body>
{# 网站头部区块 #}
{% block header %}
<header class="site-header">
<nav>
<a href="/">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" class="logo">
</a>
{% navList main_nav %}
<ul>
{% for item in main_nav %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</header>
{% endblock %}
<main class="container">
{# 主要内容区块，所有子页面都会在此处填充其独特内容 #}
{% block main_content %}
<p>这里是默认的主要内容。</p>
{% endblock %}
</main>
{# 网站页脚区块 #}
{% block footer %}
<footer class="site-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>
{% endblock %}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{# 额外底部JS区块，子模板可以引入特有JS #}
{% block body_extra_js %}{% endblock %}
</body>
</html>
在这个base.html文件中，我们定义了title、head_extra、header、main_content、footer和body_extra_js等多个block。这些block就是我们预留给子模板进行内容填充或重写的区域。
内容重写：创建子模板并定制化
现在，我们可以创建一个名为index.html的子模板，来继承base.html并重写其中的内容。例如，我们希望首页有一个独特的标题，并在主内容区域展示最新文章列表。
{% extends 'base.html' %}
{# 重写页面标题 #}
{% block title %}<title>首页 - 安企CMS，企业级内容管理首选</title>{% endblock %}
{# 重写主要内容区块，展示首页特有的内容 #}
{% block main_content %}
<section class="hero-section">
<h1>欢迎使用安企CMS</h1>
<p>高效、可定制、易扩展的内容管理解决方案。</p>
<a href="/about" class="btn btn-primary">了解更多</a>
</section>
<section class="latest-articles">
<h2>最新文章</h2>
<ul>
{% archiveList archives with type="list" limit="5" moduleId="1" %}
{% for item in archives %}
<li>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</li>
{% endfor %}
{% empty %}
<li>暂无文章发布。</li>
{% endarchiveList %}
</ul>
</section>
{% endblock %}
{# 如果不需要重写 header 或 footer，它们将自动使用 base.html 中的默认内容 #}
在这个index.html子模板中，我们通过{% extends 'base.html' %}声明了它继承自base.html。接着，我们重写了title和main_content两个block。请注意，header和footer区块在index.html中并未被定义，这意味着安企CMS将自动渲染base.html中这两个区块的默认内容。这就是模板继承的强大之处——实现了代码的复用和内容的模块化管理。
通过这种方式，我们可以轻松创建各种不同布局和内容的页面，而无需重复编写大量公共HTML代码。这大大提高了模板的开发效率，降低了后期维护的复杂度，并确保了网站整体的视觉一致性。
常见问题解答
extends 标签必须是模板文件的第一个标签吗？
是的，extends标签必须是子模板文件中的第一个标签。这是安企CMS模板引擎（以及Django模板引擎）的严格要求，因为它需要首先知道当前模板要继承哪个父模板，以便正确地解析和合并内容。如果extends标签前面有任何其他内容，包括HTML注释或空白行，都可能导致模板继承功能失效。
如果子模板没有重写父模板中的某个 block，会发生什么？
如果子模板继承了父模板，但没有重写父模板中定义的某个block，那么安企CMS渲染时将自动使用父模板中该block内的默认内容。这意味着，即使子模板只重写了少数几个区块，网站的其他通用部分仍将保持一致。
extends 和 include 标签有什么主要区别？
extends和include都是用于模板复用的标签，但它们的用途和机制截然不同。extends实现的是“模板继承”，即子模板继承父模板的整体结构，并可以选择性地重写特定区块的内容。它强调的是“is-a”关系（子模板是父模板的一种）。而include实现的是“代码片段包含”，它将一个独立的模板文件（通常是小型、可复用的UI组件，如侧边栏、导航片段等）直接插入到当前模板的指定位置。它强调的是“has-a”关系（当前模板包含某个组件）。简单来说，extends定义了页面的整体骨架，而include则用于填充骨架中的具体小部件。