In website operation, providing a smooth reading experience for readers is the key to improving user satisfaction and website value.When users finish browsing an excellent article or product introduction, if they can conveniently see the related content of "Previous" or "Next", it will undoubtedly greatly increase their stay time on the website, forming a more natural browsing path. This is very beneficial for SEO optimization and content dissemination.prevArchiveandnextArchiveHelp us easily achieve this navigation between content display.
ingeniously utilizeprevArchiveandnextArchiveImplement content navigation
prevArchiveandnextArchiveThey are two template tags specially designed for document detail pages in Aiguo CMS. Their functions are very intuitive:prevArchiveis used to obtain the data of the 'previous' document of the current document,nextArchiveUsed to retrieve the data of the "next" document.The ingenious aspect of these two tags is that they can intelligently recognize the current document without complex parameter configuration, and automatically find the previous or next document in the same category, greatly simplifying the template development process.
In most cases, we will place the links to 'Previous Article' and 'Next Article' at the bottom of the document detail page or in the sidebar.When accessing a document, Safe CMS will determine the "previous" and "next" documents based on the category of the document and the default sorting within the category (usually by publish time or ID in ascending or descending order).
These tags, when used in the template, will provide a variable separately (for example, we can name itprevandnext）to carry the obtained document data.If there is a previous or next document, this variable will contain the details of the document; if it has reached the beginning or end of the category, that is, there is no previous or next, then this variable will be empty.This allows us to easily control the display of navigation through conditional judgment.
Core features and commonly used fields
PassprevArchiveandnextArchiveLabel obtained document data, which includes multiple key fields of the document, making it convenient for us to display on the page. The most commonly used and practical fields include:
Id: The unique identifier of the document.Title：Document title, this is the navigation text directly visible to the user.Link：Document link address, click the navigation to jump to the document.DescriptionThe brief description of the document, which can be used as supplementary navigation information, or displayed when the mouse hovers over it.Thumb：Document thumbnail address, if the content contains images, using a thumbnail can make navigation more vivid and intuitive.Views：Document views, which can also be used as reference information.
We can flexibly select and combine these fields according to actual design requirements to build a beautiful and practical document navigation.
Practice: How to implement navigation display in templates
Let us look at how to implement the 'Previous/Next' navigation display in the security CMS through some specific template code examples. These code snippets are usually placed in the template files of the document detail page (for examplearchive/detail.html）in it.
1. Basic Text Navigation
The simplest and most direct way is to only display the title and link of the previous/next document.
<div class="document-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }}</a>
{% else %}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code, we first use{% prevArchive prev %}and{% nextArchive next %}Try to get the previous and next documents. Then, through{% if prev %}and{% if next %}Perform condition judgment, only show the link and title when the document exists.If not found, display the prompt 'No more' to ensure the user understands that they are at the beginning or end of the article sequence.
2. Visual navigation with thumbnails
To make navigation more attractive, we can introduce document thumbnails.A suitable thumbnail can not only attract users to click, but also give them a direct understanding of the content to be read.
<div class="document-navigation visual-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" loading="lazy">
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" loading="lazy">
{% endif %}
<span>下一篇：{{ next.Title }}</span>
</a>
{% else %}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Here, in addition to displaying the link title, we also add an{% if prev.Thumb %}check to ensure that the image is only loaded when the thumbnail exists.loading="lazy"The use of properties also helps optimize image loading performance and improve page experience.
Through such settings, when readers browse to the bottom of the article, they can naturally discover these navigation links and easily explore more related content.This not only organically connects the content of the website, but also effectively guides the browsing behavior of users, maximizing the value of the content.
Common Questions (FAQ)
1. Why doesn't the 'Previous/Next' navigation show up on my document detail page?This usually has several reasons.Firstly, please check if your document belongs to a category, and indeed, there exists a document labeled as 'Previous' or 'Next' in that category.If the document is the only document in a category, or it is the first/last document in the category, then the corresponding navigation will not be displayed.prevArchiveandnextArchiveLabel, and there was no syntax error that caused the label to fail to parse.
2. How is the order of the 'Previous/Next' documents determined? Can it be customized?Anqi CMS'sprevArchiveandnextArchiveThe label is determined based on the *default sorting* logic of documents under the *same category* to determine the previous and next documents.The default sorting is usually by the document's publication time (newest to oldest) or document ID (largest to smallest).This means that if you want to adjust the navigation order, you can do so by modifying the publication time of the document or adjusting the sorting value in the background.These tags do not provide direct custom sorting parameters; they depend on the system's content sorting mechanism.
3. How to make the 'Previous/Next' navigation link to documents of different categories?
prevArchiveand