在网站建设与运营过程中，如何高效地管理页面布局、确保视觉风格一致，同时又能灵活地调整局部内容，是许多运营者面临的挑战。AnQiCMS 提供了强大的模板继承功能，它能够帮助我们巧妙地解决这些问题，实现网站页面的结构化管理和内容的灵活展示。
理解模板继承的核心概念
想象一下，模板继承就像是建筑设计中的“蓝图”或“母版”。我们首先设计一个通用的页面骨架，它包含了网站所有页面共享的元素，比如页头、页脚、导航栏等。这个骨架被称为“基础模板”（Base Template），它就像一张总体的设计图。
在这个基础模板中，我们通过使用 {% block %} 标签来定义一些可替换的区域。这些区域就像建筑中的预留空间，比如客厅、卧室或者厨房。子页面（也就是继承了基础模板的页面）可以根据自己的需求，选择性地填充或修改这些预留空间的内容。
当一个子模板使用 {% extends 'base.html' %} 标签声明继承某个基础模板时，它就获得了基础模板的所有布局和结构。子模板然后可以通过定义同名的 {% block %} 标签来覆盖或修改基础模板中对应块的内容。如果子模板没有定义某个块，那么它将直接沿用基础模板中该块的默认内容。值得注意的是，{% extends %} 标签必须是子模板中的第一个标签，否则模板继承将无法正常工作。
建立页面的“骨架”：Base 模板的实践
在 AnQiCMS 中，通常我们会创建一个名为 base.html 的文件作为我们网站的基础模板。这个模板承载了网站最核心、最通用的布局和元素。例如，它会包含 HTML 的 <html>、<head> 和 <body> 标签，以及页面的主要区域划分。
一个典型的 base.html 可能会这样组织：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{% block title %}
<title>默认网站标题</title> <!-- 子页面可重写此块，不重写则使用默认 -->
{% endblock %}
{% comment %} 这里可以放置其他全局的meta标签、CSS链接 {% endcomment %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/global.css">
{% block head_extra %}{% endblock %} {# 预留给子页面添加额外头部内容 #}
</head>
<body>
<div class="header">
{% comment %} 通常这里会包含网站Logo、主导航等固定内容 {% endcomment %}
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
{% navList navs %}
<ul>
{%- for item in navs %}
<li><a href="{{ item.Link }}">{{item.Title}}</a></li>
{% endfor %}
</ul>
{% endnavList %}
</div>
<div class="main-content-wrapper">
<div class="sidebar">
{% include 'partial/aside.html' %} {# 引入侧边栏局部片段 #}
</div>
<div class="main-area">
{% block content %}
<h4>这里是主内容区的默认占位符</h4>
{% endblock %}
</div>
</div>
<div class="footer">
{% comment %} 通常这里会包含版权信息、备案号、友情链接等 {% endcomment %}
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
{% linkList friendLinks %}
{% if friendLinks %}
<span>友情链接：</span>
{% for item in friendLinks %}
<a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a>
{% endfor %}
{% endif %}
{% endlinkList %}
</div>
{% block scripts %}{% endblock %} {# 预留给子页面添加JS脚本 #}
</body>
</html>
在这个 base.html 中，我们定义了 title、head_extra、content 和 scripts 等多个 block。这些 block 将成为子页面可以自由填充或覆盖的“插槽”。