When managing and publishing content in the AnQi CMS, to enhance the user experience and content discoverability of the website, it is usually necessary to provide a feature to navigate to the "Previous Article" and "Next Article" on the article detail page.This not only encourages readers to continue browsing the site's content, but also provides a good internal link structure for search engine optimization (SEO).
This CMS provides very concise and intuitive template tags, allowing us to easily meet this requirement.
Core Function:prevArchiveandnextArchivetags
Auto CMS provides us with two special template tags for fetching adjacent article data:prevArchiveused to get the previous article,nextArchiveIt is used to get the next article.Their strength lies in the fact that there is no need to manually specify the article ID or category; the system will intelligently find the article adjacent in chronological order to the current article.
These tags are usually found on the article detail page (such as)article/detail.html模板）中使用，以确保它们能够准确识别当前上下文中的文章。detail.html模板）中使用，以确保它们能够准确识别当前上下文中的文章。
基本用法：仅显示标题和链接
In your article detail template, you can use the following code snippet to get and display the title and link of the previous article and the next article.An important **practice is to check if the article exists before using it to avoid empty links or errors when there are no adjacent articles.
<div class="article-navigation">
<div class="prev-article">
{% prevArchive prev %}
{% if prev %}
<span>上一篇：</span>
<a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-article">
{% nextArchive next %}
{% if next %}
<span>下一篇：</span>
<a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In the above code:
{% prevArchive prev %}Defined a namedprevThe variable, it will carry all the data of the previous article.{% nextArchive next %}Similarly, a variable namednextis defined to store the data of the next article.{% if prev %}and{% if next %}Is a conditional statement that ensures the link and title are displayed only when the previous article or the next article exists.If not found, it will display a prompt like 'Not available'.{{ prev.Link }}and{{ next.Link }}Separately obtain the URL links of the previous and next articles.{{ prev.Title }}and{{ next.Title }}Separately obtain the titles of the previous and next articles.
Through this method, you can clearly present article navigation at the bottom or sidebar of the article.
Advanced Usage: Combine thumbnails to enhance the visual experience.
To make the navigation of the previous and next articles more prominent and attractive, we can choose to add thumbnails. The article data of Anqi CMS usually containsThumb(Thumbnail) orLogo(Cover first image) field, you can choose to use it according to your design requirements.
Here is an example of how to integrate a thumbnail into a link:
<div class="article-navigation-visual">
<div class="nav-item prev-item">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" />
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span class="no-article">没有上一篇文章了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="nav-item next-item">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">
{% if next.Thumb %}
<img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" />
{% endif %}
<span>下一篇：{{ next.Title }}</span>
</a>
{% else %}
<span class="no-article">没有下一篇文章了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
In this advanced example, we added a{% if prev.Thumb %}The judgment, ensure that the image is displayed only when the article has a thumbnail.altThe setting of properties is also very important for SEO and accessibility. You can also adjust as needed,prevandnextAccess other fields in a variable, for exampleDescription(Abstract of the article),Views(Views) orCreatedTime(Publish time) and so on.
Where should the code be placed?
These template codes are usually placed in the template of your article detail page. Depending on your template design, it may be:
- Below the main content area of the article.
- The top of the comment section or related article recommendation area.
- The fixed position of the page sidebar.
In the Anqi CMS, the template file of the article detail page is usually named{模型table}/detail.html(For example}]}article/detail.htmlorproduct/detail.html). You just need to open the corresponding template file, paste the above code in the appropriate location, and then save it.
[en]温馨提示与**实践
- Style Customization:The code above only provides the basic HTML structure.To make the navigation of the previous and next articles look coordinated and beautiful on your website, you need to write the corresponding CSS styles to beautify them.
- Clear instructions:Ensure that the text descriptions of 'Previous' and 'Next' are clear, making it easy for users to understand.
- Uniformity:Maintain consistency in the design of the navigation area throughout the entire website, which helps enhance the overall user experience.
- SEO-friendly:This internal link structure naturally guides search engine crawlers to discover more pages, which helps improve the inclusion and ranking of website content.
Through these simple and practical template tags, you can easily build a high-efficiency and user-friendly article navigation feature in the Anqi CMS, further enhancing the value of your website.
Common Questions (FAQ)
Q1: If my article does not have a previous or next article, what will be displayed?A1: As shown in the example code in the article, we recommend that you use{% if prev %}or{% if next %}To determine whether the previous or next article exists.