The AnQi CMS provides intuitive and powerful template tags to simplify the implementation of this common website function.This allows website operators to easily integrate navigation functions for the previous and next articles in the article detail page without needing to deeply understand complex programming logic.{% prevArchive %}and{% nextArchive %}.The design intention of these tags is to facilitate the retrieval of adjacent articles in the time series of the current article.They can intelligently recognize the article being browsed at the moment and automatically search for the previous and next articles' data, including titles and links, greatly reducing the burden of template development and content maintenance, making the page content navigation extremely smooth.

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

For example, using "Next Article" you can{% nextArchive next %}...{% endnextArchive %}Label. Here,nextis a temporary variable name we specify for the data of the next article. Within this label, you can accessnextto obtain the required information, for example{{next.Title}}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", use{% prevArchive prev %}...{% endprevArchive %}tag for each language site,prevIt is the variable name of the previous article, its attribute access method isnextthe same as{{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 one (without a next one).To avoid displaying empty links or unfriendly prompts, we usually combine conditional judgments.{% if next %}(or}{% if prev %}Check for adjacent articles, and only display the title and link when they exist. Otherwise, you can display a prompt text such as 'No more', or not display the navigation item at all according to design requirements.

Below 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 the navigation of the previous article and one for the next article. Inside each area,prevArchiveornextArchivethe tag wrapping logic is then used,{% if ... %}JudgmentprevornextThe variable is empty.If there are adjacent articles, their titles and links will be displayed; if not, a prompt 'None' will be shown.This processing method ensures the integrity of the function while also considering the friendliness of the user interface.

In addition to the basic display, you can also beautify these navigation items through CSS styles to keep them consistent with the overall design style of the website, such as adding icons, adjusting font size or color, or designing them in the form of left and right arrows to enhance the visual navigation experience.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).The search engine considers user behavior indicators when evaluating website quality. Smooth on-site navigation and longer user stay times can all send positive signals to the search engine.

Common Questions and Answers (FAQ)

  • 1. Why doesn't the link to the previous/next article show up when I add code in the article detail page?prevArchive/nextArchiveTags as wellLink/Titleare all case-sensitive.

  • 2. How is the sorting rule for the previous and next articles? Can I customize it?The previous and next article tags of Anqi CMS are default based on the article's publishing time (usuallyCreatedTimeThe one that is sorted earlier, i.e., the one with an earlier time, is the previous post, and the one with a later time is the next post. Currently,prevArchiveandnextArchiveThe label itself does not provide parameters for direct custom sorting rules. If you have special sorting requirements, you may need to develop a second time or utilizearchiveListThe label combines more complex logic to achieve this, but it will be much more complex than using these two labels directly.

  • 3. I want to display custom prompt text 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 %}part is used to handle cases without adjacent articles. You can<span>上一篇：没有了</span>Replace it with any text content or HTML structure you wish to display, for example `← It is already