如何在AnQiCMS文章详情页中调用并显示文档的标题、内容和相关字段?

在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-0215:04 等。

显示文章浏览量

文章的浏览量可以通过 {{archive.Views}} 直接获取:

<p>阅读量:{{archive.Views}} 次</p>

实现前后文档和相关文章推荐

在文章详情页底部提供前后文档导航和相关文章推荐,可以有效提升用户的站内浏览深度。

显示上一篇和下一篇文章

AnQiCMS提供了 prevArchivenextArchive 两个标签,用于获取当前文章的上一篇和下一篇文章的标题和链接。

”`twig

{% prevArchive prev %}
    {% if prev %}
        <a href="{{prev.Link}}" class="prev-article">上一篇:{{prev.Title}}</a>
    {% else %}
        <span class="prev-article">上一篇:没有了</span>
    {% endif %}
{% endprevArchive %}

{% nextArchive next %}
    {% if next %}
        <a href="{{next.Link}}" class="next-