AnQiCMS 以其灵活、高效的特性，为网站内容的个性化展示提供了广阔的空间。如果您希望网站拥有独特的外观和功能，创建自定义模板无疑是**途径。通过深度定制模板，您可以完全掌控网站的每一个细节，从品牌形象到用户体验，都能实现高度的个性化，从而在众多网站中脱颖而出。
本文将引导您了解如何在 AnQiCMS 中创建和应用自定义模板，帮助您将设计理念变为现实，实现网站的个性化显示。
一、 模板定制的基石：了解 AnQiCMS 的模板机制
在 AnQiCMS 中，模板定制的核心在于理解其基于 Go 语言的模板引擎，它借鉴了类似 Django 模板的语法，这使得熟悉 Web 开发的用户能够快速上手。
首先，模板文件统一使用 .html 作为后缀名，并集中存放在网站根目录下的 /template 文件夹中。与模板相关的样式表、JavaScript 脚本和图片等静态资源，则应单独放置在 /public/static/ 目录下。这种分离有助于保持模板文件的整洁，并方便管理静态资源。
AnQiCMS 的模板语法简洁而强大：
- 变量输出：使用双大括号
{{变量名}}来显示数据，例如{{archive.Title}}可以展示文章标题。 - 逻辑控制：使用单大括号和百分号
{% 标签 %}来执行逻辑操作，如条件判断{% if 条件 %}、循环遍历{% for item in 列表 %}等。所有逻辑标签都需要相应的结束标签，例如{% endif %}或{% endfor %}。 - 变量命名：为了保持一致性，模板中的变量名通常采用驼峰命名法则，即每个单词首字母大写（如
archive.Id,archive.Title）。 - 编码规范：所有模板文件都应采用 UTF-8 编码，以避免页面出现乱码。
每个自定义模板都应在其根目录下包含一个 config.json 文件，用于描述模板的基本信息，例如模板名称、包名、版本、作者等。其中，template_type 字段尤为重要，它定义了模板的适配类型（0 为自适应，1 为代码适配，2 为电脑+手机独立），这决定了您的网站将如何响应不同设备的访问。
二、 动手创建您的第一个自定义模板
创建自定义模板是一个系统性的过程，从规划到具体文件编写，每一步都至关重要。
1. 规划与准备
在开始编写代码之前，建议您先明确网站的展示需求：
- 网站类型：是企业官网、产品展示站、还是博客？
- 适配方式：需要响应式设计（自适应）、为不同设备提供不同代码（代码适配），还是为 PC 和移动端分别部署独立模板？
- 页面结构：网站包含哪些核心页面（首页、文章列表、详情、单页等），以及它们的大致布局。
根据您的规划，在 /template 目录下创建一个新的文件夹作为您的模板目录，例如 my_custom_theme。然后，在这个新文件夹中创建 config.json 文件，并填写相应的信息。
2. 核心页面模板的搭建
AnQiCMS 支持两种模板文件组织模式：文件夹组织模式和扁平化文件组织模式。无论选择哪种，以下是一些核心页面的模板文件命名规则：
- 公共代码片段：为了避免代码重复，可以将页头、页脚、侧边栏等公共部分拆分成独立文件，例如
partial/header.html、partial/footer.html。这些文件可以通过{% include "partial/header.html" %}标签在其他模板中引用。 - 基础骨架：创建一个
base.html文件作为所有页面的基础骨架。在这个文件中，定义 HTML 文档的基本结构（<html>,<head>,<body>）以及公共的样式和脚本引用。使用{% block 区域名称 %}{% endblock %}标签来定义可被子模板重写或扩展的内容区域。例如，您可以定义{% block title %}、{% block content %}等。 - 首页：
index/index.html(文件夹模式) 或index.html(扁平化模式)。这是网站的入口页面，通常会展示最新文章、推荐内容、轮播图等。 - 模型列表页：例如文章列表页
article/list.html或article_list.html，产品列表页product/list.html或product_list.html。这些页面用于展示特定内容模型的列表数据。 - 模型详情页：例如文章详情页
article/detail.html或article_detail.html，产品详情页product/detail.html或product_detail.html。这些页面用于展示单篇文章或产品的详细内容。 - 单页面：
page/detail.html或page_detail.html。适用于“关于我们”、“联系我们”等静态内容页面。 - 移动端模板：如果您的
template_type设置为 1 或 2，则需要在模板目录中创建一个mobile/子目录，并在其中按照相同的结构创建移动端适配的模板文件。
引用静态资源：在您的模板文件中，引用 CSS、JavaScript 文件或图片时，应使用 AnQiCMS 提供的 {templateUrl} 变量来构建正确的路径。例如：
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
<img src="{% system with name="TemplateUrl" %}/images/logo.png" alt="Logo">
{% system with name="TemplateUrl" %} 将自动替换为当前模板的静态资源根路径，确保资源能够正确加载。
三、 灵活运用 AnQiCMS 的模板标签与过滤器
AnQiCMS 提供了丰富的模板标签和过滤器，让您可以轻松获取和处理各种数据。
1. 数据获取与展示
- 站点全局信息：使用
{% system with name="字段名称" %}标签获取网站名称、Logo、备案号、基础 URL 等信息。 - 联系方式：通过
{% contact with name="字段名称" %}标签获取后台配置的联系人、电话、邮箱、社交媒体链接等。 - 导航列表：
{% navList navs %}用于获取网站导航菜单数据，支持多级菜单和自定义导航类别。 - 分类与文档：
{% categoryList categories %}：获取文章或产品分类列表。{% archiveList archives %}：获取文章或产品文档列表，支持按分类、模型、推荐属性、排序方式等多种条件筛选，并能实现分页功能。{% pageList pages %}：获取单页面列表。{% archiveDetail with name="字段名称" %}：在详情页获取当前文档的详细信息（如标题、内容、图片、自定义字段等）。{% pageDetail with name="字段名称" %}：获取单页面的详细信息。
- 模型自定义字段：如果您的内容模型中定义了额外的字段，可以通过
archiveDetail或categoryDetail