In website content operation, the user experience of the document detail page is crucial.A well-designed page not only effectively showcases content but also guides visitors to explore more related information.Among them, providing the 'Previous' and 'Next' navigation features to users is a commonly used and efficient strategy to enhance the internal link structure of the website, reduce the bounce rate, and optimize the user 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, promoting SEO in a positive way.
Benefiting from the powerful and flexible template engine of AnQiCMS, realizing this feature becomes very direct and efficient.AnQiCMS uses a template syntax similar to Django, allowing easy access to various built-in system data and features with simple tags.For the previous and next navigation on the document detail page, AnQiCMS provides special template tags, allowing content developers to integrate quickly.
Skillfully use the 'Previous' and 'Next' tags of AnQiCMS
AnQiCMS is specially designed for the previous and next page functions of the document detail page.{% prevArchive %}and{% nextArchive %}These tags.The function is to automatically recognize and obtain the information of the previous and next documents in the same category (or based on other sorting logic) 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 functionalities into tags, greatly simplifying the development process.
The syntax of these two tags is very intuitive. They are both{% 标签名 变量名 %}and ends with{% end标签名 %}End. For example, to get the previous document, you can use it like this:{% prevArchive prev %}...{% endprevArchive %}Here,previs a custom variable name that will carry all related data of the previous document within the tag block. Similarly,{% nextArchive next %}the tag innextVariables will include the data from the next document.
InprevornextYou can access rich document field information in these two variables, including but not limited to: Document ID (Id), Document title (Title）、Document Link（Link）、Document Thumbnail（Thumb）、Document Description（Description）et al. These fields are sufficient to construct a functional and aesthetically pleasing navigation area.
Integrate previous/next navigation on the document detail page
To add the navigation to the previous and next articles to your document detail page, you need to find the corresponding document model's detail page template file. According to AnQiCMS template conventions, this is usually located in{模型table}/detail.html[For example, the corresponding model may be the]article/detail.html).
In yourdetail.html[The appropriate location for the template file, where 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 %}Tags are used to try to retrieve adjacent document data. We have added a within 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 the link and title will only be displayed when there are adjacent documents; otherwise, a prompt like 'None' will be displayed to avoid showing empty links or incorrect page layouts.
Pass{{ 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 it according to your design requirements.{{ prev.Thumb }}or{{ next.Thumb }}To display thumbnails, making navigation more attractive. 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, in the above code,pagination-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, ensuring they match the overall design style of the website.
By using these convenient tags provided by AnQiCMS, you can add previous and next navigation to the document detail page with great flexibility and efficiency, significantly enhancing the website's user experience and internal link structure, and laying a solid foundation for content marketing and SEO.
Common Questions (FAQ)
How will the template display if the current document has no previous or next document?If the current document has no corresponding previous or next document under its category or sorting rules,
{% prevArchive %}or{% nextArchive %}Tags withinprevornextVariable will be empty. By adding in 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 order of the previous/next articles? Can it be customized?
Besides the title and link, what other information can I display?
prevandnextThe variable contains rich document information, you can freely call it according to your needs. Besides,Title(Title) andLink(Link), there are also commonly usedThumb(Document thumbnail),Description(Document introduction),CreatedTime(Publish Time) and others. You just need to use it in the template{{ prev.Thumb }}or{{ next.Description }}to call these additional information in order to enrich your next/previous navigation design.