In the ocean of website content, users often hope to browse related information smoothly and do not want to return to the list to look for the next one after reading a wonderful article.This not only affects user experience, but also benefits the internal link structure of the website and search engine optimization (SEO) as well.AnQiCMS fully considered this point, providing a convenient and quick navigation function for the content detail page, allowing users to easily jump between different documents.
The AnQiCMS template system is very flexible, it draws on the syntax of the Django template engine, making it easy for developers and operators to get started.We all离不开the use of template tags in the display of our pages.To implement the 'Previous' and 'Next' links on the document detail page, we will mainly useprevArchiveandnextArchiveThese tags are specifically designed for document navigation.
When a user visits the details page of a document, these tags can intelligently identify the position of the current document in its category and automatically find the information of the previous and next documents, including their titles and links.So, we can directly generate clickable navigation links at the appropriate position on the page, such as at the bottom of the article, to guide users to continue reading.
How to add previous and next page links on the document detail page?
To implement this feature, we first need to find the template file responsible for rendering document details. Usually, this will be located according to your website's configuration./template/您的模板目录/{模型table}/detail.htmlIn the file. For example, if it is an article model, it might be/template/default/article/detail.html.
Open thisdetail.htmlAfter the file, you can insert it below the document content, or at any location you think is appropriateprevArchiveandnextArchive.
The use of these tags is very intuitive. You just need to place them in the template like this:
<nav class="document-pagination">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>
{% else %}
<span>« 没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }} »</a>
{% else %}
<span>没有下一篇了 »</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
Let's explain this code in detail:
{% prevArchive prev %}and{% nextArchive next %}: This is the two core tags provided by AnQiCMS.They will try to get the data of the previous and next documents of the current document.We will assign the data we obtain toprevandnextThese two variables.{% if prev %}and{% if next %}This is a very important judgment. Not all documents have a previous or next one, for example, the first document does not have a previous one, and the last document does not have a next one.We use to avoid displaying empty links or unnecessary informationifTags to checkprevornextDoes the variable exist. If it exists, display the corresponding link;If it does not exist, we can display prompts such as 'No previous article' or 'No next article' to enhance the user experience.{{ prev.Link }}and{{ prev.Title }}: WhenprevornextWhen a variable exists, we can access.their properties using syntax, such asLink(the document's URL) andTitle(the document's title). These properties will be used directly to build<a>label'shrefand text content.
By using such simple lines of code, your AnQiCMS website now has a professional and user-friendly article navigation feature.It not only makes the user experience more smooth when browsing the content but also helps search engines better crawl and understand the structure of your website's content, having a positive impact on SEO.You can customize the style of your website according to your needs,navanddivAdd the corresponding CSS styles to make the 'Previous' and 'Next' links more beautiful and prominent on the page.
Frequently Asked Questions (FAQ)
1. Why does the 'Previous' or 'Next' link sometimes show 'No previous article'?
This usually means that the document you are currently viewing is the first or last document in the category.For example, if a document is the first article published on your website, then it naturally has no 'previous document' to jump to.AnQiCMS template of{% if prev %}or{% if next %}Judgment will catch this situation and display the preset prompt information to ensure that the page does not show errors or blank links, providing a better user experience.
2. Can I customize the display text of the 'Previous' and 'Next' links? For example, show 'Previous Article' instead of 'Previous'?
Of course you can. In the above code example, you can see that we write text directly inside the<a>tags, for example« 上一篇：{{ prev.Title }}. You can freely modify the text content according to your own taste and the language style of the website, such as changing it to« 上一篇文章：{{ prev.Title }}OrPrevious Post: {{ prev.Title }}, just adjust the text in the template file.
3. What is the sorting logic of these links? What criteria are used to determine which article is the 'previous article' or 'next article'?
prevArchiveandnextArchiveThe tag is usually determined by the document's publication time (CreatedTime) and the document ID's order in its category to determine the 'previous' and 'next' documents.As a rule, a larger ID represents a document that was published later. Therefore, 'Previous' refers to the document that was published before the current one (with a smaller ID or earlier release time), while 'Next' refers to the document that was published after the current one (with a larger ID or later release time).This sorting logic ensures that users can browse content in the order of publication.