How to get the detailed information of the current document in AnQiCMS template (such as title, content, thumbnail)?

As an experienced AnQiCMS website operator, I fully understand the importance of flexibly obtaining and displaying content in templates.The powerful template engine of AnQiCMS makes content creation, editing, and publishing efficient and convenient.Today, we will delve into how to obtain detailed information about the current document in AnQiCMS templates, such as the title, content, and thumbnail, to help you better customize the front-end display of the website.

Understand the document data in AnQiCMS templates

The AnQiCMS template system is designed very intuitively, especially when dealing with core content such as documents (archives).When you visit a document detail page, the system will automatically load all available information of the current document into the context of the template.This means you can easily access these data using specific tags and variables.archiveDetailThe tag, it is the main tool to obtain detailed information of a single document.

UsearchiveDetailTag to obtain document information

archiveDetailTags are a powerful and flexible tag provided by AnQiCMS, used to obtain the values of various fields in the specified or current document. Its basic usage is{% archiveDetail 变量名称 with name="字段名称" %}You can also choose not to define variable names and let the label output the result directly.

Get the document title

The document title is the core identifier of any content. It is very simple to obtain the title of the current document in the AnQiCMS template. You can usearchiveDetaillabel and specifyname="Title"to get it.

For example, you can directly place the code like this in your document detail page template:

<h1>{% archiveDetail with name="Title" %}</h1>

If you want to assign the title to a variable for subsequent processing, you can do it like this:

{% archiveDetail currentTitle with name="Title" %}
<h1>{{ currentTitle }}</h1>

In addition, if you need to get the title of a document with a specified ID, you can add it in the labelidparameters:

<p>ID为1的文档标题是：{% archiveDetail with name="Title" id="1" %}</p>

Get the document content

The document content is the main information of the page, which may contain rich text, images, and embedded media.archiveDetailTags can also easily extract this part of the data by specifyingname="Content"To implement. Since the document content usually contains HTML tags, in order to ensure that these tags can be correctly parsed and displayed by the browser, we usually cooperate with|safefilter usage.

The basic way to get the document content is:

<div class="article-content">
    {% archiveDetail with name="Content" %}
</div>

Please note that for security reasons, the AnQiCMS template engine defaults to escaping all output variables to prevent cross-site scripting attacks (XSS).This means that if your document content contains HTML tags, they will be displayed as plain text.|safeFilter:

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

AnQiCMS also supports Markdown editor. If the document content is written in Markdown and you want to automatically render it into HTML on the front end, you canarchiveDetailthe tag withrender=trueParameter. At the same time, if your website uses lazy loading for images and needs to load imagessrcattribute is replaced withdata-srcor similar properties, you can use thelazy="data-src"parameter, the tag will handle it automatically.

