作为一名资深的安企CMS网站运营人员,我深知在日常工作中,效率和可维护性是网站内容管理的关键。AnQiCMS 提供了强大且灵活的模板系统,其中创建和引用可重用代码片段是提升这些方面效率的重要手段。这不仅能减少重复劳动,还能确保网站整体风格和功能的一致性,同时也为未来的内容更新和网站改版打下了坚实的基础。
AnQiCMS 模板中的可重用代码片段:核心概念
AnQiCMS 的模板系统基于 Go 语言的 Django 模板引擎语法,它与我们熟悉的 Blade 语法类似,这使得它对内容创作者和开发者都非常友好。在这种模板语法下,我们可以定义变量、进行条件判断、执行循环控制,更重要的是,能够创建和引用可重用的代码片段。
可重用代码片段,顾名思义,是指可以在网站不同页面多次调用的代码块。例如,网站的侧边栏、页头、页脚、版权信息,甚至是特定列表项的展示样式,都可以被抽象为可重用片段。利用这些片段,我们可以避免在每个页面重复编写相同的 HTML 结构、CSS 引用或 JavaScript 逻辑,从而提高开发效率和后期维护的便利性。
组织您的模板文件
为了更好地组织可重用代码片段,AnQiCMS 约定了清晰的模板目录结构。模板的根目录位于 /template 文件夹,每一套模板都应在其下拥有独立的目录,并包含一个 config.json 文件定义模板信息。
在这种结构下,以下是组织可重用代码片段的推荐实践:
- 公共代码 (如
bash.html):像网站的页头 (<head>) 部分、页脚 (<footer>) 部分,以及其他几乎所有页面都会继承的基础结构,通常会集中存放在一个公共文件中,例如bash.html。这个文件可以作为其他页面模板的“骨架”或“母版”进行继承。 - 代码片段目录 (
partial/):针对那些在多个页面中重复出现但并非整个页面基础结构的独立模块,比如侧边栏(sidebar.html)、面包屑导航(breadcrumb.html)、评论区或者某个特定的内容列表展示形式,AnQiCMS 推荐将它们存放在一个名为partial/的子目录中。这种分类方式让模板结构更加清晰,易于查找和管理。
利用 include 标签嵌入代码片段
在 AnQiCMS 模板中,include 标签是引用独立代码片段最直接的方式。它允许我们将一个外部模板文件的内容完整地插入到当前模板的指定位置。
假设我们已经在 partial/ 目录下创建了一个名为 sidebar.html 的文件,其中包含了侧边栏的所有 HTML 结构和 AnQiCMS 标签,例如用于显示最新文章列表的 archiveList 标签。那么,在主模板文件(如 index.html 或 detail.html)中,我们可以这样引用它:
{% include "partial/sidebar.html" %}
如果我们需要向被 include 的代码片段传递特定的变量,可以使用 with 关键字。例如,如果侧边栏需要一个 title 变量来显示其标题:
{% include "partial/sidebar.html" with title="最新文章" %}
在 sidebar.html 中,就可以直接使用 {{ title }} 来获取这个值。若只想传递指定变量而不继承当前模板的所有变量,可以加上 only 关键字:
{% include "partial/sidebar.html" with title="热门推荐" only %}
此外,如果担心被引用的模板文件可能不存在,导致页面出错,可以使用 if_exists 来进行判断:
{% include "partial/sidebar.html" if_exists %}
这样,如果 sidebar.html 不存在,它将不会报错,而是被忽略。
使用 macro 标签创建可复用组件
macro 标签提供了一种更类似于函数的方式来定义可复用的代码块。它允许我们定义一个带有参数的代码片段,然后在模板中多次调用它,并传递不同的参数。这对于那些结构相似但数据不同的重复组件非常有用。
例如,我们可以定义一个用于显示文章列表项的宏,而不是每次都写一长串 HTML:
{% macro article_item(article) %}
<li class="article-card">
<a href="{{ article.Link }}">
<img src="{{ article.Thumb }}" alt="{{ article.Title }}" />
<h4>{{ article.Title }}</h4>
<p>{{ article.Description|truncatechars:80 }}</p>
</a>
</li>
{% endmacro %}
然后,在模板中使用 archiveList 标签获取文章列表后,可以这样调用这个宏来渲染每个文章项:
{% archiveList archives with type="list" limit="5" %}
<ul>
{% for item in archives %}
{{ article_item(item) }}
{% endfor %}
</ul>
{% endarchiveList %}
macro 还可以被保存到独立的文件中(例如 macros.html),然后通过 import 标签引入到其他模板使用,甚至可以为宏设置别名,进一步提高组织性。
通过 extends 和 block 实现模板继承
模板继承是 AnQiCMS 模板系统中构建复杂布局的基石,它允许我们定义一个基础布局文件(通常是 base.html),其中包含网站的通用结构(如页头、页脚、导航和侧边栏区域),然后其他页面模板通过继承这个基础布局来重写或填充特定区域的内容。
在 base.html 中,我们使用 block 标签来定义可被子模板覆盖的区域:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% tdk with name="Title" siteName=true %}{% endblock %}</title>
<!-- 其他头部资源引用 -->
</head>
<body>
<header>{% include "partial/header.html" %}</header>
<div class="main-content">
<div class="container">
<div class="row">
<div class="col-md-9">
{% block content %}<!-- 页面主要内容区域 -->{% endblock %}
</div>
<div class="col-md-3">
{% block sidebar %}{% include "partial/sidebar.html" %}{% endblock %}
</div>
</div>
</div>
</div>
<footer>{% include "partial/footer.html" %}</footer>
</body>
</html>
注意,这里我们将 sidebar 也定义为一个 block,并默认 include 了 partial/sidebar.html。这意味着,除非子模板明确重写这个 sidebar 块,否则所有继承 base.html 的页面都将自动显示默认的侧边栏。
子模板(例如 article_detail.html)通过 extends 标签继承 base.html,然后重写 block 来填充自己的内容:
{% extends 'base.html' %}
{% block title %}{% archiveDetail with name="Title" %} - {% tdk with name="Title" siteName=false %}{% endblock %}
{% block content %}
<article>
<h1>{% archiveDetail with name="Title" %}</h1>
<div>{% archiveDetail with name="Content"|safe %}</div>
</article>
{% endblock %}
{% block sidebar %}
{# 这个页面不需要侧边栏,或者需要一个不同的侧边栏 #}
{% include "partial/another_sidebar.html" %}
{% endblock %}
需要特别注意的是,{% extends %} 标签必须是模板中的第一个标签,否则模板继承将无法正常工作。
实践中的可重用代码片段
在实际运营中,一个常见的场景是,我们有一个通用的侧边栏,它在大多数页面都显示,但在某些特定页面(如首页、联系我们页面)可能需要隐藏或显示不同的内容。通过上述机制,我们可以优雅地处理这种情况。
创建通用侧边栏片段:在
partial/目录下创建default_sidebar.html,包含最新文章、热门标签等通用内容。”`twig