How to display article title, content, images, etc. on the document detail page using the `archiveDetail` tag?

Managing website content in Anqi CMS, the document detail page is undoubtedly the most crucial front for users to obtain information. How to present each meticulously written article, its title, content, images, and various supplementary information accurately and vividly to the user's eyes, this requires the clever use of ourarchiveDetailTagged. This tag is specifically designed to display the details of a single document, and its flexible use will help you easily build a rich and smooth experience details page.

First, let's get to knowarchiveDetailThe core role of the label.When you visit the detail page of a document, Anqi CMS will automatically identify the document information on the current page.archive.字段名This concise way to call the various data of the current document. For example, to display the article title, simply use{{ archive.Title }}It is ready; if you need to display the content of the article,{{ archive.Content }}it can be put into use. This intuitive calling method makes template development extremely easy.

However, if you need to display the details of a specific document on a non-document detail page (such as the homepage or a sidebar of some list page), or need to assign the obtained data to a new variable for more complex processing,archiveDetailThe complete syntax of the tag is particularly important. Its basic usage form is{% archiveDetail 变量名称 with name="字段名称" id="文档ID" %}. Here,变量名称is optional. If you do not set it, the tag will directly output the value of the field.idThe parameter allows you to specify a specific document ID to obtain its information, in addition,tokenThe parameter can also help you find the document accurately through its URL alias.

When building the document detail page, the title and main content of the article are naturally indispensable. You can{{ archive.Title }}to display the article title, through{{ archive.Description }}Display the article summary or description, which is usually used on the page.<title>Tags, SEO keywords, and Meta descriptions. The core part of the article - detailed content, is presented through{{ archive.Content }}Call. An important detail to note is that the content of the article often contains rich HTML tags, in order to ensure that these tags are parsed and displayed correctly by the browser rather than being escaped as plain text, you must in{{ archive.Content }}Add after|safeFilter, that is{{ archive.Content|safe }}. If your article content is written in Markdown editor and you want to render it as HTML on the front end, you canarchiveDetailthe tag withrender=trueparameters, for example{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}.

The image plays a key role in enhancing the visual appeal in content display.archiveDetailTags provide multiple ways to call images.{{ archive.Logo }}It is usually used to obtain the main cover image or lead image of the document, while{{ archive.Thumb }}It is used to obtain the thumbnail processed by the system. If your document is accompanied by multiple images, forming a collection, thenImagesThe field will return an array of image URLs. At this point, you need to combinefora loop to iterate over and display these images, like this:

{% if archive.Images %}
<div class="article-gallery">
    <h3>更多精彩图片</h3>
    {% for imgUrl in archive.Images %}
        <img src="{{ imgUrl }}" alt="{{ archive.Title }}的配图">
    {% endfor %}
</div>
{% endif %}

In addition to the core information mentioned above, AnQi CMS also allows you to add rich metadata and custom fields to documents. For example,{{ archive.CategoryId }}you can obtain the ID of the document's category, and then go through{{ archive.Category.Title }}Retrieve category name,{{ archive.Category.Link }}Retrieve category link, for easy user navigation. Article publish time{{ archive.CreatedTime }}and update time{{ archive.UpdatedTime }}stored in timestamp format, you can usestampToDateThe function formats it into an easily readable date format such as{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}。“Furthermore，”{{ archive.Views }}It can intuitively display the number of views of the article.

Although the tags (Tag) of the document,archiveThe object does not directly contain a list of labels, but you can combinetagListlabels to get all associated labels with the current document, and thenfordisplay them in a loop:

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags with itemId=archive.Id limit="10" %}
        {% for tag in tags %}
            <a href="{{ tag.Link }}">{{ tag.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

The strength of AnQi CMS also lies in its flexible content model, which allows you to customize exclusive fields for different types of documents (such as articles, products). These custom fields can be accessed directly through{{ archive.您的自定义字段名 }}The way to call. For example, if you define a product modelPricefield directly{{ archive.Price }}It can. If the content of the custom field may also contain HTML, you also need to add|safeFilter. If you are not sure about the custom fields or want to dynamically display all custom fields, you can usearchiveParamstags to iterate through them:

<div class="article-custom-fields">
    <h3>附加信息</h3>
    {% archiveParams params %}
        {% for item in params %}
            <p><strong>{{ item.Name }}：</strong>{{ item.Value|safe }}</p>
        {% endfor %}
    {% endarchiveParams %}
</div>

By combining these tags, you can build a document detail page that is both beautiful and practical, whether it's displaying an in-depth article or a featured product, you can do it with ease.

---

Frequently Asked Questions (FAQ)

1. Why do I use{{ archive.Content }}When calling the content of the article, why does the page display the original text with HTML tags, rather than the rendered effect?
   • Answer:This is because the Anqi CMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks. If your article content contains HTML tags and you want them to be normally parsed by the browser, be sure to{{ archive.Content }}Add after|safeFilter, that is{{ archive.Content|safe }}.

2