如何将模板拆分为多个可重用的部分（如页头、页脚）？
作为一名深谙安企CMS(AnQiCMS)运营之道的从业者，我深知内容质量与网站效率是吸引并留住用户的核心。在日常运营中，我们不仅要关注内容本身，更要确保网站结构的高效与可维护性。模板的模块化拆分正是实现这一目标的关键技术。
安企CMS提供了一套强大而灵活的模板机制，能够帮助我们轻松将网站模板分解为更小、更易管理的可重用部分，例如页头、页脚、侧边栏等。这种方法不仅大幅提升了开发效率，确保了网站整体风格的一致性，同时也简化了后期维护与更新的复杂性。
安企CMS模板模块化基础
安企CMS的模板系统基于类似Django模板引擎的语法，以.html作为模板文件后缀，并统一存放在 /template 目录下。每个模板都通过 config.json 文件定义其属性。这种设计哲学鼓励我们将常用的页面元素抽象出来，形成独立的“代码片段”或“骨架”，在需要时进行引用或继承。
核心思路在于避免重复劳动，将网站中公共且反复出现的元素，如导航栏、网站底部版权信息、文章侧边栏等，独立成文件。这样，一旦需要修改这些公共元素，我们只需更改一处文件，所有引用它的页面都会同步更新，大大提高了运营效率和网站的统一性。
拆分可重用部分的策略与实践
在安企CMS中，实现模板模块化主要依赖于 extends、include 和 macro 这三个标签，以及遵循特定的目录结构。
构建网站骨架：页头与页脚的继承 (bash.html 和 extends 标签)
对于网站中结构最稳定、变动最小的公共部分，如整个页面的HTML结构、主要CSS和JavaScript引用，以及页头和页脚，我们通常会将其定义在一个基础模板中，安企CMS推荐使用 bash.html 文件作为这个“骨架”模板。
bash.html 文件会包含页面的整体布局，并通过 {% block 名称 %}{% endblock %} 标签来定义可被子模板重写或填充的区域。例如，我们可以设置一个 block title 用于页面标题，一个 block content 用于主体内容，以及 block scripts 用于特定页面的JS代码。
{# /template/您的模板目录/bash.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% system with name="SiteName" %}{% endblock %}</title>
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{% block head_scripts %}{% endblock %}
</head>
<body>
<header>
{# 引入页头公共部分 #}
{% include "partial/header.html" %}
</header>
<main>
{% block content %}
{# 默认内容，可被子模板覆盖 #}
{% endblock %}
</main>
<footer>
{# 引入页脚公共部分 #}
{% include "partial/footer.html" %}
</footer>
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block body_scripts %}{% endblock %}
</body>
</html>
随后，网站中的所有具体页面模板（如首页 index/index.html、文章详情页 archive/detail.html 等）都可以通过 {% extends 'bash.html' %} 标签来继承这个基础骨架。在子模板中，我们只需重写相应的 block 区域，填充该页面特有的内容。未被重写的 block 区域将自动沿用 bash.html 中的默认内容。
{# /template/您的模板目录/index/index.html #}
{% extends 'bash.html' %}
{% block title %}首页 - {% system with name="SiteName" %}{% endblock %}
{% block content %}
<section class="hero-section">
<h1>欢迎来到安企CMS</h1>
<p>这是网站的首页内容区域。</p>
</section>
{# 首页特有的内容 #}
{% endblock %}
{% block body_scripts %}
<script>
console.log("这是首页特有的JS代码");
</script>
{% endblock %}
细化组件：代码片段的引用 (partial/ 目录和 include 标签)
对于网站中一些更小粒度、可能在多个 block 或不同子模板中重复使用的代码块，安企CMS建议将其存放在 partial/ 目录下。例如，侧边栏导航、面包屑导航、广告位、文章列表项的渲染逻辑等。
这些代码片段可以通过 {% include "partial/文件名.html" %} 标签在任何需要的地方被引用。include 标签的强大之处在于，它不仅能简单地插入文件内容，还能通过 with 参数向被包含的模板传递变量，甚至使用 only 限制变量作用域，确保代码片段的独立性。
例如，一个通用的页头 partial/header.html 可以包含网站Logo和主导航：
{# /template/您的模板目录/partial/header.html #}
<div class="site-header">
<div class="logo">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-nav">
{% include "partial/main_nav.html" %}
</nav>
</div>
而主导航 partial/main_nav.html 则可以这样：
{# /template/您的模板目录/partial/main_nav.html #}
<ul>
{% navList navs %}
{%- for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %}
<ul class="sub-nav">
{%- for sub_item in item.NavList %}
<li class="{% if sub_item.IsCurrent %}active{% endif %}">
<a href="{{ sub_item.Link }}">{{sub_item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
通过这种方式，我们可以将复杂的导航逻辑进一步封装。如果某个 include 的文件可能不存在，可以使用 if_exists 参数，避免模板渲染出错。
高级复用：宏函数定义通用渲染逻辑 (macro 标签)
当我们需要复用一段带有特定逻辑的代码，并且这段代码需要接受参数来动态生成内容时，macro 标签就派上用场了。宏函数类似于编程语言中的函数，可以定义输入参数，并根据参数渲染不同的HTML结构。它们非常适合用于渲染文章列表中的单个文章项、产品卡片、评论框等重复出现的UI组件。
我们可以将宏函数定义在一个独立的 .html 文件中，例如 partial/macros.html：
{# /template/您的模板目录/partial/macros.html #}
{% macro render_article_card(article) %}
<div class="article-card">
<a href="{{ article.Link }}">
{% if article.Thumb %}
<img src="{{ article.Thumb }}" alt="{{ article.Title }}">
{% endif %}
<h3>{{ article.Title }}</h3>
<p>{{ article.Description|truncatechars:100 }}</p>
<small>{{ stampToDate(article.CreatedTime, "2006-01-02") }}</small>
</a>
</div>
{% endmacro %}
{% macro render_product_card(product) %}
<div class="product-card">
<a href="{{ product.Link }}">
{% if product.Logo %}
<img src="{{ product.Logo }}" alt="{{ product.Title }}">
{% endif %}
<h4>{{ product.Title }}</h4>
<p class="price">¥ {{ product.Price }}</p>
</a>
</div>
{% endmacro %}
然后在其他模板中，通过 import 标签引入这些宏函数，并像调用普通函数一样使用它们：
{# /template/您的模板目录/index/index.html #}
{% extends 'bash.html' %}
{% import "partial/macros.html" as my_macros %} {# 引入宏文件并设置别名 #}
{% block content %}
<h1>最新文章</h1>
<div class="article-list">
{% archiveList archives with type="list" limit="4" %}
{% for item in archives %}
{{ my_macros.render_article_card(item) }} {# 调用宏函数渲染文章卡片 #}
{% empty %}
<p>暂无文章。</p>
{% endfor %}
{% endarchiveList %}
</div>
<h1>热门产品</h1>
<div class="product-list">
{% archiveList products with moduleId="2" type="list" limit="4" %}
{% for item in products %}
{{ my_macros.render_product_card(item) }} {# 调用宏函数渲染产品卡片 #}
{% empty %}
<p>暂无产品。</p>
{% endfor %}
{% endarchiveList %}
</div>
{% endblock %}
实际操作与注意事项
在进行模板拆分时，有几点需要特别注意：
- 语法一致性：安企CMS使用类似Django的模板语法，变量使用双花括号
{{变量}}，控制结构（如条件判断、循环）使用单花括号和百分号{% 标签 %}。 - 静态资源管理：模板中引用的样式、JS脚本、图片等静态资源应统一存放在
/public/static/目录下，并通过{% system with name="TemplateUrl" %}标签动态获取模板的静态资源路径，确保多模板环境下的正确引用。 - 编码统一：所有模板文件务必使用UTF-8编码，以避免中文乱码问题。
- 由大到小拆分：建议从整体布局（
extends）开始，逐步细化到页面区块（include），最后是可参数化的独立UI组件（macro）。 - 变量传递与作用域：理解
include和macro标签在变量传递和作用域上的差异，合理选择使用。include会继承当前模板的所有变量，而macro则只使用其显式传入的参数。
通过有效地拆分模板，安企CMS的网站运营者可以构建出结构清晰、易于维护、高效响应变化的网站。这不仅提升了网站前端的开发与管理体验，也间接为内容的快速发布和优化提供了坚实的技术基础。
常见问题解答 (FAQ)
1. 为什么在AnQiCMS中进行模板模块化拆分如此重要？
模板模块化拆分对于提升网站运营效率至关重要。它能确保网站在视觉和功能上的高度一致性，减少重复代码，从而大幅降低模板的开发成本和维护难度。当需要对某个公共元素进行修改时，只需在一个文件中操作，所有引用该元素的页面都会自动更新，避免了繁琐的手动修改，并有效减少了错误发生的可能性。
2. 在拆分模板时，应该如何决定哪些部分应该使用 include，哪些应该使用 extends，又有哪些适合使用 macro？
通常，extends 用于定义整个页面的基本骨架和通用布局（如 bash.html），它定义了可被子模板覆盖的 block 区域。include 更适合引入页面中较小的、独立的、可以在多个地方重复使用的静态或半静态代码片段（如页头、页脚、侧边栏导航）。而 macro 则适用于