When browsing articles on a website, navigation links such as 'Previous' and 'Next' often appear at the bottom.This seemingly simple detail actually has a significant impact on user experience and the coherence of website content.It can not only guide visitors to continuously explore more content, help to increase the average page visit time, but also optimize the internal link structure of the website.For those using AnQiCMS, implementing this feature is much simpler than one might imagine, as it comes with powerful template tags that make it easy to dynamically retrieve and display this navigation information.

Core feature introduction: Dynamically obtain the secret of adjacent articles

AnQi CMS provides high flexibility in template development, especially for content like articles. It includes two very practical tags:prevArchiveandnextArchiveThese tags can intelligently recognize the current article and automatically find the previous and next articles in the same category or chronological order.This means you do not need to manually maintain the complex relationships between articles, the system will do it automatically for you.

How to implement previous/next article navigation on the article detail page

To integrate the 'Previous' and 'Next' navigation functions into your Anqi CMS website, you need to edit the template file of the article detail page. Usually, this template file will vary depending on your content model and naming conventions, for example, it may be locatedtemplate/您的模板名称/article/detail.htmlortemplate/您的模板名称/产品模型名称/detail.html.

Find and open the article detail template file currently in use on your website, and then you can add the following code snippet below the article content, in the sidebar, or in the location that you think is most suitable for user reading habits:

<div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
        {% if prev %}
        <span class="nav-label">上一篇：</span><a href="{{ prev.Link }}" title="{{ prev.Title }}">{{ prev.Title }}</a>
        {% else %}
        <span class="nav-label">上一篇：</span><span>没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {% nextArchive next %}
        {% if next %}
        <span class="nav-label">下一篇：</span><a href="{{ next.Link }}" title="{{ next.Title }}">{{ next.Title }}</a>
        {% else %}
        <span class="nav-label">下一篇：</span><span>没有了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

Code Parsing and Explanation:

  • {% prevArchive prev %}and{% endprevArchive %}:This is a tag block specifically used to retrieve the previous article information. It will try to find the previous article in the context of the current article and assign all its data (including title, link, ID, etc.) to the one you defineprevVariable.
  • {% nextArchive next %}and{% endnextArchive %}:withprevArchiveSimilar, this tag block is used to get the information of the next article and assign all its data tonextVariable.
  • {% if prev %}and{% if next %}:These conditions are crucial. Not all articles have a previous or next article (for example, the first article in a category does not have a previous one, and the last article does not have a next one).Therefore, before displaying the content, we need to checkprevornextDoes the variable successfully retrieve the data. If the variable exists, it will display the corresponding title and link;If not present, it can elegantly display 'None' or completely hide the navigation item.
  • {{ prev.Link }}and{{ prev.Title }}: prevandnextVariables are essentially article objects, they contain many properties of the article. Here, we usedLink(the URL link of the article) andTitle(Article title) to build navigation. You can also access other fields mentioned in the document, such asId(article ID),Keywords/Description/Thumb(Thumbnail) and choose to display according to your design needs.

Description of the working principle.

When your website visitor clicks to enter an article detail page, the Anqie CMS backend system will intelligently find the adjacent previous and next article records in the database by combining the current article ID, its category, publication time, or custom sorting in the backend.prevArchiveandnextArchiveThe tag takes advantage of this efficient mechanism to directly pass the structured data retrieved (including article titles, links, etc.) to the front-end template.This design eliminates the trouble of manually managing the complex associations between articles, making the navigation function automatic.

Additional hints and **practice

  1. Confirm template file: Please make sure you are editing the correct article detail template file. If you have enabled a custom content model, then the path of the detail page template may followtemplate/您的模板名称/{模型table}/detail.htmlthe naming rules.
  2. Content sorting logic:The logic for determining the "Previous" and "Next" articles is usually based on the chronological order of the article's publication, or on the custom sorting set in the "Document Management" section of the Anqi CMS backend.If you find that the navigation order does not meet your expectations, it is recommended to check the publication date of the article and the sorting settings on the back end.
  3. Clear the cache:After any modifications are made to the template file, in order to ensure that your changes take effect immediately and are displayed on the website front-end, please log in to the Anqi CMS backend and use the "Clear Cache" feature to clear the website cache.

By following these concise steps, you can easily implement a feature-rich navigation for the previous and next article pages in the Anqi CMS article detail page, thereby significantly improving the website's user experience and content navigation efficiency.

Frequently Asked Questions (FAQ):

Q1: Why did I follow the steps to add the code, but the 'Previous' or 'Next' still shows 'None', even though I am sure there are adjacent articles?

A1: There may be several reasons for this situation. First, check if the article you are currently viewing is the first or last in a category, which naturally leads to a missing navigation direction.Secondly, if the publication status of adjacent articles is not "published" or the publication time is abnormal (for example, in the future), the system may not be able to recognize it correctly.Please check the publication date and status of the relevant articles to ensure they are all normal.Finally, after modifying the template file, please make sure to log in to the AnQi CMS backend, click the "Update Cache" feature, and clear all website caches to ensure that the code update takes effect.

Q2:prevArchiveandnextArchiveTags are determined by which conditions to judge and retrieve adjacent articles?

A2: These tags usually make intelligent judgments based on the following conditions of the current article:

1.  **发布时间：** 默认情况下，系统会按照文章的发布时间戳进行排序，找到在时间轴上紧邻当前文章的前一篇和后一篇。
2.  **内容模型和分类：** 它们倾向于在与当前文章相同的内容模型和分类下查找相邻文章，以保持内容的关联性。
这意味着，如果您需要调整上一篇/下一篇的顺序，调整文章的发布时间或在后台进行自定义排序是有效的方法。

Q3: Can I display other article information in the 'Previous'/'Next' navigation, such as thumbnails?

A3: Of course.prevandnextThe variable actually contains the complete article object of the previous/next article, which means you can access many of its properties. In additionTitleandLink, you can also getId(article ID),Keywords/Description(Article Summary),Thumb(Thumbnail) and other fields. For example, to display the thumbnail next to the previous article, you can modify the code like this:

”`twig {% prevArchive prev %} {% if prev %}

<span class="nav-