In content-based websites, providing visitors with convenient navigation experience is crucial, and the 'Previous' and 'Next' features are the standard configuration of article detail pages.They can not only guide users to continue browsing more content, effectively increasing 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 considers this requirement and provides us with very simple and intuitive template tags to help us easily implement this function.
Understand the template mechanism of AnQiCMS
In AnQiCMS, we control the display of web pages by writing template files. The templates use syntax similar to Django, through double curly braces{{ 变量名 }}Come output variable content, through{% 标签 %}Use function tags or logical control. Implement navigation to the previous and next articles, mainly relying on the system built-inprevArchiveandnextArchiveLabel.
These tags are usually found in articles or product detail pages (for examplearchive/detail.htmlorproduct/detail.htmlUsed in，the specific file name may vary according to the custom template），because they need to find adjacent content based on the document being viewed.
How to get and display the previous document?
AnQiCMS provides a special tagprevArchiveTo get the previous content of the current document. When we use this tag on the document detail page, it will automatically identify the current document and find the previous document in the same category.
The followingprevArchiveThe basic usage of tags:
{% 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 above code:
{% prevArchive prev %}Label will try to get the previous document and assign its data to a variable namedprev.{% if prev %}Check if there is a previous document. If there is, we can useprevThe variable can be used to access its properties.{{ prev.Link }}It will output the link of the previous document.{{ prev.Title }}It will output the title of the previous document.- If
prevDoes not exist (i.e., the current document is already the first document in the category), and "No more" will be displayed, providing a friendly prompt.
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 added{% if prev.Thumb %}Ensure that the image is displayed only when the thumbnail exists, to avoid placeholder images or errors.
How to retrieve and display the next document?
Similar to fetching the previous document, AnQiCMS providesnextArchivetags to fetch the next document of the current document. Its usage andprevArchiveis almost the same, just the direction of fetching is opposite.
The followingnextArchiveThe basic usage of tags:
{% 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
English, we usually display the previous and next navigation 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>
Here, we useclearfixUsing a class (assuming your CSS framework includes this feature) to handle floating layout, place the previous and next articles on the left and right sides respectively.You can also adjust the HTML structure and CSS style according to your website design.
Practical tips
- Code placement location:These code snippets are usually placed in your detail page template file (such as
模型名称/detail.html), or if you are using template inheritance, you can place them in the detail page'scontentArea, or a basic layout template specifically used for detail pages. - Accessible fields:
prevandnextVariables not only provideLinkandTitlebut also access