如何使用AnQiCMS自定义文章详情页面的显示布局？

AnQiCMS 提供了一套非常灵活且强大的内容管理机制，让我们可以轻松地对文章详情页面的显示布局进行个性化定制。无论是为了提升用户体验、优化SEO，还是为了更好地展现品牌特色，AnQiCMS都能通过其直观的模板系统和丰富的标签功能，帮助我们实现这些目标。

那么，具体该如何操作呢？我们可以从以下几个方面逐步深入。

1. 理解AnQiCMS的模板机制

首先，我们需要了解AnQiCMS是如何识别并渲染文章详情页面的。所有的模板文件都存放在 /template 目录下，并且静态资源（如CSS、JS、图片）则位于 /public/static/ 目录。AnQiCMS采用了类似Django模板引擎的语法，使用双花括号 {{变量}} 来输出变量，使用单花括号和百分号 {% 标签 %} 来处理条件判断、循环控制等逻辑。

AnQiCMS在渲染文章详情页时，会按照一定的优先级寻找模板文件：

• 默认文章详情模板： 所有的文章详情页通常会使用 /template/{你的模板目录}/{模型table}/detail.html 作为默认模板。例如，如果你使用的是“文章模型”，默认模板路径就是 article/detail.html。
• 针对特定文章ID的定制： 如果你需要为某一篇特殊的文章（例如ID为10的文章）设计一个独有的布局，可以创建一个名为 article/detail-10.html 的模板文件。系统会优先使用这个更具体的模板。
• 通过后台设置进行定制： AnQiCMS提供了更为灵活的方式。在发布或编辑文章时，你可以在“其他参数”中找到“文档模板”字段。在这里，你可以直接填写一个自定义的模板文件名（例如 my_special_article.html）。系统就会在 /template/{你的模板目录}/ 目录下寻找并使用这个文件。
• 通过分类设置进行定制： 更进一步，你还可以为某个分类下的所有文章指定一个统一的详情页模板。在“文档分类”的管理界面中，编辑分类时，在“其他参数”中可以设置“文档模板”，甚至可以选择“是否应用到子分类”。这样，该分类及子分类下的所有文章，都会按照这个模板来显示。

这些灵活的模板指定方式，为我们定制文章详情页提供了极大的自由度。

2. 后台配置：构建内容和数据

在开始编写模板代码之前，很重要的一步是在AnQiCMS后台准备好我们所需的内容结构和数据。

• 灵活的内容模型： AnQiCMS的核心亮点之一就是“灵活的内容模型”。除了系统默认的文章和产品模型外，我们可以根据业务需求自定义新的内容模型，并为每个模型添加专属的“自定义字段”。例如，如果我们在文章模型中添加了“文章作者”、“文章来源”等字段，那么这些字段的数据就可以在文章详情页进行调用和展示，极大地丰富了内容维度。
• 发布文档时填充内容： 在“添加文档”或编辑现有文档时，我们需要充分利用这些字段。例如，除了常规的文章标题、简介、内容外，我们还可以上传缩略图、设置相关的Tag标签、填写自定义URL，并尤其要注意前面提到的“文档模板”字段，在这里选择或填写你为当前文章准备的定制模板路径。
• 分类管理中的文档模板设置： 如前所述，如果想让某个分类下的所有文章都采用特定的详情页布局，可以在“文档分类”中编辑该分类，然后在“其他参数”里指定“文档模板”，并选择是否应用于子分类。这对于保持特定内容区块（如新闻、案例、博客等）的统一风格非常有效。

3. 前端模板编写：实现精美布局

一旦后台数据和模板路径准备就绪，我们就可以着手编写前端模板代码了。AnQiCMS的模板系统基于Go语言的强大能力，并且易于学习。

• 模板的结构化：继承与包含 通常，一个网站会有公共的头部、底部和侧边栏。我们可以利用 extends 和 include 标签来构建模块化的模板：

  • {% extends 'base.html' %}：在 base.html 中定义网站的基本骨架（如HTML结构、引入CSS/JS、公共页眉页脚），并通过 {% block content %} 等标签定义可重写区域。文章详情页模板可以继承 base.html，只关注 content 部分的布局。
  • {% include 'partial/header.html' %}：对于一些小的可复用代码片段（如导航栏、联系方式信息），可以使用 include 标签引入，保持代码整洁。

• 调用文章核心内容 在文章详情页模板中，最核心的是如何获取并展示当前文章的数据。archiveDetail 标签是我们的主要工具： “`twig

  <h1>{% archiveDetail with name="Title" %}</h1> {# 显示文章标题 #}
  <div class="article-meta">
      <span class="category">分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
      <span class="pub-date">发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
      <span class="views">阅读量：{% archiveDetail with name="Views" %}</span>
      <div class="tags">
          {% tagList tags with itemId=archive.Id limit="10" %} {# 调用当前文章的标签 #}
          {% for item in tags %}
              <a href="{{item.Link}}">{{item.Title}}</a>
          {% endfor %}
          {% endtagList %}
      </div>
  </div>
  <div class="article-content">
      {%- archiveDetail articleContent with name="Content" %}
      {{ articleContent|safe }} {# 输出文章内容，|safe 确保HTML标签被正确解析 #}
  </div>
  {# 如果文章内容是Markdown格式，且需要在前端渲染，可以使用render过滤器 #}
  {# {{- archiveDetail articleMarkdownContent with name="Content" render=true %}}
     {{ articleMarkdownContent|safe