In website content operation, providing readers with a smooth reading experience is crucial.When users finish reading a document, if they can easily jump to the previous or next related content, it can not only effectively extend the time users spend on the website, increase page views, but also help search engines better understand the structure and content relevance of the website, thereby having a positive impact on SEO.AnQiCMS provides simple and powerful tags, making it easy to display the titles and links of the previous and next documents on the document detail page, fully considering this point in the design of template functions.

To implement this feature, we need to modify the corresponding document detail page template file. In Anqi CMS, the document detail page template is usually located in your template folder, the path is similar to{模型table}/detail.htmlFor example, if it is an article model, you may need to editarticle/detail.htmlorarchive/detail.html(Depending on the name of your model).

AnQi CMS provides two very practical template tags for this:prevArchiveandnextArchiveThese tags can intelligently identify the current document and automatically search and provide information about adjacent documents.

How to useprevArchiveShow the previous document

prevArchiveThe label is used to get the previous document data of the current document. You can use it like this in your document detail template:

{% prevArchive prev %}
  {% if prev %}
    <a href="{{ prev.Link }}">{{ prev.Title }}</a>
  {% else %}
    <span>没有上一篇了</span>
  {% endif %}
{% endprevArchive %}

In this code block:

  • {% prevArchive prev %}A variable was declaredprevto store the information of the previous document.
  • {% if prev %}is a conditional judgment used to check if there is a previous document. If there is, the link will be rendered; otherwise, it will display 'No previous one'.
  • {{ prev.Link }}It will output the link address of the previous document.
  • {{ prev.Title }}It will output the title of the previous document.

In this way, you can easily create a navigation link pointing to the previous document on the page.

How to usenextArchiveDisplay the next document

WithprevArchiveis similar,nextArchiveTags are used to retrieve the next document data of the current document. Its usage is also very intuitive:

{% nextArchive next %}
  {% if next %}
    <a href="{{ next.Link }}">{{ next.Title }}</a>
  {% else %}
    <span>没有下一篇了</span>
  {% endif %}
{% endnextArchive %}

The logic of this code isprevArchiveExactly the same, just it retrieves the information of the next document and stores it in a variablenext.

Integration into the document detail page practice

通常，我们会将上一篇文章和下一篇文章的导航链接放置在文档内容的底部，或者侧边栏，以方便用户浏览。一个常见的布局可能是：

<article>
    <!-- 这里是文档的标题、内容等核心部分 -->
    <h1>{{ archive.Title }}</h1>
    <div class="content">
        {{ archive.Content|safe }}
    </div>

    <div class="document-navigation">
        <div class="prev-document">
            {% prevArchive prev %}
              {% if prev %}
                <span>上一篇：</span><a href="{{ prev.Link }}">{{ prev.Title }}</a>
              {% else %}
                <span>没有上一篇了</span>
              {% endif %}
            {% endprevArchive %}
        </div>
        <div class="next-document">
            {% nextArchive next %}
              {% if next %}
                <span>下一篇：</span><a href="{{ next.Link }}">{{ next.Title }}</a>
              {% else %}
                <span>没有下一篇了</span>
              {% endif %}
            {% endnextArchive %}
        </div>
    </div>
</article>

This code provides a basic structure, and you can beautify these navigation links according to your website design, by using CSS, such as adding arrow icons, displaying thumbnails, etc., to enhance the user experience.prevandnextVariables otherLinkandTitlealso supportThumb[Thumbnail],Description(description) and other fields, allowing you to create more colorful and diverse navigation styles.

By using the above method, you can effectively utilize the template tags of the Anqi CMS, adding practical previous and next navigation functions to the document detail pages of your website, allowing users to freely navigate on your site.

Common Questions (FAQ)

  1. Why is the link to the previous or next document not displayed on the page after I add a tag?This usually has several reasons. First, please make sure you are modifying the correct document detail page template file (for examplearchive/detail.htmlorarticle/detail.html）。Next, check if there are adjacent documents on your website.If there is no previous or next document (for example, if the current document is the first or last in a category), then the corresponding link will naturally not be displayed.prevArchiveandnextArchivelabels and their variable names.

  2. How does 'Anqi CMS' determine which document is the 'previous' or 'next' document?The 'AnQi CMS' will default to finding the most recent document in terms of time or ID in the category (Category) of the current document, based on the current document's publication time (CreatedTime) or document ID, on the document detail page.This means that only documents in the same category will be considered as adjacent documents for navigation.

  3. In addition to the title and link, can I also display other information about the 'previous'/'next' document?Of course you can.prevandnextThe variable is the complete document object, exceptTitle(Title) andLink(link) they also contain many other available fields, such asId(Document ID),Thumb[Thumbnail],Description[Summary],Views(View count) andCreatedTime(publish time). You can specify them inside the block based on your{% if prev %}or{% if next %}block through{{ prev.Thumb }}/{{ next.Description }}Call these information in various ways to create more attractive navigation between the front and back documents.