In website content operation, optimizing the reading experience of users has always been one of our core goals.When immersed in a wonderful article, one naturally wishes to be able to switch smoothly to the next article or related article without having to return to the list page to search again.This seamless navigation can not only effectively improve the user's stay time on the website and reduce the bounce rate, but also help search engines better understand the structure of the website content, thereby having a positive impact on SEO.
An enterprise CMS solution provided by Anqi CMS is very intuitive and easy to use, allowing you to easily add "Previous article" and "Next article" links on the article detail page.The entire process does not require complex configuration, just add a few lines of simple code to the template file.
The core of implementing “Previous Article” and “Next Article” links
The template engine of Anqi CMS supports tag syntax similar to Django, and it provides two special tags for retrieving adjacent article content:prevArchiveandnextArchive.The strength of these tags lies in their ability to intelligently identify and return the previous or next article in the same category based on the context of the current article, without the need for you to manually pass the article ID or category ID.
Let's take a look at their basic usage first, you can try adding the following code in the template file of the article detail page (usually{模型table}/detail.html)
<div class="article-pagination">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">上一篇：{{ prev.Title }}</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">下一篇：{{ next.Title }}</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this code block,{% prevArchive prev %}The current article's previous article will be retrieved and all its data will be assigned toprevSimilarly,{% nextArchive next %}The data of the next article will be assigned tonextthe variable. We use{% if prev %}and{% if next %}To judge whether there is a corresponding article, if it exists, it will display a link to the article ({{ prev.Link }}/{{ next.Link }}) And the title ({{ prev.Title }}/{{ next.Title }}The link to the previous post; if it does not exist, then display the prompt 'No previous post' or 'No next post'.
Rich link display, improving user experience
仅仅显示标题可能还不够，为了让导航链接更加直观和吸引人，我们可以利用 EnglishprevandnextVariables contain more article information, such as thumbnails. These variables are actually complete article objects, and you can access.Access its fields like accessing the current article details (archive) as well.
The following is a more comprehensive code example, which attempts to display thumbnails of the previous and next posts while showing the title and link.
<div class="article-navigation-section">
<div class="prev-nav">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb-left">
{% endif %}
<div class="nav-text">
<span>上一篇</span>
<h3>{{ prev.Title }}</h3>
</div>
</a>
{% else %}
<div class="no-nav-item"><span>没有上一篇了</span></div>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-nav">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<div class="nav-text">
<span>下一篇</span>
<h3>{{ next.Title }}</h3>
</div>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb-right">
{% endif %}
</a>
{% else %}
<div class="no-nav-item"><span>没有下一篇了</span></div>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this example, we added different CSS classes for the thumbnails of "previous" and "next" articlesnav-thumb-leftandnav-thumb-right），so that you can customize the layout and styling with your own CSS, for example, placing the thumbnail of 'Previous' on the left and the thumbnail of 'Next' on the right. Remember to define these styles in your theme's CSS file to make them effective..article-navigation-section,.prev-nav,.next-nav,.nav-thumb-left,.nav-thumb-right,.nav-text,.no-nav-itemStyles of similar items.
Integrate the code into the article detail template
You just need to copy and paste the above code snippet into your article detail page template file (for example, located in/template/{您的模板目录}/article/detail.htmlor/template/{您的模板目录}/{您的自定义模型}/detail.htmlThe location where you want to display the navigation links. Usually, these links are placed at the end of the article content or in a dedicated sidebar area.
PassprevArchiveandnextArchiveThese two concise and powerful tags make the website navigation more intelligent and user-friendly.This not only greatly enhances the reading experience of users, but also makes your website content more discoverable and consumable.
Common Questions and Answers (FAQ)
1. What is the logic for determining the 'Previous' and 'Next' articles? Can I customize it to show articles by the same author or tag?Anqi CMS'sprevArchiveandnextArchiveThe label is determined based on the publication time and category of the current article.They will look for the article immediately before and after the current article in the category it belongs to, sorted by time.Currently, these tags do not directly support customizing as "same authorarchiveListTags, throughtype="related"orlike="keywords|relation"Parameters such as auto, and may require some additional template logic processing.
2. Besides the title and link, what article information can I display in the 'Previous' and 'Next' links?
prevandnextThe variable actually contains the complete data object of the previous and next articles, and the fields accessed are the same as those on the current article detail page.{{ archive.字段名 }}Accessed. In addition toLink(article link) andTitle(Article Title)，You can also displayThumb(Thumbnail,)Description(article summary),CreatedTime(Publish Time, must usestampToDateformatted) etc. You can flexibly choose these fields according to the template design requirements to enrich the display of navigation links.
3. If there is no previous or next article, will the page report an error?As shown in the above code, we used{% if prev %}and{% if next %}Such condition judgment. If the current article is the first in the category,prevthe variable will be empty; if it is the last one,nextThe variable will be empty.By such judgment, you can elegantly display the prompt text of 'No previous article' or 'No next article' without causing the page to error, ensuring the stability of the website and the user experience.