在日常的网站运营中，我们经常会遇到长篇内容，如教程、产品说明或深度分析文章。这时，为文章添加一个清晰的目录导航（通常位于侧边栏或文章顶部）就显得尤为重要。它不仅能帮助访客快速了解文章结构，直接跳转到感兴趣的部分，还能改善页面的SEO表现，提升用户体验。在安企CMS（AnQiCMS）中，实现这一功能其实比您想象的要简单，这得益于系统提供的一个非常实用的模板标签。

核心功能揭秘：ContentTitles标签的妙用

安企CMS在内容展示方面考虑得非常周到，为我们提供了一个名为ContentTitles的特殊字段。这个字段不是用来显示文章内容的，而是专门用于提取文章内容中所有标题层级（H1到H6）的信息，并以结构化的数据形式提供给我们，非常适合用来动态生成文章目录导航。

当我们使用archiveDetail标签来获取文章详情时，通过指定name="ContentTitles"，系统就会智能地解析文章正文，将所有识别到的标题（包括标题文本、HTML标签、层级和可能的编号前缀）打包成一个数组，供我们在模板中调用。

具体实现步骤

要利用ContentTitles标签构建目录导航，通常可以分为以下几个步骤：

第一步：确保文章内容具有清晰的标题结构

在安企CMS后台编辑文章内容时，无论是使用富文本编辑器设置H1-H6标题（例如通过“设置标题/正文”功能），还是通过Markdown编辑器撰写内容并使用#、##等符号定义标题，系统都会自动识别并保存这些标题的结构信息。这是ContentTitles标签能够正常工作的基础。请确保您的文章内容已按照HTML标题规范（H1-H6）进行了组织。

第二步：在模板中调用ContentTitles获取标题列表

接着，在文章详情页的模板文件（通常是{模型table}/detail.html或您自定义的文档模板）中，我们需要找到合适的位置来插入目录导航。例如，您可能希望它显示在文章正文的侧边栏或者顶部。

在模板中，我们可以这样调用ContentTitles字段：

{% archiveDetail contentTitles with name="ContentTitles" %}
    {# 此处将接收到一个名为 `contentTitles` 的数组变量 #}
    {# 接下来我们将遍历这个数组来构建目录 #}
{% endarchiveDetail %}

这里，我们通过archiveDetail标签获取了当前文章的ContentTitles数据，并将其赋值给了一个名为contentTitles的变量。这个contentTitles变量现在就包含了文章中所有标题的详细信息。

第三步：遍历并构建目录导航

获取到标题数据后，我们只需通过简单的for循环，就能构建出目录导航了。contentTitles数组中的每个元素都是一个对象，它包含以下有用的属性：

  • Title: 标题的实际文本内容。
  • Tag: 标题的HTML标签，例如“H1”、“H2”等。
  • Level: 标题的层级，数字1表示H1，2表示H2，以此类推。
  • Prefix: 如果标题有自动编号，这里会包含编号前缀（例如“1.1”）。

利用这些属性，我们可以创建一个结构化的列表：

{% archiveDetail contentTitles with name="ContentTitles" %}
    {% if contentTitles %} {# 检查是否有标题，避免空目录 #}
        <div class="article-toc">
            <h4>文章目录</h4>
            <ul class="toc-list">
                {% for item in contentTitles %}
                    <li class="toc-item toc-level-{{ item.Level }}">
                        <a href="#{{ item.Title|urlencode|lower|replace:"%20","-" }}" title="{{ item.Title }}">
                            {% if item.Prefix %}{{ item.Prefix }} {% endif %}{{ item.Title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endarchiveDetail %}

在上面的示例中，我们创建了一个简单的无序列表作为目录。通过toc-level-{{ item.Level }}这样的CSS类名，您可以轻松地为不同层级的标题添加不同的缩进样式，让目录结构一目了然。同时，我们为每个目录项生成了一个href属性，通过将item.Title进行URL编码、转小写并替换空格为横线，来创建一个简单的锚点链接。

优化与进阶

为了让您的目录导航功能更加完善，还有一些优化建议可以考虑：

  1. 实现可点击的锚点链接：仅仅生成目录列表还不够，点击目录项后，页面应该平滑滚动到对应的标题位置。这需要在文章的实际标题元素（如<h2>、<h3>等）上添加唯一的id属性，并且这个id要与目录导航中<a>标签的href属性相匹配。您可以通过前端JavaScript在页面加载时动态为标题添加ID，或者在后端渲染内容时，使用类似item.Title|urlencode|lower|replace:"%20","-"的方式生成id。
  2. 样式化目录：利用item.Level属性，您可以灵活地为不同层级的目录项添加CSS样式，例如通过增加左边距来模拟树形结构，提高目录的可读性和美观度。
  3. 条件显示目录：如果文章内容较短，或者标题数量不多，可能不需要显示目录。您可以在模板中使用{% if contentTitles|length > 某个数量 %}来判断标题数量，只在标题足够多时才显示目录。

通过上述步骤和优化，您就能在安企CMS中轻松地为文章内容生成一个功能齐全、美观实用的目录导航，显著提升网站的用户体验和内容价值。

常见问题 (FAQ)

  1. 问：为什么我的文章目录导航没有显示任何内容？ 答：首先，请检查您的文章内容中是否包含了H1到H6的标题标签。如果文章中没有使用任何标题，ContentTitles标签自然无法提取到数据。其次，确认您在模板文件中正确使用了archiveDetail contentTitles with name="ContentTitles"标签，并且循环遍历contentTitles变量的代码也无误。有时，缓存问题也可能导致内容未及时更新，可以尝试清理系统缓存。

  2. 问：如何让目录项点击后页面滚动到对应标题，而不仅仅是跳转到页面顶部？ 答：这需要为文章内容中的实际标题元素（例如<h2>我是标题</h2>）添加一个唯一的id属性。您可以使用与目录项href属性相匹配的ID，例如id="我是标题"（经过URL友好的处理）。在前端，您可以编写JavaScript代码在页面加载时遍历这些标题并为其生成ID，或者在后端渲染文章内容时，确保标题带有可预测的ID。这样，目录中的<a>标签就可以通过href="#对应的ID"来指向页面内的特定标题了。

  3. 问：ContentTitles标签会获取哪些层级的标题？ 答：ContentTitles标签非常智能，它会自动识别并返回文章内容中所有HTML标准标题层级，即从H1到H6的所有标题信息。在item.Level属性中，您会看到对应的数字层级，例如H1对应1，H2对应2，以此类推。