How to use AnQiCMS template tags to display detailed information of articles or products?
Skillfully use AnQiCMS template tags to finely present article and product details
In website operation, clearly and comprehensively displaying article or product details is the key to attracting visitors and conveying core value.AnQiCMS as an efficient and flexible content management system provides a powerful and easy-to-understand template tag feature, allowing you to easily present various information entered in the background naturally and smoothly on the website front-end.This article will guide you to deeply understand how to use these template tags to display detailed information about articles or products.
Familiar with AnQiCMS template tags
AnQiCMS template system uses syntax similar to Django template engine, using double curly braces{{变量}}to output variable content, while conditional judgments, loop controls, and other logical tags are represented using single curly braces and percent signs{% 标签 %}to define, and it needs to be followed by{% end标签 %}End. This design makes template creation intuitive and powerful, allowing even those without a deep development background to quickly get started.
From list to detail: the journey of content display
Users usually enter the detail page through article lists, product lists, and other pages. To display detailed information, a link to the detail page must be provided on the list page.
For example, in an article list, you can usearchiveListtags to get an overview of the articles and extract the detail page link:
{% 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 %}
when the visitor clicks{{item.Link}}After entering the detail page, we will welcome the real core - displaying detailed information.
Core strength:archiveDetailIn-depth tag analysis
In the article or product detail page of AnQiCMS,archiveDetailTags are the key to obtaining all the details of the current content. It allows you to extract titles, content, images, creation time, and even custom fields as needed, etc.
1. Get basic detail information
In the detail page,archiveDetailThe tag will default to fetching the article or product information on the current page, without needing to specify an ID. You just need to go throughnameSpecify the name of the required field.
For example, get the title, content, publishing time, and view count of an article:
{# 文档标题 #}
<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>
Herearchive.CreatedTimeIt is a common way to directly access the attributes of the current document, and it is{% archiveDetail with name="CreatedTime" %}The effect is similar, but the code is more concise.
2. Display image information
Articles or products often need images to enhance visual appeal. AnQiCMS providesLogo(Cover main image),Thumb(Cover thumbnail) andImages(Multiple image group) fields.
{# 显示封面首图 #}
<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. Associated categories and tags
Articles or products are usually associated with specific categories and tags for easy navigation and search by users.
{# 显示所属分类信息 #}
<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. Flexible display of custom parameters:archiveParamsTag
AnQiCMS allows you to define rich custom fields for different content models, such as product model, author, source, etc.archiveParamsThe tag is a tool to obtain these custom parameters.
You can iterate over all custom parameters or extract a specific parameter individually:
{# 循环展示所有自定义参数 #}
<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>
For more complex custom fields, such as a custom "group photo" field (assumed to be namedgallery_images), you can also retrieve and cycle through them using thearchiveDetailtag:
{% archiveDetail gallery with name="gallery_images" %}
<div class="product-custom-gallery">
{% for imgUrl in gallery %}
<img src="{{imgUrl}}" alt="产品细节图" />
{% endfor %}
</div>
5. Recommendations for previous and next articles
Displaying the previous and next articles as well as related articles is a very useful feature to enhance user experience and page browsing depth.
`twig