Displaying 'Previous' and 'Next' navigation links on the article detail page of the AnQi CMS is an important link in improving user reading experience and the internal link structure of the website.This not only guides readers to continue browsing related content, extending the user's stay time, but also helps search engines better understand the relevance between the content of the website, having a positive effect on SEO optimization.
Auto CMS provides a user-friendly and powerful template tag system, which includes a special tag for retrieving adjacent articles.prevArchive(Previous document) andnextArchive(Next document) Tag. By simply adding these tags in the article detail page template, we can easily achieve this feature.
Understand the "Previous/Next" tags of AnQi CMS.
The template tag design of AnQi CMS aims to simplify content retrieval.prevArchiveandnextArchiveThese tags are specifically designed for article detail pages, able to automatically recognize the current article and find the previous or next article with the same content model, sorted by publishing time, adjacent to the current article.
These tags, when called, will return an object containing detailed information about adjacent articles, from which we can extract the title and other fields such as (Title) and the link (Link)，even thumbnails (Thumb) to construct links.
核心步骤：添加标签到模板文件
To implement this feature on your website, you first need to edit the template file of the article detail page. Usually, the template file of the article detail page is named{模型table}/detail.htmlFor example, if it is an article model, it may bearchive/detail.html. You can also find the custom article detail page template according to the "content model" settings on the backend.
We will demonstrate in two steps how to add these links, from the most basic text link to richer text and image links.
Step 1: Basic Text Link
In your article detail page template, find the location where you want to display the 'Previous Article' and 'Next Article' links, which is usually below the article content. Then, you can add the following code:
<div class="article-navigation">
{# 上一篇链接 #}
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>
{% else %}
<span>« 没有上一篇了</span> {# 如果没有上一篇，显示提示文字 #}
{% endif %}
{% endprevArchive %}
</div>
{# 下一篇链接 #}
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }} »</a>
{% else %}
<span>没有下一篇了 »</span> {# 如果没有下一篇，显示提示文字 #}
{% endif %}
{% endnextArchive %}
</div>
</div>
Code analysis:
{% prevArchive prev %}：This is calling the tag of the previous document. It assigns the information of the previous article to a nameprev.{% nextArchive next %}：Similarly, this tag assigns the information of the next article to a namenext.{% if prev %}and{% if next %}prevornextThe variable will be empty. Through this judgment, we can avoid displaying empty links and provide friendly hints, such as "No previous article."{{ prev.Link }}and{{ prev.Title }}:prevandnextThe variable is an object, we can use.Visit their properties, such as the article's link and title.
Step 2: Enhanced image and text link
If you want these navigation links to be more attractive, consider adding thumbnails of the articles. In Anqi CMS, you can do this:prevArchiveandnextArchiveTags also provideThumb(Thumbnail) field.
In the template, you can modify the code like this:
<div class="article-navigation-enhanced">
{# 上一篇 #}
<div class="nav-item prev-item">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb"/>
{% endif %}
<p class="nav-label">« 上一篇</p>
<h3 class="nav-title">{{ prev.Title }}</h3>
</a>
{% else %}
<span class="no-nav">« 没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
{# 下一篇 #}
<div class="nav-item next-item">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb"/>
{% endif %}
<p class="nav-label">下一篇 »</p>
<h3 class="nav-title">{{ next.Title }}</h3>
</a>
{% else %}
<span class="no-nav">没有下一篇了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
代码增强点：English
{% if prev.Thumb %}：同样地，我们对缩略图的存在性进行了判断，以防某些文章没有设置缩略图。img标签：使用English{{ prev.Thumb }}来显示缩略图，并配上EnglishaltProperties to enhance SEO friendliness.pandh3Label: Wrap navigation text in semantically meaningful tags and add CSS classes for easy styling.
Summary
Through the services provided by AnQiCMS,prevArchiveandnextArchiveTemplate tag, you can add navigation links to the previous and next articles on the article detail page with great flexibility.This not only optimizes the browsing path of users on the website, reduces the bounce rate, but also effectively enhances the internal link structure of the website, providing a clearer website content map for search engines.
Common Questions (FAQ)
问：Why didn't the previous/next link appear on the page even though I added the code?答：Firstly, please check if your code has been saved and uploaded to the corresponding article detail page template file in the AnQi CMS (for examplearchive/detail.html）。其次，confirm that the current article has adjacent articles: if it is the first or last article in the category, then the corresponding 'Previous' or 'Next' link will not be displayed.At the same time, updating the system cache is also a necessary step.
问：这些链接的排序规则是什么？它们是随机的吗？答：不是随机的。安企CMS会根据文章在同一分类下的publication time(CreatedTime字段）进行排序。prevArchiveThe tag will find the article closest in time to the current article that was published earlier.nextArchiveThe tag will find the article closest in time to the current article that was published later.
问：Can I change the prompt text for “No previous post” or “No next post”?答：Of course. As shown in the above example code,<span>« 没有上一篇了</span>and<span>没有下一篇了 »</span>This text can be freely edited and replaced. You can adjust it according to the context of the website.