In website content operation, guiding users to smoothly browse related content is a key link to enhance user experience and website depth.If users can immediately see the links to the related or sequential previous and next articles after reading an article, 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.Auto CMS (AutoCMS) is an efficient content management system that provides a very convenient way to implement this feature.
In Anqi CMS, getting and displaying the links to the previous and next articles is much simpler than you imagine, mainly thanks to the built-in system features.prevArchiveandnextArchiveThese are powerful template tags.These tags are designed very intuitively, when you use them on the article detail page, they will automatically find and provide adjacent article data according to the current sorting of the article in the list.
UnderstandingprevArchiveandnextArchivetags
prevArchiveTags are used to obtain information about the previous article of the current article,nextArchiveThe tag is used to get the next article information.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 its 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, the data assigned to the next articlenexta variable.
{% prevArchive prev %}
{% nextArchive next %}
It is worth noting 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.To avoid displaying empty links, we need to make a simple judgment when using these variables.
The article information that can be obtained
The variables obtained through these two tags (for example, the variables we define)prevornext），You can access a series of information about adjacent articles, which is very similar to the article detail fields obtained througharchiveDetailtags. Among the most commonly used and core ones are:
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 abstract of the article.Views: The page views of the article.
You can use{{变量名.字段名}}to call this information, for example.{{prev.Title}}It will display the title of the previous article.{{next.Link}}will provide the 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 perform the actual operation in your article detail page template.The code is usually placed at the bottom of the article content or at some position in the sidebar, so that the user 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 for the article detail page template of Anqi CMS), 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 %}Retrieved data from the previous and next articles respectively, and assigned to respective variables.prevandnexta variable.
Then, we use{% if prev %}and{% if next %}such conditional judgments to check if these variables exist. If they do exist,<a>Create a clickable navigation with a title and link. If it does not exist, display a prompt message, such as 'No previous post' or 'No next post'.
You can also optionally add a thumbnail ({{prev.Thumb}}or{{next.Thumb}}) to make navigation more visually attractive. For example:
{# 在链接内部添加缩略图，如果存在的话 #}
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="pagination-thumb">
{% endif %}
Through this method, the security 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.
Common Questions (FAQ)
What is the basis for judging the previous/next article?The previous and next articles of AnQi CMS are usually based on the publication time of the articles (
CreatedTime）or the sorting rules of the system backend to determine the logical order of the articles.This means that if your articles are listed in a category in reverse chronological order, then 'Previous' usually refers to the article published earlier, and 'Next' refers to the article published more recently.In the context of the article list, they will determine adjacency according to the natural sorting of the list.Can this tag be used to navigate to the previous/next article within the same category?
prevArchiveandnextArchiveLabels used on the article detail page will default to trying to retrieve articles adjacent to the current article in the same context (usually the same category or list) according to the sorting rules.This means that if you are entering the article detail page from some category article list, 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 article 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-articleThe CSS class names, you can define styles for these classes according to your website design in the CSS file, including font size, color, icons, layout, and even animation effects, to ensure consistency with your website's overall style.