How to accurately display the detailed content of a specific AnqiCMS document on the front page, including the title, description, and image?

AnQiCMS (AnQiCMS) with its flexible content model and intuitive template tag system, allows you to easily handle the display of front-end content on the website.When we need to present the detailed content of a specific document accurately on the front page, such as the title, description, full text, and related images, understanding its core mechanism and commonly used tags becomes particularly important.

Understanding the content structure of Anqi CMS

In the AnQi CMS, all content is organized based on the "Content Model", such as common article models, product models, etc.Each model includes a set of standard fields (such as title, content, description, thumbnail) and additional fields customized according to your business needs.These fields are the basis for retrieving and displaying content on the front-end page.

Precisely obtain the core tags of a specific document details:archiveDetail

To accurately display the detailed content of a specific document on the front-end page,archiveDetailThe tag is undoubtedly your '万能钥匙'. This tag is specifically used to retrieve all data of a single document, whether it is a standard field or a custom field.

How to specify the document to be displayed

UsearchiveDetailLabeling, you can specify which document's data to retrieve by document ID or URL alias (token).

• Specify by document ID.If you know the document's numeric ID, you can useid="[文档ID]"parameters. For example,{% archiveDetail with name="Title" id="10" %}To get the title of the document with ID 10.
• Specify by URL aliasIf your document URL uses an alias (usually pinyin or English), you can usetoken="[文档别名]"parameters. For example,{% archiveDetail with name="Description" token="anqicms-features" %}.

If the current page itself is a document detail page, and what you want to get is the content of the current document,idortokenThe parameter can even be omitted, the system will automatically identify and load the data of the current document.

Precisely call each item

once you have passed througharchiveDetailOnce the tag locks the target document, it can be accessed throughnameThe parameter specifies the specific fields to be displayed.

1. Display the document titleThe document title is the core of the content, you can usename="Title"to get it. For example:

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

   If you want to display SEO-optimized titles, you can usename="SeoTitle".

2. Display document descriptionA brief description of the document is very important to both users and search engines. Usename="Description"as follows:

   <p class="description">{% archiveDetail with name="Description" id="1" %}</p>
   

3. Display document imageEnglish CMS provides a variety of image types for you to choose from:

   • Cover image (Logo) or thumbnail (Thumb)): Usually used as the main image at the top of the list page or document.

     
     <img src="{% archiveDetail with name="Logo" id="1" %}" alt="{% archiveDetail with name="Title" id="1" %}" />
     

   • Document Group Image (Images)If the document contains multiple images (such as product image albums),Imagesthe field will return an array of image URLs. You need to useforLoop to traverse and display them.

     
     <div class="gallery">
         {% archiveDetail docImages with name="Images" id="1" %}
         {% for img in docImages %}
             <img src="{{ img }}" alt="文档图片" />
         {% endfor %}
     </div>
     

4. Show the document text contentThe document text usually contains HTML format, and may also include Markdown syntax that needs to be converted. When usingname="Content"Please make sure to use it in conjunction with obtaining the text when getting the text|safeFilter to ensure that HTML content is rendered correctly rather than being escaped. If your document content has enabled the Markdown editor, you can also addrender=trueThe parameter allows the system to automatically convert it to HTML:

   <div class="article-content">
       {% archiveDetail docContent with name="Content" id="1" render=true %}
       {{ docContent|safe }}
   </div>
   

5. Display the publish time and update timeTime information is important for users to understand the timeliness of the content.CreatedTimeandUpdatedTimeThe field returns a timestamp, you need to usestampToDatea filter to format it into a readable date and time:

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

   Here are thearchiveA variable usually refers to the document object of the current page, or one that you{% archiveDetail archive with ... %}defined as a document variable.

6. Display custom fieldsThe strength of AnQi CMS lies in its flexible content model, where you can add various custom fields (such as author, source, product parameters, etc.) for different models. To display these fields, you can directly use their field names:

   <p>作者：{% archiveDetail with name="Author" id="1" %}</p>
   

   If you want to iterate over and display all custom parameters of the document, you can usearchiveParamsTags:

   <ul class="custom-params">
       {% archiveParams params with id="1" %}
       {% for item in params %}
           <li>{{ item.Name }}：{{ item.Value }}</li>
       {% endfor %}
   </ul>
   

Combine them together: a complete example

假设我们要显示ID为1的“关于安企CMS”文档，包括标题、描述、正文、主图和自定义的“版本号”字段：

`twig <!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# 调用页面SEO标题和描述 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">

<header>{# 网站头部导航等内容 #}</header>

<main class="container">
    <article class="document-detail">
        {# 获取ID为1的文档所有数据，并赋值给archive变量，以便后续直接调用 #}
        {% archiveDetail archive with id="1" %}

        <h1 class="document-title">{{ archive.Title }}</h1>

        <div class="document-meta">
            <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
            <span>浏览量：{{ archive.Views }}</span>
            {# 假设您的内容模型中有一个“Author”自定义字段 #}
            {% archiveDetail authorName with name="Author" id="1" %}
            {% if authorName %}
                <span>作者：{{ authorName }}</span>
            {% endif %}
        </div>

        {# 显示文档主图 #}
        {% if archive.Logo %}
        <div class="document-featured-image">
            <img src="{{ archive.Logo }}" alt="{{ archive.Title }}" />
        </div>
        {% endif %}

        <p class="document-description">{{