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

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

Users often hope to easily jump to related content while browsing website articles, whether it is 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 spend on the website, but also greatly benefit the internal link structure and SEO optimization of the website.AnQiCMS based on its powerful Django-like template engine makes implementing this requirement very intuitive and flexible.

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 for retrieving the previous and next content of the current document:prevArchiveandnextArchive.

这两个标签都是块级标签，这意味着它们需要一个开启标签 ({% prevArchive ... %}) 和一个结束标签 ({% endprevArchive %}) 来包裹内容。在标签内部，您可以将获取到的文档数据赋值给一个变量（例如prevornextThen access the various properties of the document, such as title, link, thumbnail, etc., through this variable.

When you use these tags on the document detail page, they will automatically find the previous or next document adjacent to the current document based on the context of the document (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 Description
• Thumb: Document Thumbnail
• 以及其他inarchiveDetail标签中可用的字段。

实际操作：一步步实现上/下一篇导航

Let us understand how to add navigation for the 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 for the current document detail page. According to AnQiCMS template conventions, the document detail page is usually located/template/您的模板目录/{模型table}/detail.htmlor{模型table}/detail-{文档ID}.html。For example, if it is an article model, you may need to modify it in the English translation.article/detail.htmlIn the English translation.

Second step: Insert the basic code (link and title) in the English translation.

定位到文档内容显示区域附近，您希望展示上/下一篇文章导航的位置。通常，它们会放在文章内容的底部。

When 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 certain 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, thus enhancing user experience and page tidiness.

The following is a basic code example, which checks for the existence of a previous or next article and displays the corresponding link and title. If not, it displays a prompt message:

<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 toprevandnexta variable.
• {% if prev %}and{% if next %}Conditional judgment to ensure that the link will be 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 display a friendly prompt message.

Third step: Add more details to enhance user experience (with thumbnail and introduction)

Just a text link may seem monotonous, we can consider adding document thumbnails or summaries to enrich the display effect, allowing users to have a more intuitive understanding of the content before jumping.

AnQiCMSprevArchiveandnextArchiveLabel also supports retrievalThumb(Thumbnail) andDescription(Description) field, making our navigation more attractive.

`twig