As a website manager who deeply understands the operation of APT CMS, I know the importance of the details of content presentation for user experience and the overall performance of the website.The front and back navigation function on the article detail page can not only effectively guide users to continue browsing and reduce the exit rate, but also an effective means to enhance the relevance between pages and optimize the internal link structure.This provides simple and efficient template tags for Anqi CMS, allowing us to easily implement this feature.
Improve content coherence: Implementing previous and next article navigation in AnQiCMS
In website content operation, the 'Previous' and 'Next' navigation functions on the article detail page are key elements to enhance user experience and guide users to in-depth browsing.It not only helps readers seamlessly jump from the current article to related content, but also effectively enhances the internal link structure of the website, which is very beneficial for search engine optimization (SEO).The AnQiCMS provides intuitive and powerful template tags, allowing website operators to easily implement this feature and flexibly control the displayed content.
Understanding the previous and next article navigation mechanism of AnQiCMS
AnQiCMS's template system borrows the syntax of Django template engine, providing special tags to get the previous and next articles of the current article:prevArchiveandnextArchive.These tags work automatically in the context of the article detail page and do not require complex parameter configuration to obtain data from adjacent articles.They return an object that includes the title, link, thumbnail, and other common information of the article, which can be directly called in the template.
Get information of the previous article
To display the title, link, and thumbnail of the previous article on the current article page, we can useprevArchiveLabel. This label will return an object representing an article that is ranked before the current article according to the system's default sorting rules (usually publication time or ID).
We first use{% prevArchive prev %}The statement is used to try to get the data of the previous article and assign it to a variable namedprevTo ensure the robustness of the page rendering, we also need to judge thisprevThe variable exists because not all articles have a previous one (for example, the first article in a series).
InprevUnder the condition that the variable exists, we can safely access its properties:
{{ prev.Title }}：Get the title of the previous article.{{ prev.Link }}：Get the link address of the previous article.{{ prev.Thumb }}：Get the thumbnail address of the previous article.
The following is an example of a template code for implementing the navigation of the previous article:
{% prevArchive prev %}
<div class="prev-article-nav">
{% if prev %}
<a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
<img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="article-thumb">
<span class="article-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-prev-article">没有上一篇文章了</span>
{% endif %}
</div>
{% endprevArchive %}
In this code, we first attempt to getprevthe article object. IfprevAn object exists (i.e., there is a previous article), then render one that includes its thumbnail, title, and link<a>Tags. If it does not exist, then display a prompt message.
Get information about the next article
Similarly, to get and display the navigation information of the next article, we usenextArchiveLabel. This label will return an object representing an article that is ranked after the current article according to the system's default sorting rules.
We go through{% nextArchive next %}statement to get the data of the next article and assign it tonextVariable. Similarly, it also needs to be judged.nextCheck if the variable exists.
InnextWhen the variable exists, we can access the following properties:
{{ next.Title }}: Get the title of the next article.{{ next.Link }}：Get the link address of the next article.{{ next.Thumb }}：Get the thumbnail address of the next article.
The following is an example of the template code for implementing navigation to the next article:
{% nextArchive next %}
<div class="next-article-nav">
{% if next %}
<a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
<img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" class="article-thumb">
<span class="article-title">{{ next.Title }}</span>
</a>
{% else %}
<span class="no-next-article">没有下一篇文章了</span>
{% endif %}
</div>
{% endnextArchive %}
This code's logic is similar to the previous article, ensuring navigation is provided when there is a next article, otherwise a prompt is displayed.
Complete example with **practice
In the actual website article detail page, we usually place the navigation of the previous and next articles side by side to provide a continuous reading experience.
An English translation of a typical article detail page footer navigation structure might be as follows:
<article class="article-detail-content">
<!-- 这里是当前文章的内容 -->
</article>
<nav class="article-pagination">
{% prevArchive prev %}
<div class="nav-item prev-article">
{% if prev %}
<a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
<img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="thumb">
<span class="label">上一篇</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="placeholder">没有上一篇文章了</span>
{% endif %}
</div>
{% endprevArchive %}
{% nextArchive next %}
<div class="nav-item next-article">
{% if next %}
<a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
<img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" class="thumb">
<span class="label">下一篇</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="placeholder">没有下一篇文章了</span>
{% endif %}
</div>
{% endnextArchive %}
</nav>
During the implementation process, it is recommended to place these code snippets in the template file of the article detail page (for example,{模型table}/detail.html）中。At the same time, use CSS to style these navigation elements, making them consistent with the overall visual style of the website, thereby providing users with a better reading experience.By reasonably utilizing these tags, we can significantly enhance the fluidity and user engagement of the website content.
Common Questions and Answers (FAQ)
1.prevArchiveandnextArchiveHow to determine the 'previous' and 'next' articles of an article?
Anqi CMS'sprevArchiveandnextArchiveTags are usually based on the publication time of an article (CreatedTime）or article ID to sort the nearby articles.They will automatically search within the context of the current article, for example, within the same category or across the entire site.Since these tags do not accept additional sorting parameters, they follow the default sorting logic of the system or that determined by the content model.
2. Can I get other information about the previous/next article, in addition to the title, link, and thumbnail?
Of course you can.prevArchiveandnextArchiveThe object returned by the tag witharchiveDetailThe label returns an object structure that is similar, so you can access almost all fields of the article. For example, you can access{{ prev.Description }}Get the summary of the previous article, by{{ next.Views }}Get the views of the next article. You can check the AnQiCMS template tag documentation.archiveDetailList of all available fields, which are also applicable toprevandnextobject.
3. If the article does not have a thumbnail,{{ prev.Thumb }}What will be displayed?
If the article does not have a thumbnail explicitly set,{{ prev.Thumb }}(or}{{ next.Thumb }}）usually returns an empty string. To avoid broken image icons on the page, you can use conditional judgment in the template to handle this situation, for example:
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="thumb">
{% else %}
<img src="/static/images/default-thumb.png" alt="无图" class="thumb"> {# 显示默认缩略图 #}
{% endif %}
or, you can also configure the default thumbnail in the 'Content Settings' of the AnQiCMS backend.So, when the article does not have a specific thumbnail, the system will automatically use the default image you uploaded.