It is crucial to provide website visitors with a convenient navigation experience in the AnQiCMS content management system.After the user has finished reading an exciting article or viewing a detailed product, they will usually want to continue browsing related content.This link to "Previous" and "Next" articles on the current document page will undoubtedly greatly enhance user experience and extend their stay on the website.The AnQiCMS template system, with its flexible tag design, makes it very intuitive to retrieve and display these links on the document detail page.
Understand the working principle of the 'Previous' and 'Next' tags
AnQiCMS has specially provided in its template tag system,prevArchiveandnextArchiveThese tags are used to intelligently obtain information about the previous and next documents in the chronological order of the current document.The strength of these tags lies in the fact that they can automatically identify the document being browsed without complex parameter configuration, and find the logical previous and next articles based on their publication time or internal sorting of the system.
These tags mainly provide the following key fields for use:
Id: The unique identifier ID of the document.Title: The document title, which is the most commonly used field for link text.Link: The document's access link, this is the core of building hyperlinks.ThumborLogo: The document's thumbnail or cover image, if you want the link to be more visually attractive, you can display these images.- There are
Description(Document description),CreatedTime(Creation time) and other fields can be expanded as needed.
It should be noted that,prevArchiveandnextArchiveTags are usually only inDocument detail page(For example, the article detail pagearchive/detail.htmlOr product details pageproduct/detail.htmlIt takes effect in the details template or custom template because they depend on the context information of the current document to determine their 'adjacent' position.
How to get and display the previous/next link in the template
Let's take a step-by-step look at how to implement this feature in the AnQiCMS template.
Step 1: Locate the document detail template file
First, you need to find the template file responsible for rendering the document detail content. It is usually located in the template theme directory you are using, for exampletemplate/your_theme_name/archive/detail.htmlortemplate/your_theme_name/product/detail.html. If you have set a custom template for a specific model or document, you need to edit the corresponding file.
Step 2: Add previous/next tag code.
In the template file found, you can insert the code to get the information of the previous and next document at the bottom of the document content area or at a suitable position.
This tag usage is very concise, you only need to declare a variable to receive the data it returns. For example, we useprevto represent the previous document,nextIndicate the next document:
{% prevArchive prev %}
{% nextArchive next %}
Step three: build links and handle no-content situations
obtaining toprevandnextAfter the variable, we can use the ones provided by itTitleandLinkFields to build hyperlinks. At the same time, considering that not all documents have "Previous" or "Next" (for example, the first article does not have a previous one, and the last article does not have a next one), we need to useifLogical judgment to ensure that the link is displayed only when there is content, otherwise a prompt text can be displayed.
Here is a commonly used implementation, which places the 'Previous' and 'Next' links in a navigation area:
<nav class="document-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">
<strong>« 上一篇：</strong>
{{ prev.Title }}
</a>
{% else %}
<span class="no-entry">« 没有上一篇了</span>
{% endif %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">
<strong>下一篇：»</strong>
{{ next.Title }}
</a>
{% else %}
<span class="no-entry">没有下一篇了 »</span>
{% endif %}
</div>
</nav>
In this code, we first use{% prevArchive prev %}and{% nextArchive next %}Try to get the adjacent documents. Then, by{% if prev %}and{% if next %}Determine if the document information is successfully obtained. If successful, use<a>the tag to enclose the document title ({{ prev.Title }}/{{ next.Title }}) within the document link ({{ prev.Link }}/{{ next.Link }}In the middle. If there is no previous or next article available, display a friendly prompt, such as 'No previous article available'.
Step 4: Further optimization and personalization.
If you want the link to be more attractive, consider displaying a thumbnail of the document next to it:
<nav class="document-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}"/>{% endif %}
<strong>« 上一篇：</strong>
{{ prev.Title }}
</a>
{% else %}
<span class="no-entry">« 没有上一篇了</span>
{% endif %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">
<strong>下一篇：»</strong>
{{ next.Title }}
{% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}"/>{% endif %}
</a>
{% else %}
<span class="no-entry">没有下一篇了 »</span>
{% endif %}
</div>
</nav>
Of course, you can also style the link according to the overall style of the website,document-navigation/prev-document/next-documentAdd CSS styles to HTML elements to make them more beautiful and coordinated in the page. For example, displaying them side by side or stacking them on mobile devices are common layout methods.
By following these steps, you can easily implement the previous/next navigation feature on the document detail page of AnQiCMS, providing your website visitors with a smoother content browsing experience.
Frequently Asked Questions (FAQ)
Why did I add
prevArchiveandnextArchivetags, but there is no display on the page?This is usually because the document you are currently browsing does not have a previous or next document.For example, if it is the first article in a series, there will not be a previous article.If it is the last one, there will be no 'next'. Also, make sure that these tags are inDocument detail pageused in the template, not on the list page or other types of pages.prevArchiveandnextArchiveWill it automatically consider the document category, only displaying the previous/next article in the same category?Yes, AnQiCMS'prevArchiveandnextArchiveLabels are designed to consider the context of the document. By default, they will intelligently search for adjacent documents within the category of the current document to ensure the continuity and relevance of navigation.This means that you do not need to configure anything extra, the system will try to find the previous and next articles in the same category for you.Can I customize the display text for 'Previous' and 'Next'?For example, change it to 'Previous Article' and 'Next Article'??Of course it can. In the above code example,
<strong>« 上一篇：</strong>and<strong>下一篇：»</strong>These texts are directly written in the template, you can modify them according to your needs to any text, including corresponding multi-language text. For example, you can change them to<strong>« Previous Post：</strong>and<strong>Next Post：»</strong>.