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 next content after they finish reading an article, which is a key factor in improving user experience and website stickiness.Especially for sites with a large amount of content, such as blogs, news websites, or product display websites, a straightforward "previous/next" navigation feature is particularly important.It can not only guide users to deeply browse and reduce the bounce rate, but also provide more internal links for search engines, optimizing the SEO performance of the website.

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

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

AnQi CMS allows you to directly call specific data in the template file of the article detail page. The system is specially designed for displaying theprevArchiveandnextArchiveThese tags. These tags will automatically identify and return the previous and next articles in the order of time in the context of the current article.

Core tag parsing

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

1.prevArchiveTag

This tag is used to retrieve information about the previous article of the current article.When there is a previous article, it will return the detailed data of the 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 we define 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, you can access it directly by..operator access.

  • Available article fields:prevArchiveYou can access tags returned objects such asId(Article ID),Title(Article Title),Link(Article Link),Description(Article description),Thumb(Thumbnail) and other commonly used fields.

  • Display example with thumbnail: If your template design needs to display a thumbnail, you can write it like this:

    {% 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.nextArchiveTag

withprevArchivesimilar,nextArchiveThe tag is used to get information about the "next" article of the current article.If there is a next article, it will return the detailed data of the article;If the current article is the latest one, then no content is returned.

  • Basic usage:

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

    here,nextis the variable name defined for the data of the next article.

  • Available article fields:nextArchiveThe fields available in the object returned by the tag are,prevArchiveTags are consistent, 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 in the article detail page

Generally, the navigation to the previous and next articles is 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.htmlPlease refer to the "Template Production Basic Conventions" document).

This is a complete example code block showing 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. After that, you can style it according to the overall style of the website using CSS..article-navigation,.prev-article,.next-articleAdd styles to the class to make the navigation look more beautiful and meet the design requirements.

Tips to enhance user experience and SEO

  • Clear navigation text: Use 'Previous: [Article Title]' and 'Next: [Article Title]' descriptions to let users clearly know what content they will be accessing.Avoid using overly simple terms like 'Previous' or 'Next' as they reduce the discoverability of the content.
  • Visual guidance: You can add arrow icons, article thumbnails, and other visual elements to navigation to enhance the attractiveness of clicks.
  • Handle the situation where 'none' is present.: When there is no previous or next article, elegantly display 'None' or hide the navigation item to 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 on page authority.Ensure that the navigation links are clickable and use descriptive anchor text.
  • Increase the stay 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 the website content.

Provided by Anqi CMSprevArchiveandnextArchiveLabel, you can easily add dynamic previous and next navigation to the article detail page of the website, thereby optimizing the user experience and adding bricks and tiles to the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1: If my article has no previous or next article, what will the page display?

A1:In the above template code, we used{% if prev %}and{% if next %}such conditional judgment. If the current article does not have a previous one,prevArchivethe tag does not return data,{% if prev %}The condition will not be met, the page will display that you are in{% else %}Text defined within the block, for example, 'No previous article.' Similarly, if there is no next article, 'No next article' will also be displayed. If you do not want to display any prompts, you can simply omit them.{% else %}the block.

Q2: What determines the order of the previous/next article?

A2: prevArchiveandnextArchiveTags are set by default based on the time of the article's publication (CreatedTimeIn the current category of the article, determine the previous and next articles in chronological order (usually in reverse, that is, the most recently published articles are in front).This means that 'previous article' refers to the next article (or the one that is more recent in sorting) that was published earlier than the current article, while 'next article' is the previous article (or the one that is more recent in sorting) that was published later than 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 wrapping the HTML element that contains the previous/next link (such as the example shown 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 AnQi CMS only provides data, the style is completely controlled by the front-end template and CSS.