As an experienced CMS website operation person in the safety industry, I know that the content detail page is a core component of the website, which carries 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 enhances user experience and SEO performance.Strong and flexible template tags are provided by AnQi CMS, allowing us to easily control the display of each item on the page.
Understand the data presentation mechanism of the content detail page of Anqi CMS
In AnQi CMS, whether it is articles, products, or other custom model content, their data will ultimately be presented on the front-end page through template tags. The core lies in utilizingarchiveDetailThis versatile tag is used to obtain detailed data from 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 the entire content object for more complex processing.It can intelligently identify the current document ID or URL alias and pull the corresponding content data.
Get core content information
The most basic requirement is to display the title, summary, and main content of the content. UsingarchiveDetailtags, we can directly go throughnameparameters to specify the field names to be retrieved.
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:DescriptionField:
<p>{% archiveDetail with name="Description" %}</p>
And the main part of the content details is through:ContentField retrieval. It is worth noting that,ContentThe field may contain HTML or other rich text formats. To ensure that this content is correctly parsed as HTML, it is usually necessary to配合|safeThe filter is used together. Moreover, if the content uses a Markdown editor, you can use parameters to let the CMS automatically convert it to HTML.render=trueparameters to let CMS automatically convert it to HTML.
<div>
{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}
</div>
For the internal subtitle of the content, Anqi CMS also providesContentTitlesA field that returns an array containing the tags, levels, and text of various headings in the article content, which is very useful for generating an article directory or navigation.You can iterate over this array to build a dynamic catalog.
{% 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 for the content
Images are an indispensable part of the content detail page. Anqi CMS provides multiple fields for content images:LogoUsed to obtain the main image or featured image of the content,ThumbUsed to obtain the thumbnail, andImagesYou can get all related images of the content (for example, the group images of product details).
To display the main image or thumbnail, you can do this:
<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 carousels,Imagesthe field will return an array of image URLs, you need toforloop 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 perform lazy loading for images,Contentthe field also supports in the calllazyparameters, for examplelazy="data-src"which will cause the content to besrcthe attribute to be replaced withdata-srcfor the convenience of front-end script lazy loading optimization.
Flexible application of associated information and custom fields
In addition to core content and images, detail pages often also need to display the publish time, views, category, related tags, and even custom fields unique to the model.
The publish time or update time of the content you want to display, you can useCreatedTimeandUpdatedTimefield, and combinestampToDatetags to format:
<span>发布时间：{{ stampToDate(archive.CreatedTime, "2006年01月02日 15:04") }}</span>
archive.CreatedTimeHerearchiveIt is through{% archiveDetail archive with name="Id" %}Predefined variable names, or if the page itself is a detail page, you can directly use built-inarchive.CreatedTime.
The page views of the content can be obtained throughViewsthe field:
<span>浏览量：{% archiveDetail with name="Views" %}</span>
To obtain detailed information about the category to which the content belongs, such as the category name and link, you can use it directly on the detail pagecategoryDetailTag, because it defaults to obtaining the category to which the current content belongs.
<a href="{% categoryDetail with name='Link' %}">所属分类：{% categoryDetail with name='Title' %}</a>
For tags associated with content, you can usetagListTags to retrieve and traverse to 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 you can alsoarchiveDetail with name="你的自定义字段名"Directly get 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 field namedProductWeight: custom field
<p>产品重量：{% archiveDetail with name="ProductWeight" %}</p>
Practical case: Building a standard article detail page
Combining the above tags, a typical article detail page template may look like this, clearly showing the title, category, publication time, tags, reading volume, and main content of the article:
<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. By usingarchiveDetail/categoryDetailandtagListThe flexible use of tags, we can accurately control the display of each element on the page according to the design requirements.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?Firstly, 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 thenameDoes the parameter match the name of the custom field's 'call field' (for example, if the call field isproduct_skuthen it should be used{% archiveDetail with name="product_sku" %}). If it still does not display, you can try using{% archiveParams params %}Tag to iterate over all parameters, check if your custom fields are included inparamsthe array for debugging.
What tag should I use to display the link to the previous and next article on the detail page?AnQi CMS provides a special tag for this:prevArchiveUsed to get the previous article,nextArchiveUsed to get the next article. They will automatically judge and get the corresponding data based on the ID of the current article. You can use them like this:
<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 the HTML code (such as video embed code) in the content displays normally rather than being escaped?When you usearchiveDetail with name="Content"When extracting the main content of the content, if it 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 adding variables|safeThe filter explicitly tells the template that this content is safe and does not need to be escaped. For example:
<div>
{% archiveDetail articleBody with name="Content" render=true %}
{{ articleBody|safe }}
</div>