How to call the previous and next document links in AnQiCMS template?

As an experienced CMS website operation person, I know the importance of content navigation for user experience and SEO.Today, with the website content becoming increasingly rich, how to guide users to smoothly browse related content is a key factor in improving user stickiness and reducing the bounce rate.Today, let's delve into how to cleverly call the links to the previous and next documents in the AnQiCMS template to optimize the structure of your website content and user path.

Enhance User Experience and SEO: Navigation of Previous and Next Documents in AnQiCMS Template

In a content management system, adding 'Previous' and 'Next' navigation for articles or product detail pages is a common and effective way to optimize user browsing experience.This can not only encourage visitors to stay longer on your website and discover more relevant content, but also help search engine spiders better understand the hierarchy and relevance of the website content, thereby improving the overall SEO performance of the website.AnQiCMS as an enterprise-level system focusing on efficient content management naturally also provides a concise and clear way to achieve this function.

Learn AnQiCMS Template and Tag Syntax

In AnQiCMS, the development of templates follows the syntax rules similar to the Django template engine. This means variables are enclosed in double curly braces{{变量}}Define, while control structures (such as conditional judgment, loop) use single curly braces and percent signs{% 标签 %}to mark. This clear syntax makes the writing and maintenance of templates relatively intuitive.

“Previous” and “Next” document links are usually placed on the detail page of a single document (such as an article detail page or a product detail page).AnQiCMS provides special template tags for this, which will automatically work in the context of the current document and intelligently find adjacent documents.

Call the link to the previous document

To display the link to the previous document of the current document, you can useprevArchiveThe tag is designed to be very concise, it does not require any parameters, and the system will automatically determine the previous document based on the sorting of the current document in the database (usually ID or publication time).

When you call in the template{% prevArchive prev %}...{% endprevArchive %}If there is a previous document, it will be assigned to the variable you define (for example, the one here,prevYou can visitprevVariableTitle(Document Title) andLinkProperties such as (document link) can be used to build your navigation elements.

The following is an example code snippet that calls the previous document link:

{% prevArchive prev %}
<div class="prev-document-navigation">
  {% if prev %}
    <a href="{{ prev.Link }}" title="{{ prev.Title }}">
      <span class="navigation-label">上一篇：</span>
      <span class="document-title">{{ prev.Title }}</span>
    </a>
  {% else %}
    <span class="no-document-indicator">已是第一篇</span>
  {% endif %}
</div>
{% endprevArchive %}

In this code, we first use{% prevArchive prev %}Label to get the data of the previous document and assign it toprevvariable. Then, through a{% if prev %}condition judgment to ensure that the link is displayed only when the previous document indeed exists. IfprevThe variable is empty (indicating that the current document is the first one), then display the prompt information "It is the first one".

In addition to the title and link, you can also call other available fields, such asThumb(thumbnail) orDescription(Description), to enrich your navigation display.

Invoke the link to the next document

Similar to the previous document, to display the link to the next document, you can usenextArchiveLabel. This label does not require any parameters; it will intelligently find the next document in the current document.

Using the template{% nextArchive next %}...{% endnextArchive %}If the next document exists, it will be assigned to the variable you define (such as the one here),next). You can also accessnextVariableTitle(Document Title) andLink(document link) and other properties.

This is an example code snippet for calling the next document link:

{% nextArchive next %}
<div class="next-document-navigation">
  {% if next %}
    <a href="{{ next.Link }}" title="{{ next.Title }}">
      <span class="navigation-label">下一篇：</span>
      <span class="document-title">{{ next.Title }}</span>
    </a>
  {% else %}
    <span class="no-document-indicator">已是最后一篇</span>
  {% endif %}
</div>
{% endnextArchive %}

The logic of this code is the same as calling the previous document link, just that theprevArchiveReplacenextArchive, and usenextA variable is used to carry the data of the next document. Similarly, a conditional judgment is also made before displaying the link to ensure the validity of the link.

Integrate the navigation of the previous and next documents.

In the document detail template, you usually place these navigation elements side by side, or arrange them according to design requirements.

An example of a complete document detail page navigation area may look like this:

<section class="document-navigation-area">
  {% prevArchive prev %}
  <div class="prev-document">
    {% if prev %}
      <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
        <i class="icon-arrow-left"></i>
        <span>上一篇:</span>
        <span class="document-link-title">{{ prev.Title }}</span>
      </a>
    {% else %}
      <span class="disabled-link">无上一篇</span>
    {% endif %}
  </div>
  {% endprevArchive %}

  {% nextArchive next %}
  <div class="next-document">
    {% if next %}
      <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
        <span>下一篇:</span>
        <span class="document-link-title">{{ next.Title }}</span>
        <i class="icon-arrow-right"></i>
      </a>
    {% else %}
      <span class="disabled-link">无下一篇</span>
    {% endif %}
  </div>
  {% endnextArchive %}
</section>

In this integrated example, we created independent containers for 'Previous' and 'Next', and added simple icons and text descriptions to enhance visual guidance.By flexibly applying CSS styles, you can design these navigation elements to match the overall style of your website.

Summary

Provided by AnQiCMSprevArchiveandnextArchiveLabels greatly simplify the implementation of navigation between documents. They are ready to use out of the box, and you can add efficient and user-friendly content navigation to your website with simple label calls and conditional judgments.Using these features correctly can not only enhance the user's browsing experience, but also indirectly promote the website's SEO performance, allowing the value of your content to be maximized.In your daily website operation, I strongly recommend that you fully utilize these powerful template functions to continuously optimize the way you display content.

Frequently Asked Questions (FAQ)

Why did I add previous/next tags to the document detail page, but they did not display any content?

In most cases, this may be due to several reasons: first, please make sure that you are currently accessing a valid document detail page, and not a list page or other types of pages.prevArchiveandnextArchiveThe tag is designed to automatically retrieve adjacent documents in the context of a specific document.Next, check if the current document is the first or last in its category, if so, there will be no previous or next document to display accordingly.Finally, please confirm that your template code includes{% if prev %}or{% if next %}Such condition judgment, to correctly handle the case where there are no adjacent documents.

What rules are used to sort and select the previous and next documents?

AnQiCMS'prevArchiveandnextArchiveLabels are usually determined according to the default sorting rules of the document (such as publication time or ascending/descending order of ID) to determine adjacent documents.In the context of the document details page, they will search for the previous and next documents in the same category as the current document, sorted according to the default sorting rules.This means they usually look for the closest document in the category of the current document, in chronological or ID order.

Can I use these tags on non-document detail pages (such as the homepage or list page)?

It is not recommended to use them directly on non-document detail pages (such as the homepage, category list page)prevArchiveandnextArchiveTags. These tags depend on the current page having a clear 'current document' context to work correctly.On the home page or list page, the system cannot determine which "current document" it is, so these tags will not be able to access the data.If you need to display related documents on these pages, you should usearchiveListtags, and cooperatecategoryIdortagIdFlexible content invocation with parameters.