{# 假设文档内容为Markdown，并希望自动渲染成HTML #}
<div class="article-content markdown-body">
    {% archiveDetail renderedContent with name="Content" render=true %}
    {{ renderedContent|safe }}
</div>

{# 同时启用Markdown渲染和图片懒加载 #}
<div class="article-content markdown-body">
    {% archiveDetail lazyRenderedContent with name="Content" render=true lazy="data-src" %}
    {{ lazyRenderedContent|safe }}
</div>

Get the document thumbnail

Document thumbnails play an important role in scenarios such as list pages, related recommendations, or the top banners of article detail pages. AnQiCMS provides several different types of image fields for documents, the most commonly used beingLogo(usually refers to the cover main image or large image) andThumb(usually refers to the cropped or processed thumbnail). You can get them by specifying the correspondingnameparameters.

Get the document cover main image (Logo):

<div class="article-image">
    <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
</div>

Get the document cover thumbnail (Thumb):

<div class="article-thumbnail">
    <img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}" />
</div>

In practice, you may use these images for responsive design, or selectively display them based on different areas of the page.

Get other commonly used document information

In addition to the title, content, and thumbnail, the document also contains a lot of other useful information, you can also usearchiveDetailtags to get them.

• Document ID:{% archiveDetail with name="Id" %}
• Document link:{% archiveDetail with name="Link" %}
• Document description:{% archiveDetail with name="Description" %}
• Document Category ID:{% archiveDetail with name="CategoryId" %}
• Document Views:{% archiveDetail with name="Views" %}
• Document Creation Time:{% archiveDetail with name="CreatedTime" %}. BecauseCreatedTimeIt returns a timestamp, you need to usestampToDatea filter to format it into a readable date and time, for example{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04") }}.
• Document Update Time:{% archiveDetail with name="UpdatedTime" %}Also needs to be usedstampToDateto format.

AnQiCMS supports custom content model fields. For example, if you add custom fields for a specific model in the background,authororproduct_skuYou can also directly go througharchiveDetailLabel to get their values:

<p>作者：{% archiveDetail with name="author" %}</p>
<p>产品SKU：{% archiveDetail with name="product_sku" %}</p>

Even if you need to cycle through all custom fields, you can usearchiveParamsTags:

{% archiveParams params %}
<div class="custom-fields">
    {% for item in params %}
    <p><strong>{{ item.Name }}：</strong> {{ item.Value }}</p>
    {% endfor %}
</div>
{% endarchiveParams %}

Practice case: Build a complete document detail page fragment

In summary, we can build a more complete document detail page fragment to demonstrate how to effectively use these tags to obtain and display the detailed information of the current document:

<article class="document-detail">
    {# 获取文档标题 #}
    <h1>{% archiveDetail with name="Title" %}</h1>

    <div class="article-meta">
        {# 获取分类信息 #}
        {% archiveDetail articleCategory with name="Category" %}
        <span class="category">分类：<a href="{{ articleCategory.Link }}">{{ articleCategory.Title }}</a></span>
        
        {# 获取创建时间并格式化 #}
        {% archiveDetail createdTime with name="CreatedTime" %}
        <span class="publish-date">发布时间：{{ stampToDate(createdTime, "2006年01月02日 15:04") }}</span>
        
        {# 获取浏览量 #}
        <span class="views">浏览量：{% archiveDetail with name="Views" %}</span>
    </div>

    {# 获取文档封面大图，并假设alt文本为标题 #}
    {% archiveDetail coverLogo with name="Logo" %}
    {% if coverLogo %}
    <div class="article-cover">
        <img src="{{ coverLogo }}" alt="{% archiveDetail with name="Title" %}" />
    </div>
    {% endif %}

    {# 获取文档内容，启用Markdown渲染和图片懒加载 #}
    <div class="article-content markdown-body">
        {% archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
        {{ articleContent|safe }}
    </div>

    {# 获取文档描述 #}
    {% archiveDetail description with name="Description" %}
    {% if description %}
    <div class="article-description">
        <p><strong>简介：</strong>{{ description }}</p>
    </div>
    {% endif %}

    {# 获取并显示自定义字段（假设有一个名为"来源"的字段） #}
    {% archiveDetail source with name="来源" %}
    {% if source %}
    <p class="article-source">来源：{{ source }}</p>
    {% endif %}

    {# 获取并显示文档标签 #}
    <div class="article-tags">
        <strong>标签：</strong>
        {% tagList tags %}
        {% for tagItem in tags %}
        <a href="{{ tagItem.Link }}">{{ tagItem.Title }}</a>{% if not forloop.Last %}, {% endif %}
        {% endfor %}
        {% endtagList %}
    </div>
</article>

Summary

To obtain detailed information about the current document in the AnQiCMS template is a fundamental and crucial operation. By mastering the use ofarchiveDetailLabel, you can accurately extract the title, content, thumbnail, and various custom fields of the document. Combine|safeFilter,renderParameters to process Markdown content and, stampToDateThe function performs time formatting, allowing you to create rich and elegant web page interfaces. Remember to always sanitize user-generated content when|safeThe filter maintains vigilance to ensure the safety of the content.

Frequently Asked Questions (FAQ)

Why did I use it in the template?archiveDetailThe tag, but no content is displayed?

There may be several reasons. First, make sure you are currently accessing a document detail page becausearchiveDetailThe tag defaults to attempting to retrieve the document information of the current page. If you use this tag on a non-document detail page (such as a list page or homepage) without specifyingidortokenThe parameter, it will not be able to find the corresponding document. Next, check whethernamethe field name specified in the parameter is correct, including whether the case matches, for exampleTitleinstead oftitle. Finally, if you are trying to retrieve a custom field, please confirm that the field is correctly configured in the backend content model and that the current document indeed has the value of that field filled in.

When displaying document content, I used|safea filter, but I am still worried about security risks, any suggestions?

|safeThe filter indicates that the template engine should treat the output content as safe HTML and no longer escape it.Although it is essential for displaying rich text content, it indeed introduces potential XSS risks, especially when the content is input by untrusted users.It is recommended that you strictly clean and filter the content submitted by users in the background, removing malicious scripts or unsafe HTML tags to minimize risks as much as possible.|safeInstead, I rely on the system's built-in Markdown rendering function (render=trueThis usually will be safer.

How can I get the detailed information of the current document category (such as category name, category link)?

The ID of the current document category can be obtained by{% archiveDetail with name="CategoryId" %}Get. After obtaining the category ID, you can use it further.categoryDetailtags to get the details of the category. For example:

{% archiveDetail currentCategoryId with name="CategoryId" %}
{% categoryDetail categoryInfo with id=currentCategoryId %}
<p>分类名称：<a href="{{ categoryInfo.Link }}">{{ categoryInfo.Title }}</a></p>

or,archiveDetailthe tag itself also providesCategoryField, it can directly obtain the category object, which is more concise:

{% archiveDetail archiveCategory with name="Category" %}
<p>分类名称：<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a></p>