In website content operation, guiding users to smoothly browse related content is a key link to improving user experience and website depth.After a user finishes reading an article, if they can immediately see links to related or sequential previous and next articles, it will undoubtedly encourage them to continue exploring. This not only helps to reduce the bounce rate but also effectively improves the website's PV (page views) and SEO performance.AnQiCMS (AnQiCMS) is an efficient content management system that provides a very convenient way to implement this feature.
In AnQi CMS, it is much simpler than you imagine to obtain and display the links to the previous and next articles, which is mainly due to the built-in system featuresprevArchiveandnextArchiveThese are powerful template tags. These tags are designed to be very intuitive, and when you use them on the article detail page, they will automatically find and provide data for adjacent articles based on the current article's sorting in the list.
UnderstandingprevArchiveandnextArchiveTag
prevArchiveThe tag is used to get the information of the previous article of the current article, andnextArchiveTags are used to retrieve information about the next article. They do not require any additional parameters to specify the article ID because they will automatically identify the current article in the context of the article detail page and find the adjacent articles.
When using these tags, you need to use a variable to receive the article data they return. For example, we can assign the data of the previous article toprevVariable, assigning data to the next articlenextVariable.
{% prevArchive prev %}
{% nextArchive next %}
It is noteworthy that you may encounter some articles that are the first or last in a series, in which case there is no previous or next article.In order to avoid displaying empty links, we need to make a simple judgment when using these variables.
Information about the articles that can be obtained
Variables obtained through these two tags (for example, those we defineprevornext), you can access a series of information about adjacent articles, which is very similar to the details of the articles obtained througharchiveDetailtags. The most commonly used and core ones include:
Id: The unique identifier ID of the article.Title: The title of the article.Link: The access link of the article.Thumb: The thumbnail address of the article, if set.Description: The brief description or summary of the article.Views: The number of views of the article.
You can use it to{{变量名.字段名}}to call this information, for example,{{prev.Title}}It will display the title of the previous article,{{next.Link}}will provide a link to the next article.
How to display previous/next article links on the article detail page
Now, let's integrate these knowledge points and see how to actually operate in your article detail page template.This code is usually placed at the bottom of the article content or in some sidebar position, so that users can easily proceed to the next step after reading the current content.
Assuming your template file isarchive/detail.html(This is one of the default naming rules of AnQi CMS article detail page template), you can add the following code snippet to it:
{# 假设我们正在文章详情页，这里会自动获取当前文章的上一篇和下一篇数据 #}
<nav class="article-pagination">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
<i class="icon-arrow-left"></i> 上一篇: {{ prev.Title }}
</a>
{% else %}
<span><i class="icon-arrow-left"></i> 没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
下一篇: {{ next.Title }} <i class="icon-arrow-right"></i>
</a>
{% else %}
<span>没有下一篇了 <i class="icon-arrow-right"></i></span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
In this code, we first use{% prevArchive prev %}and{% nextArchive next %}The data of the previous and next articles were obtained and assigned separatelyprevandnextVariable.
Then, we use{% if prev %}and{% if next %}such conditional judgment to check if these variables exist. If they exist, we proceed through<a>Label to construct a clickable navigation with a title and link. If it does not exist, display a prompt message like 'No previous post' or 'No next post'.
You can optionally add a thumbnail image to the design of the template ({{prev.Thumb}}or{{next.Thumb}}) to make navigation more visually appealing. For example:
{# 在链接内部添加缩略图，如果存在的话 #}
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="pagination-thumb">
{% endif %}
In this way, Anqi CMS can help you easily achieve seamless navigation between articles, enhancing the content browsing experience of users on your website.It fully utilizes the efficient processing capabilities and flexible template mechanism under the Go language architecture, allowing content operators to focus more on the content itself rather than complex code implementation.
Frequently Asked Questions (FAQ)
What is the basis for determining the previous/next article?The previous and next article features of Anqi CMS usually depend on the publication time of the article(
CreatedTime）or the sorting rules of the system backend to determine the logical sequence of the articles.This means that if your articles are arranged in a category in reverse chronological order, then 'Previous article' usually refers to the article published earlier, and 'Next article' refers to the article published more recently.In the context of the article list, they will determine the adjacent relationship according to the natural sorting in the list.If I want to jump to the previous/next article only within the same category, can this tag achieve that?
prevArchiveandnextArchiveWhen the tag is used on the article detail page, it will default to trying to retrieve articles adjacent to the current article in the same context (usually the same category or the same list) according to the sorting rules.This means that if you are entering the article detail page from a list of articles in a certain category, then the previous/next articles returned by these tags will usually be limited to that category.How to customize the display style of the previous/next link?You can fully customize the style of the previous/next link with CSS. In the above example code, we used
article-pagination/prev-article/next-articleWait for CSS class names, you can design your website according to your own, write style rules for these classes in the CSS file, including font size, color, icons, layout, even animation effects, etc., to ensure they are consistent with your website's overall style.