Build a rich content website, the article detail page is undoubtedly the core.It carries the most specific and valuable information on the website, and it is also one of the pages where users stay the longest and interact the most.In AnQiCMS (AnQi CMS), with its flexible template engine and rich tag system, we can easily obtain and elegantly display the detailed content of the current article.
The AnQiCMS template system is designed simply and efficiently, similar to Django template syntax, using double curly braces{{变量}}Get variable value, single curly braces with a percentage sign{% 标签 %}Invoke feature tag. This allows even developers unfamiliar with the Go language to quickly get started with template customization.
Core tags:archiveDetailDetailed explanation
To get the detailed content of the current article on the article detail page, the most core tag isarchiveDetail. As the name implies, it is specifically used to retrieve the details of a single "archive" (i.e., an article or product, etc.).
When we visit an article detail page, AnQiCMS will automatically identify the article ID of the current page and provide all the data of the article. Usually, you do not need to make any additional configuration and use it directlyarchiveDetailTags can be used to retrieve the article data on the current page.
archiveDetailthe basic usage of tags is{% archiveDetail with name="字段名称" %}.nameThe parameter specifies a specific field of the article you want to retrieve.
The following are some commonly used article fields and their retrieval methods.
- Article title (
Title)To display the article title, you can use{% archiveDetail with name="Title" %}. This will directly output the current article title. - Article summary (
Description): The article summary is usually used for abstracts or SEO descriptions, the method of obtaining it is{% archiveDetail with name="Description" %}. - The article body (
Content)This is the core content of the article. Due to the possibility of HTML tags or Markdown syntax in the main text, special attention needs to be paid when displaying in the template.First, the main content needs to be used|safeA filter to ensure that HTML tags are parsed correctly and not displayed as plain text. For example:{{ archiveDetail with name="Content" | safe }}. If your article content is written using a Markdown editor, AnQiCMS providesrender=trueparameters to automatically render Markdown as HTML:{% archiveDetail with name="Content" render=true | safe %}. Moreover, if images in the text need to be implemented lazy loading, you can also specify parameters such aslazy="data-src"to specify the imagesrcas an alias for the property, to coordinate with the front-end lazy loading script. - Publish time (
CreatedTime) With update time (UpdatedTime): These time fields are usually stored in timestamp format. AnQiCMS providesstampToDateA helper function to format timestamps into readable date strings. For example, displaying the publication date in the format: 2006-01-02{{ stampToDate(archiveDetail with name="CreatedTime"), "2006-01-02") }}. - Cover image (
Logo,Thumb,Images):LogoGenerally refers to the main image or large image of an article,ThumbAre thumbnails. They can be accessed directly<img>Tag reference:<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />. If the article contains multiple cover images (such as product albums),ImagesThe field will return an array of image URLs. At this point, you need to usefora loop to iterate and display these images:{% archiveDetail articleImages with name="Images" %} <div class="image-gallery"> {% for imgUrl in articleImages %} <img src="{{ imgUrl }}" alt="图片描述" /> {% endfor %} </div> {% endarchiveDetail %} - Category (
Category): The classification information of the article can be obtained througharchiveDetailby directly obtaining its classification ID and then combiningcategoryDetailTag to get category name and link:
Or use it directly.{% set categoryId = archiveDetail with name="CategoryId" %} <a href="{% categoryDetail with name='Link' id=categoryId %}"> {% categoryDetail with name='Title' id=categoryId %} </a>{{archive.Category.Title}}Access in this way. - Views (
Views): Display the number of times the article has been viewed simply:{% archiveDetail with name="Views" %}. - Custom field:
AnQiCMS supports adding custom fields for different content models (such as articles, products). If you add custom fields like "author", "source", and so on for the article model in the background, you can obtain them in two ways:
- Directly access a single field:
{% archiveDetail with name="author" %}. - Loop through all custom fields: Use.
archiveParamsLabel. This is very useful when you need to dynamically display all additional properties:{% archiveParams params %} <ul class="article-meta"> {% for item in params %} <li><span>{{ item.Name }}：</span>{{ item.Value }}</li> {% endfor %} </ul> {% endarchiveParams %}
- Directly access a single field:
Actual application example: Build an article detail page
Summing up the tags, a typical article detail page template may look like this, it shows the article title, category, publish time, tags, views, and content:
<article class="article-detail">
<h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
<div class="article-meta-info">
{# 获取文章分类信息 #}
{% set categoryId = archiveDetail with name="CategoryId" %}
<span class="category-link">
分类：<a href="{% categoryDetail with name='Link' id=categoryId %}">{% categoryDetail with name='Title' id=categoryId %}</a>
</span>
{# 格式化显示发布时间 #}
<span class="publish-date">发布于：{{ stampToDate(archiveDetail with name="CreatedTime"), "2006-01-02") }}</span>
{# 显示文章浏览量 #}
<span class="views-count">阅读：{% archiveDetail with name="Views" %}次</span>
{# 获取并显示文章标签 #}
<div class="article-tags">
标签：
{% tagList tags with itemId=archive.Id limit="5" %}
{% for tag in tags %}
<a href="{{ tag.Link }}">{{ tag.Title }}</a>
{% endfor %}
{% endtagList %}
</div>
</div>
{# 显示文章主图，如果存在的话 #}
{% set articleLogo = archiveDetail with name="Logo" %}
{% if articleLogo %}
<div class="article-thumbnail">
<img src="{{ articleLogo }}" alt="{% archiveDetail with name='Title' %}" />
</div>
{% endif %}
<div class="article-content">
{# 显示文章正文，如果为Markdown则渲染，并确保HTML安全解析 #}
{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent | safe }}
{% endarchiveDetail %}
</div>
{# 显示上一篇和下一篇文章链接 #}
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
上一篇：{% if prev %}<a href="{{ prev.Link }}">{{ prev.Title }}</a>{% else %}没有了{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
下一篇：{% if next %}<a href="{{ next.Link }}">{{ next.Title }}</a>{% else %}没有了{% endif %}
{% endnextArchive %}
</div>
</div>
</article>
This code demonstrates how to combine multiple tags to build a relatively complete article detail page.
Advanced tips and注意事项
- Get specific article details: Although
archiveDetailDefault to fetching the article on the current page, but you can also specifyidortokenparameters to fetch details of other articles. For example:{% archiveDetail with name="Title" id="123" %}to get the title of the article with ID 123. - Debug variableIn the process of template development, if the structure of a variable is uncertain, you can use
|dumpthe filter to print out its detailed structure, which is very helpful for debugging:{{ archive|dump }}. - SEO optimizationThe TDK (Title, Description, Keywords) of the article detail page can be obtained through
tdktags, whereasarchiveDetaillabel'sSeoTitle/Keywords/DescriptionThe field directly corresponds to the SEO settings of the article. In addition, the standardized link (CanonicalUrl) is also an important part of SEO, which can be{% tdk with name="CanonicalUrl" %}obtained and applied.
By using these tags and techniques, AnQiCMS users can be very flexible and efficient in obtaining and displaying detailed article content in templates, meeting the diverse needs of website content display.
Frequently Asked Questions (FAQ)
- How to display articles