AnQiCMS 模板中如何动态显示当前页面的文档标题?

在安企CMS的模板设计中,动态地显示当前页面的文档标题是一项基础而重要的功能。它不仅关乎用户在浏览网站时的直观感受,也是搜索引擎优化(SEO)策略中不可或缺的一环。安企CMS提供了简洁高效的方式来实现这一需求,让我们一起来探索如何在模板中灵活运用。

理解安企CMS的模板上下文

在安企CMS的模板渲染机制中,系统会智能地为每个页面提供当前页面的相关数据上下文。这意味着当您访问一个文档详情页时,该文档的所有信息(包括标题、内容、分类等)都会被封装在一个特定的变量中,可以直接在模板中使用。

最直接的文档标题获取方式

对于文档详情页,安企CMS通常会将当前文档的所有数据映射到一个名为 archive 的模板变量上。因此,要动态显示当前文档的标题,最直接也最常用的方法就是在模板中直接使用 {{ archive.Title }}

例如,如果您想在文档内容的上方显示一个大的标题(通常是 <h1> 标签),您可以这样写:

<h1>{{ archive.Title }}</h1>

这里的 archive 代表当前页面的文档对象,Title 则是该文档对象的标题字段。这种方式简洁明了,是处理当前页面文档标题的首选。

使用 archiveDetail 标签获取文档标题

除了直接访问上下文变量 archive,安企CMS还提供了功能强大的 archiveDetail 标签,用于获取文档的详细信息。虽然 {{ archive.Title }} 已经非常方便,但在某些场景下,例如您需要更精细的控制,或者要获取并非当前页面的特定文档标题时,archiveDetail 标签就显得尤为有用。

获取当前页面文档标题:

当您在文档详情页使用 archiveDetail 标签时,如果省略 idtoken 参数,它会默认获取当前页面的文档信息。要获取标题,可以指定 name="Title"

<p>当前文档标题:{% archiveDetail with name="Title" %}</p>

获取指定文档的标题:

如果您需要在其他类型的页面(如首页、分类列表页)中显示某个特定文档的标题,可以通过 idtoken 参数来指定文档:

<p>ID为1的文档标题:{% archiveDetail with name="Title" id="1" %}</p>

当然,您也可以将获取到的标题赋值给一个自定义变量,以便在模板中多次使用或进行进一步处理:

{% archiveDetail myDocTitle with name="Title" %}
<p>我的自定义标题变量:{{ myDocTitle }}</p>

<title> 标签中使用 tdk 标签优化页面标题

页面的 <title> 标签是搜索引擎和用户了解页面主题的第一扇窗。安企CMS为此提供了 tdk 标签,它不仅能动态获取当前页面的标题,还能灵活地拼接网站名称和自定义分隔符,以达到更好的SEO效果和用户体验。

通常,您会在模板的 <head> 部分使用 tdk 标签来构建完整的页面标题:

<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
    <!-- 其他 meta 标签或 CSS 链接 -->
</head>

这里:

  • name="Title" 指示 tdk 标签获取当前页面的文档标题。
  • siteName=true 会在文档标题后面自动追加网站的名称(在后台系统设置中配置)。
  • sep=" - " 则定义了文档标题与网站名称之间的分隔符,您可以根据需要设置为其他字符,如 _|

通过 tdk 标签,您可以确保每个页面的 <title> 都包含了核心的文档标题,同时兼顾了品牌识别度和SEO需求。如果当前文档设置了“SEO标题”,tdk 标签会优先使用该自定义的SEO标题,从而提供更强大的SEO优化能力。

综合运用:在页面中正确显示文档标题

在实际的网站设计中,我们通常会将这些方法结合使用,以确保页面标题在不同位置都能得到恰当的展示。

一个典型的页面结构可能如下所示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
    <!-- 网站顶部导航和Logo等内容 -->
    <header>
        <a href="{% system with name="BaseUrl" %}">
            <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
        </a>
        <!-- 其他导航链接 -->
    </header>

    <main>
        <section class="document-detail">
            <!-- 当前页面的文档大标题 -->
            <h1>{{ archive.Title }}</h1>
            <!-- 文档的其他元信息,如发布时间、分类等 -->
            <div class="meta-info">
                <span>发布于:{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
                <span>分类:<a href="{% categoryDetail with name="Link" id=archive.CategoryId %}">{% categoryDetail with name="Title" id=archive.CategoryId %}</a></span>
            </div>
            <!-- 文档内容,通常需要 |safe 过滤器以防止HTML被转义 -->
            <div class="content">
                {{ archive.Content|safe }}
            </div>
        </section>
    </main>

    <!-- 网站底部信息 -->
    <footer>
        <p>{% system with name="SiteCopyright" %}</p>
        <a href="https://beian.miit.gov.cn/" target="_blank">{% system with name="SiteIcp" %}</a>
    </footer>
</body>
</html>

在这个示例中,我们使用 tdk 标签为整个HTML文档的 <title> 元素动态生成标题,同时在页面内容区通过 {{ archive.Title }} 来显示文档的H1大标题。这种做法既满足了SEO的要求,也为用户提供了清晰的页面结构。

通过上述方法,您可以轻松地在安企CMS模板中动态显示当前页面的文档标题,从而构建出更具吸引力和SEO友好的网站。安企CMS的强大与灵活,正体现在这些看似细微却至关重要的功能实现上。


常见问题 (FAQ)

1. 为什么在某个页面使用 {{ archive.Title }} 却不显示任何内容?

答: 这通常是因为您访问的页面并非文档详情页,或者当前页面上下文没有将文档信息映射到 archive 变量上。archive 变量主要在文档详情页(如文章、产品详情页)中可用。如果在其他类型的页面(如首页、分类列表页、单页面)尝试直接使用 {{ archive.Title }},它可能为空。在这些页面上,您可能需要使用 archiveList 标签循环获取文档列表,或者使用 pageDetailcategoryDetail 标签获取页面或分类的标题。

2. 我想让页面上的 H1 标题与浏览器标签页显示的标题(<title>)不同,安企CMS能实现吗?

答: 是的,这完全可以实现。浏览器标签页显示的标题(<title>)通常由 tdk 标签生成,它可以选择性地使用文档的“SEO标题”(若有设置)或常规标题,并拼接网站名称。而页面内容中的 H1 标题则可以直接使用 {{ archive.Title }} 来显示文档的原始标题,或者如果您在后台“发布文档”时设置了“SEO标题”,并且希望 H1 也使用这个SEO标题,那么在文档详情页, {{ archive.SeoTitle }} 也可以获取到。通过这种方式,您可以为SEO和用户体验分别优化标题展示。

3. 除了文档标题,我还能通过 archive 变量获取到文档的哪些信息?

答: archive 变量是一个包含了当前文档所有信息的对象。除了 Title(标题),您还可以获取到许多其他有用的字段,例如:archive.Content(文档内容)、archive.Description(文档简介)、archive.Keywords(关键词)、archive.CreatedTime(发布时间)、archive.Views(浏览量)、archive.Link(文档链接)、archive.Thumb(缩略图)等等。具体可用的字段名称,您可以在 tag-archiveDetail.md 文档中查阅 name 参数可用的字段列表。