如何在文章详情页显示完整的文章内容，包括懒加载图片？
安企CMS：如何在文章详情页优雅地展示完整内容与懒加载图片
在网站内容运营中，文章详情页是用户获取信息、深入了解品牌和产品的重要触点。一个设计精良、加载迅速、内容展示完整的文章详情页，不仅能极大提升用户体验，还能有效助力SEO优化。对于使用安企CMS的用户而言，充分利用其强大的模板标签系统，可以轻松实现文章内容的完整呈现，并结合现代网页技术实现图片的懒加载，让您的网站既美观又高效。
核心：理解文章详情页面的构成
在安企CMS中，文章的完整内容，包括文字、图片、视频等多媒体元素，都存储在您发布文章时所编辑的“文档内容”字段中。当用户访问文章详情页时，我们需要通过模板标签将这些存储在数据库中的内容提取出来，并在浏览器中进行渲染。同时，为了优化页面加载速度，尤其是图片较多的文章，引入懒加载机制显得尤为重要。
第一步：准备你的文章详情模板
安企CMS的模板遵循清晰的目录结构和命名约定。通常，文章详情页的模板文件会位于当前模板主题下的 {模型table}/detail.html，例如 archive/detail.html 或 product/detail.html。如果您有特殊的分类或文档需要独特的布局，也可以在后台指定使用自定义模板，如 download.html。
首先，确保您的 detail.html 文件继承了基础模板，以便复用网站的通用头部、底部和样式：
{% extends 'base.html' %}
{% block content %}
{# 在这里编写文章详情页的具体内容 #}
{% endblock %}
第二步：调用文章完整内容的关键标签——archiveDetail
安企CMS提供了 archiveDetail 标签来获取文章（文档）的详细信息。要显示文章的完整内容，您需要使用 name="Content" 参数。
{% archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }}
{% endarchiveDetail %}
这里有几个关键点需要注意：
name="Content"：这是指定获取文章主体内容的参数。archiveContent：这是一个自定义的变量名，用于存储获取到的文章内容。您可以根据喜好自定义。|safe过滤器：这一步至关重要。文章内容通常包含HTML标签（如<p>,<img>,<strong>等），如果不加|safe过滤器，安企CMS出于安全考虑会默认对所有HTML标签进行转义，导致页面上显示的是一堆代码而不是排版好的内容。|safe告诉模板引擎，这段内容是安全的HTML，可以直接渲染。
处理图片懒加载
为了提升页面加载速度，尤其是图片较多的文章，懒加载（Lazy Load）是一个非常有效的优化手段。安企CMS的 archiveDetail 标签内置了对图片懒加载属性的转换支持。
您可以通过添加 lazy="data-src" 参数，让系统自动将文章内容中的 <img> 标签的 src 属性转换为 data-src 属性。
{% archiveDetail articleContent with name="Content" lazy="data-src" %}
{{ articleContent|safe }}
{% endarchiveDetail %}
当您这样设置后，安企CMS会将文章内容中的所有图片标签（例如 <img src="https://www.anqicms.com/uploads/image.jpg" />）自动转换为 <img data-src="https://www.anqicms.com/uploads/image.jpg" />。
请注意：lazy="data-src" 仅仅是修改了图片的属性名称。要真正实现懒加载，您还需要在前端引入相应的JavaScript懒加载库，并根据该库的要求初始化，让它识别 data-src（或其他您指定的属性）并进行按需加载。目前市面上多数懒加载库都支持 data-src 属性。
Markdown 内容的渲染
如果您的文章内容使用了Markdown格式编写，并且在后台“全局设置”->“内容设置”中启用了Markdown编辑器，那么在模板中调用内容时，您可能需要额外处理以确保其正确渲染为HTML。
archiveDetail 标签提供了 render=true 参数来自动将Markdown格式的内容转换为HTML：
{% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
{{ articleContent|safe }}
{% endarchiveDetail %}
这样，您的Markdown内容就能被正确解析并渲染在页面上。同时，您还需要在前端引入Markdown渲染所需的CSS样式和可能的JS库，如 help-markdown.md 中提及的 github-markdown-css。
第三步：丰富文章详情页的其他信息
一个完整的文章详情页除了内容本身，还需要展示标题、发布时间、所属分类、标签、阅读量等辅助信息，这些同样可以通过 archiveDetail 标签或其它相关标签获取。
- 文章标题：
{% archiveDetail with name="Title" %} - 发布时间：
{{stampToDate(archive.CreatedTime, "2006-01-02")}} - 所属分类：
{% categoryDetail with name='Title' %} - 标签：使用
tagList循环标签来获取文章关联的所有标签。 - 浏览量：
{% archiveDetail with name="Views" %} - 自定义参数：如果您的内容模型定义了额外的字段，可以使用
archiveParams标签循环展示。
整合与优化：一个完整的详情页片段
将上述元素整合起来，一个具备完整内容展示和懒加载功能的文章详情页核心代码大致如下：
”`twig {% extends ‘base.html’ %}
{% block content %}
<article class="article-detail-container">
{# 文章标题 #}
<h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
{# 文章元信息：分类、时间、浏览量 #}
<div class="article-meta">
<span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{% archiveDetail with name="Views" %}</span>
</div>
{# 文章标签 #}
<div class="article-tags">
{% tagList tags with itemId=archive.Id %}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-item">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
{# 文章主体内容：包含懒加载和Markdown渲染 #}
<div class="article-content markdown-body"> {# 假设您已引入github-markdown-css，并使用markdown-body类 #}
{% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
{{ articleContent|safe }}
{% endarchiveDetail %}
</div>
{# 更多自定义参数（如果需要） #}
<div class="article-custom-params">
{% archiveParams params %}
{% for item in params %}
<p><strong>{{item.Name}}：</strong>{{item.Value}}</p>
{% endfor %}
{% endarchiveParams %}
</div>
{# 上一篇/下一篇文章导航 #}
<div class="article-nav">
{% prevArchive prev %}
{% if prev %}
<a href="{{prev.Link}}" class="prev-article">上一篇：{{prev.Title}}</a>
{% else %}
<span class="prev-article-none">没有了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{next.Link}}"