In website content operation, the user experience of the document detail page is crucial.A well-designed page can not only effectively display content but also guide visitors to explore more relevant information.Among these, providing the 'Previous' and 'Next' navigation function for users is a commonly used and efficient strategy to improve the internal link structure of the website, reduce the bounce rate, and optimize the user's browsing path.This not only helps users conveniently explore more content, but also conveys the relevance and depth of the website's content to search engines, which has a positive impact on SEO.
Benefiting from the powerful and flexible template engine of AnQiCMS, achieving this function becomes very direct and efficient.AnQiCMS uses a template syntax similar to Django, allowing easy access to various built-in data and functions with concise tags.For the previous and next navigation on the document detail page, AnQiCMS provides special template tags to allow content developers to quickly integrate.
Skillfully use the "Previous" and "Next" tags of AnQiCMS
AnQiCMS has specially designed the previous and next page features for the document detail page.{% prevArchive %}and{% nextArchive %}These tags. Their purpose is to automatically identify and retrieve the information of the previous and next documents in the same category or based on other logical sorting when the user browses a document.This means, you do not need to manually write complex database queries or logical judgments, AnQiCMS has built these functions into tags, greatly simplifying the development process.
The syntax of these two tags is very intuitive. They both are.{% 标签名 变量名 %}and ends with{% end标签名 %}End. For example, to get the previous document, you can use it like this:{% prevArchive prev %}...{% endprevArchive %}. Here,prevIt is a custom variable name that will carry all related data of the previous document within the tag block. Similarly,{% nextArchive next %}in the labelnextThe variable will contain the data of the next document.
InprevornextIn these two variables, you can access rich document field information, including but not limited to: document ID (Id) document title (Title）Document Link（Link）Document Thumbnail（Thumb）Document Description（Description） etc. These fields are enough to build a fully functional and beautiful navigation area.
Integrate previous/next navigation in the document detail page
To add the navigation for the previous and next articles to your document detail page, you need to find the detail page template file for the corresponding document model. According to the AnQiCMS template conventions, this is usually located{模型table}/detail.htmlFor example, the corresponding article model might bearticle/detail.html)
Before yourdetail.htmlAt the appropriate location in the template file, you can insert the following code snippet to display the previous and next articles:
<nav class="pagination-post">
<div class="prev-post">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">
<span class="label">上一篇</span>
<h4 class="title">{{ prev.Title }}</h4>
</a>
{% else %}
<span class="no-post">没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-post">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">
<span class="label">下一篇</span>
<h4 class="title">{{ next.Title }}</h4>
</a>
{% else %}
<span class="no-post">没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</nav>
In this code, we first use{% prevArchive prev %}and{% nextArchive next %}Tag to try to get adjacent document data. We added one inside each tag block.{% if prev %}or{% if next %}The judgment. This is because not all documents have a previous or next one (for example, the first article in a series does not have a previous one, and the last article does not have a next one).This judgment ensures that only when there are adjacent documents, will the link and title be displayed;Otherwise, it will display a prompt such as
By{{ prev.Link }}and{{ prev.Title }}(or{{ next.Link }}and{{ next.Title }}），We can easily extract the document link and title. You can also further utilize according to your design needs.{{ prev.Thumb }}or{{ next.Thumb }}To display thumbnails, making navigation more eye-catching. For example, if you need to display thumbnails:
<a href="{{ prev.Link }}">
<span class="label">上一篇</span>
{% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}">{% endif %}
<h4 class="title">{{ prev.Title }}</h4>
</a>
Please note the code in the abovepagination-post/prev-post/next-post/label/title/no-postThe class names are just examples, you need to combine your own CSS styles to beautify these elements so that they match the overall design style of the website.
By using these convenient tags provided by AnQiCMS, you can add the previous and next navigation to the document detail page very flexibly and efficiently, significantly improving the website user experience and internal link structure, laying a solid foundation for content marketing and SEO.
Frequently Asked Questions (FAQ)
How will the template display if the current document does not have a previous or next one?If the current document does not have a corresponding previous or next document in its category or sorting rules,
{% prevArchive %}or{% nextArchive %}within the labelprevornextThe variable will be empty. By adding to the template{% if prev %}or{% if next %}such conditional judgments, you can elegantly handle this situation, for example, displaying 'none' or not displaying the navigation area.How is the sorting rule for 'Previous/Next'? Can it be customized?The previous/next function of AnQiCMS is usually determined by the document's publication time, ID sequence, or the sorting value set in the background management interface to determine the logical order of the document.This means, they will automatically display the previous and next documents in the same category according to the default order.Currently, these tags do not provide custom sorting parameters directly. However, if you have specific sorting requirements for your document list or archive, you can indirectly affect the logical order of the previous/next article by adjusting the publication time of the document itself or the backend sorting settings.
Besides the title and link, what other information can I display?
prevandnextVariables contain rich document information, you can call it freely according to your needs. In addition,Title(Title) andLink(Link) is also commonly used,Thumb(Document thumbnail),Description(Document summary),CreatedTime(Publish time) and so on. You just need to use it in the template.{{ prev.Thumb }}or{{ next.Description }}In this way, you can call these additional information to further enrich the design of your previous/next navigation.