When browsing website content, users often want to be able to easily navigate to related or adjacent articles from the current page.This kind of previous/next navigation not only can significantly improve user experience, but also can play an active role in SEO, guiding search engine spiders to more deeply crawl website content.prevArchiveandnextArchive.
These tags are designed specifically for the document detail page of AnQiCMS, they can intelligently recognize the current document and find adjacent documents in the timeline or sorting.It is very intuitive to use, you do not need to pass any parameters, the system will automatically judge the context.{% prevArchive prev %}Attempts to retrieve the previous document of the current document and assign it toprevthe variable; similarly,{% nextArchive next %}Attempts to retrieve the next document information and assign it tonextVariable.
Once we obtain these variables, we can access various properties within them, such as the document'sId(ID),Title(Title),Link(Link),Thumb(thumbnail) evenDescription(description) etc. These properties are related toarchiveDetailTags available fields are basically consistent, making content display more flexible.
Display links and titles of the previous/next document
The most common usage is to display a simple text link that the user can click on to directly navigate.However, in practical application, we also need to consider an important situation: if the current document is the first or last document in the category, the previous or next document may not exist.ifJudgment, we can use it to elegantly handle this situation.
Here is a basic template code example showing how to add previous and next text links at the bottom of a document detail page:
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
上一篇：<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
下一篇：<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code block,{% prevArchive prev %}and{% nextArchive next %}First, try to get the adjacent documents. IfprevornextThe variable exists (i.e., the corresponding document is found), and we will render a one that includes the document title and link<a>Label.On the contrary, if the document does not exist, it will display a friendly prompt message, such as 'No previous article' or 'No next article', ensuring that the page can display normally in any case and improve the user experience.
Combined with thumbnails to enhance the visual effect
To make navigation more attractive, you can also choose to display a thumbnail of the document next to the link.ThumbThe field provides the thumbnail URL of the document. This is particularly useful for product detail pages or articles with illustrations.
The following code demonstrates how to add a thumbnail to the previous/next navigation:
<div class="article-navigation-visual">
<div class="prev-article-thumb">
{% 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-article-thumb">
{% 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>
We use it here as well:{% if prev.Thumb %}To check if the thumbnail exists, to avoid displaying a broken image icon when there is no image.In this way, we can create richer and more attractive content navigation.
These navigation elements are usually placed at the bottom of the document detail page, adjacent to the article content or comments section, providing users with a natural content flow exit.A reasonable layout and design can guide users to stay longer on the website and discover more valuable content.
Use tips
- Clear guidance：Clearly mark 'Previous' and 'Next' to make it clear to users.
- Visual Integration：Ensure that the style of navigation links is consistent with the overall design style of the website, without being abrupt.
- Robust handlingAlways use
{% if %}Determine to handle cases where there is no previous or next article, to avoid page display errors or interruptions in user experience. - SEO-friendlyMake sure the link is clickable text, containing a meaningful title, which helps search engines understand the page structure.
ByprevArchiveandnextArchiveLabel, AnQiCMS users can easily build a smooth document navigation experience on the website.This not only simplifies template development, but also focuses on the user, enhancing the visibility of content and the overall activity of the website.
Frequently Asked Questions (FAQ)
Q1:prevArchiveandnextArchiveHow do you determine the previous/next document? Will they cross categories to search?A1:prevArchiveandnextArchiveTags are usually in the category of the current documentin the same categorySearch below.They determine adjacent documents based on the publication time or ID order of the documents.This means that if the previous or next document of the current document belongs to a different category, these tags will not be found and displayed by default.
Q2: If my website has multiple content models (such as articles and products), can these tags be used on all models?A2: Yes.prevArchiveandnextArchiveIs AnQiCMS universal document tags, as long as it is document content managed by AnQiCMS, whether it is an article model, product model, or custom model document, these two tags can be used on the detail page to display adjacent documents.
**