安企CMS如何显示文章内容的目录或标题结构？

在内容丰富的网站上，为长篇文章提供清晰的目录或标题结构，不仅能极大提升用户的阅读体验，还能帮助搜索引擎更好地理解页面内容层级，从而对SEO表现产生积极影响。安企CMS深谙此道，并提供了灵活且强大的功能来轻松实现这一需求。

理解安企CMS的文章内容结构

在安企CMS中，文章内容的目录或标题结构并非简单地从文本中截取，而是通过其内置的模板标签archiveDetail配合特定的字段ContentTitles来实现。ContentTitles字段能够智能地解析文章内容中使用的标题标签（如<h1>、<h2>等HTML标签，或Markdown语法中的#、##等），并将这些标题信息抽取出来，形成一个结构化的数据数组，供前端模板调用。

这个数组中的每一个元素都包含了标题的文本、原始的HTML标签类型（例如h1、h2）、标题的层级（Level）以及可选的前缀（Prefix）。这意味着您不仅能获取到标题本身，还能了解到它在文章结构中的重要性，从而构建出清晰、多层级的文章目录。

如何启用和获取文章标题结构

要充分利用ContentTitles功能，首先建议您在安企CMS后台的“全局设置”->“内容设置”中启用Markdown编辑器。Markdown语法以其简洁高效的方式来定义标题（如# 一级标题、## 二级标题），这使得系统能够更准确地解析出文章的标题结构。当然，即使您在编辑器中直接使用HTML的<h1>到<h6>标签来定义标题，ContentTitles也能正常工作。

在您的文章详情模板文件（通常是{模型table}/detail.html）中，您可以通过以下方式来获取并遍历ContentTitles数据，进而生成文章目录：

{# 假设您已在文章详情页，archive代表当前文章对象 #}
<div class="article-toc">
    <h3>文章目录</h3>
    <ul id="toc-list">
        {%- archiveDetail contentTitles with name="ContentTitles" %}
        {%- for item in contentTitles %}
            <li class="toc-level-{{ item.Level }}">
                <a href="#{{ item.Title|urlencode }}">{{ item.Prefix }} {{ item.Title }}</a>
            </li>
        {%- endfor %}
        {%- endarchiveDetail %}
    </ul>
</div>

{# 确保文章内容正确渲染，尤其是在使用Markdown时 #}
<div class="article-content">
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

在上面的代码示例中，{%- archiveDetail contentTitles with name="ContentTitles" %}这行代码将文章的标题结构数据赋值给contentTitles变量。随后，我们通过{%- for item in contentTitles %}循环遍历这个数组。在循环内部，item.Level可以帮助您为不同层级的标题添加不同的CSS样式（例如toc-level-1、toc-level-2），从而在视觉上区分标题层级。item.Title|urlencode则将标题文本转换为URL安全的字符串，作为目录链接的锚点，这样点击目录项就能平滑跳转到文章内容的对应标题位置。

同时，文章内容的显示使用了{%- archiveDetail articleContent with name="Content" render=true %}和{{ articleContent|safe }}。render=true参数确保了如果内容是Markdown格式，它会被正确地转换为HTML。|safe过滤器则告诉模板引擎这段内容是安全的HTML，不需要进行额外转义，这对于显示富文本内容至关重要。

样式与交互优化

虽然安企CMS提供了标题结构的数据，但目录的最终呈现样式和交互效果（如平滑滚动、当前章节高亮等）仍需通过前端的CSS和JavaScript来实现。您可以为目录容器、列表项和链接定义相应的CSS样式，使其与您的网站设计风格保持一致。对于平滑滚动，可以为目录链接的<a>标签添加JavaScript事件，或者利用现代浏览器支持的CSS scroll-behavior: smooth; 属性。

通过这种方式，安企CMS将内容结构化的复杂性抽象化，让内容创作者专注于内容本身，而开发者则可以灵活地设计和实现个性化的目录展示效果，共同为用户提供卓越的阅读体验。

常见问题 (FAQ)

1. 如果我没有使用Markdown编辑器，ContentTitles还会生效吗？

是的，ContentTitles字段依然会生效。它能够解析文章内容中所有标准的HTML标题标签（<h1>、<h2>、<h3>等）。只要您在编辑文章时使用了这些HTML标题标签来划分内容结构，ContentTitles就能正确地提取这些标题信息。启用Markdown编辑器只是为了让内容创作者更便捷地输入结构化内容。

2. 如何让生成的目录点击后平滑滚动到对应内容？

实现平滑滚动通常需要前端代码的配合。在目录的链接（<a>标签）中，href属性应指向文章内容中对应标题的ID。例如，如果目录项是“第一章”，其链接可能为<a href="#chapter1">第一章</a>。那么，在文章内容中，“第一章”的标题应有一个id="chapter1"的属性。 在此基础上，您可以通过CSS添加html { scroll-behavior: smooth; }来实现全局平滑滚动。如果需要更复杂的交互或兼容性，可以使用JavaScript库（如jQuery的.animate()方法）或原生JavaScript的element.scrollIntoView({ behavior: 'smooth' })方法。

3. ContentTitles可以获取所有内容的标题吗，包括非文章类型的？

ContentTitles字段是archiveDetail标签的一个属性，主要用于获取“文档”类型（包括文章、产品等自定义模型下的文档）的详情数据。因此，它主要针对通过内容管理发布的结构化文档。对于安企CMS中的“单页面”内容，如果它们具有标题结构，可能需要通过类似的方式，检查单页面详情标签（pageDetail）是否也提供了类似的字段，或者直接解析其Content字段来提取标题。通常情况下，ContentTitles是为“文章”这类层级较多的内容设计的。