How to correctly display the link and title of the previous/next document in AnQiCMS template?

How to elegantly display the link and title of the previous/next document in the AnQiCMS template?

Users often want to easily jump to related content while browsing articles on a website, whether it's going back to the previous one for a deeper understanding or continuing to read the next new content.This "previous/next article" navigation feature can not only significantly improve user experience and extend the time users stay on the website, but also has great benefits for the internal link structure and SEO optimization of the website.AnQiCMS with its powerful template engine similar to Django makes it very intuitive and flexible to meet this requirement.

Next, we will explore how to correctly and efficiently display the link and title of the previous/next document in your AnQiCMS template.

Core Tag Introduction:prevArchiveandnextArchive

AnQiCMS provides two very intuitive and powerful template tags specifically designed to retrieve the previous and next documents of the current document:prevArchiveandnextArchive.

These tags are block-level tags, which means they need an opening tag ({% prevArchive ... %}) and a closing tag ({% endprevArchive %}Enclose the content within tags. Inside the tag, you can assign the obtained document data to a variable (for exampleprevornext), then access the various properties of the document through this variable, such as title, link, thumbnail, etc.

When you use these two tags on the document detail page, they will automatically find the previous or next document based on the current document context (usually documents in the same category). They support retrieving various fields of the document, including:

• Id: Document ID
• Title: Document Title
• Link: Document Link
• Description: Document Summary
• Thumb: Document thumbnail
• And other inarchiveDetailFields available in the tag.

Actual Operation: Step by step implementation of previous/next article navigation

Let us understand how to add navigation for previous/next document in AnQiCMS template through actual code examples.

Step 1: Determine the template file.

Firstly, we need to find the template file used by the current document detail page. According to the template convention of AnQiCMS, the document detail page is usually located at/template/您的模板目录/{模型table}/detail.htmlor{模型table}/detail-{文档ID}.htmlFor example, if it is an article model, you may need to modifyarticle/detail.htmlin the process.

Step two: Insert basic code (link and title)

Find the area near the document content display where you want to show the previous/next navigation. Usually, they are placed at the bottom of the article content.

While usingprevArchiveandnextArchiveWhen labeling, there is a very important point to note:Not every article has a previous or next one.For example, the first article in a category does not have a previous one, and the last article does not have a next one.Therefore, when using these tags, we must add conditional judgments to avoid displaying empty links or unnecessary placeholders, thereby improving user experience and page cleanliness.

The following is a basic code example that determines if there is a previous or next article and displays the corresponding link and title, or displays a prompt if there is none:

<nav class="document-pagination">
    <div class="prev-document">
        {# 上一篇文档 #}
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                    <span class="arrow">&laquo;</span> 上一篇: <span class="title">{{ prev.Title }}</span>
                </a>
            {% else %}
                <span class="no-entry">&laquo; 没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-document">
        {# 下一篇文档 #}
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="{{ next.Title }}">
                    下一篇: <span class="title">{{ next.Title }}</span> <span class="arrow">&raquo;</span>
                </a>
            {% else %}
                <span class="no-entry">没有下一篇了 &raquo;</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</nav>

In this code block:

• We use{% prevArchive prev %}and{% nextArchive next %}Retrieve the data of the previous and next documents and assign them toprevandnextVariable.
• {% if prev %}and{% if next %}Conditionally ensure that the link is rendered only when the corresponding document exists.
• {{ prev.Link }}and{{ prev.Title }}Used to obtain the link and title of the document.nextThe usage of variables is similar.
• If it does not exist, we will display a friendly prompt message.

Step 3: Add more details to enhance user experience (with thumbnails and descriptions)

It may seem monotonous to have just text links, we can consider adding document thumbnails or summaries to enrich the display, so that users can have a more intuitive understanding of the content before jumping to it.

AnQiCMS'prevArchiveandnextArchiveTags also support retrievalThumb(Thumbnail) andDescription(Summary) field, making our navigation more attractive.

`twig