In content websites, providing visitors with a convenient navigation experience is crucial, among which the "Previous" and "Next" features are标配of the article detail page.They not only guide users to continue browsing more content, effectively increase the website's PV (page views), but also help search engines better understand the content structure of the website to optimize SEO performance.AnQiCMS fully considered this requirement, providing us with very simple and intuitive template tags to easily achieve this function.
Learn about the template mechanism of AnQiCMS
In AnQiCMS, we control the display of website pages by writing template files. The templates use syntax similar to Django, through double curly braces{{ 变量名 }}Output variable content, through{% 标签 %}Use feature tags or perform logical control. Implement navigation to the previous and next articles, mainly relying on the system built-in.prevArchiveandnextArchive.
These tags are usually on the article or product detail page (such asarchive/detail.htmlorproduct/detail.htmlThe specific filename may vary depending on the custom template used, as they need to find adjacent content based on the document being viewed.
How to retrieve and display the previous document?
AnQiCMS provides a special tagprevArchiveGet the previous content of the current document. When we use this label on the document details page, it will automatically identify the current document and find the previous document in the same category.
The followingprevArchiveBasic usage of the tag:
{% prevArchive prev %}
<div class="prev-article-link">
{% if prev %} {# 判断是否存在上一篇文档 #}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="label">上一篇：</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="label">上一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
In the code above:
{% prevArchive prev %}The tag will try to get the previous document and assign its data to a namedprev.{% if prev %}Check if the previous document exists. If it does, we can thenprevto access its properties.{{ prev.Link }}It will output the link to the previous document.{{ prev.Title }}It will output the title of the previous document.- If
prevThe document does not exist (i.e., it is the first document in the category), it will display
If you want to display a thumbnail of the document next to the link, you can further enrich the code:
{% prevArchive prev %}
<div class="prev-article-nav">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %} {# 判断是否存在缩略图 #}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumbnail"/>
{% endif %}
<span class="label">上一篇：</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="label">上一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
Here is an addition{% if prev.Thumb %}Determine, so that the image is displayed only when the thumbnail exists, to avoid displaying placeholders or errors.
How to retrieve and display the next document?
Similar to obtaining the previous document, AnQiCMS providesnextArchivetags to obtain the next document of the current document. Its usage is almost the same, just the direction of retrieval is reversed.prevArchivealmost the same, just the direction of retrieval is reversed.
The followingnextArchiveBasic usage of the tag:
{% nextArchive next %}
<div class="next-article-link">
{% if next %} {# 判断是否存在下一篇文档 #}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="label">下一篇：</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="label">下一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
Similarly, if you need to display thumbnails:
{% nextArchive next %}
<div class="next-article-nav">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
{% if next.Thumb %} {# 判断是否存在缩略图 #}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumbnail"/>
{% endif %}
<span class="label">下一篇：</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="label">下一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
Integrate display of previous/next navigation
Generally, we will display the navigation for the previous and next articles side by side or stacked at the bottom of the article detail page. Combining the above code snippet can form a complete navigation area.
<div class="article-navigation-container clearfix">
{# 上一篇文档 #}
{% prevArchive prev %}
<div class="prev-article-box">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="nav-label">上一篇：</span>
<span class="nav-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="nav-label">上一篇：</span>
<span class="nav-title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
{# 下一篇文档 #}
{% nextArchive next %}
<div class="next-article-box">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="nav-label">下一篇：</span>
<span class="nav-title">{{ next.Title }}</span>
</a>
{% else %}
<span class="nav-label">下一篇：</span>
<span class="nav-title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
</div>
This has been usedclearfixA style class (assuming your CSS framework includes this feature) to handle float layout, placing the previous and next articles on the left and right sides respectively.You can also adjust the HTML structure and CSS style of your website according to your design.
Useful Tips
- Code placement location:These code snippets are usually placed in your detail page template file (such as
模型名称/detail.html), or if you have used template inheritance, you can place it in the detail page'scontentArea, or a basic template specifically used for the detail page layout. - Accessible fields:
prevandnextVariables not only provideLinkandTitlebut also allow access to