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

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

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

这个数组中的每一个元素都包含了标题的文本、原始的HTML标签类型(例如h1h2)、标题的层级(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-1toc-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是为“文章”这类层级较多的内容设计的。