Enhance User Experience and Content Discovery: Implement Previous/Next Article Navigation on AnQiCMS Article Detail Page
Today, with the increasing richness of digital content, both corporate websites, self-media blogs, and product display platforms are facing the challenge of how to effectively organize content and guide users to delve deeper into browsing.The AnQiCMS (AnQiCMS) is an efficient and flexible content management system that provides intuitive template tags, allowing us to easily implement the navigation of the previous and next articles on the article detail page.This not only allows visitors to naturally discover more related information after reading the current content, but also builds a strong internal link network, improving the efficiency and ranking performance of search engines in capturing website content.
The template system of Anqi CMS borrows the syntax of Django template engine.htmlas the suffix for template files and stores them centrally./templateThe labels use double curly braces{{变量}}Define variables, while control flow labels such as conditional judgments and loops use single curly braces and percent signs{% 标签 %}Understand this foundation is the key to implementing custom content display.
Use built-in tags to get adjacent article information
In AnQiCMS, obtaining the previous and next articles of the current article mainly depends on two core template tags:prevArchiveandnextArchiveThese tags are designed to be simple and efficient, requiring no complex parameter configuration to automatically identify the current article and find its adjacent articles in the category or publication sequence.
prevArchiveLabel is used to get the data of the previous article of the current article.When you use this tag on the article detail page, it will automatically identify the current page's article and find the article sorted before it.nextArchiveLabels are used to retrieve the next article's data for the current article. It will look for the article that is sorted after the current article.
These tags provide a very rich set of data fields, including but not limited to articles'Id(ID),Title(Title),Link(Link),Keywords(Keywords)、Description(description),CategoryId(Category ID),Views（Views）、Logo(cover first image),Thumb(cover thumbnails),CommentCount(number of comments) as well as the creation and update time of the articlesCreatedTimeandUpdatedTimeThese fields are sufficient to support the construction of a fully functional previous/next article navigation.
The specific steps to implement the previous/next article navigation in the article detail page.
To display the links and titles of the previous and next articles on the article detail page, we first need to locate the corresponding template file. Usually, the template file for the article detail page would be{模型table}/detail.htmlFor example, if your article model is "article", the template may be located atarticle/detail.html.
After finding and opening this template file, you can add the following code below the article content, in the sidebar, or any location where you wish to display these navigations.
Display the link and title of the previous article
<div class="article-navigation prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span>上一篇：</span>
<span>{{ prev.Title }}</span>
</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
In this code, we first use{% prevArchive prev %}Assign the data of the previous article to a variable namedprevThen, through a{% if prev %}Ensure that the link and title are rendered only when there is a previous article.{{ prev.Link }}The URL of the article to be output will be,{{ prev.Title }}Then display the article title. If you do not need additional text prompts, you can remove the text 'Previous article:' according to your actual design.
Display the link and title of the next article
Immediately, we can add the navigation for the next article in a similar manner:.
<div class="article-navigation next-article">
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span>下一篇：</span>
<span>{{ next.Title }}</span>
</a>
{% else %}
<span>下一篇：没有了</span>
{% endif %}
{% endnextArchive %}
</div>
Similarly,{% nextArchive next %}Assign the data of the next article to.nextVariables, and use.{% if next %}Perform condition judgment.{{ next.Link }}and{{ next.Title }}To output the link and title of the next article separately.
Further optimize and consider
To provide a richer user experience, you can also choose to add a thumbnail of the article to the link.prevArchiveandnextArchiveAll tags are providedThumbThumbnail andLogo(Cover first image) field. For example, you can modify the code like this to display thumbnails:
<div class="article-navigation prev-article">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}">
{% endif %}
<span>上一篇：{{ prev.Title }}</span>
</a>
{% else %}
<span>上一篇：没有了</span>
{% endif %}
{% endprevArchive %}
</div>
Frequently Asked Questions
Q1: How does AnQiCMS determine the order of 'Previous Article' and 'Next Article'?A1: AnQiCMS usually determines the order of articles based on the publication time (CreatedTime）or its background setting sorting value（orderfield, such asid descorsort descTo determine the previous and next articles.By default, the system will sort by the article ID or publication time as the sorting basis, and find adjacent articles within the same category.This means that if you want to control their order precisely, you can adjust the publish time when releasing the article, or make use of the article sorting feature in the backend.
Q2: If the current article is the first or last article in a category, what will the previous/next article navigation display?A2: As shown in the article, when there is no previous article,{% if prev %}The condition will be false, you can customize to display “No items” or not display the navigation at all. Similarly, when there is no next article,{% if next %}The conditions will also be false, and you can also customize the display accordingly. This condition judgment mechanism ensures the robustness of page navigation and avoids displaying empty links or error information.
Q3: Can I customize the style and layout of the link to the previous/next article?A3: Of course. The AnQiCMS template system allows you to fully control the output HTML structure. You can wrap the links withdivAdd a custom CSS class to any HTML element (for example,article-navigation,prev-article,next-article），Then define the styles for these classes in your CSS file, including font, color, background, border, icons, etc., to maintain consistency with your website design style.You can also adjust the arrangement of elements inside the link according to your needs, for example, placing the thumbnail above or beside the title.