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 related fields of the document, which can greatly enhance the user experience and richness of page information.AnQiCMS powerful template engine provides an intuitive and flexible way to achieve these goals.
Understanding the template syntax of AnQiCMS
AnQiCMS's template system uses syntax similar to the Django template engine, which mainly operates on data and logic through two forms:
- Double curly braces
{{变量名}}: is used to output the value of a variable. - Single curly braces and percentage signs
{% 标签 %}: is used to control the logical flow (such as conditional judgment, loop) and call various built-in system functions tags.
In 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 make additional queries and can directly access{{archive.字段名}}to access the various properties of the article.
Invoke and display the basic fields of the document.
For the article detail page, invoking basic fields such as the title, content, and synopsis is usually the most direct requirement.
Display article title
To display the article title, you can use{{archive.Title}}. For example:
<h1>{{archive.Title}}</h1>
Display article content
The content of the article is the core of the detail page. Since the article content usually includes 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 instead of being 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 need to be HTML entity escaped.|renderThe filter is used to convert Markdown formatted content to HTML.
Displays the article summary and keywords
The article summary and keywords can also be accessed directlyarchiveRetrieve the corresponding field by variable:
<p class="article-description">{{archive.Description}}</p>
<meta name="keywords" content="{{archive.Keywords}}">
Display the image resources of the article
The article is usually accompanied by a thumbnail, cover image, or even a set of images. AnQiCMS provides various methods to call these images.
Display the cover main image and thumbnail
You can use{{archive.Logo}}Get the cover image of the article, by{{archive.Thumb}}Get the thumbnail. These are usually used for displaying at the top 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 images (multiple images)
If the article is bound to multiple images (as a slideshow or carousel),archive.Imagesan array of image URLs will be returned. You can usefora loop to iterate over 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 %}
Retrieve and display the category and tag information of the article
The classification 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 category and navigate.
Display the classification of the article
The category information of the article can be directly 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, by searching theCategoryIdto query:
{% 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 article
The tags of the article can betagListTags can be obtained. It allows you to specify the current article (by)itemId=archive.Id) to obtain all tags, and byforlooping through and displaying.
{% 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 %}
calling 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 directly accessed througharchiveAccessing variable fields, can also be accessed througharchiveParamsLabel traversal display.
Directly accessing custom fields
If your article model defines a field namedAuthorThe custom field, you can directly get its value as you access other built-in fields:
<p>作者：{{archive.Author}}</p>
Traverse to display all custom fields
When you want to display all custom parameters of an article or you are unsure about the specific name of custom fields, you can usearchiveParamsTags. 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 publish time and view count of the article.
This information is very important for providing context to readers and measuring the popularity of an article.
Format the display of publication/update time.
The publication time of the article.CreatedTimeAnd the update time.UpdatedTimeIt is a timestamp format, needs to be usedstampToDateto format display by tag:
<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.
Show article views
The number of views of the article can be{{archive.Views}}Directly Obtain:
<p>阅读量：{{archive.Views}} 次</p>
Realize front and back documents and related articles recommendation
Provide front and back document navigation and related articles recommendation at the bottom of the article detail page, which can effectively enhance the user's in-site browsing depth.
Display the previous and next articles.
AnQiCMS providesprevArchiveandnextArchiveTwo tags used to get the title and link of the previous and next articles of the current article.
`twig