巧用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