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

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

Understand the content structure of Anqi CMS

In AnQi CMS, all content is organized based on the 'content model', such as common article models, product models, etc.Each model includes a series of standard fields (such as title, content, description, thumbnail) and additional fields customized according to your business needs.These fields are the basis for the content you retrieve and display on the front page.

Precisely obtain the core tags for specific document details:archiveDetail

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

How to specify the document to be displayed

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

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

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

Accurately call each item

Once you pass througharchiveDetailOnce the tag locks the target document, you can go throughnameSpecify the specific field to be displayed.

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

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

    If you want to display a SEO optimized title, you can usename="SeoTitle".

  2. Display document descriptionA brief description of the document is very important for both users and search engines. Usename="Description"and it is done:

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

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

    • Cover main image (Logo) or thumbnail (Thumb): Usually used for a single 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 showcase 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. Display document contentThe document content usually includes HTML format, and may also include Markdown syntax that needs to be converted. When usingname="Content"Be sure to cooperate when obtaining the text.|safeA filter 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=trueParameters allow 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 usestampToDateThe filter to format it as a readable date and time:

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

    HerearchiveThe variable usually refers to the document object of the current page, or you can{% archiveDetail archive with ... %}Define the document variable.

  6. Show custom fieldThe strength of AnQi CMS lies in its flexible content model, you can add various custom fields (such as author, source, product parameters, etc.) to different models. To display these fields, you can directly use the field names they call:

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

    If you want to iterate through and display all the 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

Assuming we want to display the "About AnQi CMS" document with ID 1, including the title, description, body, main image, and custom "version number" field:

``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">{{