如何通过模板继承(`extends`)标签优化页面布局和内容显示？
在AnQiCMS中，模板是构建网站外观和布局的基石。一个设计精良的模板不仅能让网站看起来专业美观，更能极大提升内容运营的效率和网站的维护便利性。在众多强大的模板标签中，extends（模板继承）标签无疑是优化页面布局和内容显示的关键工具之一。它能帮助我们构建出既统一又灵活的网站结构，让内容运营和前端开发更加得心应手。
理解 extends：模板继承的核心
extends 标签的核心思想是“代码复用”和“分层管理”。想象一下，一个网站的每个页面通常都有公共的头部、底部、导航栏以及一些通用的样式和脚本引用。如果每个页面都独立编写这些内容，不仅工作量巨大，后期任何一个小改动都需要逐一修改，效率低下且容易出错。
extends 标签的出现正是为了解决这个问题。它允许我们定义一个“骨架”模板（通常命名为 base.html 或类似的通用名称），这个骨架模板包含了网站所有页面共有的HTML结构、头部引用、页脚信息等。在骨架模板中，我们通过block标签定义出一些可供子模板填充或修改的区域，比如页面的标题、主要内容区域、侧边栏或者特定的脚本引入位置。
而当我们要创建具体的页面（如首页、文章详情页、分类列表页等）时，我们不再需要从头编写所有代码，只需在这个具体的子模板中使用 {% extends 'base.html' %} 标签来继承骨架模板。然后，根据页面本身的特点，通过重写骨架模板中定义的 block 区域，填充该页面独有的内容。这样，子模板只需要关注其核心内容，而公共部分则由父模板统一管理。
需要特别注意的是，extends 标签必须是子模板文件中的第一个标签，否则模板继承机制将无法正常工作。
AnQiCMS 中 extends 的实际应用与优势
将extends标签应用到AnQiCMS的模板开发中，能带来诸多显著的优势：
统一网站结构与风格： 通过一个公共的
base.html，我们可以轻松地统一网站的整体布局、导航、页脚以及CSS和JavaScript的引用。这意味着无论您的网站有多少页面，它们都将拥有协调一致的外观和用户体验。例如，您可以在base.html中引入网站的Logo、主导航菜单、网站备案号（通过{% system with name="SiteLogo" %}、{% navList navs %}、{% system with name="SiteIcp" %}等标签）以及通用的样式文件，确保它们在所有页面上正确显示。提高开发效率： 开发者无需在每个页面中重复编写HTML文档结构、
<head>标签内容、公共组件等。他们只需专注于特定页面的独特内容和功能。例如，在文章详情页的模板中，您只需重写main_content块来显示文章标题、正文（通过{% archiveDetail with name="Title" %}、{% archiveDetail with name="Content" %}等标签），而无需关心页眉页脚如何呈现。简化维护与更新： 网站公共部分的任何修改（如更改导航链接、更新网站Logo、调整整体布局），只需在
base.html骨架模板中进行一次，所有继承该模板的页面都会自动应用这些改动。这大大降低了网站的维护成本，尤其对于拥有大量页面的网站而言，其价值不言而喻。优化内容管理与协作： 前端开发者可以专注于设计和维护模板结构，而内容运营人员则可以通过后台系统发布内容，这些内容将自动填充到预设的模板块中。模板结构与内容分离，使得团队协作更加高效。
保持代码整洁与可读性： 模块化的模板代码使得每个文件都职责明确，易于理解和调试。子模板的代码量通常较小，只包含与该页面直接相关的内容，提高了代码的可读性和可维护性。
实战演练：构建一个可扩展的页面布局
让我们通过一个简单的例子，看看如何在AnQiCMS中利用extends和block构建一个灵活的页面布局。
1. 创建 base.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">
{% 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/main.css">
{% block head_extra %}
{# 用于引入页面特有的CSS或Meta标签 #}
{% endblock %}
</head>
<body>
<header class="site-header">
<div class="container">
<a href="{% system with name="BaseUrl" %}" class="site-logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
<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>
</div>
</header>
<main class="site-main">
<div class="container">
{% block main_content %}
{# 这是所有页面共享的主内容区域，子模板可以重写它 #}
<p>这里是默认的主内容。</p>
{% endblock %}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
</div>
</footer>
<script src="{% system with name="TemplateUrl" %}/js/jquery.min.js"></script>
{% block footer_scripts %}
{# 用于引入页面特有的JavaScript脚本 #}
{% endblock %}
</body>
</html>
在上述base.html中，我们定义了title、head_extra、main_content和footer_scripts四个block区域。title和main_content通常是每个页面都会有差异的部分，而head_extra和footer_scripts则方便引入页面独有的资源。
2. 创建 index.html 首页模板：
首页需要显示一些特色内容。
{% extends 'base.html' %} {# 继承 base.html 骨架模板 #}
{% block title %}
<title>AnQiCMS 官网 - 您的企业级内容管理专家</title> {# 重写页面标题 #}
{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/home.css"> {# 首页特有样式 #}
{% endblock %}
{% block main_content %}
<section class="hero-section">
<h1>欢迎使用 AnQiCMS</h1>
<p>高效、可定制、易扩展的内容管理解决方案。</p>
<a href="/about" class="btn btn-primary">了解更多</a>
</section>
<section class="latest-articles">
<h2>最新文章</h2>
<div class="article-list">
{% archiveList archives with moduleId="1" type="list" limit="4" %}
{% for item in archives %}
<article>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
</article>
{% endfor %}
{% endarchiveList %}
</div>
</section>
{% endblock %}
{% block footer_scripts %}
<script src="{% system with name="TemplateUrl" %}/js/home-animations.js"></script> {# 首页特有脚本 #}
{% endblock %}
3. 创建 article_detail.html 文章详情页模板：
文章详情页需要显示文章的完整内容，并且可能包含侧边栏相关推荐。
{% extends 'base.html' %}
{% block title %}
<title>{% archiveDetail with name="Title" %} - {% tdk with name="Title" siteName=true %}</title> {# 文章详情页标题 #}
{% endblock %}
{% block main_content %}
<div class="row">
<div class="col-md-9 article-content">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="article-meta">
<span>分类: <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span>发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {% archiveDetail with name="Views" %}</span>
</div>
<div class="article-body">
{% archiveDetail articleContent with name="Content" render=true %}{{ articleContent|safe }}
</div>
<div class="article-tags">
{% tagList tags with itemId=archive.Id limit="10" %}
{% for item in tags %}
<a href="{{ item.Link }}" class="tag">{{ item.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
</div>
<aside class="col-md-3 sidebar">
<h3>相关推荐</h3>
<ul>
{% archiveList related_articles with type="related" limit="5" %}
{% for item in related_articles %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
{% endarchiveList %}
</ul>
</aside>
</div>
{% endblock %}
在这些子模板中，我们通过重写block来定制页面的特定部分。您可以看到，每个子模板的代码量都相对较少，只关注自己的独特内容，而公共的头部、底部等都由base.html提供。
如何在 block 中保留父模板内容？
有时，您可能希望在重写某个block的同时，保留父模板中该block的默认内容。这时可以使用{{ block.super }}。例如，如果您想在子模板的footer_scripts中添加新的脚本，同时不覆盖父模板中已有的脚本，可以这样写：
{% block footer_scripts %}
{{ block.super }} {# 引入父模板中 footer_scripts 的内容 #}
<script src="{% system with name="TemplateUrl" %}/js/page-specific.js"></script> {# 添加自己的脚本 #}
{% endblock %}
这样，父模板的默认脚本和子模板的特定脚本都会被加载，实现了内容的叠加。
总结
extends标签是AnQiCMS模板系统中一个极其强大的功能，它通过模板继承的机制，帮助我们实现了网站布局的高度统一、开发效率的显著提升和维护成本的有效降低。无论是构建企业官网、营销站点还是个人博客，熟练运用extends标签都将让您的网站更具扩展性和可持续性。拥抱模板继承，让您的AnQiCMS网站运营和开发变得更加轻松和高效。
常见问题 (FAQ)
Q1: extends 标签在子模板中是否必须是第一个标签？
是的，extends 标签必须是子模板文件