How to implement navigation display between content for previous/next document tags `prevArchive`/`nextArchive`?

In website operation, providing a smooth reading experience for readers is the key to enhancing user satisfaction and website value.After a user finishes reading an excellent article or product introduction, if they can easily see related content such as 'Previous' or 'Next', it will undoubtedly greatly increase their time spent on the website, forming a more natural browsing path. This is very beneficial for SEO optimization and content dissemination.AnQi CMS, as a powerful content management system, fully understands this need and provides simple and efficient template tags for itprevArchiveandnextArchiveHelp us easily implement this navigation display between content.

Skillfully useprevArchiveandnextArchiveImplement content navigation

prevArchiveandnextArchiveAre two template tags specially designed for document detail pages by Anqi CMS. Their functions are very intuitive:prevArchiveUsed to get the "previous" document data of the current document, andnextArchiveIt is used to retrieve the "next" document data. The cleverness of these tags lies in the fact that they can intelligently recognize the current document without complex parameter configuration, and automatically search for the previous or next document in the same category, greatly simplifying the template development work.

In most cases, we would place the "Previous" and "Next" links at the bottom of the document detail page or in the sidebar.When accessing a document, AnQi CMS will determine the "previous" and "next" documents logically based on the category of the document and the default sorting of the document within the category (usually in ascending or descending order of publication time or ID).

These tags provide a variable when used in the template (for example, we can name itprevandnext) to carry the document data obtained. If there is a previous or next document, this variable will contain the details of the document;If you have reached the beginning or end of the category, meaning there is no previous or next article, then this variable will be empty.This allows us to easily control the display of navigation through conditional judgments.

Core Functions and Common Fields

ByprevArchiveandnextArchiveThe document data obtained by the label, 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: The title of the document, which is the navigation text directly visible to the user.
• Link: The link address of the document, click to navigate to the document.
• Description: A brief description of the document that can be used as a navigation supplement or displayed on hover.
• Thumb: The thumbnail address of the document, if the content contains images, using a thumbnail can make navigation more vivid and intuitive.
• Views: The number of views of the document, which can also be displayed as reference information sometimes.

We can flexibly choose and combine these fields according to the actual design requirements to build a beautiful and practical document navigation.

Practice: How to implement navigation display in the template.

Let's go through some specific template code examples to see how to implement the 'Previous/Next' navigation display in Anqi CMS. These code snippets are usually placed in the template files of the document detail page (for examplearchive/detail.html).

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, by{% if prev %}and{% if next %}Perform a conditional judgment, only display the link and title when the document exists.If not found, display the prompt 'Nothing here', to ensure the user understands that they are at the start 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 they are about to 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, we add an extra while displaying the link title{% if prev.Thumb %}judgment 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 enhance the page experience.

With such settings, when readers reach the bottom of the article, they can naturally discover these navigation links and easily explore more related content.This not only enables the website content to form an organic connection, but also effectively guides the user's browsing behavior, maximizing the value of the content.

Frequently Asked Questions (FAQ)

1. Why doesn't my document detail page display the 'Previous/Next' navigation?This usually has several reasons. First, please check if your document has already been categorized, and within that category, there is indeed a 'previous' or 'next' document.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.Secondly, make sure that your template file uses it correctlyprevArchiveandnextArchiveThe tag and it did not fail to parse due to syntax errors.

2. How is the order of the previous/next document determined? Can it be customized?Of Security CMSprevArchiveandnextArchiveThe tag is based on the default sorting logic of the document under the *same category* to determine the previous and next articles.The default sorting is usually by the document's publication time (newest to oldest) or document ID (largest to smallest).This means, 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 labels do not provide direct custom sorting parameters; they depend on the system's content sorting mechanism.

How to make the 'Previous/Next' navigation links point to documents of different categories? prevArchiveand