When browsing website content, users often hope to be able to navigate easily between related articles.Whether it is to find more information or simply enjoy a smooth reading experience, the "Previous" and "Next" document links play a crucial role.They can not only effectively enhance users' stay time on the website and reduce the bounce rate, but also have a positive impact on the internal link structure of the website and search engine optimization (SEO), helping search engines better understand the relevance of the website content.
Core Function Analysis: AnQiCMS front and back document tags
AnQiCMS has fully considered this requirement in template design, providing simple and efficient tags that allow content operators to easily implement the display of 'Previous' and 'Next' links on the document detail page. This feature mainly relies on two built-in template tags: prevArchiveandnextArchive.
These tags are specifically designed for the document (Archive) model, and can automatically locate and return information about the previous or next document within the context of the current document.Use them, you don't need to write complex logic to judge the document sorting or find nearby data, AnQiCMS has encapsulated this complexity within the tags.They will intelligently judge adjacent documents based on the default document sorting (usually publication time or ID) and provide key information such as their titles, links, etc.
How to call in the template?
通常，you will be in the template file on the document detail page (for examplearchive/detail.htmlAdd these links to the document template (or a custom one). The basic calling method is very intuitive, you can wrap them in{% prevArchive ... %}and{% nextArchive ... %}Tags in pairs. It is important that not all documents have a previous or next one (for example, the first article in a series does not have a previous one, and the last article does not have a next one), so we usually combine conditional judgment.{% if ... %}Ensure that links are displayed only when there is content, thus avoiding empty links or unnecessary text on the page.
The following is the basic code structure for displaying the titles and links of the previous and next documents:
<div class="article-navigation">
{# 上一篇文档 #}
{% prevArchive prev %}
<div class="prev-article">
{% if prev %}
<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
</div>
{% endprevArchive %}
{# 下一篇文档 #}
{% nextArchive next %}
<div class="next-article">
{% if next %}
<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
</div>
{% endnextArchive %}
</div>
This code will first try to retrieve the data of the previous document, ifprevthe variable exists, thendivThe element displays its title and link. If it does not exist, a friendly prompt message will be displayed. The logic of the next document is the same, bynextvariable to judge and render.
Enhance user experience: Display thumbnails and more information
To enhance user experience, you can not only display the document title, but also introduce other document information, such as thumbnails (Thumb) or descriptions (Description).prevandnextThese variables contain rich document fields, similar toarchiveDetailthe fields available in tags, such asId/Title/Link/Description/Thumbetc.
For example, if you want to display a thumbnail of the previous or next document next to the link, you can modify the template code like this:
<div class="article-navigation enhanced">
{# 上一篇文档（包含缩略图） #}
{% prevArchive prev %}
<div class="prev-article">
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb" />{% endif %}
<span class="article-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-article">没有上一篇了</span>
{% endif %}
</div>
{% endprevArchive %}
{# 下一篇文档（包含缩略图） #}
{% nextArchive next %}
<div class="next-article">
{% if next %}
<a href="{{ next.Link }}">
<span class="article-title">{{ next.Title }}</span>
{% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumb" />{% endif %}
</a>
{% else %}
<span class="no-article">没有下一篇了</span>
{% endif %}
</div>
{% endnextArchive %}
</div>
This code will also check for an thumbnail while displaying the title and link.prev.Thumbornext.ThumbIf it exists, it will also be displayed to provide a more intuitive navigation prompt.You can flexibly adjust the layout and style of these elements according to your design requirements, such as controlling the thumbnail size and title color through CSS.
Attention Points and **Practice
When applying these tags, it is recommended to place them at the bottom of the document content area, or exist as an independent navigation module.A well-arranged layout helps users naturally discover these jump links without disturbing the reading of the main content.At the same time, don't forget to add appropriate styles for these links through CSS to make them visually clear and recognizable, enhancing the click intention, for example, by using left and right arrow icons or different background colors to distinguish them.
AnQiCMS will automatically determine the 'previous article' and 'next article' based on the category (Category) of the current document and the publication order of the document.This means that as long as your document is published in the usual process and has a clear category assigned, these tags will work normally.If the document does not have explicit sorting or classification, AnQiCMS may default to sorting based on its internal ID or publication time.Ensure that your content management strategy effectively utilizes this automatic sorting mechanism.
Summary
Provided by AnQiCMSprevArchiveandnextArchiveTags, making it very simple to add navigation before and after website content.This greatly improves the browsing experience of users, and also builds a more tightly structured internal link structure for the website, which is highly beneficial for the overall health and search engine performance of the website.Flexibly use these tags, combined with your template design, can make your website content more attractive and better serve your audience.
Common Questions (FAQ)
Q1: Why doesn't my document detail page show the 'Previous' or 'Next' links?
This may be because the current document indeed does not have a previous or next one, for example, it is the first or last in the category. In this case,prevornextVariable will be empty, the template in the.{% if %}condition will not be met. Additionally, please check your template code to ensure{% if prev %}and{% if next %}This conditional judgment correctly includes the link display logic, and the label spelling is correct.
Q2: What is the sorting basis for 'Previous' and 'Next' articles? Can I change this sorting method?
A2: AnQiCMS defaults to sorting previous and next articles based on the publication time or internal ID of the documents, and they will search based on the category context of the current document to ensure navigation to adjacent documents within the same category. Currently,prevArchiveandnextArchiveThe label itself does not provide a direct function to modify the sorting parameters, it depends on the system default