In website content operation, providing a smooth reading experience for readers is crucial.When a user finishes reading a document, if they can easily jump to the previous or next related content, it can not only effectively extend the user's stay on the website and increase the 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 (AnQiCMS) has fully considered this point in the design of the template function, providing simple and powerful tags to make it easy to display the title and link of the previous and next document in the document detail page.

To implement this feature, we need to modify the template file of the corresponding document detail page. In AnQi CMS, the template for the document detail page 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(Determined by your model name).

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 tag is used to get the previous document data of the current document. You can use it in your document detail template like this:

{% 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 %}It is a conditional judgment to check if there is a previous document. If there is, it will render a link; otherwise, it will display 'There is 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 to the previous document on the page.

How to usenextArchiveDisplay the next document

withprevArchivesimilar,nextArchiveThe tag is used to get 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 is related toprevArchiveThe same, but it retrieves the information of the next document and stores it in a variablenext.

Integrated into the document detail page practice

Generally, we would place the navigation links to the previous and next articles at the bottom of the document content, or in the sidebar, to facilitate user browsing. A common layout might be: 

<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, you can beautify these navigation links according to your website design, for example, add arrow icons, display thumbnails, etc., to improve user experience.prevandnextVariables are used toLinkandTitleIn addition, it also supportsThumb(thumbnail),Description(Description) and other fields, allowing you to create more colorful navigation styles.

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

Frequently Asked Questions (FAQ)

  1. Why do I not see the links to the previous or next document on the page after I added tags?This usually has several reasons. First, make sure you are modifying the correct document detail page template file (such asarchive/detail.htmlorarticle/detail.htmlCheck if there are adjacent documents on your website.If there is no previous or next document (for example, the current document is the first or last in a category), the corresponding link will naturally not be displayed.Also, make sure the template code does not have any spelling errors, especiallyprevArchiveandnextArchivetags and their variable names.}

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

  3. Can I display other information about the 'previous' or 'next' document in addition to the title and link?Of course you can.prevandnextA variable is a complete document object, excludingTitle(Title) andLink(links) they also contain many other available fields, such asId(Document ID),Thumb(thumbnail),Description(Summary),Views(Views) andCreatedTime(publish time). You can meet your needs, within{% if prev %}or{% if next %}the block through{{ prev.Thumb }}/{{ next.Description }}In a way that calls this information to create more attractive navigation between the front and back documents.