How to dynamically fetch and display the previous and next articles of the current article on the article detail page?

How to smoothly transition users to related or the next article after they finish reading an article on the website is the key to improving user experience and website stickiness.尤其是对于拥有大量内容的站点，如博客、资讯站或产品展示网站，一个直观的“Previous/Next”导航功能显得尤为重要。It not only guides users to deeply browse and reduce the bounce rate, but also provides more internal links for search engines to optimize the website's SEO performance.

AnQiCMS (AnQiCMS) is a powerful content management system that fully considers this need.It provides a concise and efficient way for you to dynamically display the previous and next articles on the article detail page without writing complex backend code, simply through template tags.

How to implement the dynamic display of the previous and next articles in Auto CMS?

The Auto CMS allows you to directly call specific data in the template file of the article detail page through its built-in template tags. The system has specially designed for displaying theprevArchiveandnextArchiveThese tags. These tags will automatically identify and return information about the previous and next articles in chronological order within the context of the current article.

Core Tag Parsing

UnderstandingprevArchiveandnextArchiveThe usage of tags is the key to achieving this function. They all follow a similar calling pattern and provide a series of fields related to articles for you to display.

1.prevArchivetags

This tag is used to get the information of the 'previous article' of the current article.When there is a previous article, it will return the detailed data of that article; if the current article is the first one, it will not return any content.

  • Basic Usage:

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

    Here,prevThis is the variable name defined for the data of the previous article, you can name it freely according to your preference.LinkandTitleThis is the link and title field of the previous article, which can be accessed directly through.operator access.

  • Available article fields:prevArchiveIn the returned object of tags, you can access such asId(Article ID),Title(Article Title),Link(Article Link),Description(article description),Thumb(thumbnail) and other commonly used fields.

  • Display example with thumbnail: 如果您的模板设计需要显示缩略图，可以这样编写：

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

2.nextArchivetags

WithprevArchiveis similar,nextArchiveThe label is used to obtain the information of the "next" article of the current article.If there is a next article, it will return the detailed data of that article; if the current article is the latest one, no content will be returned.

  • Basic Usage:

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

    Here,next是我们为下一篇文章数据定义的变量名。

  • Available article fields:nextArchive标签返回的对象中，可用的字段与prevArchiveTags match, for exampleId,Title,Link,Description,Thumbetc.

  • Display example with thumbnail:

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

Actual operation: Add navigation to the article detail page

The navigation to the previous and next articles is usually placed at the bottom of the article content or in a prominent position in the sidebar. In Anqi CMS, you need to edit the corresponding template file for the article detail page (usually{模型table}/detail.html，Specifically, please refer to the document “Some Basic Conventions for Template Creation”.)

The following is a complete example code block that shows how to add 'Previous' and 'Next' navigation at the bottom of the article detail page.

<div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
                    <span class="nav-label">上一篇</span>
                    <span class="nav-title">{{ prev.Title }}</span>
                    {# 如果需要显示缩略图，可以取消注释以下代码 #}
                    {# {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %} #}
                </a>
            {% else %}
                <span class="no-article">没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-article">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
                    {# 如果需要显示缩略图，可以取消注释以下代码 #}
                    {# {% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" />{% endif %} #}
                    <span class="nav-title">{{ next.Title }}</span>
                    <span class="nav-label">下一篇</span>
                </a>
            {% else %}
                <span class="no-article">没有下一篇了</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

Insert this code into your article detail template file (for examplearticle/detail.html), usually located<article>before the end tag of the label. After that, you can style it according to the overall style of the website using CSS..article-navigation,.prev-article,.next-articleAdd styles to similar items to make the navigation look more beautiful and meet design requirements.

Tips to improve user experience and SEO

  • Clear navigation text: Use descriptions like 'Previous: [Article Title]' and 'Next: [Article Title]' to clearly indicate the content users will be accessing.Avoid using overly simple terms like "Previous" or
  • Visual guidance: You can add arrow icons, article thumbnails, and other visual elements to navigation to enhance the click attractiveness.
  • Handle the situation of 'none': When there is no previous or next article, elegantly displaying 'No more' or hiding the navigation item can avoid users clicking on empty links or causing confusion.
  • Internal link optimization: The previous/next navigation naturally creates high-quality internal links, helping search engine spiders discover more pages, and pass page authority.Ensure navigation links are clickable and use descriptive anchor text.
  • Increase dwell time: Guide the user to browse more related content, which can effectively extend the user's stay on the website. This is a positive signal for search engines to judge the quality of website content.

Through the CMS provided by AnQiprevArchiveandnextArchiveTags, you can easily add dynamic previous and next navigation to the article detail page of the website, thus optimizing the user experience and adding bricks and tiles to the website's SEO performance.

Common Questions (FAQ)

Q1: If my article does not have a previous or next one, what will the page display?

A1:In the above template code, we used{% if prev %}and{% if next %}such conditional judgments. If the current article has no previous one,prevArchivetags do not return data,{% if prev %}The condition will not be met, the page will display what you have{% else %}Text defined within the block, for example, “No previous post”. Similarly, if there is no next post, it will also display “No next post”. If you do not want to display any prompts, you can simply omit it.{% else %}the block.

Q2: The order of the previous/next article is determined by what?

A2: prevArchiveandnextArchiveTags are usually sorted according to the publication time of the articleCreatedTimeIn the current category of the article, the previous and next articles are determined in chronological order (usually in reverse, that is, the most recently published articles come first).This means, 'previous article' refers to the next article (or the one that is sorted later) that was published before the current article, while 'next article' is the previous article (or the one that is sorted earlier) that was published after the current article.If the article is in a different category, it may not be possible to find the corresponding previous or next article.

Q3: Can I customize the display style of the previous/next article?

A3:Of course you can. By setting the HTML element that wraps the previous/next link (like the example above)?.prev-articleand.next-articleAdd CSS styles, you can fully customize their layout, font, color, background, and other visual effects to keep them consistent with the overall design style of your website.The CMS only provides data, and the style is completely controlled by the front-end template and CSS.