In website content operation, the navigation design of the article detail page is crucial.An experience-friendly detail page, which can not only clearly present the current content but also naturally guide readers to browse more related or coherent articles.The display of the 'Previous' and 'Next' articles is a classic approach to enhance user stickiness and the efficiency of the internal link structure of the website.
AnqiCMS as an enterprise-level content management system developed based on the Go language, has fully considered the efficiency and flexibility of content management from the very beginning.It provides a simple and efficient architecture, SEO-friendly features, and a powerful template tag system, making the implementation of common functions very intuitive.Through its Django-style template syntax, even users without a strong programming background can easily transform technical concepts into practical website features.
In AnqiCMS, the implementation of the "Previous ArticleprevArchiveandnextArchive.These tags are specifically used to automatically obtain the information of the previous and next articles of the current article on the article detail page, without the need for complex logical judgment or database queries, greatly simplifying the template development work.
How to implement 'Previous' and 'Next' functions using tags
You need to perform operations in your article detail page template file. According to the template making conventions of AnqiCMS, the template for the article detail page is usually named{模型table}/detail.html(For example, if it is an article model, it may bearchive/detail.htmlorarticle/detail.html).
When editing this template file, you can insert in the appropriate position such as below the article content or in the sidebarprevArchiveandnextArchiveTags. These tags will automatically detect the articles on the current page and try to find the previous and next content associated with the current article in the database.
These tags support retrieving multiple fields of the previous or next article, including but not limited to:
- IdThe unique identifier ID of the article.
- Title: The title of the article.
- LinkThe URL link of the article.
- ThumbThe thumbnail of the article.
It is important that not all articles have a previous or next one in practical application.For example, the first article does not have 'Previous', and the last article does not have 'Next'.ifLogic judgment tag for conditional rendering.
The following is a typical code example that displays the titles and links of "Previous
{# 假设这是你的文章详情页模板文件，例如：archive/detail.html #}
<article class="article-detail">
{# 这里是文章标题、内容等详情信息的显示 #}
<h1>{{ archive.Title }}</h1>
<div class="article-content">
{{ archive.Content|safe }}
</div>
{# 上一篇和下一篇文章的导航区域 #}
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %} {# 获取上一篇文章的信息，并将其赋值给变量 'prev' #}
{% if prev %} {# 判断是否存在上一篇文章 #}
<a href="{{ prev.Link }}">
<i class="icon-arrow-left"></i> 上一篇: {{ prev.Title }}
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %} {# 获取下一篇文章的信息，并将其赋值给变量 'next' #}
{% if next %} {# 判断是否存在下一篇文章 #}
<a href="{{ next.Link }}">
下一篇: {{ next.Title }} <i class="icon-arrow-right"></i>
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
</article>
In the above code,{% prevArchive prev %}Attempts to retrieve the data of the previous article of the current article and store it inprevthe variable. Ifprevthe variable has a value (i.e., there is a previous article),{% if prev %}就会执行其内部的代码块，显示上一篇文章的链接和标题。nextArchiveThe way it works is also completely the same. In this way, you can ensure that the page displays "Nothing here" or remains blank when there is no corresponding article, rather than showing a broken link.
Common Questions (FAQ)
Q1: What is the sorting rule for the 'Previous' and 'Next' articles? How does the system determine which article is the 'Previous' or 'Next'?
A1: AnqiCMS 的 EnglishprevArchiveandnextArchive标签默认是根据文章的发布时间（ EnglishCreatedTime）or article ID to sort and determine the previous and next articles.In most cases, they will search for nearby articles in reverse chronological order (with the latest articles first) or in chronological order (with the oldest articles first).This means that if your articles are published in chronological order, the "Previous
Q2: 除了标题和链接，我还能显示上一篇文章的缩略图吗？ English
A2: Absolutely.prevArchiveandnextArchiveThe label also supports getting the thumbnail field of the article. You canprevornextaccess in variablesThumbfield. For example, to display the thumbnail in the link, you can modify the code like this:
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %}
<i class="icon-arrow-left"></i> 上一篇: {{ prev.Title }}
</a>
{% endif %}
This will check if the previous article has a thumbnail, if it does, then it will display it in the link.
Q3: How to control the display of 'Previous article'/'Next article' only on detail pages of specific article models (such as 'News' model) and not on other models (such as 'Product' model)?
A3: This can be achieved by managing the template file. AnqiCMS allows you to define different detail page templates for different content models. For example, you can have aarchive/detail.htmlFor articles, oneproduct/detail.htmlFor products. You only need to include the "Previous"/"Next" function in the template file (such asarchive/detail.html）中添加上述代码，而在不需要的模板文件（如product/detail.html）中不添加即可。这样，就能实现精确的功能控制。