How to use the `archiveDetail` tag in AnQiCMS template to retrieve and display detailed information of a single document?

Under the powerful support of Anqi CMS, we can flexibly build various types of website content.Among them, displaying the detailed information of a single document is one of the core requirements for website content display.A secure CMS provides special template tags for this -archiveDetailIt can help us easily retrieve and display all relevant data in the template.

UsearchiveDetailTags, even for users who are not very familiar with template languages, can quickly get started, and transform technical information into a natural and smooth reading experience on the website.

UnderstandingarchiveDetailThe role of the tag

archiveDetailThe main responsibility of the tag is to accurately retrieve all the detailed data of a specific document from the database.This data can be the title, content, publication time, classification information, or even additional fields you customize for the document.It is usually used in article detail pages, product detail pages, and other scenarios where complete information of a single content needs to be displayed.

The basic usage of this tag is very intuitive, usually appearing in such a structure:{% archiveDetail 变量名称 with name="字段名称" id="1" %}

Among them:

  • 变量名称It is an optional parameter. If you set it, the data obtained will be assigned to this variable, which is convenient for you to perform more complex processing in the subsequent template code.If not set, the label will directly output the field value.
  • name="字段名称"Used to specify the specific field information of the document you want to retrieve, such as"Title"Get the title,"Content"Get content.
  • id="1"It is used to specify which document's data you want to retrieve. Usually, when you are already on the document details page (such as the URL is/article/100.htmlWhen this occurs, the system will automatically identify the ID of the current document, and you do not need to set it manuallyidortokenparameter,archiveDetailIt will default to retrieving the document information on the current page, which is very convenient. But if you want to displayanother documentThe information of a specific document can be accessed throughidortokento specify accurately.
  • 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 utilizearchiveDetailDisplay the various information of the document

Let's look at some specific examples to see how to use itarchiveDetailTo enrich your document detail page

Get basic document information

The document's title, link, description, ID, and view count 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 omitidbecause the parameter,archiveDetailThe default will fetch the document data of the current page, making the code more concise.

Display the main content of the document

ContentA field is the core of the document. Since it usually contains rich text format (HTML), it requires special attention when used.|safeThe filter informs the template engine that this content is safe and does not require HTML escaping, thus ensuring that the page can correctly render bold text, images, and other rich text effects.If your content is in Markdown format, you can also userender=trueThe 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 transfersrcattribute is replaced withdata-srcyou can add in theContentfield calllazy="data-src":

<div class="article-content">
    {%- archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
    {{ articleContent|safe }}
</div>

to process images in the document

Documents usually have a cover image, thumbnail, or even a set of images.LogoandThumbUsed to get the cover image and thumbnail 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 point, you need to use{% for %}loop 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 time and date

CreatedTimeandUpdatedTimeThe field returns a timestamp. To display it in the date and time format we are familiar with, it needs to be accompanied bystampToDateThe filter is used:

<p>发布时间:{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</p>
<p>更新时间:{{ stampToDate(archive.UpdatedTime, "2006-01-02") }}</p>

Here"2006-01-02 15:04"Is the special format for Golang time formatting, representing year, month, day, hour, minute, and second.

Associate categories and tags

The document's category (Category) information can be obtained througharchiveDetailDirectly get an object, you can through.Titleor.LinkAccess its properties:

{% archiveDetail archiveCategory with name="Category" %}
<p>所属分类:<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a></p>

If you need more detailed information about the classification, such as the description, Logo, etc., you can assist withcategoryDetailtags to get, and pass in the current document'sCategoryId.

The document tag (Tag) needs to be usedtagListto retrieve the tag. It 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>

Show custom field

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", etc. for the document model, you canarchiveDetailDirect pass.nameParameters to get:

<p>作者:{% archiveDetail with name="author" %}</p>
<p>来源:{% archiveDetail with name="source" %}</p>

If you want to dynamically iterate and display all custom fields (such as for product parameter lists), you can usearchiveParamsTags:

`twig

{% archiveParams