How to display the title and link of the 'Previous' and 'Next' articles on the article detail page?

It is crucial to design the navigation of the article detail page in website content operation.A well-designed user experience detail page, which can clearly present the current content and naturally guide readers to browse more related or consecutive articles.Among the display of the 'Previous Article' and 'Next Article', it is a classic practice to enhance user stickiness and the efficiency of the internal link structure of the website.

AnqiCMS as an enterprise-level content management system developed based on the Go language, took full consideration of the efficiency and flexibility of content management from the very beginning.It boasts a concise and efficient architecture, SEO-friendly features, and a powerful template tag system, making the implementation of common functions very intuitive.With its Django-style template syntax, even users without a strong programming background can easily transform technical concepts into practical website features.

In AnqiCMS, the implementation of the "Previous" and "Next" functions on the article detail page is mainly due to the two powerful and convenient template tags built into the system:prevArchiveandnextArchiveThese tags are specifically used to automatically obtain the information of the previous and next articles of the current article on the article detail page, without the need for complex logical judgment or database queries, greatly simplifying the template development work.

How to implement the 'Previous' and 'Next' functions using tags

You need to perform operations in your article detail page template file. According to the template making conventions of AnqiCMS, the template for the article detail page is usually named{模型table}/detail.htmlFor example, if it is an article model, it may bearchive/detail.htmlorarticle/detail.html)

When editing this template file, you can insert at an appropriate position below the article content or in the sidebar.prevArchiveandnextArchiveTags. These tags automatically detect the article on the current page and try to find the previous and next articles associated with the current article in the database.

These tags support retrieving multiple fields of the previous or next article, including but not limited to:

• IdThe unique identifier ID of the article.
• Title: Article Title.
• LinkThe URL link of the article.
• ThumbThe thumbnail of the article.

It is important that in practice, not all articles have a previous or next one.For example, the first article does not have 'Previous', and the last article does not have 'Next'.To ensure that the page does not display errors or blank links in these cases, we can combine the template engine provided by AnqiCMS withifLogic judgment tags for conditional rendering.

Here is a typical code example that displays the 'Previous' and 'Next' article titles and links on the article detail page template.

{# 假设这是你的文章详情页模板文件，例如：archive/detail.html #}

<article class="article-detail">
    {# 这里是文章标题、内容等详情信息的显示 #}
    <h1>{{ archive.Title }}</h1>
    <div class="article-content">
        {{ archive.Content|safe }}
    </div>

    {# 上一篇和下一篇文章的导航区域 #}
    <div class="article-navigation">
        <div class="prev-article">
            {% prevArchive prev %} {# 获取上一篇文章的信息，并将其赋值给变量 'prev' #}
            {% if prev %} {# 判断是否存在上一篇文章 #}
                <a href="{{ prev.Link }}">
                    <i class="icon-arrow-left"></i> 上一篇: {{ prev.Title }}
                </a>
            {% else %}
                <span>没有了</span>
            {% endif %}
            {% endprevArchive %}
        </div>

        <div class="next-article">
            {% nextArchive next %} {# 获取下一篇文章的信息，并将其赋值给变量 'next' #}
            {% if next %} {# 判断是否存在下一篇文章 #}
                <a href="{{ next.Link }}">
                    下一篇: {{ next.Title }} <i class="icon-arrow-right"></i>
                </a>
            {% else %}
                <span>没有了</span>
            {% endif %}
            {% endnextArchive %}
        </div>
    </div>
</article>

In the above code,{% prevArchive prev %}Attempts to retrieve the data of the previous article of the current article and store it inprevthe variable. Ifprevthe variable has a value (i.e., there is a previous article),{% if prev %}It will execute its internal code block, displaying the link and title of the previous article.nextArchiveThe way it works is also exactly the same. This way, you can ensure that the page displays "Nothing here" or remains blank when there is no corresponding article, rather than showing a broken link.

By making such settings, it not only provides readers with convenient navigation, encourages them to continue browsing your website content, but also helps build a good internal link structure, which is of great benefit to the SEO performance of the website.The design philosophy of AnqiCMS is to encapsulate complex background logic through these concise and powerful tags, allowing content operators to focus on content creation and the overall strategy of the website.

Frequently Asked Questions (FAQ)

Q1: What are the sorting rules for the 'Previous' and 'Next' articles? How does the system determine which article is 'Previous' or 'Next'?

A1: AnqiCMS ofprevArchiveandnextArchiveTags are usually based on the publication time of theCreatedTime）or sort by article ID to determine the previous and next articles.In most cases, they will search for nearby articles in reverse order (the latest articles first) or in order (the oldest articles first).This means that if your articles are published in chronological order, the 'previous article' is usually the one with an earlier publication time, while the 'next article' is the one with a later publication time.

Q2: Besides the title and link, can I also display the thumbnail of the previous/next article?

A2: Perfectly okay.prevArchiveandnextArchiveTags also support accessing the thumbnail field of the article. You canprevornextaccess in the variable.Thumbfield. For example, to display a thumbnail in a link, you can modify the code like this:

{% if prev %}
    <a href="{{ prev.Link }}">
        {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %}
        <i class="icon-arrow-left"></i> 上一篇: {{ prev.Title }}
    </a>
{% endif %}

This will check if the previous article has a thumbnail, and if so, it will display it in the link.

Q3: If I only want to display 'Previous'/'Next' on the article detail pages of certain article models (such as 'News' model) and not on others (such as 'Product' model), how can I control it?

A3: This can be achieved through the management of template files. AnqiCMS allows you to define different detail page templates for different content models. For example, you can have aarchive/detail.htmlFor articles, oneproduct/detail.htmlFor products. You only need to display the "Previous"/"Next" function in the template file (such asarchive/detail.html）Add the above code where needed, and do not add it to template files (such as) where it is not needed. This will enable precise functional control.product/detail.html）Do not add it to template files where it is not needed. This will enable precise functional control.