在AnQiCMS中,内容详情页是您展示核心信息和吸引读者的关键区域。有效地调用和显示文档的标题、内容及其各项相关字段,能极大地提升用户体验和页面信息的丰富度。AnQiCMS强大的模板引擎提供了直观而灵活的方式来实现这些目标。
理解AnQiCMS的模板语法
AnQiCMS的模板系统采用类似Django模板引擎的语法,它主要通过两种形式来操作数据和逻辑:
- 双花括号
{{变量名}}:用于输出变量的值。 - 单花括号和百分号
{% 标签 %}:用于控制逻辑流程(如条件判断、循环)和调用系统内置的各种功能标签。
在文章详情页面,系统会自动将当前文章的所有数据加载到一个名为 archive 的变量中。这意味着,您无需额外查询,可以直接通过 {{archive.字段名}} 的方式来访问文章的各项属性。
调用并显示文档的基本字段
对于文章详情页,调用标题、内容和简介等基本字段通常是最直接的需求。
显示文章标题
要显示文章的标题,您可以使用 {{archive.Title}}。例如:
<h1>{{archive.Title}}</h1>
显示文章内容
文章内容是详情页的核心。由于文章内容通常包含HTML结构(如富文本编辑器输出),在输出时需要使用 |safe 过滤器来确保HTML被正确解析而不是作为纯文本显示。如果您的内容启用了Markdown编辑器,您还可以选择是否在模板中进行渲染。
<div class="article-content">
{# 最常用的方式:确保HTML安全渲染 #}
{{archive.Content|safe}}
{# 如果内容可能包含Markdown,并希望在模板中渲染为HTML #}
{# {{archive.Content|render|safe}} #}
{# 如果不想渲染Markdown内容,保持原始状态 #}
{# {{archive.Content|render:false|safe}} #}
</div>
|safe 过滤器告诉模板引擎,这段内容是安全的,不需要进行HTML实体转义。|render 过滤器则用于将Markdown格式的内容转换为HTML。
显示文章简介和关键词
文章的简介和关键词同样可以通过直接访问 archive 变量的对应字段来获取:
<p class="article-description">{{archive.Description}}</p>
<meta name="keywords" content="{{archive.Keywords}}">
展示文章的图片资源
文章通常会配有缩略图、封面图,甚至是一个图片组。AnQiCMS提供了多种方式来调用这些图片。
显示封面首图和缩略图
您可以通过 {{archive.Logo}} 获取文章的封面首图,通过 {{archive.Thumb}} 获取缩略图。这些通常用于文章列表或详情页的头部展示:
{% if archive.Logo %}
<img src="{{archive.Logo}}" alt="{{archive.Title}}" class="article-cover-image">
{% endif %}
{% if archive.Thumb %}
<img src="{{archive.Thumb}}" alt="{{archive.Title}}" class="article-thumbnail">
{% endif %}
显示文章的组图(多图)
如果文章绑定了多张图片(作为组图或轮播图),archive.Images 会返回一个图片URL的数组。您可以使用 for 循环来遍历并显示这些图片:
{% if archive.Images %}
<div class="article-gallery">
{% for imageUrl in archive.Images %}
<img src="{{imageUrl}}" alt="{{archive.Title}} - 图片" class="gallery-item">
{% endfor %}
</div>
{% endif %}
获取并显示文章的分类和标签信息
文章的分类和标签是组织内容的重要方式,在详情页显示它们可以帮助用户更好地理解文章归属并进行导航。
显示文章所属分类
文章所属的分类信息可以直接从 archive.Category 对象中获取,它包含了分类的标题、链接等信息。
<p>分类:<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></p>
如果需要更详细的分类信息,例如分类的描述或缩略图,您也可以结合 categoryDetail 标签,通过文章的 CategoryId 来查询:
{% categoryDetail currentCategory with id=archive.CategoryId %}
<p>分类:<a href="{{currentCategory.Link}}">{{currentCategory.Title}}</a></p>
<p>分类描述:{{currentCategory.Description}}</p>
{% endcategoryDetail %}
显示文章相关标签
文章的标签可以通过 tagList 标签来获取。它允许您指定获取当前文章(通过 itemId=archive.Id)的所有标签,并通过 for 循环遍历显示。
{% tagList tags with itemId=archive.Id limit="10" %}
{% if tags %}
<div class="article-tags">
标签:
{% for tagItem in tags %}
<a href="{{tagItem.Link}}" class="tag-link">{{tagItem.Title}}</a>
{% endfor %}
</div>
{% endif %}
{% endtagList %}
调用文章的自定义字段
AnQiCMS允许您为不同的内容模型定义自定义字段,以满足个性化的内容展示需求。这些自定义字段可以直接通过 archive 变量的字段名访问,也可以通过 archiveParams 标签遍历显示。
直接访问自定义字段
如果您的文章模型定义了一个名为 Author 的自定义字段,您可以像访问其他内置字段一样直接获取它的值:
<p>作者:{{archive.Author}}</p>
遍历显示所有自定义字段
当您希望显示文章所有的自定义参数,或者您不确定自定义字段的具体名称时,可以使用 archiveParams 标签。它会返回一个包含所有自定义字段名称和值的数组对象。
{% archiveParams customParams %}
{% if customParams %}
<div class="article-custom-fields">
{% for field in customParams %}
<p><strong>{{field.Name}}:</strong>{{field.Value}}</p>
{% endfor %}
</div>
{% endif %}
{% endarchiveParams %}
显示文章的发布时间和浏览量
这些信息对于向读者提供上下文和衡量文章受欢迎程度非常重要。
格式化显示发布/更新时间
文章的发布时间 CreatedTime 和更新时间 UpdatedTime 是时间戳格式,需要使用 stampToDate 标签进行格式化显示:
<p>发布时间:{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</p>
<p>更新时间:{{stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05")}}</p>
您还可以根据需求自定义时间格式,例如 2006-01-02、15:04 等。
显示文章浏览量
文章的浏览量可以通过 {{archive.Views}} 直接获取:
<p>阅读量:{{archive.Views}} 次</p>
实现前后文档和相关文章推荐
在文章详情页底部提供前后文档导航和相关文章推荐,可以有效提升用户的站内浏览深度。
显示上一篇和下一篇文章
AnQiCMS提供了 prevArchive 和 nextArchive 两个标签,用于获取当前文章的上一篇和下一篇文章的标题和链接。
”`twig