How to display the title and link of the previous and next articles on the article detail page?

In website content operation, improving user experience and content browsing depth is indispensable.After a visitor reads an article, if they can easily browse to the titles and links of the 'previous article' and 'next article', it will undoubtedly greatly encourage them to continue exploring the website's content, thereby extending their stay time, reducing the bounce rate, and even having a positive impact on the overall SEO performance of the website.Anqi CMS as an efficient and customizable content management system, fully considers this user demand.

The Anqi CMS simplifies the implementation of this common website feature by providing intuitive and powerful template tags.This allows website operators to easily integrate navigation functions for the previous and next articles in the article detail page without deeply understanding complex programming logic.The core lies in two dedicated tags:{% prevArchive %}and{% nextArchive %}These tags were designed to facilitate the retrieval of adjacent articles to the current article in the time sequence.They can intelligently identify the article being browsed at the moment, automatically find the data of the previous and next articles, including the title and link, greatly reduce the burden of template development and content maintenance, and make the page content navigation extremely smooth.

You need to find the corresponding template file for the article details page to add these navigation items. In Anqi CMS, this is usually located in the current template directory.{模型table}/detail.htmlfile, for example, if your website uses an article model, then the file path might bearticle/detail.html. After opening this file, you can insert the corresponding template code at the location where you want to display the previous and next articles.

For example, you can use{% nextArchive next %}...{% endnextArchive %}Label. Here,nextis a temporary variable name we specify for the data of the next article. Inside this label,nextyou can access the properties of the object to obtain the required information, such as{{next.Title}}You can get the title of the next article,{{next.Link}}then you can get the link of the next article. Similarly, to get the "previous article", you use{% prevArchive prev %}...{% endprevArchive %}whereprevIs the variable name of the previous article, its attribute access method is the same asnextNamely,{{prev.Title}}and{{prev.Link}}.

In practical applications, it is necessary to consider whether the article is the first in the category (without a previous one) or the last (without a next one).We usually combine conditional judgment to avoid displaying empty links or unfriendly prompts.{% if next %}(or{% if prev %}To check if adjacent articles exist, and only display the title and link if they do; otherwise, a prompt text such as 'None' can be displayed, or the navigation item can be displayed according to design requirements.

Here is a simplified code example of integrating navigation for the previous and next articles in an article detail page template:

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

This code first creates two areas, one for navigating to the previous article and the next article. Inside each area, throughprevArchiveornextArchivetag wrapping logic, then through{% if ... %}the judgment.prevornextThe variable is empty. If there is an adjacent article, its title and link will be displayed;If not available, a prompt displaying "none" will be shown. This approach ensures both the integrity of the function and the friendliness of the user interface.

In addition to the basic display, you can also beautify these navigation bars through CSS styles to keep them consistent with the overall design style of the website, for example, by adding icons, adjusting font size or color, or designing them as left and right arrow shapes to enhance the visual navigation effect.The implementation of this feature not only improves the average browsing depth of visitors on the website and reduces the bounce rate, but also provides strong support for search engine optimization (SEO).When evaluating website quality, search engines consider user behavior metrics, and smooth in-site navigation and longer user stay times can send positive signals to search engines.

The AnQi CMS provides such concise and powerful template tags, allowing content operators to focus on content creation and the overall design of the website without being troubled by complex code logic.It truly hides the technical details behind the scenes, allowing users to easily implement features and optimize website performance.

Frequently Asked Questions (FAQ)

• 1. Why did I add code to the article detail page, but the links to the previous/next article did not display?This may have several reasons. First, please check if the current article is the first one in the category (without a previous one) or the last one (without a next one), in which case, the corresponding navigation links will naturally not be displayed.Secondly, ensure that you have saved and deployed the modified template file and cleared the system cache.Finally, check for spelling errors in the template code, especiallyprevArchive/nextArchivetags as wellLink/TitleProperty names, they are case sensitive.

• 2. What are the sorting rules for the previous and next articles? Can I customize it?The previous and next article tags of AnQi CMS are usually based on the publication time of the article, usuallyCreatedTimeSorted by time, the earlier one is the previous article, and the later one is the next article. Currently,prevArchiveandnextArchiveThe label itself does not provide a parameter for direct customization of sorting rules. If you have special sorting requirements, you may need to go through secondary development or utilizearchiveListTo implement combined with more complex logic, but this will be more complex than using these two tags directly.

• 3. I want to display custom prompts when there is no previous/next article, instead of 'No more', or simply not display this part of the navigation. How can I do that?You can fully customize. In the above code example,{% else %}the part is used to handle cases without adjacent articles. You can use<span>上一篇：没有了</span>Replace with any text content or HTML structure, for example `← It is already