如何在文章详情页面获取并显示文章标题和详细内容？

在安企CMS中管理网站内容，文章详情页是向访客展示核心信息的重要窗口。无论是企业新闻、产品介绍还是技术文章，清晰地呈现标题和详细内容都是提升用户体验和信息传达效率的关键。安企CMS为此提供了直观而强大的模板标签，让内容呈现变得轻松灵活。

理解安企CMS的模板结构

安企CMS的模板文件通常存放在 /template 目录下，并遵循一套简洁的命名约定。对于文章或产品这类文档的详情页，默认的模板文件通常是 {模型table}/detail.html。例如，如果您的内容模型是“文章”，那么详情页模板可能是 article/detail.html。

在这些模板文件中，您会发现内容展示主要通过两种方式实现：使用双花括号 {{变量}} 来直接输出数据，以及使用单花括号和百分号 {% 标签 %} 来处理逻辑或调用功能性标签。当您访问一个文章详情页时，安企CMS会自动将当前文章的所有数据加载到一个名为 archive 的全局变量中，这使得获取文章信息变得非常便捷。

获取并显示文章标题

文章标题是内容的“门面”，通常会作为页面的主标题（<h1>）和浏览器标签页的标题。

要显示文章的标题，最直接的方式就是访问 archive 变量中的 Title 字段：

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

这行代码会直接输出当前文章的标题。

此外，为了优化搜索引擎（SEO）效果，页面的浏览器标签页标题（<title>标签）通常需要包含文章标题，并可能附加网站名称。这时，可以使用安企CMS提供的 tdk 标签：

<title>{% tdk with name="Title" siteName=true %}</title>

这段代码会智能地获取当前文章的标题，并根据 siteName=true 的设置，自动在标题后加上您的网站名称，从而提升页面的专业性和SEO友好度。您还可以通过 sep 参数自定义标题与网站名称之间的分隔符。

获取并显示文章详细内容

文章的详细内容是用户获取核心信息的地方，它可能包含丰富的文本、图片、甚至视频和代码。安企CMS会将这些富文本内容存储在 Content 字段中。

要将文章的详细内容呈现在页面上，您可以这样调用：

<div>{{archive.Content|safe}}</div>

这里有一个非常重要的细节：|safe 过滤器。由于文章内容通常是通过富文本编辑器编辑的，其中可能包含 HTML 标签（如 <p>, <img>, <strong> 等）。默认情况下，为了防止跨站脚本攻击（XSS），安企CMS模板引擎会对所有输出内容进行HTML转义，这意味着 <p> 可能会被显示为 <p>，导致内容显示为原始代码而非排版后的样式。

使用 |safe 过滤器明确告诉模板引擎，这部分内容是“安全”的，不需要进行转义，从而让浏览器正确解析并显示排版好的文章内容。

如果您的文章内容是通过Markdown编辑器编写的，并且希望前端自动转换为HTML渲染，可以在 archiveDetail 标签中添加 render=true 参数。同时，如果文章中包含图片并希望实现图片懒加载，可以利用 lazy="data-src" 等参数与前端的懒加载库配合使用。

{# 使用archiveDetail标签的完整示例，并考虑Markdown渲染和图片懒加载 #}
<div>
    {% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
    {{articleContent|safe}}
</div>

整合更多文章信息

一个完整的文章详情页通常不仅仅只有标题和内容。您可能还需要显示发布时间、浏览量、文章描述等辅助信息。这些数据同样可以直接从 archive 变量中获取。

以下是一个综合示例，展示了如何在文章详情页组合显示标题、内容、发布时间、浏览量和文章描述：

”`html {% extends ‘base.html’ %} {# 继承基础布局，确保页面结构一致性 #}

{% block title %}

{# 浏览器标签页标题，包含文章标题和网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>

{% endblock %}

{% block content %}

{# 主标题，通常为文章标题 #}
<h1 class="article-title">{{archive.Title}}</h1>

<div class="article-meta">
    {# 显示发布时间，使用stampToDate过滤器格式化为可读日期 #}
    <span class="publish-time">发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
    {# 显示浏览量 #}
    <span class="views">浏览量：{{archive.Views}} 次</span>
    {# 显示文章描述（如果存在） #}
    {% if archive.Description %}
    <p class="article-description">{{archive.Description}}</p>
    {% endif %}
</div>

<div class="article-content">
    {# 显示文章详细内容，使用safe过滤器确保HTML