In AnQiCMS, the content detail page is the key area where you display core information and attract readers.Effectively call and display the title, content, and various related fields of the document, which can greatly enhance the user experience and richness of the page information.AnQiCMS's powerful template engine provides an intuitive and flexible way to achieve these goals.
Understand AnQiCMS template syntax
AnQiCMS's template system uses syntax similar to the Django template engine, it mainly operates data and logic through two forms:
- double curly braces
{{变量名}}: is used to output the value of a variable. - single curly braces and percent signs
{% 标签 %}Used to control the logical flow (such as conditional judgments, loops) and call various built-in system functions tags.
On the article detail page, the system will automatically load all the data of the current article into a variable namedarchive. This means that you do not need to perform an additional query and can directly access{{archive.字段名}}the way to access the various properties of the article.
call and display the basic fields of the document.
For the article detail page, calling the basic fields such as title, content, and introduction is usually the most direct need.
Display article title
You can use to display the article title{{archive.Title}}. For example:
<h1>{{archive.Title}}</h1>
Display article content
The article content is the core of the detail page. Since the article content usually contains HTML structure (such as rich text editor output), it needs to be used in the output.|safeA filter to ensure that HTML is parsed correctly rather than displayed as plain text.If your content has enabled the Markdown editor, you can also choose whether to render it in the template.
<div class="article-content">
{# 最常用的方式：确保HTML安全渲染 #}
{{archive.Content|safe}}
{# 如果内容可能包含Markdown，并希望在模板中渲染为HTML #}
{# {{archive.Content|render|safe}} #}
{# 如果不想渲染Markdown内容，保持原始状态 #}
{# {{archive.Content|render:false|safe}} #}
</div>
|safeThe filter tells the template engine that this content is safe and does not require HTML entity encoding.|renderThe filter is used to convert Markdown formatted content to HTML.
Display the article summary and keywords
The article summary and keywords can also be accessed directly.archiveRetrieve the corresponding field variable:
<p class="article-description">{{archive.Description}}</p>
<meta name="keywords" content="{{archive.Keywords}}">
Display the image resources of the article
Articles are usually accompanied by thumbnails, cover images, and even image groups. AnQiCMS provides multiple ways to call these images.
Display the cover main image and thumbnail
You can use it to{{archive.Logo}}Get the cover image of the article, by{{archive.Thumb}}Get the thumbnail. These are usually used for the header display of article lists or detail pages:
{% if archive.Logo %}
<img src="{{archive.Logo}}" alt="{{archive.Title}}" class="article-cover-image">
{% endif %}
{% if archive.Thumb %}
<img src="{{archive.Thumb}}" alt="{{archive.Title}}" class="article-thumbnail">
{% endif %}
Display the article's group image (multiple images)
If the article is bound to multiple images (as a group image or carousel),archive.Imagesit will return an array of image URLs. You can usefora loop to iterate and display these images:
{% if archive.Images %}
<div class="article-gallery">
{% for imageUrl in archive.Images %}
<img src="{{imageUrl}}" alt="{{archive.Title}} - 图片" class="gallery-item">
{% endfor %}
</div>
{% endif %}
Get and display the article's category and tag information
The category and tags of an article are important ways to organize content, displaying them on the detail page can help users better understand the article's ownership and navigate.
Display the category of the article
The category information of the article can be obtained fromarchive.Categorythe object, which includes the title, link and other information of the category.
<p>分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></p>
If you need more detailed classification information, such as the description or thumbnail of the category, you can also combinecategoryDetailtags, through theCategoryIdto search:
{% categoryDetail currentCategory with id=archive.CategoryId %}
<p>分类：<a href="{{currentCategory.Link}}">{{currentCategory.Title}}</a></p>
<p>分类描述：{{currentCategory.Description}}</p>
{% endcategoryDetail %}
Display related tags of the articles
The tags of the articles can be accessed throughtagListLabel to get. It allows you to specify the retrieval of the current article (viaitemId=archive.Id) all tags, and thenforto loop through and display.
{% tagList tags with itemId=archive.Id limit="10" %}
{% if tags %}
<div class="article-tags">
标签：
{% for tagItem in tags %}
<a href="{{tagItem.Link}}" class="tag-link">{{tagItem.Title}}</a>
{% endfor %}
</div>
{% endif %}
{% endtagList %}
call the custom fields of the article
AnQiCMS allows you to define custom fields for different content models to meet the needs of personalized content display. These custom fields can be accessed directly througharchiveVariable field name access, can also be accessed througharchiveParamsLabel traversal display.
Directly access custom fields
If your article model defines a field namedAuthorThe custom field, you can access its value directly as you would with other built-in fields:
<p>作者：{{archive.Author}}</p>
Traversal to display all custom fields
When you want to display all the custom parameters of an article or you are not sure about the specific name of the custom fields, you can usearchiveParamsThe tag. It returns an array object containing all custom field names and values.
{% archiveParams customParams %}
{% if customParams %}
<div class="article-custom-fields">
{% for field in customParams %}
<p><strong>{{field.Name}}：</strong>{{field.Value}}</p>
{% endfor %}
</div>
{% endif %}
{% endarchiveParams %}
Displays the article's publication time and view count.
This information is very important for providing context to readers and measuring the popularity of the article.
Formatted display of publication/update time
The publication time of the articleCreatedTimeand update timeUpdatedTimeIs timestamp format, needs to be usedstampToDateLabel formatting display:
<p>发布时间：{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</p>
<p>更新时间：{{stampToDate(archive.UpdatedTime, "2006-01-02 15:04:05")}}</p>
You can also customize the time format according to your needs, for example:2006-01-02/15:04etc.
Display the article view count
The article view count can be accessed through:{{archive.Views}}Directly get:
<p>阅读量：{{archive.Views}} 次</p>
Implement previous and next documents and related articles recommendation
Provide navigation to previous and next documents and related articles at the bottom of the article detail page, which can effectively enhance the depth of users' in-site browsing.
Show the previous and next articles
AnQiCMS providesprevArchiveandnextArchiveTwo tags to get the title and link of the previous and next articles of the current article.
`twig