安企CMS（AnQiCMS）作为一个高效、可定制的内容管理系统，其强大的模板引擎是实现多样化网站展示的核心。系统采用的模板引擎与Django的语法规则高度相似，这使得熟悉Web开发的用户能够更快上手，即使是初学者也能通过本文的指引，逐步掌握模板的编写技巧。

掌握AnQiCMS模板的编写，首先要了解其基本语法结构和文件组织方式，然后深入到各种功能标签和过滤器，最终能够灵活地将数据呈现在网站前端。

熟悉模板引擎的核心语法

AnQiCMS的模板语言主要通过两种标记来与动态数据和逻辑交互：变量输出和逻辑控制。

1. 变量输出：双花括号 {{ }} 当你需要在页面上显示来自后台的数据时，例如文章标题、分类名称、系统设置等，都会用到双花括号 {{ }}。例如，要显示一篇文档的标题，你会写 {{archive.Title}}。这里的 archive 是一个变量名，Title 则是该变量的一个属性。AnQiCMS中的变量名通常遵循驼峰命名法，首字母大写，例如 archive.Id、category.Link。

2. 逻辑控制：单花括号和百分号 {% %} 这部分用于实现模板中的条件判断、循环遍历、引入其他模板文件等复杂逻辑。与变量输出不同，逻辑控制标签需要成对出现，即 {% 标签名 %} 后面必须跟着 {% end标签名 %}。例如，一个简单的条件判断：{% if archive.Id == 10 %} 这是文档ID为10的文档 {% endif %}。

3. 注释：{# #} 和 {% comment %} 为了保持模板代码的清晰和可维护性，你可以使用注释来解释代码。单行注释使用 {# 这是单行注释 #}，多行注释则使用 {% comment %} 这里可以写多行注释 {% endcomment %}。这些注释在渲染页面时不会被输出到最终的HTML中。

4. 编码与文件后缀 所有的模板文件都以 .html 为后缀，并统一使用UTF-8编码。如果编码不正确，页面可能会出现乱码。

模板文件的组织与约定

AnQiCMS对模板文件的存放位置和命名有一套约定，这有助于系统自动识别并应用正确的模板。

1. 模板根目录与配置 所有模板都存放在 /template 目录下。每一套独立的模板都需要在该目录下拥有自己的子目录，并且该子目录内必须包含一个 config.json 文件。这个文件描述了模板的名称、版本、作者、类型（自适应、代码适配、PC+手机端）等基本信息。

2. 静态资源的存放 模板中使用的CSS样式、JavaScript脚本、图片等静态资源，应独立存放在 /public/static/ 目录下，以便系统统一管理和优化。

3. 常用模板文件命名 AnQiCMS支持两种文件组织模式：文件夹组织和扁平化组织。无论选择哪种，系统都预设了一些默认的模板名称，如果你创建了这些文件，系统会根据上下文自动应用：

  • 首页: index/index.html 或 index.html
  • 模型首页: {模型table}/index.html 或 {模型table}_index.html (例如 article/index.html 用于文章模型首页)
  • 文档详情页: {模型table}/detail.html 或 {模型table}_detail.html
  • 文档列表页: {模型table}/list.html 或 {模型table}_list.html
  • 单页面详情页: page/detail.html 或 page.html
  • 错误页: errors/404.html 或 errors_404.html 此外，你还可以为特定ID的文档、分类或单页创建自定义模板，例如 article/detail-10.html 会专门用于ID为10的文章详情页，或者 page/about.html 用于“关于我们”的单页。

4. 移动端模板 如果你的网站需要为移动设备提供单独的模板，可以在模板根目录下创建 mobile/ 子目录。移动端模板的目录结构和文件命名与PC端保持一致，系统会根据访问设备自动选择相应的模板。

核心功能标签的灵活运用

AnQiCMS提供了丰富的内置标签，用于获取和展示各类数据。这些标签通常以 {% 标签名 参数 %} 的形式使用，并用 {% end标签名 %} 结束。

1. 系统与通用信息

  • system 标签：获取网站名称 {{system.SiteName}}、网站Logo {{system.SiteLogo}}、备案号 {{system.SiteIcp}} 等全局设置。
  • contact 标签：调用联系人 {{contact.UserName}}、电话 {{contact.Cellphone}}、地址 {{contact.Address}} 等联系方式。
  • tdk 标签：用于输出当前页面的SEO标题 <title>{% tdk with name="Title" siteName=true %}</title>、关键词和描述。

2. 内容结构与列表

  • categoryList 标签：获取文章或产品的分类列表。你可以指定 moduleId 来获取特定模型下的分类，或 parentId 来获取子分类。例如，获取文章模型下的所有顶级分类： 
    
{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endcategoryList %}
  • archiveList 标签：用于获取文档列表，支持按分类 categoryId、模型 moduleId、推荐属性 flag、排序 order、显示数量 limit 等多种条件筛选。它还可以用来获取相关文档 type="related" 或实现搜索功能 q="关键词"。 
    
{% archiveList articles with categoryId="1" limit="5" order="views desc" %}
    {% for item in articles %}
        <li><a href="{{item.Link}}">{{item.Title}}</a><span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span></li>
    {% endfor %}
{% endarchiveList %}
  • pageList 标签：获取所有单页列表，常用于构建底部导航或侧边栏链接。

3. 详情页数据展示

  • archiveDetail 标签：在文档详情页使用，获取当前文档的ID {{archive.Id}}、标题 {{archive.Title}}、内容 {{archive.Content|safe}}、缩略图 {{archive.Thumb}} 等。|safe 过滤器在这里很重要，它能确保HTML内容被正确解析而不是转义。
  • categoryDetail 标签：获取当前分类的详细信息，如分类标题 {{category.Title}}、描述 {{category.Description}}。
  • pageDetail 标签：获取当前单页的详细内容，如单页标题 {{page.Title}}、内容 {{page.Content|safe}}。

4. 导航与面包屑

  • navList 标签：构建网站的导航菜单，支持多级导航和自定义导航类别。
  • breadcrumb 标签：自动生成当前页面到首页的面包屑导航，提高用户体验和SEO。

5. 分页功能

  • pagination 标签：与 archiveList 配合使用