在网站建设和内容管理中，保持页面布局的一致性、提高开发效率以及降低维护成本是至关重要的。AnQiCMS 作为一个高效的内容管理系统，提供了灵活的模板机制，让我们能够轻松地在不同页面中复用公共的代码片段，例如网站的头部导航、底部信息或侧边栏等。

本文将深入探讨在 AnQiCMS 模板中如何优雅地引入公共头部和尾部代码片段，帮助你更好地组织模板文件，提升网站的整体维护效率和用户体验。

AnQiCMS 模板工作原理概述

AnQiCMS 的模板引擎类似于 Django 框架的模板语法，它允许我们使用 .html 文件作为模板，并使用特定的标签来控制内容的输出和逻辑。其中，双花括号 {{变量}} 用于输出变量内容，而单花括号和百分号 {% 标签 %} 则用于定义条件判断、循环控制以及引入其他模板文件等操作。

了解了这些基础，我们就能更好地利用其提供的强大功能来管理公共代码。

组织公共代码片段的目录结构

为了更好地管理模板中的公共代码，AnQiCMS 鼓励我们采用一种清晰的目录结构。通常，你会在 /template 目录下找到你当前使用的主题文件夹（例如 default）。在这个主题文件夹内部，我们可以创建一些专门用于存放公共代码片段的目录和文件：

  1. 基础布局文件 (bash.html 或 base.html)：
    • 在主题文件夹的根目录，你可以创建一个名为 bash.html 或 base.html 的文件。这个文件将作为你网站的“母版”或“骨架”，包含所有页面共有的 HTML 结构，如 <html>、<head>、<body> 等标签，以及主要的内容区域划分。
    • 文档约定中提到，bash.html 可以作为页头、页脚等每个页面都继承的部分。
  2. 代码片段目录 (partial/)：
    • 在主题文件夹内，创建一个名为 partial/ 的子目录。这个目录专门用于存放一些可复用的、独立的页面组件，比如：
      • header.html (网站头部导航、Logo 等)
      • footer.html (网站底部版权信息、友情链接等)
      • sidebar.html (侧边栏内容)
      • breadcrumb.html (面包屑导航) 等。

通过这样的组织方式，我们的模板结构会变得更加清晰和易于管理。

引入公共代码的核心标签：include 和 extends

AnQiCMS 模板引擎提供了两个主要的标签来实现代码的复用：include 和 extends。它们各自有不同的应用场景。

1. 使用 include 标签：插入独立的片段

include 标签用于将一个外部的模板文件内容直接插入到当前模板的指定位置。它适用于那些独立、可插拔的组件，比如你希望在多个页面中都显示相同的头部或底部内容，或者一个标准的侧边栏。

基本用法：

假设你已经在 partial/ 目录下创建了 header.html 和 footer.html。你可以在任何页面中这样引入它们：

{# 引入头部代码片段 #}
{% include "partial/header.html" %}

<main class="page-content">
    {# 页面具体内容 #}
</main>

{# 引入尾部代码片段 #}
{% include "partial/footer.html" %}

这里 "partial/header.html" 是相对于你的主题根目录的路径。

高级用法：

  • if_exists：安全引入 如果你不确定要引入的文件是否存在，可以使用 if_exists 关键字，这样即使文件不存在，模板也不会报错，只会忽略该引入。 
    
{% include "partial/header.html" if_exists %}
  • with：传递变量 有时，你引入的片段需要一些父模板中的特定变量。你可以使用 with 关键字来向被引入的模板传递变量。 
    
{% include "partial/header.html" with pageTitle="当前页面标题" %}
    在 header.html 中，你就可以使用 {{ pageTitle }} 来获取这个变量。
  • only：限定变量作用域 如果你只希望被引入的模板只能访问你通过 with 传递的变量，而不继承父模板的所有变量，可以使用 only 关键字。 
    
{% include "partial/header.html" with pageTitle="当前页面标题" only %}

2. 使用 extends 标签：构建页面骨架

extends 标签用于实现模板的继承，它允许你创建一个基础布局（通常是 base.html），其中定义了页面的整体结构和一些可重写的内容区域（通过 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 head_meta %}
    {# 页面特有的 meta 标签或 CSS 链接 #}
    {% endblock %}
    <title>{% block title %}默认网站标题{% endblock %}</title>
    {# 引入公共 CSS 文件，通常放置在 /public/static/your_theme/css 目录下 #}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    {% include "partial/head_custom.html" if_exists %} {# 可选：引入自定义的头部代码，如统计代码等 #}
</head>
<body>

    {% include "partial/header.html" %} {# 引入头部代码片段 #}

    <div class="container">
        {% block content %}
        {# 这里是每个页面具体内容区域，等待子模板填充 #}
        {% endblock %}
    </div>

    {% include "partial/footer.html" %} {# 引入尾部代码片段 #}

    {# 引入公共 JS 文件 #}
    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
    {% block scripts %}
    {# 页面特有的 JavaScript 代码 #}
    {% endblock %}
</body>
</html>

然后，在你的具体页面模板（例如 index/index.html 或 archive/detail.html）中，你可以继承 base.html 并填充内容：

”`twig {# 必须是模板文件的第一行 #} {% extends ‘base.html’ %}

{% block title %}我的首页 - {% endblock %} {# 覆盖默认标题，会追加到 base.html 的默认标题之前 #}

{% block content %}

<h1>欢迎来到我的网站</h1>
<p>这是首页的专属内容。</p>