How to obtain document detail data and display content in AnQiCMS template?

As an experienced CMS website operation person in the safety industry, I know that it is crucial to efficiently and accurately obtain and present document detail data in terms of content display.A well-crafted detail page not only meets users' in-depth information needs, but also effectively enhances the stickiness of the website and search engine performance through optimizing content structure and user experience.

In Anqi CMS, taking advantage of its flexible Django template engine syntax, getting and displaying document detail data is a direct and powerful process.The core lies in using specially designed template tags, which can accurately extract the required information from the database and present it in a structured way on your web page.

Core tag: Get document detail data

The main tag used to obtain detailed document data in the Anqi CMS template isarchiveDetail.This tag is the foundation for building any article, product, or other document detail page based on a content model.Through it, you can access the title, content, images, creation time, category, and even any custom fields of the document.

UsearchiveDetailThe basic syntax of tags is:{% archiveDetail 变量名称 with name="字段名称" %}. Among them,nameThe parameter specifies the specific document field you want to obtain, and变量名称It is an optional parameter, which is used when you need to store the obtained data into a variable for subsequent more complex processing.If the variable name is not specified, the tag will directly output the field content.

In most cases, in the document detail page template ({模型table}/detail.htmlor{模型table}/detail-{文档ID}.html) in, archiveDetailThe tag will default to retrieving the data of the currently visited document, therefore no additional document ID needs to be specified. However, if you need to retrieve the details of a specific document on other pages (such as the homepage or list page), you can do so byidortokenParameters to explicitly specify the target document, such as{% archiveDetail with name="Title" id="1" %}or{% archiveDetail with name="Title" token="your-document-alias" %}. For users with multi-site deployments,siteIdthe parameter allows you to retrieve data across sites.

Display the basic information of the document

The document title is the first element that users pay attention to. You can use{% archiveDetail with name="Title" %}to display the document title. Similarly, the introduction or description of the document can be displayed through{% archiveDetail with name="Description" %}Retrieve.

The main content of the document is the core of the detail page. It uses{% archiveDetail with name="Content" %}This will output the full content of the document. It is worth noting that if your content is written using a Markdown editor, you may need to use an extrarender=trueParameters to ensure Markdown is correctly rendered as HTML, for example{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}. To prevent potential XSS attacks, it is strongly recommended to use for outputting content that includes HTML.|safeFilter. In addition, to optimize page loading speed, you can also combinelazy="data-src"parameters to implement lazy loading of images.

the link of the document (Link) and reading volume (Views), Creation time (CreatedTime), and Update time (UpdatedTime) are also common components of the detail page. For example,{{stampToDate(archive.CreatedTime, "2006-01-02")}}This format timestamp tag can convert timestamps into readable date format. The cover image of the document usually hasLogo(First image) andThumb(Thumbnail), if the document contains multiple images as a carousel or album, you can accessImagesField retrieves an array of image URLs, which you can iterate through to display all images.

In-depth mining of associated data

A document detail page often contains not only the data of the document itself, but also its associated categories, related tags, and various custom parameters defined in the content model.

Category information: PassarchiveDetailTags retrieved from comments.CategoryField, can directly access the ID, title, link, description of the category information. For example,{% archiveDetail archiveCategory with name="Category" %}<a href="{{ archiveCategory.Link }}">{{ archiveCategory.Title }}</a>Easily display the name and link of the document category. You can also use it separately.categoryDetailtags, by passing the document'sCategoryIdto get detailed information about the category.

Document Tag: Document tags are another important way to associate content.archiveDetailTags themselves do not directly output the tag list, but you can combinetagListtags, by passing the current document's ID (itemId=archive.IdTo get and display all related tags. This allows users to discover more relevant content based on their interests.

Custom parameter: The AnQi CMS content model allows you to define unique custom fields for different types of documents.For example, a product model may have fields such as "pricearchiveParamsTo get tags. By iterating through.archiveParamsreturnedparamsArray, you can dynamically display all custom field names and values, or specifyname="自定义字段名"to get the value of a specific custom field. For example,{% archiveDetail with name="author" %}will directly output the name ofauthorCustom field content.

Case study: Build a typical document detail page

