文章内容的自动提取标题 (`ContentTitles`) 功能如何在前台页面生成目录导航？

在安企CMS中，为了帮助读者更好地理解长篇文章的结构，提供一个清晰的目录导航是提升用户体验的关键。安企CMS的文章内容自动提取标题（ContentTitles）功能，正是为此而生。它能够智能地识别文章内容中的各级标题，并将这些结构化的信息提供给前端模板，从而让我们可以轻松地构建一个动态且实用的目录导航。

理解ContentTitles功能

ContentTitles是archiveDetail标签提供的一个强大属性。当我们在文章详情页使用archiveDetail标签来获取当前文章内容时，它不仅会返回文章的主体内容、标题、描述等信息，还会特别提供一个名为ContentTitles的字段。这个字段包含了文章中所有被识别为标题的文本及其对应的层级信息。

具体来说，ContentTitles会返回一个数组（或列表），数组中的每个元素都是一个包含以下信息的对象：

• Title: 标题的文本内容。
• Tag: 标题的HTML标签类型，例如 “H1”, “H2”, “H3” 等。
• Level: 标题的层级，例如 1 代表 H1，2 代表 H2，以此类推。这对于构建嵌套式目录至关重要。
• Prefix: 如果标题有前缀（如自动编号），会包含在此。

通过这些结构化的数据，我们就可以精确地知道文章中有哪些标题，以及它们的层级关系，为生成目录导航提供了坚实的基础。

为什么文章目录导航如此重要？

文章目录导航不仅仅是一个美观的元素，它在内容运营中扮演着多重角色：

• 提升用户体验： 读者可以一目了然地看到文章大纲，快速跳转到感兴趣的章节，尤其对于长篇内容，这大大减少了滚动查找的麻烦。
• 优化SEO： 搜索引擎更喜欢结构清晰、易于抓取的内容。目录导航能帮助搜索引擎更好地理解文章主题和结构，有助于提升内容的排名。
• 增加页面停留时间： 方便的导航让用户更容易沉浸在内容中，减少跳出率。
• 辅助内容创作： 提醒作者在撰写文章时注意标题层级和逻辑，从而产出更优质的内容。

在前台页面生成目录导航的步骤

要利用ContentTitles功能在前台生成目录导航，主要涉及以下几个步骤：

1. 在文章详情模板中获取ContentTitles数据： 首先，我们需要在文章详情页的模板文件（通常是{模型table}/detail.html）中，使用archiveDetail标签来获取文章的标题列表。

   {% archiveDetail contentTitles with name="ContentTitles" %}
       {# contentTitles 变量现在包含了文章中所有标题的结构化数据 #}
   {% endarchiveDetail %}
   

   这里，我们把提取到的标题数据赋值给了contentTitles这个变量。

2. 判断ContentTitles是否为空并开始构建目录结构： 在获取到contentTitles变量后，我们通常会先检查它是否包含任何标题。如果文章中没有检测到标题（例如，只使用了纯文本），那么目录导航就不需要显示。如果存在标题，我们就可以开始用HTML的<ul>和<li>标签来构建目录的列表结构。

   {% archiveDetail contentTitles with name="ContentTitles" %}
       {% if contentTitles %}
       <nav class="article-toc">
           <h4>文章目录</h4>
           <ul class="toc-list">
               {# 在这里循环生成目录项 #}
           </ul>
       </nav>
       {% endif %}
   {% endarchiveDetail %}
   

3. 遍历标题数据并创建可点击的目录项： 接下来，我们需要使用for循环来遍历contentTitles中的每一个标题对象，并为每个标题生成一个列表项。同时，为了实现点击目录项后页面能平滑跳转到对应标题位置，我们需要为每个目录项创建一个锚点链接（<a>标签），并指向文章内容中相应标题的id属性。

   一个常见的做法是，在文章的富文本编辑器中，当我们插入H1、H2等标题时，编辑器会自动为这些标题生成一个唯一的id属性（例如，id="section-introduction"）。如果您的编辑器没有这个功能，您可能需要手动确保文章内容中的HTML标题（例如<h2 id="section-introduction">引言</h2>）具有唯一的id。

   在生成目录项时，我们可以根据item.Title（标题文本）和item.Level（标题层级）来动态生成一个id。例如，可以这样构建：toc- + 标题文本 + - + 层级，并对标题文本进行一些处理（如替换空格为短划线、转为小写），使其成为URL友好的格式。

   {% archiveDetail contentTitles with name="ContentTitles" %}
       {% if contentTitles %}
       <nav class="article-toc">
           <h4>文章目录</h4>
           <ul class="toc-list">
               {% for item in contentTitles %}
                   {# 生成一个URL友好的唯一ID，例如：'toc-文章导读-1' #}
                   {# 注意：您需要确保文章内容中的对应标题元素也有相同的ID属性，才能实现点击跳转 #}
                   {% set sectionId = 'toc-' ~ item.Title|replace:" ","-"|lower ~ '-' ~ item.Level %}
                   <li class="toc-item level-{{item.Level}}">
                       <a href="#{{ sectionId }}">{{item.Prefix}} {{item.Title}}</a>
                   </li>
               {% endfor %}
           </ul>
       </nav>
       {% endif %}
   {% endarchiveDetail %}
   

   这里使用了replace:" ","-"|lower过滤器来将标题中的空格替换为短划线并转换为小写，以生成一个更规范的HTML ID。~符号用于连接字符串。

4. 添加样式和交互（可选但推荐）： 完成HTML结构后，您可以通过CSS为目录导航添加样式，使其视觉上更具吸引力。例如，根据level-X类名对不同层级的标题进行缩进。您还可以选择使用JavaScript库或自定义脚本来实现一些高级交互功能，如：

   • 平滑滚动： 点击目录项时，页面平滑滚动到对应标题。
   • 高亮当前阅读章节： 当用户滚动页面时，目录中对应的标题项会被高亮显示，指示当前阅读位置。
   • 目录收缩/展开： 为长目录提供一个收缩/展开按钮，保持页面的整洁。

完整的代码示例（仅HTML/Twig部分）：

”`twig {# 假设这是您的文章