When building rich web pages in AnQiCMS,archiveDetailThe tag is undoubtedly the core tool for displaying article details on the page.It can flexibly retrieve and present all the detailed information of articles or products, helping website operators to easily create detail pages that meet the brand image and user experience.
archiveDetailThe core function of the tag
when visiting a specific article or product page,archiveDetailLabels come in handy.It allows you to get all data fields of the current page article, whether it is title, content, images, or other custom information.archivethe global object, allowing you to{{archive.字段名称}}The concise way to directly access article data without explicitly usingarchiveDetailtags to obtain, greatly simplifying the template code.
Of course, if you need to get the details of a specified article on a non-detail page (such as the homepage or list page), or if you need to get the details of other articles on the detail page,archiveDetailThe label can still provide strong support. At this time, you canid(article ID) ortoken(article's URL alias) parameter to accurately specify the article to be retrieved. For example,{% archiveDetail 变量名 with name="Title" id="1" %}English version: Can get the title of the article with ID 1.
Flexible access to all detailed information of the article
archiveDetailTags can get very comprehensive content, covering all aspects of the article:
Basic metadata:
Title: The title of the article.Link: The access link of the article.Description: The summary or description of the article.Keywords: The keywords of the article.SeoTitle：Title optimized for search engines.CanonicalUrl：Standard link for SEO, to avoid duplicate content issues.Views: The number of views of the article.CommentCount：Number of comments.
Core content and structure:
Content：The main content of the article. It is worth mentioning that AnQiCMS supports Markdown editor,ContentThe field can automatically render Markdown syntax to HTML when displayed. You can alsolazy="data-src"参数为内容中的图片启用懒加载，优化页面加载速度，并通过 Englishrender=true|false参数手动控制 Markdown 是否渲染。 EnglishContentTitlesAn array, containing information about various levels of headings in the article content, which is convenient for generating the article's table of contents or navigation.
Image resources:
LogoThe cover image (large image) of the article.ThumbThe thumbnail of the article.ImagesAn array of image URLs, used to display the group photos or multiple photos of an article. Since it is an array, you need to iterate through it to display.
Time information:
CreatedTime：The creation time of the article (Unix timestamp).UpdatedTime：The update time of the article (Unix timestamp).- These two fields need to be coordinated
{{stampToDate(时间戳, "格式")}}Tags for formatted output, for example{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}It will display in the format of “2023年08月20日 14:30”.
Linked data:
CategoryThe article's category object, which can be directly accessed to obtain the category ID, title, link, and other information. For example{{archive.Category.Title}}You can also usecategoryDetailtags to obtain more complete category information.Tags：Article associated tags. Usually need to be combinedtagListTags to cycle through these tags.
Custom fields:
- In the AnQiCMS admin panel's 'Content Model', you can add custom fields for different content models (such as article models, product models). These custom fields can also be
archiveDetailLabel directly accessed by name, for example{% archiveDetail with name="author" %}. If you want to display all custom fields, you can usearchiveParamslabels to iterate over.
- In the AnQiCMS admin panel's 'Content Model', you can add custom fields for different content models (such as article models, product models). These custom fields can also be
Actual application example: build detail page
Understood these fields, we can easily build the detail page of the article or product.
Example 1: Classic article detail page
In a standard article detail page, you may want to display the article title, category, publish time, associated tags, views, and the article content. Here is a concise template code snippet showing how to achieve the display of these contents:
<article class="article-detail">
<h1 class="article-title">{% archiveDetail with name="Title" %}</h1> {# 或直接 {{archive.Title}} #}
<div class="article-meta">
<span class="category">分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
<span class="date">发布于：{{stampToDate(archive.CreatedTime, "2006年01月02日")}}</span>
<span class="tags">标签：
{% tagList tags with itemId=archive.Id limit="5" %}
{% for item in tags %}
<a href="{{item.Link}}">{{item.Title}}</a>
{% endfor %}
{% endtagList %}
</span>
<span class="views">阅读量：{% archiveDetail with name="Views" %}</span>
</div>
<div class="article-content">
{% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
{{articleContent|safe}} {# |safe 用于避免HTML转义 #}
</div>
</article>
This code first retrieves the article title. Then, by usingcategoryDetailtags to get the link and name of the category. The publish time usesstampToDatefor formatting. Tags are usedtagListLabel acquisition and display in a loop. Article contentContentImage lazy loading and Markdown rendering are enabled and using|safeThe filter ensures that HTML content is parsed normally.
Example two: Product detail page, displaying custom parameters
For the product detail page, in addition to the basic information, some unique product parameters may also need to be displayed (these are usually added as custom fields in the "content model" on the back-end).
`twig
<div class="product-image">
<img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
{# 如果有组图，可以循环展示 #}
{% archiveDetail productImages with name="Images" %}
{% for img in productImages %}
<img src="{{img}}" alt="{{archive.Title}} - 图{{loop.Counter}}" />
{% endfor %}
{% endarchiveDetail %}
</div>
<div class="product-info">