In website operation, providing a smooth user experience is crucial, and the navigation for the previous and next pages of the document detail page is a key link to improve user experience and guide users to deeply browse the website content.In AnQiCMS (AnQi CMS), realizing this feature is both simple and efficient, it built-in special template tags, allowing you to easily add this practical feature to the website content.
The importance of navigation between previous and next articles
When users finish reading a document, they often want to find related or the next content to get more information. At this time, clear 'Previous' and 'Next' links can:
- Enhance user experience and retention time:Users do not need to return to the list page to find, they can continue browsing directly through navigation, reducing the operation path, and improving the user's stay time 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 frequency of the website.
In AnQiCMS,prevArchiveandnextArchivetags
AnQiCMS provides two very practical template tagsprevArchiveandnextArchiveUsed specifically to get the previous and next content of the current document on the document detail page in English.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 need to pass complex parameters, the system will automatically search for adjacent documents according to the context of the current document (such as classification, publication time, etc.). Each tag can obtain various field information of the next or previous document, for example:
- 文档 ID (English)
Id): The unique identifier of the document. - Document title (}
Title)：文档的名称，通常用于链接文本。 - document link (}
Link)：直接跳转到该文档的 URL。 - 文档缩略图 (English)
Thumb) 或封面首图 (English)Logo)：If it exists, it can be used for visual navigation. - Document Description (
Description)：A brief document summary. - Document views (
Views)：Displays the popularity of the document. - Document add time (
CreatedTime)：Displays the publication date of the document.
How to add previous/next page links in the document detail page
You need to be in the directory of the website templatedetail.htmlFile operation. This is the template file used by AnQiCMS by default to render the document detail page.
1. Basic text link
The simplest way is to only display the titles of the previous and next documents as links. In actual use, not all documents have a previous or next document, so a conditional judgment is required{% 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,{% prevArchive prev %}It will try to get the data of the previous document and assign it to the variable.prev.prevThe variable has a value (i.e., there is a previous one).{% if prev %}The condition will be met, and the link with the title will be displayed. Similarly,{% nextArchive next %}it operates in the same manner. When there is no corresponding document, we display the prompt 'None'.
2. English version: Combine thumbnails to enhance visual effects.
To make navigation more attractive, we can combine the document thumbnail feature.prevandnextAll objects containThumbFields, which 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>Label, and use conditional judgment again{% if prev.Thumb %}To ensure that the image is displayed only when the thumbnail exists, and avoid displaying placeholder images or blank spaces. You can adjust as needed.<img>The placement of the label, for example, above or below the title.
3. Further beautification and layout
You can use CSS todocument-navigation/prev-documentandnext-documentStyle the elements to match the overall design style of your website.For example, you can set them to be a flexible layout so that the previous link is displayed on the left and the next link is displayed on the right, or 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 pages.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 effects.
Common Questions (FAQ)
Q1:prevArchiveandnextArchiveDoes the label support calling in the article list page?
Answer: No.prevArchiveandnextArchiveTags are specifically designed for the context environment of the document detail page.They depend on the single document being viewed to judge the documents before and after.archiveListLabel 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 has been used{% if prev %}or{% if next %}Perform a conditional judgment, when the corresponding document does not exist, you can customize the display of text prompts such as "none" or simply do not display any content, keeping the area blank.This depends on your template design and user experience considerations.{{prev.Title}}or{{next.Link}}English will not output any content.
Q3: How to customize the display style of the previous/next post link, such as only displaying the title without the image, or only displaying the icon?
Answer: You haveprevandnextThe HTML structure within the variable has complete control. If you only want to display the title, just place{% if prev %}or{% if next %}inside 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>with icon font or SVG icon, and use CSS for positioning and styling adjustments. You can freely combine according to your needsTitle/Link/ThumbUsing fields to construct the desired appearance.