To better understand the application of the above tags, let's look at two common application scenarios:

Typical article detail page layout

You may combine tags in this way to display information on an article detail page:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="meta-info">
        <a href="{% categoryDetail with name='Link' %}">所属分类：{% categoryDetail with name='Title' %}</a>
        <span>发布日期：{% archiveDetail with name="CreatedTime" format="2006年01月02日" %}</span>
        <span class="tags">标签：
            {% tagList tags with itemId=archive.Id limit="5" %}
            {% for item in tags %}
            <a href="{{item.Link}}">{{item.Title}}</a>
            {% endfor %}
            {% endtagList %}
        </span>
        <span>浏览量：{% archiveDetail with name="Views" %}</span>
    </div>
    <div class="document-content">
        {%- archiveDetail articleContent with name="Content" render=true lazy="data-src" %}
        {{articleContent|safe}}
    </div>
</article>

Typical product detail page layout

For the product detail page, in addition to basic information, it will also highlight product images, parameters, and contact information:

<section class="product-detail">
    <div class="product-gallery">
        {% archiveDetail productImages with name="Images" %}
        {% if productImages %}
            {% for img in productImages %}
                <img src="{{img}}" alt="{% archiveDetail with name='Title' %}" />
            {% endfor %}
        {% else %}
            <img src="{% archiveDetail with name='Logo' %}" alt="{% archiveDetail with name='Title' %}" />
        {% endif %}
    </div>
    <div class="product-info">
        <h1>{% archiveDetail with name="Title" %}</h1>
        <div class="product-params">
            {% archiveParams params %}
            {% for item in params %}
            <p><span>{{item.Name}}：</span><span>{{item.Value}}</span></p>
            {% endfor %}
            {% endarchiveParams %}
        </div>
        <p class="description">{% archiveDetail with name="Description" %}</p>
        <div class="contact-info">
            联系我们：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
        </div>
    </div>
    <div class="product-content">
        <h2>产品详情</h2>
        {%- archiveDetail productFullContent with name="Content" render=true %}{{productFullContent|safe}}
    </div>
</section>

In the above examples, we combinedarchiveDetail/categoryDetail/tagList/archiveParamsandcontactCreated a document detail display page with multiple tags and complete functions.By this modular approach, you can flexibly combine these tags according to specific business needs to create unique content detail pages.

Frequently Asked Questions

How can you ensure that HTML tags or Markdown syntax in the document content are displayed correctly, rather than as plain text output?

When you enter document content with HTML tags or Markdown syntax in the content editor, by default, for security considerations, AnQi CMS may escape the HTML content, causing the tags to not render. To ensure that the content is displayed correctly as rich text, you need to outputContentUse field when|safeFilter. For example,{{ archiveContent|safe }}. If the content is entered through a Markdown editor, you also need to specify thearchiveDetailthe tag withrender=trueparameter to indicate that the system should convert Markdown to HTML, for example{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}.

Question two: How can I display more information about the document category on the document detail page, such as the category logo or description?

The document detail page defaults to loading the current document'sCategoryAn object, you can access it byarchiveDetaillabel'sname="Category"obtaining this object with parameters, then accessing its sub-properties, such as{% archiveDetail docCategory with name="Category" %}{{ docCategory.Logo }}. In addition, you can also usecategoryDetailtags, by passing the current document'sCategoryIdTo independently obtain detailed classification information, for example, first obtain the document classification ID{% archiveDetail docCatId with name="CategoryId" %}Then use{% categoryDetail with name="Logo" id=docCatId %}To obtain the classification logo.

Question 3: I have added custom fields to my document content model, how can I display these fields on the document detail page?

The Anqi CMS provides two main ways to display custom document fields. First, if your custom field name isauthor, you can use it directly in the template.{% archiveDetail with name="author" %}Output its value. Secondly, for scenarios that require displaying all custom fields in a loop or performing more complex logic processing, you can usearchiveParamsLabel. This label will return an array or map containing all custom field names and values, you can iterate over it or access it as needed, for example:

{% archiveParams params %}
{% for item in params %}
    <div>{{item.Name}}：{{item.Value}}</div>
{% endfor %}