如何在AnQiCMS模板中引入页头、页脚等公共代码片段？
AnQiCMS 模板开发：巧妙整合公共代码片段，让你的网站维护更高效
在运营一个网站时，我们常常会发现许多页面都共享着相同的基础结构，例如网站的页头、页脚、侧边栏导航，或是某个通用的广告位。如果每次都为每个页面重复编写这些代码，不仅效率低下，而且一旦需要修改，就得逐一调整，这无疑是网站维护的噩梦。好在 AnQiCMS 作为一个以 Go 语言开发的企业级内容管理系统，在模板设计上充分考虑了这种需求，它提供了一套灵活且强大的机制，让我们能够轻松地引入和管理这些公共代码片段，从而大大提升网站的开发与维护效率。
AnQiCMS 的模板系统借鉴了 Django 模板引擎的语法风格，这使得习惯于前端开发的工程师能快速上手。它以.html作为模板文件后缀，并将所有模板文件集中存放在 /template 目录下。网站所需的样式、JavaScript 脚本、图片等静态资源，则统一归置在 /public/static/ 目录中。这种清晰的结构，为我们有效管理公共代码奠定了基础。
接下来，我们就深入探讨 AnQiCMS 模板中引入页头、页脚等公共代码片段的两种主要策略：利用 include 标签进行代码片段复用，以及采用 extends 标签构建模板继承体系。
灵活的代码片段复用：include 标签的妙用
想象一下，你的网站有一个精致的导航菜单，或者一个展示最新文章的侧边栏。这些小巧而独立的模块，往往需要出现在多个页面上。这时，include 标签便是你的得力助手，它更像是代码片段的“即插即用”，让你能够将这些可复用的小块代码拆分成独立的文件，然后在需要的地方引用它们。
通常，这些可复用的小块代码我们会放在模板目录下的 partial/ 文件夹中，例如 partial/header.html（页头）、partial/footer.html（页脚）、partial/sidebar.html（侧边栏）等。当你需要在某个页面引入这些代码时，只需简单地使用 {% include "partial/header.html" %} 这样的语法即可。
include 标签的强大之处远不止于此。如果你需要向这些片段传递特定的数据，可以使用 with 关键字。例如，你的页头可能需要显示一个动态的标题，你可以在引入时这样传递：
{% include "partial/header.html" with pageTitle="当前页面标题" %}
然后在 partial/header.html 中，就可以像访问普通变量一样使用 {{ pageTitle }}。值得注意的是，默认情况下，include 进来的模板会继承父模板的所有变量。但如果你希望引入的片段只使用你明确传递的变量，而不是继承父模板的所有变量，可以使用 only 关键字，如 {% include "partial/header.html" with pageTitle="当前页面标题" only %}，这有助于避免变量名冲突，让代码片段更加独立和可控。
此外，如果你不确定某个代码片段文件是否存在，可以使用 if_exists 来避免程序报错，{% include "partial/optional_ad.html" if_exists %} 这样的写法，在文件不存在时会自动忽略，不会影响页面渲染。
构建网站骨架：extends 标签的模板继承体系
对于网站的整体布局，比如所有页面都共享的 HTML 结构、CSS 和 JavaScript 文件的引用、顶部的导航栏和底部的版权信息，我们更倾向于使用模板继承。extends 标签允许你定义一个网站的“骨架”或者“母版”（通常命名为 base.html 或 bash.html），这个骨架包含了所有页面共有的结构。然后，其他的子页面模板只需“继承”这个骨架，并填充或修改其中定义好的特定区域。
在 base.html（或 bash.html）这个骨架文件中，你需要使用 {% block name %} 和 {% endblock %} 来定义可被子页面覆盖或填充的区域。例如：
<!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 href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
{% block head_extra %}{% endblock %}
</head>
<body>
{% include "partial/header.html" %} {# 这里可以再引入一个页头片段 #}
<main class="container">
{% block content %}
{# 这是主要内容区域，子页面会覆盖它 #}
{% endblock %}
</main>
{% include "partial/footer.html" %} {# 这里可以再引入一个页脚片段 #}
{% block body_extra %}{% endblock %}
</body>
</html>
在上面的 base.html 中，我们定义了 title、head_extra、content 和 body_extra 等多个区块。当子页面需要使用这个骨架时，只需在文件顶部声明 {% extends 'base.html' %}，然后就可以通过重写相应的 block 来定制内容：
{# article/detail.html #}
{% extends 'base.html' %}
{% block title %}
<title>{% archiveDetail with name="Title" %} - {% system with name="SiteName" %}</title>
{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/article-detail.css">
{% endblock %}
{% block content %}
<article>
<h1>{% archiveDetail with name="Title" %}</h1>
<div>
{% archiveDetail with name="Content" render=true|safe %}
</div>
</article>
{% endblock %}
需要特别注意的是，{% extends %} 标签必须是子页面模板文件中的第一个标签，否则模板继承将无法正常工作。
如何选择与结合使用？
理解了 include 和 extends 的工作原理后，选择哪种方式就变得清晰起来：
- 使用
extends构建全局布局：当你需要一个统一的页面框架，例如所有页面都有相同的页头、页脚和侧边栏位置，但中间内容区域各不相同时，extends是**选择。它为你的网站提供了一个坚实而一致的骨架。 - 使用
include模块化局部组件：对于那些可以在网站不同位置独立使用的、小型的、自包含的代码块（如面包屑导航、联系方式模块、评论表单等），include标签可以帮助你将它们封装成独立的片段。甚至，你可以在base.html这样的父模板中，通过include标签来引入你的页头和页脚片段，实现更精细的模块化管理。
例如，你的 base.html 骨架可以使用 {% include "partial/header.html" %} 和 {% include "partial/footer.html" %} 来引入通用的页头和页脚，而 partial/header.html 和 partial/footer.html 本身是独立的片段文件，分别包含了页头和页脚的具体 HTML 代码。这种组合使用的方式，既能保证网站结构的一致性，又能让各个功能模块高度灵活可维护。
总之，AnQiCMS 提供的模板功能，鼓励开发者采用模块化和继承的思维来组织代码。通过合理运用 include 和 extends，你可以极大地提高网站模板的开发效率，简化后续的修改和维护工作，让网站运营变得更加高效和从容。
常见问题 (FAQ)
如何在被
include的文件里使用父模板的变量？ 答：默认情况下，当一个模板文件被include到另一个模板时，它会自动继承父模板中定义的所有变量。这意味着你可以在被include的文件里直接使用父模板中的任何{{ 变量名 }}。如果你只想让include的文件使用特定的变量，可以在include标签后加上with关键字来传递变量，并可以选择使用only关键字来限制只使用这些明确传递的变量，如{% include "partial/nav.html" with activePage="about" only %}。**
include和extends有什么本质区别，我应该如何选择？