In a content management system, effectively displaying the detailed information of a single document is one of the core needs.Users always hope to have a direct and comprehensive understanding of the specific content of each project, whether it is news articles, product introductions, or service descriptions.archiveDetailLabels, allowing you to easily retrieve and display all information of a single document, even including your custom exclusive fields.
Get the core information of the document:archiveDetailbasic usage
archiveDetailLabels are tools used in AnQi CMS templates to accurately extract detailed data of individual documents. Their basic syntax is{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}Here,变量名称is an optional alias used to reference the obtained data in subsequent template code;namespecifies the specific document field you want to retrieve; andidThe parameter allows you to specify the document for a specific ID. Of course, if you are on the document detail page (for exampledetail.htmlorarchive/detail.html), it is usually not necessary to provideidParameter, the system will default to obtaining the document information of the current page. In addition, you can also specify the document's URL alias using thetokenparameter to obtain its details.
This label can help you extract various built-in fields of the document, such as:
Id: The unique identifier of the document.Title: The title of the document.Link: The access link of the document.Description: A brief description or summary of the document.Views: Document views.Logo: The main cover image of the document.Thumb: English document cover thumbnail.CategoryIdThe ID of the category the document belongs to.
For example, to display the document title on the detail page, you can write it like this:<h1>{% archiveDetail with name="Title" %}</h1>
If you need to get the link of a specified ID document, you can do it like this:<a href="{% archiveDetail with name="Link" id="10" %}">查看文档10</a>
It is especially worth mentioning.ContentField. It carries the main content of the document, usually containing rich text, images, and even HTML format. When you need to display this content, please make sure to use|safeFilter to ensure that HTML code can be correctly parsed rather than displayed as plain text:<div>{% archiveDetail content with name="Content" %}{{content|safe}}</div>If your content is in Markdown format and you want it to be rendered as HTML on the front end, you canContentfield'sarchiveDetailtag.render=trueParameters:<div>{% archiveDetail content with name="Content" render=true %}{{content|safe}}</div>Additionally, for content with many images, you can also uselazyParameters specify the lazy loading attribute of the image, for examplelazy="data-src"so that your front-end lazy loading script can work normally.
For date and time fields such asCreatedTime(Creation time) andUpdatedTime(update time),archiveDetailtags also provide convenientformatParameters to directly format the output, saving the manual usestampToDateSteps for labeling:<span>发布日期：{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</span>
Extended usage: flexible display of custom fields
The strength of AnQi CMS lies in its flexible content model design, which allows you to customize document fields according to your business needs. These custom fields can also bearchiveDetailLabel easy to obtain and display.
Assume you have defined a custom field namedpricein the content model. You can directly obtain its value throughnameparameter:<span>产品价格：{% archiveDetail with name="price" %} 元</span>
If you are not sure what custom fields are available in the document, or if you want to dynamically display all custom fields,archiveParamsThe label comes into play. It allows you to traverse all the additional parameters of the document. Usually, you would want these parameters to be displayed in the order of the background settings, at which point you can usesorted=trueParameters (this is the default behavior):
{% archiveParams params %}
<ul class="custom-fields">
{% for item in params %}
<li>
<strong>{{item.Name}}：</strong>
<span>{{item.Value}}</span>
</li>
{% endfor %}
</ul>
{% endarchiveParams %}
In this way, you can build a universal template that automatically adapts to the display of custom fields under different content models.
Actual scenario application: construction of article and product detail pages
Combine the above tags, and you can easily build a comprehensive document detail page.
Article detail page example:In a typical article detail page, you may need to display the title, category, publish time, tags, and article content.
<article>
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="meta-info">
<span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>
<span>发布于：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
<span>阅读量：{% archiveDetail with name="Views" %}</span>
<div class="tags">标签：
{% tagList tags with itemId=archive.Id limit="5" %}
{% for tag in tags %}
<a href="{{tag.Link}}">{{tag.Title}}</a>
{% endfor %}
{% endtagList %}
</div>
</div>
<div class="article-content">
{% archiveDetail content with name="Content" render=true %}{{content|safe}}</div>
</article>
Example of a product detail page:For product detail pages, displaying images, names, custom parameters (such as brand and model) and detailed descriptions is a common layout.
<div class="product-detail">
<div class="product-gallery">
<img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
{# 如果有自定义的图片组字段 'product_images' #}
{% archiveDetail productImages with name="product_images" %}
<div class="thumbnail-list">
{% for img in productImages %}
<img src="{{img}}" alt="产品图" />
{% endfor %}
</div>
{% endarchiveDetail %}
</div>
<div class="product-info">
<h1>{% archiveDetail with name="Title" %}</h1>
<p class="description">{% archiveDetail with name="Description" %}</p>
<div class="product-params">
{% archiveParams params %}
{% for item in params %}
<p><strong>{{item.Name}}：</strong> {{item.Value}}</p>
{% endfor %}
{% endarchiveParams %}
</div>
<a href="tel:{% contact with name='Cellphone' %}" class="contact-btn">立即咨询：{% contact with name="Cellphone" %}</a>
</div>
<div class="product-full-content">
<h2>产品详情</h2>
{% archiveDetail content with name="Content" render=true %}{{content|safe}}
</div>
</div>
Tips
In template development, when you confirm that the current page context is already a document object (for example, indetail.htmlorarchive/detail.html), in addition to using{% archiveDetail with name="字段名称" %}tag, you can also directly through{{archive.字段名}}to obtain the document fields, which is usually more concise and convenient. For example,<h1>{{archive.Title}}</h1>the document title can be displayed directly.
In short,archiveDetailThe tag provides a flexible and powerful way to display detailed information of a single document in the AnQi CMS, including all custom fields,