How to display the 'Previous' and 'Next' article links and titles on the article detail page?

It is crucial to enhance user experience and content discoverability in website operation.When the reader is immersed in an article, providing 'Previous' and 'Next' navigation links can not only guide them to continue browsing the website content but also effectively reduce the bounce rate and optimize the on-site SEO structure.For those of us using AnQiCMS to manage websites, implementing this feature is both simple and efficient.

AnQiCMS provides a直观and powerful template tag system, making it easy to integrate "previous article" and "next article" links on the article detail page.We do not need complex programming knowledge, just add a few lines of code to the corresponding template file.

Core Tag Introduction:prevArchiveandnextArchive

To display navigation on the article detail page, AnQiCMS has specially provided two template tags:

• prevArchive: It is used to get the data of the previous article of the current article.
• nextArchiveGet the data for the next article of the current article.

These tags will automatically find and provide information about adjacent articles based on the sorting position of the current article in the category. It should be noted that not every article has a previous or next article (for example, the first article in a series does not have a previous article, and the last article does not have a next article), so we need to use conditional judgment tags when using them{% if %}Ensure that links are displayed only when data exists, to avoid displaying empty links or errors on the page.

Locate the article detail page template

To implement this feature, we first need to find the template file of the website's article detail page. According to the template convention of AnQiCMS, the template of the article detail page is usually located in the template directory.{模型table}/detail.htmlFor examplearticle/detail.htmlorproduct/detail.htmlIf you have used a custom template, you need to find the corresponding file you have configured for the article details.

Specific implementation steps: Add navigation links and titles.

After finding the correct template file, we can add the following code at the end of the article content (usually below the article text, above the comments section, or next to related article recommendations).This code intelligently determines whether there is a previous or next article and displays its title and link.

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

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

In this code block:

• We use{% prevArchive prev %}and{% nextArchive next %}To declare a tag to retrieve the data of the previous and next articles and store them separatelyprevandnextthe variable.
• Then, use{% if prev %}or{% if next %}to determine whether these variables have actual content
• If they exist, proceed through{{ prev.Link }}and{{ prev.Title }}(ornextVariable corresponds to the field to output the article link and title.
• If it does not exist, we will display a friendly prompt text, such as 'None', which can enhance user experience.

Advanced usage: Introduce thumbnails to enhance visual appeal

If you want the navigation links to be more attractive, we can also consider adding a thumbnail next to the links.prevArchiveandnextArchiveData retrieved from the tag, excludingLinkandTitleusually also includesThumb(thumbnail) orLogo(Cover main image) and other fields.

Can be modified based on the above code:

<div class="article-navigation">
    <div class="prev-article">
        {% 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 %}
    </div>

    <div class="next-article">
        {% 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 %}
    </div>
</div>

Here we added one.{% if prev.Thumb %}(ornext.ThumbThe judgment should ensure that the image is displayed only when the thumbnail exists, and link it to the article.The final style can be beautified with external CSS to make it more in line with the overall design of the website.

Consideration of placement and style.

We usually place these navigation links at the end of the article content, such as between the main text and the comments section, or next to related recommended articles.After reading the current content, the reader can naturally discover and click to go to the next article.

As for the final style of these links, it needs to be beautified through CSS.For example, you can set their layout (floating left or right or stacking vertically), font size, color, background color, and animation effects on mouse hover, etc., to ensure they are both aesthetically pleasing and easy to click.

Check and Test

After modifying the code, remember to save the template file and clear the cache in the AnQiCMS backend (if your system has cache enabled).Then, visit the article detail page of your website and test different articles (such as the first article, middle article, and last article) to ensure that the 'Previous' and 'Next' links display and jump correctly.

By following these steps, we can easily provide readers with a smooth "previous" and "next" navigation experience on the article detail page of the website built with AnQiCMS.

Frequently Asked Questions (FAQ)

1. Why did I add the 'Previous' and 'Next' code, but the page only displays 'None' or does not display any content?This is usually because the article you are currently browsing is indeed the first in the category (with no previous one) or the last (with no next one). If all articles show 'No more', please check if your template tags are spelled correctly, as well asprevArchiveandnextArchiveIs the label properly placed in the article detail page template. Moreover, make sure that your article is indeed categorized and that there are multiple articles under the category.

2. What is the rule for sorting the links of 'Previous' and 'Next'? Can the sorting rule be customized? prevArchiveandnextArchiveTags are usually automatically determined based on the publication time of the article (the latest is the next one, and the oldest is the previous one) or the ID order (the larger the ID, the later it is).Currently, these two tags built into AnQiCMS do not provide custom sorting parameters directly.If you need a more complex sorting logic, you may consider usingarchiveListTags combined with customizationlimitandorderA parameter, and to simulate the effect of 'Previous/Next' by programming logic, this will be more complex than usingprevArchiveandnextArchiveit directly.

3. Can I only display the link and title, and not show the 'No more' prompt text?Can. If you do not want to display any prompt text when there is no previous or next article, just{% else %}delete the code block and its content. For example,{% else %}<span>上一篇：没有了</span>{% endif %}Delete, so that this area will be blank when there is no previous one.