In the ocean of website content, users often hope to browse related information smoothly and do not want to return to the list to find the next article after reading a wonderful article.This not only affects user experience, but also benefits the internal link structure of the website and search engine optimization (SEO).AnQiCMS fully considers this point, providing a convenient and quick navigation feature for the content detail page, allowing users to easily jump between different documents.

AnQiCMS's template system is very flexible, it adopts the syntax of Django template engine, making it easy for developers and operators to get started.All of our page displays are inseparable from the use of template tags.prevArchiveandnextArchiveThese tags are specifically designed for document navigation.

When a user visits the detail page of a document, these tags can intelligently identify the position of the current document in its category and automatically find the information of the previous and next documents, including their titles and links.So, we can directly generate clickable navigation links at the appropriate position on the page, such as at the bottom of the article, to guide users to continue reading.

How to add previous and next links on the document detail page?

To implement this feature, we first need to find the template file responsible for rendering document details. Usually, according to your website configuration, this will be/template/您的模板目录/{模型table}/detail.htmlIn the file. For example, if it is an article model, it might be/template/default/article/detail.html.

Open thisdetail.htmlAfter the file is opened, you can insert it below the document content, or at any position you think is appropriateprevArchiveandnextArchiveLabel.

The usage of these tags is very intuitive. You just need to place them in the template like this:

<nav class="document-pagination">
    <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>
</nav>

Let's explain this code in detail:

  1. {% prevArchive prev %}and{% nextArchive next %}: This is the two core tags provided by AnQiCMS.They will try to get the data of the previous and next documents of the current document.prevandnextthese two variables.

  2. {% if prev %}and{% if next %}This is a very important judgment.Not all documents have a previous or next document, for example, the first document does not have a previous one, and the last document does not have a next one.ifTags to checkprevornextVariable exists.If it exists, display the corresponding link; if it does not exist, we can display prompts such as 'No previous article' or 'No next article' to enhance the user experience.

  3. {{ prev.Link }}and{{ prev.Title }}WhenprevornextThe variable exists, we can access their properties, such as.语法轻松访问它们的属性，比如Link（文档的URL）和Title（文档的标题）。这些属性将直接用于构建<a>Tagshref和文本内容。

Through these simple lines of code, your AnQiCMS website gains a professional and user-friendly article navigation feature.Not only makes the user experience smoother when browsing content, but also helps search engines better crawl and understand the structure of your website's content, having a positive impact on SEO.navanddivAdd the corresponding CSS styles to the label so that the "Previous" and "Next" links are more beautiful and prominent on the page.

Common Questions (FAQ)

1. Why does the 'Previous' or 'Next' link sometimes show 'No previous article'?

This usually means that the document you are currently viewing is the first or last document in this category.For example, if a document is the first article published on your website, then it naturally does not have a 'previous' document to jump to.{% if prev %}or{% if next %}Judgment will catch this situation and display the preset prompt information to ensure that the page does not show errors or blank links, providing a better user experience.

2. Can I customize the display text of the 'Previous Article' and 'Next Article' links? For example, can I display 'Previous Article' instead of 'Previous'?

Of course you can. In the above code example, you can see that we write text directly inside the tag<a>tags, for example« 上一篇：{{ prev.Title }}。You can freely modify these text contents according to your preference and the language style of the website, for example, change it to« 上一篇文章：{{ prev.Title }}orPrevious Post: {{ prev.Title }}，just by adjusting the text in the template file.

3. How is the sorting logic of these links? What criteria are used to determine which article is the "previous" or "next"?

prevArchiveandnextArchive标签默认是根据文档的发布时间（CreatedTime）和文档 ID 在其所属分类中的顺序来判断“上一页”和“下一页”的。通常，ID 越大代表文档发布越晚。So, 'Previous' refers to the document published before the current document (with a smaller ID or earlier publish time), while 'Next' refers to the document published after the current document (with a larger ID or later publish time).This sorting logic ensures that users can browse content in the order of publication.