如何在文章详情页显示文章内容的内部标题（H1, H2等）列表？

在安企CMS中，为了提升长篇文章的阅读体验和页面SEO效果，我们通常希望能在文章详情页的侧边或文章内容上方，展示一个内部标题（H1、H2等）的列表，也就是我们常说的文章目录或导航。这不仅方便读者快速跳转到感兴趣的章节，也让搜索引擎更好地理解文章结构。

安企CMS提供了非常便捷的方式来实现这一功能，核心在于其强大的模板标签和内容字段提取能力。

理解安企CMS如何处理文章内容结构

在安企CMS的后台发布或编辑文章时，您可以使用富文本编辑器轻松地设置文章内的标题层级，例如H1、H2、H3等。系统在保存文章内容的同时，也会智能地解析这些结构信息，并将它们作为文章的一个可调用字段储存起来。这个关键的字段就是ContentTitles。

ContentTitles是一个非常实用的字段，它返回一个包含文章内所有标题信息的数组。这个数组中的每个元素都是一个对象，详细记录了标题的文本内容（Title）、标题的HTML标签类型（Tag，如”H1”、”H2”）、标题的层级（Level，数字表示，例如H1是1，H2是2），以及可能的Prefix。有了这些结构化的数据，我们就可以在模板中灵活地构建文章目录。

在文章详情页实现标题列表的步骤

要在文章详情页显示这个内部标题列表，我们主要通过修改文章详情页的模板文件来完成。

第一步：定位文章详情模板文件

安企CMS的模板文件通常存放在/template目录下，并按照模板包名称和模型类型进行组织。对于文章详情页，您需要找到对应文章模型下的detail.html文件。例如，如果您的文章模型表名为archive，那么模板文件路径可能类似于/template/{你的模板目录}/archive/detail.html。如果您采用的是扁平化文件组织模式，则可能是archive_detail.html。请确保您修改的是当前网站正在使用的模板文件。

第二步：获取文章内容的标题数据

在定位到正确的模板文件后，您可以使用archiveDetail标签来获取当前文章的详细信息，包括ContentTitles字段。由于ContentTitles是一个复杂的数据类型（数组），我们需要先将其赋值给一个变量，以便后续进行遍历。

您可以这样在模板中获取ContentTitles：

{% archiveDetail contentTitles with name="ContentTitles" %}

这里，contentTitles就是您定义的变量名，它现在包含了文章所有内部标题的数据。

第三步：编写循环代码以展示标题列表

获取到contentTitles变量后，下一步就是通过for循环遍历这个数组，并根据每个标题的层级（Level或Tag）来构建一个嵌套的列表结构。一个常见的做法是使用<ul>和<li>标签来创建一个无序列表，并通过CSS样式来体现层级感。

以下是一个实现标题列表的基本模板代码示例：

{# 假设我们把这个目录放在文章内容之前或者侧边栏 #}
<div class="article-toc">
    <h3>文章目录</h3>
    <ul class="toc-list">
    {% for item in contentTitles %}
        {# 根据标题层级添加不同的类名，方便CSS控制样式和缩进 #}
        <li class="toc-item toc-level-{{ item.Level }}">
            <a href="#{{ item.Tag | lower }}-{{ loop.index }}">
                {{ item.Prefix }}{{ item.Title }}
            </a>
        </li>
    {% endfor %}
    </ul>
</div>
{# 这里是文章内容的显示部分，通常是这样调用的： #}
<div>
    {%- archiveDetail articleContent with name="Content" %}
    {{articleContent|safe}}
</div>

一点说明： 上面的<a>标签中的href="#{{ item.Tag | lower }}-{{ loop.index }}"是为了让目录项能够点击跳转。这意味着您需要在文章内容的H标签中，手动或通过其他方式（例如JavaScript或自定义内容过滤器）为每个H标签添加一个唯一的id属性，使其与目录中的href值对应。例如，如果文章中有一个<h2>小节标题</h2>，那么您需要确保它被渲染为<h2 id="h2-1">小节标题</h2>，这样点击目录中的对应链接才能跳转到正确位置。loop.index是Pongo2模板引擎中for循环的内置变量，表示当前循环的索引（从1开始）。

第四步：样式美化与交互增强

仅仅有HTML结构是不够的，您还需要通过CSS来美化这个标题列表，使其符合网站的整体风格。例如，您可以为不同toc-level-X的类名设置不同的缩进，让目录看起来更有层次感。

/* 示例CSS样式 */
.article-toc {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}
.article-toc h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
}
.toc-list {
    list-style: none;
    padding-left: 0;
}
.toc-item {
    margin-bottom: 5px;
}
.toc-item a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 3px 0;
}
.toc-item a:hover {
    color: #007bff;
}
/* 不同层级的缩进 */
.toc-level-1 { padding-left: 0; }
.toc-level-2 { padding-left: 15px; }
.toc-level-3 { padding-left: 30px; }
.toc-level-4 { padding-left: 45px; }
/* ...更多层级 */

为了实现点击跳转，更高效的方案是使用JavaScript。在文章内容渲染后，通过JS遍历archive.Content中的所有H标签，为它们动态添加id，并更新目录中<a>标签的href，实现平滑滚动效果。这样可以避免手动添加ID的繁琐，且更具通用性。

实际应用与效益

通过以上步骤，您就能够在安企CMS的文章详情页中，动态地展示一个清晰、可导航的内部标题列表。这不仅显著提升了用户在浏览长篇文章时的体验，帮助他们快速定位信息，减少跳出率，也为搜索引擎提供了更明确的页面结构信号，有利于页面内容的抓取和排名，从而间接优化了SEO表现。

常见问题 (FAQ)

1. 为什么我在模板中添加了代码，但前台页面没有显示标题列表？

有几个可能的原因。首先，请检查您是否将代码添加到了正确的文章详情模板文件（例如archive/detail.html）中。其次，您发布的文章内容是否确实包含了H1、H2等内部标题。如果文章内容没有这些标题，ContentTitles字段将是空的，自然不会显示目录。最后，安企CMS有缓存机制，修改模板文件后，可能需要您在后台的“更新缓存”功能中清理一下系统缓存，才能使更改生效。

2. 如何让生成的标题列表可以点击跳转到文章内容对应的位置？

ContentTitles字段本身只提供了标题的文本和层级信息，而不会自动在文章内容的HTML标签中添加id。要实现点击跳转，您需要在前端通过JavaScript动态地为文章内容中的H标签添加唯一的id属性，并确保目录中的<a>标签的href属性与这些id匹配。一个常见的方法是：在页面加载完成后，使用JavaScript遍历archive.Content渲染出的所有H标签（例如document.querySelectorAll('h1, h2, h3, h4, h5, h6')），为它们生成并设置唯一的id，同时更新目录中对应<a>标签的href。

3. ContentTitles字段是否可以获取到文章中所有H标签，例如H1到H6？

是的，ContentTitles字段可以获取到文章内容编辑器中所有层级的H标签（H1到H6）所对应的标题信息。系统会根据您在编辑器中设置的标题层级，在ContentTitles数组的每个对象中准确地反映出Tag（例如”H1”、”H2”）和Level（例如1、2）属性。这意味着无论您使用了多少层级的