In AnQi CMS, it is a common requirement to add navigation links for 'Previous Article' and 'Next Article' to content pages in order to enhance the user experience and the efficiency of internal links.These links can not only help visitors browse related content more smoothly, but also have a positive impact on the website's SEO performance.The autoCMS provides a set of intuitive template tags, allowing you to easily display these navigation features on the content detail page.
Core Function: UseprevArchiveandnextArchivetags
Secure CMS throughprevArchiveandnextArchiveThese specialized template tags are used to obtain information about the previous and next articles of the current article.The strength of these two tags lies in their ability to intelligently recognize the document being viewed at the moment and automatically search for the previous and next contents in the same category, without the need for you to manually pass the article ID or category ID.
Let's see how to implement this feature in your CMS template.
1. Basic 'Previous/Next' text links
First, in your article detail page template file (usually located intemplate/{您的模板名称}/archive/detail.htmlFind the appropriate location under the path similar to auto, usually at the bottom of the article content or in the sidebar area. You can use the following code to display a simple text link:
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
上一篇：<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
没有了
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
下一篇：<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
没有了
{% endif %}
{% endnextArchive %}
</div>
</div>
Code analysis:
{% prevArchive prev %}and{% nextArchive next %}This is a tag provided by the Anqi CMS, used to retrieve data for the previous and next articles. The data we obtain will be assigned toprevandnexta variable.{% if prev %}and{% if next %}In practical applications, not all articles have a previous or next article (for example, the first article in a certain category has no previous article, and the last article has no next article). Therefore, usingifstatement to determineprevornextThe variable exists to avoid displaying empty links and provide a friendly prompt, such as 'None'.{{ prev.Link }}and{{ next.Link }}: Output the link addresses of the previous and next articles.{{ prev.Title }}and{{ next.Title }}：Respectively output the title of the previous and next article.
2. Add a thumbnail to make navigation more attractive
If your website design allows it, and articles usually include thumbnails, you can also add thumbnails to the navigation links of the previous/next post, making it more visually appealing.
<div class="article-navigation-enhanced">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb" />
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span>没有上一篇了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span>下一篇：{{ next.Title }}</span>
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumb" />
{% endif %}
</a>
{% else %}
<span>没有下一篇了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
Code analysis:
{% if prev.Thumb %}and{% if next.Thumb %}：here again usesifstatement, judge if the article has a thumbnail (Thumbfield). If it exists, the thumbnail will be displayed.{{ prev.Thumb }}and{{ next.Thumb }}：output the thumbnail address of the article.
You can flexibly combine according to your template design and actual needsprevandnextOther fields provided by variables, such asDescription(Description),CreatedTime(Creation time) and others, to build more diverse navigation styles. If you need to format timestamps, you can use{{ stampToDate(item.CreatedTime, "2006-01-02") }}such filters.
placement and design considerations
These 'Previous/Next' navigation links are usually placed at the bottom of the article content area, or as a floating sidebar component.
- Bottom navigation:Located at the end of the article body, before the comment section or related article recommendation area, providing natural content continuation for users.
- Sidebar:If the page layout has a sidebar, it can also be considered to display the abbreviated title of the previous/next article in the sidebar, which is convenient for users to switch quickly.
No matter which placement method is chosen, it should ensure that its design style is consistent with the overall website and is easy for users to identify and click.
Common Questions and Answers (FAQ)
1. Why does the 'Previous' or 'Next' link show 'None'?
This indicates that no earlier or later articles were found in the category to which the current article belongs.For example, if you are browsing the latest article posted under a category, it will not have a 'Next Article'; similarly, the oldest article will not have a 'Previous Article'.{% if 变量 %}You can handle this situation with a judgment to avoid displaying empty links.
2. Will these tags be automatically limited within the same category?
Yes,prevArchiveandnextArchiveThe label will default to finding the previous and next articles based on the current category of the article.This means that you do not need any additional configuration to ensure that users are not redirected to sports articles while browsing technology articles, thus maintaining the relevance of the content.
3. Besides the title and link, what other information can I display?
prevandnextThe variable includes many detailed information about the article, such asId(Article ID),Keywords(Keywords)、Description(Description)、Logo(Cover First Image)、Thumb(Thumbnail,)Views(Views)、CreatedTime(Publish Time) etc. You can freely call these fields in the template, for example{{ prev.Views }}or{{ stampToDate(next.CreatedTime, "2006-01-02 15:04") }}Show more article information.