AnQiCMS如何在文章详情页显示文章内容的目录结构或大纲？
对于那些内容丰富、篇幅较长的文章来说，一个清晰的目录结构或大纲就像一张导航图，能够极大地提升读者的阅读体验。它不仅帮助读者快速掌握文章脉络，还能让他们精准跳转到感兴趣的部分，从而提高内容的可读性和实用性。在 AnQiCMS 中，实现文章详情页的内容目录展示并非难事，系统内置的功能为我们提供了简洁高效的解决方案。
AnQiCMS 如何理解文章结构？
AnQiCMS 在设计之初就考虑到了内容管理的灵活性和对搜索引擎的友好性。当您在编辑器中创作文章时，无论是使用富文本编辑器设置 H1、H2、H3 等标题，还是通过 Markdown 编辑器撰写带有 #, ##, ### 标记的层级标题，AnQiCMS 都会智能地解析这些结构。
系统不会仅仅将内容视为一大段文本，而是能识别出其中的层次和逻辑。这种智能识别能力，正是我们在文章详情页生成目录的基础。AnQiCMS 内部会处理文章内容，提取出所有的标题信息，并将它们整理成一个结构化的数据列表，供模板调用。
通过 ContentTitles 标签获取目录数据
要在文章详情页显示目录，我们需要在相应的模板文件中（通常是 archive/detail.html 或自定义的文章详情模板）利用 AnQiCMS 提供的模板标签来获取这些结构化数据。这里的关键在于 archiveDetail 标签及其一个特殊的字段：ContentTitles。
ContentTitles 字段专门用于返回文章内容中所有识别到的标题列表。它并不是直接的 HTML 结构，而是一个包含多个对象的数组，每个对象都代表一个标题，并提供了该标题的以下信息：
Title: 标题的文本内容。Tag: 标题的 HTML 标签（例如h1,h2,h3），可以帮助我们判断标题的层级。Level: 标题的数字层级（例如 H1 对应1，H2 对应2），这对于目录的缩进和样式控制非常有用。Prefix: 标题前可能存在的编号或符号（如果编辑器有生成）。
有了这些数据，我们就可以灵活地构建文章目录了。
逐步构建目录显示
接下来，我们来看看如何在文章详情模板中，利用 ContentTitles 来实际生成一个可交互的目录。
1. 定位模板文件
首先，您需要进入 AnQiCMS 的后台，在“模板设计”部分找到当前使用的模板，并定位到负责文章详情页显示的模板文件。根据模板设计规范，这通常是 template/您的模板目录/{模型table}/detail.html 或者在自定义模板设置中指定的具体文件。
2. 获取目录数据
在模板文件的适当位置（例如，文章内容侧边栏或者文章内容上方），使用 archiveDetail 标签获取 ContentTitles 数据。建议使用 if 标签进行判断，确保只有当文章内容中存在标题时才显示目录。
{%- archiveDetail contentTitles with name="ContentTitles" %}
{% if contentTitles %}
<div class="article-outline">
<h3>文章目录</h3>
<ul>
{% for item in contentTitles %}
{# 生成唯一的锚点ID，通常基于标题内容进行简化，这里仅作简单示例 #}
{% set anchorId = 'heading-' ~ forloop.Counter ~ '-' ~ item.Title|replace(" ", "-")|lower %}
<li style="margin-left: {{ (item.Level - 1) * 20 }}px;">
<a href="#{{ anchorId }}">{{ item.Prefix }}{{ item.Title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
在这段代码中：
- 我们首先通过
{%- archiveDetail contentTitles with name="ContentTitles" %}获取了目录数据并赋值给contentTitles变量。 {% if contentTitles %}判断确保只有当文章存在标题时才渲染目录结构。{% for item in contentTitles %}循环遍历每一个标题。{% set anchorId = 'heading-' ~ forloop.Counter ~ '-' ~ item.Title|replace(" ", "-")|lower %}这行代码尝试为每个标题生成一个唯一的 ID。由于 AnQiCMS 的过滤器中没有直接的slugify功能，这里我们使用forloop.Counter来确保唯一性，并用replace简单地将空格替换为连字符并转换为小写，作为一个基本的锚点 ID 生成示例。在实际应用中，您可能需要更健壮的 JavaScript 代码来生成 HTML 标题的 ID，并保持与目录链接的一致性。margin-left: {{ (item.Level - 1) * 20 }}px;巧妙地利用item.Level来实现目录的层级缩进，例如 H2 标题会比 H1 标题多缩进 20 像素。<a href="#{{ anchorId }}">{{ item.Prefix }}{{ item.Title }}</a>创建了目录项，链接到文章内容中对应标题的锚点。
3. 确保文章内容标题拥有对应的锚点 ID
为了让上述目录链接能够正确跳转，文章内容中的实际 HTML