As an experienced CMS website operation personnel for information security, I am well aware that the content detail page is a core component of the website, carrying the important mission of displaying key information such as products and articles to users.A well-designed, comprehensive detail page that not only effectively conveys content value but also is the key to improving user experience and SEO performance.Auto CMS provides powerful and flexible template tags, allowing us to easily control the display of each item on the page.
Understanding the data presentation mechanism of the security CMS content detail page in English
In the Anqi CMS, whether it's articles, products, or other custom model content, their data will eventually be presented on the frontend page through template tags. The core lies in usingarchiveDetailThis universal tag is used to obtain detailed data of the current page.This tag is designed to be very flexible, allowing you to retrieve the value of a single field according to your needs, or to retrieve the entire content object for more complex processing.It can intelligently identify the document ID or URL alias currently accessed and pull the corresponding content data.
Get core content information
The most basic requirement is to display the title, abstract, and main content of the content. By utilizingarchiveDetailtags, we can directly accessnamethe field names to be retrieved by specifying the parameters.
For example, to display the title of the current content, you can use:
<h1>{% archiveDetail with name="Title" %}</h1>
If you need to display the description or summary of the content, you can use:DescriptionFields:
<p>{% archiveDetail with name="Description" %}</p>
The main body of the content details is through:ContentField acquisition. It is worth noting that,ContentField may contain HTML or other rich text formats, in order to ensure that these contents are correctly parsed as HTML, it is usually necessary to配合|safeFilter used together. In addition, if the content uses the Markdown editor, you can convert it to HTML automatically throughrender=trueparameters.
<div>
{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}
</div>
For the internal subheadings of the content, Anqi CMS also providesContentTitlesThe field, it returns an array, including the tags, levels, and text of all levels of headings in the article content, which is very useful for generating article catalogs or navigation.You can traverse this array in a loop to build a dynamic directory.
{% archiveDetail contentTitles with name="ContentTitles" %}
<nav class="article-toc">
<ul>
{% for item in contentTitles %}
<li class="level-{{ item.Level }}"><a href="#{{ item.Prefix }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
</nav>
Display images and media resources of the content
The image is an indispensable part of the content detail page. The Anqi CMS provides multiple fields for content images:LogoUsed to obtain the main image or cover image of the content,ThumbUsed to obtain the thumbnail,ImagesThen you can get all associated images of the content (for example, a group of images in product details).
To display the main image or thumbnail, you can operate as follows:
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}">
<img src="{% archiveDetail with name="Thumb" %}" alt="{% archiveDetail with name="Title" %}">
For multi-image display, such as product detail page carousel.Imagesfield will return an array of image URLs, you need to go through.fora loop to iterate through and display them:
<div class="product-gallery">
{% archiveDetail galleryImages with name="Images" %}
{% for imageUrl in galleryImages %}
<img src="{{ imageUrl }}" alt="{% archiveDetail with name="Title" %}">
{% endfor %}
</div>
If you need to handle image lazy loading,ContentField supports during the calllazyparameters, such aslazy="data-src"This will make the contentsrcproperty replaced withdata-srcfor front-end script lazy loading optimization.
Flexible application of associated information and custom fields
In addition to the core content and images, detail pages often also need to display the publication time, views, category, related tags, and even custom fields unique to the model.
The publication time or update time of the content to be displayed can be used.CreatedTimeandUpdatedTimeFields, and combine.stampToDateFormat with tags:
<span>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
archive.CreatedTimeHere are thearchiveis{% archiveDetail archive with name="Id" %}Pre-defined variable names, or if the page itself is a detail page, you can directly use built-in ones.archive.CreatedTime.
The number of content views can be obtained byViewsthe field:
<span>浏览量：{% archiveDetail with name="Views" %}</span>
To get the detailed information of the content category, such as the category name and link, you can directly use it on the detail page.categoryDetailLabel, as it defaults to fetching the category of the current content.
<a href="{% categoryDetail with name='Link' %}">所属分类：{% categoryDetail with name='Title' %}</a>
For tags associated with the content (Tags), you can usetagListtags to fetch and iterate through for display:
<div class="article-tags">
{% tagList tags with itemId=archive.Id limit="10" %}
{% for tagItem in tags %}
<a href="{{ tagItem.Link }}">{{ tagItem.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
One of the most powerful features of AnQi CMS is the flexible content model and custom fields. If you define additional fields for the article or product model, such as “author”, “origin”, “product specifications”, etc., you can througharchiveParamsLabel to iterate over all custom fields, or also througharchiveDetail with name="你的自定义字段名"Directly obtain the value of a specific field.
<div class="custom-fields">
{% archiveParams params %}
{% for paramItem in params %}
<p><span>{{ paramItem.Name }}：</span><span>{{ paramItem.Value }}</span></p>
{% endfor %}
{% endarchiveParams %}
</div>
Or, if I define a namedProductWeightwith a name:
<p>产品重量：{% archiveDetail with name="ProductWeight" %}</p>
Practical case: Build a standard article detail page
Considering all the tags, a typical article detail page template may look like the following, which clearly displays the article's title, category, publish time, tags, reading volume, and main content:
<article class="article-detail">
<h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
<div class="article-meta">
<span class="category">所属分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
<span class="pub-time">发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日") }}</span>
<span class="views">阅读量：{% archiveDetail with name="Views" %}</span>
<div class="article-tags">
{% tagList tags with itemId=archive.Id %}
{% for tagItem in tags %}
<a href="{{ tagItem.Link }}">{{ tagItem.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
</div>
{% if archive.Logo %}
<div class="article-thumbnail">
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}">
</div>
{% endif %}
<div class="article-content">
{% archiveDetail articleBody with name="Content" render=true lazy="data-src" %}
{{ articleBody|safe }}
</div>
</article>
This example shows how to combine multiple tags to render a complete article detail. ByarchiveDetail/categoryDetailandtagListThe flexible application of tags, we can accurately control the display of each element on the page according to the requirements of the design.This design concept of Anqi CMS greatly enhances the flexibility and maintainability of content display.
Frequently Asked Questions
My custom field is not displayed on the detail page template, what's the matter?Please first check if you have added custom fields for this content model in the background and filled in the corresponding data when publishing content. Secondly, confirm that you are using in the template.nameIs the parameter fully matched with the "Calling field" name of the custom field (for example, if the calling field isproduct_sku, then{% archiveDetail with name="product_sku" %}). If it still does not display, you can try using{% archiveParams params %}Label to iterate over all parameters, check if your custom fields contain inparamsthe array for debugging.
I want to display the link to the previous and next articles on the detail page, what tag should I use?AnQi CMS provides a special tag for this:prevArchiveUsed to get the previous article,nextArchiveUsed to fetch the next article. They will automatically determine and fetch the corresponding data based on the current article ID. You can use them in this way:
<nav class="post-navigation">
{% prevArchive prevArticle %}
{% if prevArticle %}
<a href="{{ prevArticle.Link }}">上一篇：{{ prevArticle.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive nextArticle %}
{% if nextArticle %}
<a href="{{ nextArticle.Link }}">下一篇：{{ nextArticle.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</nav>
How to ensure that HTML code (such as video embedding code) is displayed normally instead of being escaped?When you usearchiveDetail with name="Content"When obtaining the main content of the content, if the content contains HTML tags (such as<iframe>Video embedding code), by default, the Django template engine may escape these tags for security reasons, which may cause them not to render normally. To solve this problem, you need to outputContentWhen defining variables, add|safeA filter to explicitly tell the template that this content is safe and does not require escaping. For example:
<div>
{% archiveDetail articleBody with name="Content" render=true %}
{{ articleBody|safe }}
</div>