With the powerful functions supported by AnQi CMS, we can flexibly build various types of website content.One of the core requirements for website content display is to show the detailed information of a single document.archiveDetailIt can help us easily retrieve and present all relevant data in the template.
UsearchiveDetailLabel, even for users not very familiar with template languages, can quickly get started and convert technical information into a natural and smooth reading experience on the website.
UnderstandingarchiveDetailThe role of the label
archiveDetailThe primary responsibility of the tag is to accurately extract all detailed data of a specific document from the database.This data can be the title of the document, content, publication time, category information, or even custom additional fields you define for the document.It is commonly used in scenarios where complete information of a single content needs to be displayed, such as article detail pages and product detail pages.
The basic usage of this tag is very intuitive, usually appearing in such a structure:{% archiveDetail 变量名称 with name="字段名称" id="1" %}
Among them:
变量名称is an optional parameter.If you set it, the data obtained will be assigned to this variable, making it convenient for you to perform more complex processing in subsequent template code.If not set, the tag will directly output the value of the field.name="字段名称"Used to specify which specific field information of the document you want to retrieve, for example:"Title"to get the title,"Content"Retrieve the content.id="1"is used to specify which document's data you want to retrieve. Usually, when you are already on the document detail page (for example, the URL is)/article/100.htmlWhen this occurs, the system automatically identifies the current document's ID, so you do not need to set it manually.idortokenparameters,archiveDetailIt will default to retrieving the document information on the current page, which is very convenient. But if you want to displayanother oneIf the information of a specific document is provided, it can be specifiedidortokento be precise.siteIdThe parameter is used in the multi-site management scenario, if you have multiple sites and need to call data from other sites, you can specifysiteId.
How to make use ofarchiveDetailDisplay the information of the document's various items
Let us look at specific examples to see how to applyarchiveDetailto enrich your document detail page.
Get basic document information
The title, link, description, ID, and views are core elements. We can easily obtain them like this:
<h1>{% archiveDetail with name="Title" %}</h1>
<p>文档ID：{% archiveDetail with name="Id" %}</p>
<p>访问量：{% archiveDetail with name="Views" %}</p>
<p>摘要：{% archiveDetail with name="Description" %}</p>
<a href="{% archiveDetail with name="Link" %}">查看原文</a>
In the actual document detail page, we usually omitidthe parameters, becausearchiveDetailDefaultly, it will get the document data of the current page, making the code more concise.
Display the main content of the document
ContentFields are the core of the document. As they often contain rich text format (HTML), they need to be handled with special attention when used.|safeFilter.This filter tells the template engine that this content is safe and does not require HTML escaping, ensuring that the page can correctly render bold text, images, and other rich text effects.render=trueA parameter allows the system to automatically convert it to HTML.
<div class="article-content">
{%- archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}
</div>
If your image needs lazy loading, and your lazy loading plugin needs to callsrcattribute in the content withdata-srcYou can find it inContentthe field in the plugin settingslazy="data-src":
<div class="article-content">
{%- archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
{{ articleContent|safe }}
</div>
to handle images in the document
Documents usually have a cover image, thumbnails, or even a set of images.LogoandThumbUsed to obtain the cover image and thumbnails of the document:
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}封面图" />
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}缩略图" />
If the document contains multiple images (such as an album),ImagesThe field will return an array of image URLs. At this time, you need to use{% for %}a loop to iterate through and display them:
<div class="gallery">
{% archiveDetail archiveImages with name="Images" %}
{% for imgUrl in archiveImages %}
<img src="{{ imgUrl }}" alt="文档图片 {{ forloop.Counter }}" />
{% endfor %}
</div>
format date and time
CreatedTimeandUpdatedTimeThe returned value is a timestamp. To display it in a familiar date and time format, it needs to be accompanied bystampToDateFilter usage:
<p>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</p>
<p>更新时间：{{ stampToDate(archive.UpdatedTime, "2006-01-02") }}</p>
Here are the"2006-01-02 15:04"Is the special syntax for Golang time formatting, representing year, month, day, hour, minute, and second.
Associate categories with tags
The document's category (Category) information can be obtained byarchiveDetaildirectly get an object, you can access its properties by.Titleor.Linkaccessing its properties:
{% archiveDetail archiveCategory with name="Category" %}
<p>所属分类：<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a></p>
If you need more detailed information about the category, such as the description, Logo, etc., you can cooperate withcategoryDetailtags to obtain, and pass in the current document'sCategoryId.
The document's tag (Tag) needs to be used.tagListThe tag allows you to specify the document ID to retrieve all tags associated with the document:
<div class="article-tags">
{% tagList tags with itemId=archive.Id limit="10" %}
{% for tag in tags %}
<a href="{{ tag.Link }}">{{ tag.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
Display custom fields
The strength of AnQi CMS lies in its flexible content model, which allows you to add any custom fields to documents. If you define fields such as "author", "source", "product model" for the document model, you canarchiveDetailProceed directlynameParameters to retrieve:
<p>作者：{% archiveDetail with name="author" %}</p>
<p>来源：{% archiveDetail with name="source" %}</p>
If you want to dynamically iterate and display all custom fields (for example, for a product parameter list), you can usearchiveParamsTags:
`twig
{% archiveParams