如何利用AnQiCMS的模板标签展示文章或产品的详细信息?

巧用AnQiCMS模板标签,精细呈现文章与产品详情

在网站运营中,清晰、全面地展示文章或产品详情是吸引访问者、传递核心价值的关键。AnQiCMS作为一个高效、灵活的内容管理系统,提供了强大且易于理解的模板标签功能,让您可以轻松地将后台录入的各种信息,自然流畅地呈现在网站前台。本文将带您深入了解如何利用这些模板标签,展示文章或产品的详细信息。

认识AnQiCMS的模板标签

AnQiCMS的模板系统采用了类似Django模板引擎的语法,使用双花括号 {{变量}} 来输出变量内容,而条件判断、循环控制等逻辑标签则使用单花括号和百分号 {% 标签 %} 来定义,并需要以 {% end标签 %} 结束。这种设计让模板制作既直观又强大,即使不具备深厚开发背景也能快速上手。

从列表到详情:内容展示的旅程

通常,用户会通过文章列表、产品列表等页面进入详情页。为了展示详情信息,首先需要在列表页提供一个指向详情页的链接。

例如,在一个文章列表中,您可以使用 archiveList 标签来获取文章概览信息,并从中提取详情页链接:

{% archiveList archives with type="list" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
        </a>
    </div>
    {% endfor %}
{% endarchiveList %}

当访问者点击 {{item.Link}} 进入详情页后,我们将迎来真正的核心——展示详细信息。

核心力量:archiveDetail标签深度解析

在AnQiCMS的文章或产品详情页中,archiveDetail 标签是获取当前内容所有详细信息的关键。它允许您按需提取标题、内容、图片、创建时间,甚至自定义字段等一切相关数据。

1. 获取基础详情信息

在详情页中,archiveDetail 标签默认会获取当前页面的文章或产品信息,无需额外指定ID。您只需通过 name 参数指定所需字段的名称。

例如,获取文章标题、内容、发布时间及浏览量:

{# 文档标题 #}
<h1>{% archiveDetail with name="Title" %}</h1>

{# 文档内容,注意使用 |safe 过滤器以防HTML被转义,如果内容是Markdown格式,需添加 render=true #}
<div class="article-content">
    {% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}
</div>

{# 发布时间,使用 stampToDate 格式化时间戳 #}
<p>发布时间:{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</p>

{# 浏览量 #}
<p>浏览量:{% archiveDetail with name="Views" %}</p>

这里 archive.CreatedTime 是一种常见的直接访问当前文档属性的方式,它与 {% archiveDetail with name="CreatedTime" %} 效果类似,但代码更简洁。

2. 展示图片信息

文章或产品往往需要图片来增强视觉吸引力。AnQiCMS提供了 Logo(封面首图)、Thumb(封面缩略图)和 Images(多图组)等字段。

{# 显示封面首图 #}
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />

{# 如果有产品组图,可以循环展示 #}
{% archiveDetail productImages with name="Images" %}
<div class="product-gallery">
    {% for img in productImages %}
    <img src="{{img}}" alt="产品图片" />
    {% endfor %}
</div>

3. 关联分类与标签

文章或产品通常会关联到特定的分类和标签,方便用户进行导航和查找。

{# 显示所属分类信息 #}
<p>所属分类:<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></p>

{# 显示关联的Tag标签 #}
<div class="article-tags">
    标签:
    {% tagList tags with itemId=archive.Id limit="5" %}
    {% for tag in tags %}
    <a href="{{tag.Link}}">{{tag.Title}}</a>
    {% endfor %}
    {% endtagList %}
</div>

4. 灵活展现自定义参数:archiveParams标签

AnQiCMS允许您为不同的内容模型定义丰富的自定义字段,例如产品型号、作者、来源等。archiveParams 标签便是用于获取这些自定义参数的利器。

您可以循环遍历所有自定义参数,也可以单独提取某个特定参数:

{# 循环展示所有自定义参数 #}
<div class="custom-parameters">
    {% archiveParams params %}
    {% for item in params %}
    <p>{{item.Name}}:{{item.Value}}</p>
    {% endfor %}
    {% endarchiveParams %}
</div>

{# 或者,如果您知道自定义字段的名称,可以直接提取,例如自定义字段名为 "product_model" #}
<p>产品型号:{% archiveDetail with name="product_model" %}</p>

对于更复杂的自定义字段,例如一个存储多张图片的自定义“组图”字段(假定名为 gallery_images),您也可以通过 archiveDetail 标签获取并循环展示:

{% archiveDetail gallery with name="gallery_images" %}
<div class="product-custom-gallery">
    {% for imgUrl in gallery %}
    <img src="{{imgUrl}}" alt="产品细节图" />
    {% endfor %}
</div>

5. 上下篇与相关文章推荐

为了提升用户体验和页面浏览深度,展示上一篇、下一篇文章以及相关文章是非常有用的功能。

”`twig

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

{% nextArchive next %}
<p>下一篇:{% if next %}<a href="{{next.Link}}">{{next.Title}}</a>{% else %}没有了{% endif %