In website content operation, optimizing the user's reading experience has always been one of our core goals.When immersed in an excellent article, it is natural to want to smoothly switch to a related or next article without having to return to the list page to search for it.This seamless navigation not only effectively improves the user's stay time on the website and reduces the bounce rate, but also helps search engines better understand the structure of the website content, thereby having a positive impact on SEO.
AnQi CMS provides a very intuitive and easy-to-use solution that allows you to easily add "Previous" 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 and it can be achieved.
The core of implementing 'Previous' and 'Next' links
The Anqi CMS template engine supports tag syntax similar to Django, it provides two tags specifically for retrieving adjacent article content:prevArchiveandnextArchive. These tags are powerful because they can intelligently identify and return the previous or next article data under the same category based on the context of the current article, without the need to manually pass the article ID or category ID.
Let's first take a look at their basic usage, 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,{% prevArchive prev %}Attempts to get the previous article of the current article and assign all its data toprevthe variable. Similarly,{% nextArchive next %}will assign the data of the next article tonextthe variable. We use{% if prev %}and{% if next %}To determine if an article exists, if it exists, display a link containing the article ({{ prev.Link }}/{{ next.Link }}) And Title ({{ prev.Title }}/{{ next.Title }}The link if it exists; if not, it displays the prompt 'No previous article' or 'No next article'.
Display rich links to enhance user experience.
It may not be enough to just display the title, to make the navigation links more intuitive and attractive, we can useprevandnextVariables contain more article information, such as thumbnails. These variables are actually complete article objects, you can use them to.An operator accesses its various fields, like accessing the details of the current article (archive) in the same way.
The following is a more comprehensive code example, which tries to display the thumbnails of the previous and next articles 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 to the thumbnails of the previous and next posts (nav-thumb-leftandnav-thumb-right), so that you can apply different layouts and styles with custom CSS, such as placing the thumbnail of 'Previous Post' on the left and the thumbnail of 'Next Post' on the right. Remember to define these styles in your theme CSS file to make them effective.article-navigation-section,.prev-nav,.next-nav,.nav-thumb-left,.nav-thumb-right,.nav-text,.no-nav-itemStyle of the same type.
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.html) Where you want to display the navigation link. Usually, these links are placed at the end of the article content or in a dedicated sidebar area.
ByprevArchiveandnextArchiveThese two concise and powerful tags make the website navigation more intelligent and user-friendly with Anqie CMS.This greatly enhances the user's reading experience, and also allows your website content to be discovered and consumed better.
Frequently Asked Questions (FAQ)
What is the logic for determining the 'Previous' and 'Next' articles? Can I customize it to show articles by the same author or tag?Of Security CMSprevArchiveandnextArchiveThe label is determined based on the publication time and category of the current article.They will search for the adjacent articles before and after the current article in the category it is in, arranged in chronological order.Currently, these tags do not directly support customization for complex judgment logic such as 'same author', 'same tag', or 'same series'.If you need to implement such advanced associations, you may need to combinearchiveListtags, throughtype="related"orlike="keywords|relation"Parameters, and may require additional template logic processing.
2. In addition to the title and link, what article information can I display in the 'Previous' and 'Next' links?
prevandnextThe variable actually contains the complete data objects of the previous and next articles, and the fields accessed are the same as those on the current article detail page.{{ archive.字段名 }}Besides,Link(article link) andTitle(Article Title), you can also displayThumb(Thumbnail),Description(Article Summary),CreatedTime(Publish Time, you need to use}stampToDateFormat) etc. You can flexibly choose these fields to enrich the display of navigation links.
3. Will the page show an error if there is no previous or next article?No. As shown in the above code, we used{% if prev %}and{% if next %}Such conditional judgment. If the current article is the first in the category,prevthe variable will be empty; if it is the last article,nextThe variable will be empty. By making such a judgment, you can elegantly display the prompt text such as 'No previous article' or 'No next article' without causing a page error, ensuring the stability and user experience of the website.