How to implement the display of previous and next document links in AnQiCMS templates?

When browsing website content, users often want 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 effectively increase users' stay time on the website, reduce the bounce rate, and 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 feature analysis: AnQiCMS' document tags before and after

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 document detail pages. This function mainly depends on two built-in template tags:prevArchiveandnextArchive.

These tags are specifically designed for the (Archive) model of documents, and can automatically search and return information about the previous or next document in the context of the current document.Use them, you do not need to write complex logic to determine the sorting of documents or to 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 their titles, links, and other key information.

How to call in the template?

Usually, you will be in the template file of the document detail page (such asarchive/detail.htmlOr add these links to a custom document template. The basic call method is very intuitive, you can wrap them in{% prevArchive ... %}and{% nextArchive ... %}Tags are 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 judgments.{% if ... %}Ensure that links are only displayed when there is content, thus avoiding empty links or unnecessary text on the page.

Here is the basic code structure to display 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, throughnextvariables to determine and render.

Enhance user experience: show thumbnails and more information

To improve 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 toarchiveDetailthose available in the tags, for exampleId/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 display the title and link while checking if there is a thumbnail (prev.Thumbornext.ThumbIf there is, it will be displayed together, thus providing a more intuitive navigation prompt.You can flexibly adjust the layout and style of these elements according to your design needs, such as controlling the thumbnail size and title color through CSS.

Cautionary notes and **practice

When applying these tags, it is recommended to place them below the document content area, or as a separate navigation module.A reasonable layout helps users naturally discover these jump links without interfering with the reading of the main content.At the same time, don't forget to add appropriate styles to these links through CSS to make them visually clear and identifiable, enhancing the click intention, for example, using left and right arrow icons or different background colors to distinguish them.

AnQiCMS will automatically determine the "previous" and "next" articles based on the category (Category) and publication order of the current document.This means that as long as your document is published in accordance with the regular process and has a clear classification, these tags will work normally.If the document does not have an explicit sort order or classification, AnQiCMS may sort it by default based on its internal ID or publication time.Ensure that your content management strategy effectively utilizes this automatic sorting mechanism.

Summary

provided by AnQiCMSprevArchiveandnextArchiveTags, adding navigation before and after the document content of the website becomes very simple.This greatly improves the user's browsing experience and also builds a more tightly integrated internal link structure for the website, which is very beneficial for the overall health and search engine performance of the website.Make good use of these tags, combining them with your template design, can make your website content more attractive and better serve your audience.

Frequently Asked Questions (FAQ)

Q1: Why doesn't my document detail page display the previous or next link?

A1: This may be because the current document indeed does not have a previous or next one, for example, it is the first or last one in the category. In this case,prevornextThe variable will be empty, in the template{% if %}The condition will not be met. Moreover, please check your template code to ensure{% if prev %}and{% if next %}Such condition judgment correctly includes the link display logic, and the label spelling is correct.

Q2: What is the basis for the sorting of 'Previous' and 'Next' articles? Can I change this sorting method?

A2: AnQiCMS will sort the previous and next documents based on the publication time of the document or internal ID, and they will be searched based on the category context of the current document to ensure navigation to adjacent documents in the same category. Currently,prevArchiveandnextArchiveThe tag itself does not provide a direct way to modify the sorting parameters, they depend on the system default