In website operation, providing a smooth user experience is crucial, and the previous and next navigation of the document detail page is a key link to improve user experience and guide users to delve deeper into the website content.In AnQiCMS (AnQi CMS), implementing this feature is simple and efficient, it comes with dedicated template tags that allow you to easily add this practical feature to your website content.
Importance of navigation between previous and next articles
When a user finishes reading a document, they often want to find related or the next content to get more information. At this point, clear "Previous" and "Next" links can:
- Improve user experience and retention time:Users do not need to return to the list page to search, they can continue browsing directly through navigation, reduce the path of operations, and increase the time users spend on the website.
- Optimize internal link structure:These links naturally build the association between articles, which helps search engines better crawl and understand the internal link structure of the website, thereby having a positive impact on SEO.
- Promote content consumption:Guide users to discover more content, increase the overall exposure and reading times of the website content.
In AnQiCMS,prevArchiveandnextArchiveTag
AnQiCMS provides two very practical template tagsprevArchiveandnextArchiveIt is used to obtain the previous and next content of the current document on the document detail page.They can intelligently judge the previous and next documents of the current document and display relevant information.
The use of these tags is very intuitive, no complex parameters need to be passed, the system will automatically search for adjacent documents based on the current document context (such as classification, publishing time, etc.). Each tag can obtain various field information of the next or previous document, for example:
- Document ID (
Id): The unique identifier of the document. - Document title (
Title): The document name, usually used in link text. - Document link (
Link): Directly jump to the URL of the document. - Document thumbnail (
Thumb) or cover image (Logo): If present, can be used for visual navigation. - Document description (
Description): Short document summary. - Document view count (
Views): Shows the popularity of the document. - Document added time (
CreatedTime): Shows the publication date of the document.
How to add previous/next page links in the document detail page
You need to be in the website template directory under thedetail.htmlPerform operations in the file. This is the template file used by AnQiCMS by default to render document detail pages.
1. Basic text link
The simplest way is to only display the title of the previous and next documents as links. In practice, not all documents have a previous or next document, so conditional judgment is needed.{% if prev %}and{% if next %}Ensure that the link is displayed only when the corresponding document exists.
<div class="document-navigation">
<div class="prev-document">
{% prevArchive prev %}
上一篇：
{% if prev %}
<a href="{{prev.Link}}">{{prev.Title}}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
下一篇：
{% if next %}
<a href="{{next.Link}}">{{next.Title}}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code block,{% prevArchive prev %}It will try to retrieve the data of the previous document and assign it to a variable.prevIfprevThe variable has a value (i.e., there is a previous one).{% if prev %}The condition is met, displaying links with titles. Similarly,{% nextArchive next %}it also operates in the same manner. When there is no corresponding document, we display the prompt 'No results found.'
2. Enhance visual effects by combining thumbnails
To make navigation more attractive, we can combine the document thumbnail feature.prevandnextObjects all containThumbFields, can be directly referenced:
<div class="document-navigation visual-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{prev.Link}}">
{% if prev.Thumb %}<img src="{{prev.Thumb}}" alt="{{prev.Title}}" />{% endif %}
<span>{{prev.Title}}</span>
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{next.Link}}">
<span>{{next.Title}}</span>
{% if next.Thumb %}<img src="{{next.Thumb}}" alt="{{next.Title}}" />{% endif %}
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this example, we added<img>tags and used conditional judgment again{% if prev.Thumb %}Make sure that the image is displayed only when the thumbnail exists, to avoid displaying placeholders or blank spaces. You can adjust as needed.<img>The placement of the tags, for example above or below the title.
3. Further beautification and layout
You can use CSS todocument-navigation/prev-documentandnext-documentMake the class beautiful and consistent with the overall design style of your website.For example, you can set them to flexible layout so that the previous link is displayed to the left and the next link is displayed to the right, or you can add borders, background colors, and hover effects, etc.
provided by AnQiCMSprevArchiveandnextArchiveTags, make it easy to add previous and next navigation to your website document detail page.This not only optimizes the browsing path of users on the website, but also adds strength to the internal link structure of the website, helping the website to achieve better content display and SEO effect.
Frequently Asked Questions (FAQ)
Q1:prevArchiveandnextArchiveDoes the tag support calling in the article list page?
Answer: No.prevArchiveandnextArchiveThe tag is specifically designed for the context environment of the document detail page.They rely on the single document currently being viewed to determine the documents before and after it.If you need to display content on the article list page, you should usearchiveListLabel with corresponding conditions and sorting parameters to get the data you want.
Q2: If the document is the first or last in the current category and there is no previous or next document, what will the template display?
Answer: As shown in the example in the text, if it is used{% if prev %}or{% if next %}Perform a conditional judgment. When the corresponding document does not exist, you can customize the display of a prompt such as 'None' or simply do not display any content, leaving the area blank.This depends on your template design and user experience considerations. If there is no conditional judgment and the document does not exist, then the corresponding{{prev.Title}}or{{next.Link}}Will not output any content.
Q3: How to customize the display style of the previous/next link, for example, only show the title without showing the picture, or only show the icon?
Answer: You areprevandnextThe HTML structure inside the variable has full control. If you only want to display the title, simply place{% if prev %}or{% if next %}within the block<a>Tags and{{prev.Title}}(or{{next.Title}}) and remove<img>Label. If you want to display an icon, you can replace<span>it with an icon font or SVG icon and adjust the positioning and styling with CSS. You can combine them as needed.Title/Link/ThumbThe fields are used to build the desired appearance.