It is crucial to provide a convenient navigation experience for website visitors in the AnQiCMS content management system.When a user has finished reading an excellent article or viewing a detailed product, they usually hope 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 template system of AnQiCMS, with its flexible tag design, makes it very intuitive to obtain and display these links on the document detail page.
Understand the working principle of the "Previous" and "Next" tags
In the AnQiCMS template tag system, a special tag is provided forprevArchiveandnextArchiveThese tags are used to intelligently obtain the information of 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.
These tags mainly provide the following key fields for us to use:
Id: The unique identifier ID of the document.Title: The title of the document, which is the most commonly used field for link text.LinkThis is the access link of the document, which is the core of constructing hyperlinks.ThumborLogoThis is the thumbnail or cover image of the document. If you want the link to be more visually attractive, you can display these images.- also
Description(Document description),CreatedTimeFields such as (creation time) can be expanded as needed.
It is particularly important to note,prevArchiveandnextArchiveTags are usually only inDocument details page(For example, the article detail page)archive/detail.htmlor product detail pageproduct/detail.htmlThe setting or custom template details are effective, as they depend on the context information of the current document to determine their 'adjacent' position.
How to retrieve and display the previous/next link in a 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
Firstly, you need to find the template file responsible for rendering the document detail content. This is usually located in the template theme directory you are using, for exampletemplate/your_theme_name/archive/detail.htmlortemplate/your_theme_name/product/detail.htmlIf you have set a custom template for a specific model or a specific document, you need to edit the corresponding file.
Step 2: Add the previous/next article tag code
In the found template file, you can insert the code to get information about the previous and next documents in the document content area or at any position you consider appropriate.
The usage of these tags is very concise, you only need to declare a variable to receive the data they return. For example, we useprevto represent the previous document,nextto indicate the next document:
{% prevArchive prev %}
{% nextArchive next %}
Step 3: Build links and handle no-content situations
Get toprevandnextvariables, we can then utilize the ones they provideTitleandLinkThe field is used to build hyperlinks. At the same time, considering that not all documents have 'previous article' or 'next article' (for example, the first article does not have a previous article, and the last article does not have a next article), we need to useifEnsure that the link is displayed only when there is content, otherwise a prompt text can be displayed.
Here is a commonly used implementation method, which places the 'Previous Article' and 'Next Article' 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, through{% if prev %}and{% if next %}Check if the document information is successfully retrieved. If successful, use.<a>the tag to wrap the document title ({{ prev.Title }}/{{ next.Title }}) within the document link ({{ prev.Link }}/{{ next.Link }}In the 【en】section. If there is no previous or next article available, display a friendly prompt like '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 match the link to the overall style of the website,document-navigation/prev-document/next-documentAdd CSS styles to HTML elements to make them more aesthetically pleasing and harmonious on 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 function on the document detail page of AnQiCMS, providing your website visitors with a more seamless content browsing experience.
Common Questions and Answers (FAQ)
Why did I add it, but there is no display on the page?
prevArchiveandnextArchiveThe tag, but not on the list page or other types of pages.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 be no 'Previous'; if it is the last article, there will be no 'Next'.Document details pageused in the template, not on the list page or other types of pages.prevArchiveandnextArchiveWhether it automatically considers the classification of the document and only displays the previous/next document in the same category?Yes, AnQiCMS supportsprevArchiveandnextArchiveThe tag has considered the context association of the document during design.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 any additional configuration, the system will try its best to find the previous and next articles in the same category for you.Of course, it can. In the above code example,
<strong>« 上一篇：</strong>and<strong>下一篇：»</strong>These texts are written directly in the template, and you can directly modify them to any text according to your needs, including corresponding text in multiple languages. For example, you can change them to<strong>« Previous Post：</strong>and<strong>Next Post：»</strong>.