How to get and display the link and title of the previous/next document on the document detail page?

In website content operation, adding 'Previous' and 'Next' navigation to the document detail page is a common strategy to enhance user experience, guide users to delve deeper into browsing, and optimize the internal links of the website.AnQiCMS as a system with content management at its core, fully considers these needs and provides intuitive and simple template tags, allowing you to easily achieve this function.

AnQiCMS Implements the advantage of “Previous/Next” navigation

AnQiCMS's template system is designed beautifully, using syntax similar to Django's template engine, through{% 标签 %}and{{ 变量 }}即可灵活调用各类数据。对于文档详情页中的相邻文档导航，系统内置了专门的 EnglishprevArchiveandnextArchiveLabels, no complex programming or database queries required, just a few lines of concise template code can quickly integrate.This greatly simplifies the template development process, allowing content operators to focus more on the presentation effects of the website content.

操作步骤：为文档详情页添加导航 English

To implement the previous/next document navigation, you mainly need to operate the template file of the document detail page.

1. Locate the document detail page template

First, find the current document detail page template file used on your website. According to the template conventions of AnQiCMS, the document detail page template is usually located/template/{模型table}/detail.html。For example, if you are managing article content, the template file may be located in/template/article/detail.html。If you have specified a custom template for a specific document or category, you need to edit the corresponding template file.

2. Understanding Core Tags:prevArchiveandnextArchive

AnQiCMS provides two key tags:

  • prevArchive: Used to obtain the data of the previous document of the current document.
  • nextArchiveEnglish: Used to get the data of the next document in the current document.

这两个标签在使用时无需传递额外参数，AnQiCMS 系统会智能地根据当前文档的上下文（如所属分类、发布时间、文档ID等）自动判断并返回相应的相邻文档信息。通过它们，您可以轻松获取到文档的 ID、标题 ("EnglishTitle) and the link (Link)，even thumbnails (Thumb) Detailed information such as.

3. Write template code to implement navigation

Next, in your document detail page template (such asdetail.html）In the document, find the position where you want to place the previous/next navigation and insert the following code snippet. This is usually below the document content or in the sidebar.

<div class="article-navigation">
    <div class="nav-item prev-article">
        {% prevArchive prev %}
        {% if prev %} {# 判断是否存在上一篇文档 #}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                <span class="nav-label">上一篇：</span>
                <span class="nav-title">{{ prev.Title }}</span>
                {# 如果需要显示缩略图，可以添加类似下面的代码 #}
                {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumbnail">{% endif %}
            </a>
        {% else %}
            <span class="nav-label">上一篇：</span>
            <span class="nav-title no-more">没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>

    <div class="nav-item next-article">
        {% nextArchive next %}
        {% if next %} {# 判断是否存在下一篇文档 #}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span class="nav-label">下一篇：</span>
                <span class="nav-title">{{ next.Title }}</span>
                {# 如果需要显示缩略图，可以添加类似下面的代码 #}
                {% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumbnail">{% endif %}
            </a>
        {% else %}
            <span class="nav-label">下一篇：</span>
            <span class="nav-title no-more">没有了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

Code explanation:

  • {% prevArchive prev %}and{% endprevArchive %}This tag is used to wrap the data of the previous document. Here, we assign the information of the previous document obtained topreva variable.
  • {% nextArchive next %}and{% endnextArchive %}This tag is used to wrap the data of the next document. Here, we assign the information obtained from the next document tonexta variable.
  • {% if prev %}and{% if next %}This is a very important condition judgment.It ensures that the link and title will only be displayed when there is indeed a previous or next document, otherwise it will display prompts such as 'none' to avoid displaying empty links.
  • {{ prev.Link }}and{{ next.Link }}：Used to output the complete URL link of the previous/next document.
  • {{ prev.Title }}and{{ next.Title }}：Used to output the title of the previous/next document.
  • {{ prev.Thumb }}and{{ next.Thumb }}If the document has set a thumbnail, you can get the thumbnail URL here. You can choose whether to display the thumbnail based on your design requirements.

4. Style beautification (optional)

The code above provides the basic structure, you can beautify these navigation links by adding CSS styles according to the overall design of the website, such as adjusting font size, color, layout, adding icons, or hover effects, to keep them consistent with the website style and provide better visual guidance.

Summary

through AnQiCMS built-inprevArchiveandnextArchiveTags, you can add a previous/next navigation feature to the document detail page of the website very conveniently.This method not only has less code, is easy to understand and maintain, but also can effectively improve the user's stay time on the website, and indirectly helps the website's SEO performance through a perfect internal link structure.

Common Questions (FAQ)

Q1: What if the previous or next document does not exist?A1: The template code provided in the article has been{% if prev %}and{% if next %}The label was judged. If the current document is the first in the category, there is no 'Previous'.prevThe variable is empty; if it is the last one, there is no 'Next'.nextThe variable is empty. At this time, the template will display the prompt text "Nothing", and you can adjust it as needed to hide this navigation item or display other content.

Q2: How is the sorting rule of the previous/next document?A2: AnQiCMS system defaults to intelligently sorting documents based on the publication time, ID, and other factors to ensure the logic and coherence of navigation.In most cases, it will determine the previous and next documents according to the order of publication time (or ID, if the publication time is the same) of documents under the same category.

Q3: Can I customize the prompt text or link for 'No more'?A3: Of course. In{% else %}[English]的部分，您可以将<span class="nav-title no-more">没有了</span>Replace this text with any text you wish to display, or completely remove this section of code so that navigation items are not displayed when there are no previous/next posts. If you want to link to the category homepage or other pages,{% else %}Build a static link in the block.