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

In Anqi CMS, adding the titles and links of the previous and next articles to the article detail page can not only optimize the user's browsing experience on your website, guide them to discover more relevant content, but also improve the internal link structure of the website to a certain extent.AnQi CMS, with its concise and efficient template engine, makes this feature implementation very intuitive.

Core feature revelation: prevArchive and nextArchive tags

The Anqi CMS template system is built-in with two tags specifically for handling article navigation:prevArchiveandnextArchiveTheir function is self-evident—they are used to obtain the data of the previous and next articles of the current article.These tags are very smart, no complex parameter configuration is required, the system will automatically judge and retrieve the corresponding previous and next article information based on the current article ID.

Operation steps: Integrate the previous/next article into the detail page

Add this feature to your website, you need to modify the template file of the article detail page.

1. Find your article detail page templateIn most cases, the template file of the article detail page is located at/templateFor example, in a model folder under the directorydefault/article/detail.htmlOr you can specify a custom template path.

2. Insert the core code snippetIndetail.htmlIn the file, find the position where you want to display the previous/next article. Usually, they are placed at the bottom of the article content.

   First, let's add the link to the previous article. You can useprevArchivetags to get the data of the previous article, andifthe statement to determine if there is a previous article.

   {% prevArchive prev %}
       {% if prev %}
           <a href="{{ prev.Link }}" title="{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
       {% else %}
           <span>上一篇：没有了</span>
       {% endif %}
   {% endprevArchive %}
   

   Continue in a similar manner to add the link to the next article. UsenextArchivetags to get the data of the next article:

   {% nextArchive next %}
       {% if next %}
           <a href="{{ next.Link }}" title="{{ next.Title }}">下一篇：{{ next.Title }}</a>
       {% else %}
           <span>下一篇：没有了</span>
       {% endif %}
   {% endnextArchive %}
   

Complete code example

Integrate the two code snippets above into yourdetail.htmlIn the template, the effect may be as follows:

<article>
    <!-- 这里是文章详情页的其他内容，如标题、发布时间、文章内容等 -->
    <h1>{{ archive.Title }}</h1>
    <div>
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>

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

This code will first determine if there is a corresponding previous or next article.If it exists, it will display the article title and link to the article;If none, it will display a prompt indicating "none". You can adjust it according to your design needsdivandaStyle labels, even add thumbnails and other additional information.

Understanding how labels work.

prevArchiveandnextArchiveThe label can automatically identify the current article and find adjacent articles according to the order of the article ID (usually within the same category).This means they can also maintain correctness after your website content is updated, greatly reducing the cost of manual maintenance.They are a typical example of how Anqi CMS provides convenience in content operation efficiency.

Frequently Asked Questions (FAQ)

1. What if my article does not have a previous or next article?In the above example code, we used{% if prev %}and{% if next %}Such conditional judgment. If the current article does not have a previous (or next) one, thenprev(ornextThe variable will be empty, and it will display at this timeelseContent within the block, for example, "Previous: None." This ensures that the page displays elegantly when there are no adjacent articles, without any errors.

2. Can I customize the display style of the previous/next article? For example, can I add a thumbnail?Of course you can.prevandnextVariables not only containTitleandLinkbut also provide other fields, such asThumb(article thumbnail),Description(Article summary) and so on. You can add{% if prev %}or{% if next %}in the block, add<img>tags to display thumbnails or other additional information such as:

{% if prev %}
    <a href="{{ prev.Link }}" title="{{ prev.Title }}">
        <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />
        <span>上一篇：{{ prev.Title }}</span>
    </a>
{% endif %}

3. What rules are used to determine the previous/next article based on these tags? prevArchiveandnextArchiveLabels are usually determined by the publication order of the current article in the category it belongs to (usually in ascending or descending order by ID or publication time) to determine the previous and next articles.If the article does not belong to any category, or is searched globally, it will be searched according to the order of the global article ID.They are intended to provide the most direct content adjacent to the current article in sequence.