When browsing content on a website built with AnQiCMS, carefully crafted documents bring value to readers.It is particularly important to provide "Previous" and "Next" navigation links at the end of each article to ensure a smooth reading experience for the readers and encourage them to explore more related content.This can effectively guide users to deeply browse within the website, increase page visits and user stickiness, and is also very beneficial for the internal link structure and SEO optimization of the website.
AnQiCMS as a content management system that focuses on user experience and SEO-friendly, naturally provides a simple and efficient solution for this common need. ThroughprevArchiveandnextArchiveThese built-in template tags allow us to easily implement the links and title display of the previous and next documents on the document detail page.
UnderstandprevArchiveandnextArchiveTag
These tags are special members of the AnQiCMS template engine, designed for use in document detail pages.The strength lies in the fact that the system can intelligently identify and obtain the data of the previous or next document in the content list without complex parameter configuration.This means that regardless of how your content categories are organized or the order of content publication, these tags can accurately find the documents for 'before' and 'after'.
prevArchiveThe tag is used to get the previous document of the current document.nextArchiveThe tag is used to get the next document of the current document.
Their usage is very intuitive, usually appearing in such a structure:
{% prevArchive prev %}
{# 在这里使用prev变量来展示上一篇文档的信息 #}
{% endprevArchive %}
{% nextArchive next %}
{# 在这里使用next变量来展示下一篇文档的信息 #}
{% endnextArchive %}
In the above code snippet,prevandnextUser-defined variable names, which will carry the complete information of the previous and next documents, such as ID, title, link, thumbnail, etc.
Practical application on the document detail page
Now, let's look step by step on how to add these navigation links to the AnQiCMS document detail page template. Typically, the template file for the document detail page will be{模型table}/detail.htmlFor example, the article modelarticle/detail.html.
First, make sure you are editing the template file of the document detail page
1. Basic link and title display
The most common requirement is to display the title and link of the previous/next document.
<div class="archive-navigation">
<div class="prev-archive">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
{% else %}
<span>没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-archive">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }}</a>
{% else %}
<span>没有下一篇文章了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this example:
- We use
{% prevArchive prev %}and{% nextArchive next %}Two areas are defined to retrieve the data of the previous and next documents and assign them toprevandnextVariable. {% if prev %}(or{% if next %}A crucial logical judgment. Since the current document may be the first or last in the category, there may not be a 'previous' or 'next' document.Through this judgment, we can elegantly handle this situation, displaying 'No previous article' or 'No next article', to avoid empty links or errors on the page.{{ prev.Link }}and{{ prev.Title }}(as well asnextThe field corresponding to the variable can be directly accessed to the document's link and title. AnQiCMS will expose the commonly used fields of the document object to these variables for easy access.
2. Advanced Application: Add Thumbnails
If your website design style requires it, you can also display thumbnails of the previous/next document next to or inside the link to make navigation more visually appealing.
<div class="archive-navigation visual-navigation">
<div class="prev-archive">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}" class="flex-item">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb">
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-entry">没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-archive">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}" class="flex-item">
<span>下一篇：{{ next.Title }}</span>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb">
{% endif %}
</a>
{% else %}
<span class="no-entry">没有下一篇文章了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this example, we have added{% if prev.Thumb %}(or{% if next.Thumb %}）to ensure that the image is displayed only when the document has a thumbnail.{{ prev.Thumb }}The URL of the document thumbnail will be output. You can choose according to your actual situationThumb(thumbnail) orLogo(First image).
Optimization and tips
- Customize the style:The above code only provides the HTML structure, you can beautify these navigation links through CSS styles, such as setting background, border, font size, icons, etc., to keep them consistent with the overall style of the website.
- Copywriting optimization:In addition to
- Display location:The most common placement is at the bottom of the document content. You can also consider adding these navigations to the sidebar or floating buttons to facilitate easy switching by the user at any time.
- Page loading:These tags have a negligible impact on page performance during parsing, as they only query adjacent articles, causing no large data loading.
By flexible applicationprevArchiveandnextArchiveLabel, your AnQiCMS website will provide readers with a more seamless and convenient reading experience, while also enhancing the internal connection depth of the content, bringing long-term operational value to the website.
Frequently Asked Questions (FAQ)
1. Why does my 'previous/next' link sometimes display 'none'?
This is normal.prevArchiveandnextArchiveThe label is determined by the order of publication of the current document in the category.If the current document is the first article in the category, then it does not have a 'previous article';If it is the last article, there is no 'next article'.In templates, we usually use{% if prev %}or{% if next %}This condition judgment is used to handle this situation, when there are no adjacent documents, it can display "none" or other custom prompts to avoid empty links.
2. Can I customize the content displayed for 'Previous/Next' articles? For example, can I also display the publish date along with the title?
Of course you can.prevandnextVariables are actually complete document objects, they contain all the public fields of the document. In addition toLinkandTitle, you can also accessCreatedTime(Publish time),Description(Summary),Thumb(Thumbnail) and other fields. For example, to display the publish date, you can use{{ stampToDate(prev.CreatedTime, "2006-01-02") }}to format the timestamp and display it. Just follow the document details tag(archiveDetailFields listed here can be called.
Can these tags be used on non-document detail pages?
prevArchiveandnextArchiveTags are specifically designed for document detail pages, and their mechanism depends on the context of the "current document".If used on non-document detail pages (such as the homepage, category list page, or single page), these tags will not be able to correctly identify the "current document", which may result in not being able to get the expected previous or next content, or even cause template parsing errors.Therefore, please ensure that only the detail page template under the document model (such asarticle/detail.htmlorproduct/detail.htmlThey can be used here.