单页面内容的标题(`ContentTitles`)如何通过模板标签获取并循环展示?

作为一名资深的安企CMS网站运营人员,我深知内容组织和用户体验对于吸引和保留用户的重要性。在处理长篇文章或复杂内容时,能够清晰地展示内容的结构,比如通过一个动态生成的目录,对于提升用户阅读效率和网站的SEO表现都至关重要。安企CMS为此提供了非常便捷的模板标签来帮助我们实现这一目标。

在安企CMS中如何使用模板标签循环展示文章内容的标题列表(ContentTitles)

在安企CMS中,文章内容的标题列表 (ContentTitles) 是一项非常实用的功能,它允许我们自动提取文章正文(Content 字段)中的各级标题(通常是 H1-H6 标签),并将其组织成一个可供模板循环展示的结构化数组。这对于自动生成文章目录、内容概览或者优化页面内导航具有极大价值。

要获取并循环展示 ContentTitles,我们主要依赖 archiveDetail 模板标签。这个标签通常用于获取当前文章或指定文章的详细信息,而 ContentTitles 便是其返回数据中的一个特殊字段。

首先,我们需要在文章详情页面的模板中,使用 archiveDetail 标签来获取 ContentTitles 字段。这个标签可以指定一个变量名来承载获取到的数据,例如我们可以将其命名为 contentTitles

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

在这段代码中,with name="ContentTitles" 明确指示了我们想要从当前文章详情中提取的是标题列表数据。如果需要获取特定ID的文章的标题列表,可以添加 id="文章ID" 参数。

一旦 contentTitles 变量被成功赋值,它将包含一个数组。这个数组的每一个元素都代表着文章中的一个标题,并且每个元素都是一个对象,包含以下有用的属性:

  • Title:标题的文本内容。
  • Tag:标题所使用的 HTML 标签(例如 “H1”, “H2”, “H3” 等)。
  • Level:标题的层级(数字,H1 通常为 1,H2 为 2,以此类推)。
  • Prefix:系统可能为标题自动生成的前缀,例如序号。

为了将这些标题展示出来,我们可以使用 for 循环标签来遍历 contentTitles 数组。在循环内部,我们可以根据 TitleTagLevelPrefix 等属性来构建我们想要的展示效果,例如生成一个带有层级结构的目录。

以下是一个详细的代码示例,演示了如何获取 ContentTitles 并循环展示:

<div class="article-toc">
    <h3>文章目录</h3>
    {% archiveDetail contentTitles with name="ContentTitles" %}
        {% if contentTitles %} {# 检查是否有标题存在 #}
            <ul class="toc-list">
            {% for item in contentTitles %}
                {# 根据标题层级添加不同的类或样式 #}
                <li class="toc-item toc-level-{{ item.Level }}">
                    <a href="#{{ item.Title|urlencode }}"> {# 生成锚点链接,这里需要对标题进行url编码 #}
                        <span class="toc-prefix">{{ item.Prefix }}</span>
                        <span class="toc-title">{{ item.Title }}</span>
                    </a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <p>本文暂无目录</p>
        {% endif %}
    {% endarchiveDetail %}
</div>

在这个示例中,我们首先使用 {% archiveDetail contentTitles with name="ContentTitles" %} 将文章的标题列表赋值给 contentTitles 变量。然后,通过 {% for item in contentTitles %} 循环遍历这个数组。在每次循环中,item 变量就代表了一个标题对象,我们可以通过 item.Titleitem.Level 等来访问其属性。我们甚至可以使用 item.Level 来动态调整目录项的样式,例如通过添加 toc-level-{{ item.Level }} 这样的CSS类来表示不同的层级,从而构建一个清晰、易读的文章目录。

通过这种方式,安企CMS的内容运营者可以非常灵活地控制文章内容的展示结构,不仅提升了用户在长篇文章中的阅读体验,也有助于搜索引擎更好地理解页面内容结构,从而潜在地提升网站的SEO表现。


常见问题 (FAQ)

Q1: ContentTitles 是如何从文章内容中提取标题的? A1: ContentTitles 标签会自动解析文章正文 (Content 字段) 中的 HTML 结构,识别标准的 HTML 标题标签(如 <h1><h2><h3><h4><h5><h6>)。系统会根据这些标签的文本内容、标签类型和层级来构建 ContentTitles 数组。因此,确保您的文章内容使用正确的标题标签格式,是 ContentTitles 能够正常工作的基础。

Q2: 我能否控制 ContentTitles 提取特定层级的标题,例如只提取 H2H3 A2: 根据当前的模板标签设计,archiveDetail 标签在获取 ContentTitles 时,会默认提取 Content 字段中所有的各级标题(H1-H6)。您无法通过 ContentTitles 标签的参数直接筛选特定的标题层级。但是,您可以在模板的 for 循环内部添加条件判断 ({% if item.Level == 2 or item.Level == 3 %}) 来选择性地展示或处理特定层级的标题。

Q3: 如果文章内容中没有标题标签,ContentTitles 会返回什么? A3: 如果文章内容(Content 字段)中不包含任何 HTML 标题标签(<h1><h6>),那么 ContentTitles 将会返回一个空的数组。在模板中,您可以使用 {% if contentTitles %} 这样的条件判断来检测数组是否为空,从而决定是否显示目录或给出相应的提示,例如“本文暂无目录”。