When browsing content on the website built with AnQiCMS, meticulously crafted documents bring value to readers.To ensure a smooth reading experience for readers and encourage them to explore more related content, it is particularly important to provide 'Previous Article' and 'Next Article' navigation links at the end of each article.This can effectively guide users to deeply browse 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 concise 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.
UnderstandprevArchiveandnextArchivetags
These tags are special members in the AnQiCMS template engine, designed for document detail pages.Their strength lies in the fact that, without complex parameter configuration, the system can intelligently identify and obtain the data of the previous or next document adjacent to the current document in the content list.This means that, regardless of how your content categories are organized, or the order in which content is published, these two tags can accurately find the "before and after" documents.
prevArchiveThe label is used to obtain the previous document data of the current document.nextArchiveThe label is used to obtain the next document data of the current document.
The way they are used is very intuitive, usually appearing in such a structure:
{% prevArchive prev %}
{# 在这里使用prev变量来展示上一篇文档的信息 #}
{% endprevArchive %}
{% nextArchive next %}
{# 在这里使用next变量来展示下一篇文档的信息 #}
{% endnextArchive %}
In the above code snippet,prevandnextThese are user-defined variable names, which will carry the complete information of the previous and next document, such as ID, title, link, thumbnail, etc.
Application in the document detail page
Now, let's take a step-by-step look at how to add these navigation links to your AnQiCMS document detail page template. Usually, the template file for the document detail page will be{模型table}/detail.htmlEnglisharticle/detail.html.
English
English
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, one to retrieve the data of the previous document and the other to assign toprevandnexta variable. {% if prev %}(or}{% if next %}It is an important logical judgment.Since the current document may be the first or last document in the category, there may be no "Previous document" or "Next document" at this time.Through this judgment, we can elegantly handle this situation, displaying "No previous article" or{{ prev.Link }}and{{ prev.Title }}(andnextThe corresponding field can directly access the link and title of the document. AnQiCMS will directly expose the commonly used fields of the document object to these variables, making it convenient for you to call them as needed.
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 within the link, making 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 %}) judgment to ensure that the image is displayed only when there is a thumbnail in the document.{{ prev.Thumb }}It will output the URL of the document thumbnail. You can choose according to your actual situation.Thumb(Thumbnail) orLogo(First image).
Optimization and tips
- Style Customization:The code above only provides the HTML structure, you can enhance these navigation links with CSS styles, such as setting background, border, font size, icons, etc., to maintain consistency with the overall website style.
- Text optimization:In addition to
- Display Location:The most common placement is at the bottom of the document content. Consider adding these navigation links to the sidebar or floating button as well, for easy user switching at any time.
- Page Load:These two tags have a negligible impact on page performance during parsing because they only query the two adjacent articles, and do not cause a large amount of data to be loaded.
By using flexibilityprevArchiveandnextArchiveLabel, your AnQiCMS website will provide readers with a more seamless and convenient reading experience, while enhancing the internal connection depth of the content, bringing long-term operational value to the website.
Common Questions (FAQ)
1. Why does my 'Previous/Next' link sometimes show 'None'?
This is a normal situation.prevArchiveandnextArchiveLabels are determined based on the publishing order of the current document within its category.If the current document is the first article in this category, then there is no 'Previous'; if it is the last article, then there is no 'Next'.{% if prev %}or{% if next %}Such conditional judgment is used to handle this situation, when there are no adjacent documents, it can display "none" or other custom prompts to avoid displaying empty links.
2. Can I customize the content displayed for 'Previous/Next Article'? For example, besides the title, can I also display the publish date?
Of course you can.prevandnextVariables are actually complete document objects, which include all the public fields of the document. In addition,LinkandTitleyou 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 (archiveDetailUsing the available fields listed in it.
Can these tags be used on non-document detail pages?
prevArchiveandnextArchiveLabels 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 retrieve the expected previous or next content, or even cause template parsing errors.article/detail.htmlorproduct/detail.htmlUsing them in it.