In Anqi CMS, implementing the "Previous" and "Next" navigation function on the article detail page can not only significantly improve the user's browsing experience, but also effectively enhance the internal link structure of the website, and has a positive role in search engine optimization (SEO).Anqi CMS provides simple and powerful template tags, making this feature easy to use.
Understanding the 'previous article' and 'next article' navigation
After a user reads an article, guiding them to explore other articles on the website is the key to enhancing user stickiness and website depth.The AnQi CMS template system is built-in with special tags that can intelligently identify the position of the current article in the category and automatically obtain the content of the previous and next articles, including titles, links, even thumbnails, and so on.
These features are mainly on the article detail page (usuallydetail.htmlOr you can use a custom article detail template that needs to determine the "previous article" and "next article" based on the article being viewed.
Get and display the information of the previous article
To get the content of the previous article of the current article, you can useprevArchiveThe tag does not require any parameters, it will automatically find the previous article in the same category based on the current article ID or publication time.
{% prevArchive prev %}
<div class="article-nav-item prev-article">
{% if prev %}
<a href="{{prev.Link}}" title="{{prev.Title}}">
{% if prev.Thumb %}
<img src="{{prev.Thumb}}" alt="{{prev.Title}}" class="article-thumb">
{% endif %}
<span class="nav-label">« 上一篇：</span>
<span class="article-title">{{prev.Title}}</span>
</a>
{% else %}
<span class="nav-label">« 没有了</span>
{% endif %}
</div>
{% endprevArchive %}
In this code block:
{% prevArchive prev %}...{% endprevArchive %}Defined a namedprevThe variable, it contains all the information of the previous article.{% if prev %}It is used to determine if there is a previous article. If the current article is the first in the category, thenprevThe variable will be empty, at this point we can display a prompt like 'Nothing here'.{{prev.Link}}Get the link of the previous article.{{prev.Title}}Get the title of the previous article.{{prev.Thumb}}Get the thumbnail link of the previous article. You can choose whether to display the thumbnail and add<img>tagsaltattributes to optimize accessibility and SEO.
Display the information of the next article
Similar to the previous one, to get the content of the next article of the current article, you can usenextArchivetag. Its usage andprevArchiveLabels are almost identical, but the variable names are usually namednext.
{% nextArchive next %}
<div class="article-nav-item next-article">
{% if next %}
<a href="{{next.Link}}" title="{{next.Title}}">
<span class="nav-label">下一篇：»</span>
<span class="article-title">{{next.Title}}</span>
{% if next.Thumb %}
<img src="{{next.Thumb}}" alt="{{next.Title}}" class="article-thumb">
{% endif %}
</a>
{% else %}
<span class="nav-label">没有了 »</span>
{% endif %}
</div>
{% endnextArchive %}
The structure of this code is similar to that of the previous one, where:
{% nextArchive next %}...{% endnextArchive %}Defined a namednextThe variable contains all information of the next article.{% if next %}Determine if there is a next article.{{next.Link}}/{{next.Title}}and{{next.Thumb}}Respectively obtain the link, title, and thumbnail of the next article.
Integrate the 'Previous' and 'Next' navigation
usually, in order to make the user experience more smooth, we will place the 'previous article' and 'next article' navigation at the bottom of the article content, displayed side by side, or placed on the left and right sides of the article content separately.
The following is a complete example combining both, you can insert this code into your Anqi CMS article detail template (such asdetail.html) in:
<div class="article-navigation-container">
{% prevArchive prev %}
<div class="article-nav-item prev-article">
{% if prev %}
<a href="{{prev.Link}}" title="{{prev.Title}}">
{% if prev.Thumb %}<img src="{{prev.Thumb}}" alt="{{prev.Title}}" class="article-thumb">{% endif %}
<span class="nav-direction">« 上一篇</span>
<span class="article-title">{{prev.Title}}</span>
</a>
{% else %}
<span class="nav-direction no-link">« 没有了</span>
{% endif %}
</div>
{% endprevArchive %}
<div class="nav-separator"></div> {# 可选的分隔符，用于美化布局 #}
{% nextArchive next %}
<div class="article-nav-item next-article">
{% if next %}
<a href="{{next.Link}}" title="{{next.Title}}">
<span class="nav-direction">下一篇 »</span>
<span class="article-title">{{next.Title}}</span>
{% if next.Thumb %}<img src="{{next.Thumb}}" alt="{{next.Title}}" class="article-thumb">{% endif %}
</a>
{% else %}
<span class="nav-direction no-link">没有了 »</span>
{% endif %}
</div>
{% endnextArchive %}
</div>
{# 您还需要为 .article-navigation-container, .article-nav-item, .article-thumb, .nav-direction, .article-title 等元素添加适当的CSS样式来控制布局和美观 #}
Through the above