How to use AnQiCMS template tags to accurately control the display content of article detail pages?

The website is operational, and the article detail page is a key link for users to deeply interact with content and understand products or services.A well-designed, accurate information presentation detail page, which can not only significantly improve user experience, but also effectively assist in SEO optimization.In AnQiCMS such a flexible and efficient content management system, we can finely control the content of the article detail page by cleverly using its template tags.

AnQiCMS is developed in Go language, with its concise and efficient architecture, providing powerful functions similar to the Django template engine.This means that even if you do not have a deep development background, you can still accurately control the display of each element on the page by using an intuitive tag syntax, just like building with blocks.

Core tags:archiveDetailControl everything

In the article detail page, all content revolves around the currently displayed article. Anqi CMS provides the core ofarchiveDetailtags, which are the entry points to obtain all detailed information about the article.

Generally, in the template file of the article detail page (such asarchive/detail.htmlIn it, you do not need to specify the article ID, archiveDetailThe tag automatically identifies the article on the current page and provides all its data. The most direct way to call it is like this:

<h1>{{archive.Title}}</h1>
<div class="article-content">
    {{archive.Content|safe}}
</div>

HerearchiveIs the current article object provided by the system by default, througharchive.TitleCan retrieve the article title,archive.ContentThen retrieve the article content. It is particularly important to note that the article content usually contains HTML code, and in order for the browser to parse it correctly rather than display it as plain text, we need to cooperate with|safefilter usage.

Of course, if you want to getnot the current pagethe specific article details,archiveDetailit also supports getting throughidortokento specify the parameters:

{% archiveDetail otherArticle with name="Title" id="100" %}
<div>这篇是ID为100的文章标题：{{ otherArticle }}</div>

here we define a variable namedotherArticleto receive the title of the specified article.

Basic information display: the construction of the article framework

A complete article detail page, in addition to the title and content, it also needs to display many auxiliary information. AnQiCMS tags can help you easily achieve these.

1. Publishing and Update TimeThe time of article publication and update is very important to users and search engines.CreatedTimeandUpdatedTimeThe field returns a timestamp, which we can use.stampToDateThe tag can be used to format it into a readable date and time:

   <span>发布日期：{{stampToDate(archive.CreatedTime, "2006年01月02日 15:04")}}</span>
   <span>最后更新：{{stampToDate(archive.UpdatedTime, "2006-01-02")}}</span>
   

   Among them"2006-01-02 15:04"Is a time formatting template unique to the Go language, very flexible.

2. Article viewsDisplaying the number of times an article has been read usually attracts more users to click.

   <span>阅读量：{% archiveDetail with name="Views" %} 次</span>
   

3. Thumbnail and imageThe cover image or group image of the article can make the page more attractive.

   <img src="{% archiveDetail with name="Logo" %}" alt="{{archive.Title}}" class="article-cover">
   

   LogoThe field usually returns the first image or thumbnail of the article. If the article contains multiple images as a gallery (for example, on a product detail page),ImagesThe field will return an array of image URLs, you can useforLoop through and display:

   <div class="image-gallery">
       {% archiveDetail articleImages with name="Images" %}
       {% for imgUrl in articleImages %}
           <img src="{{imgUrl}}" alt="{{archive.Title}}的图片" loading="lazy">
       {% endfor %}
       {% endarchiveDetail %}
   </div>
   

   Hereloading="lazy"It is an HTML attribute used to implement lazy loading of images, improve page performance, and when used with AnQiCMS tags, it can achieve very good effects. In addition,archiveDetaillabel'sContentThe field supports passing throughlazy="data-src"Parameters to implement lazy loading of images, or throughrender=trueParameters to render Markdown content on the front end.

Link content with navigation: enrich the page ecosystem

The detail page is often not isolated, it needs to be associated with other content to provide convenient navigation.

1. CategoryDisplay the category of the article, and provide a category link for easy browsing of similar articles. It can be accessed directly througharchiveObject to get category information:

   <span>所属分类：<a href="{{archive.Category.Link}}">{{archive.Category.Title}}</a></span>
   

   If you need more detailed classification information, you can also usecategoryDetailTags:

   {% categoryDetail currentCategory with id=archive.CategoryId %}
   <span>分类描述：{{currentCategory.Description}}</span>
   

2. Tag tagTags are another way to categorize articles, helping users discover related topics. UsetagListTags, and pass in the current article ID, you can retrieve and display all related tags:

   <div class="article-tags">
       {% tagList tags with itemId=archive.Id limit="10" %}
       {% for tag in tags %}
           <a href="{{tag.Link}}" class="tag-item">{{tag.Title}}</a>
       {% endfor %}
       {% endtagList %}
   </div>
   

3. Previous/Next articleProvide navigation at the bottom of the article,