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

On the article detail page of AnQi CMS, displaying "Previous" and "Next" navigation links is an important aspect for enhancing user reading experience and the internal link structure of the website.This not only guides readers to continue browsing related content, extends user stay time, but also helps search engines better understand the relevance of website content, and has a positive effect on SEO optimization.

AnQi CMS provides a user-friendly and powerful template tag system, which includes a special tag for fetching adjacent articles.prevArchiveand the previous document"),nextArchive(Next document) tag. By simply adding these tags in the article detail page template, we can easily achieve this function.

Understand the 'Previous/Next' tag of AnQi CMS

The template tag design of AnQi CMS is aimed at simplifying content calls.prevArchiveandnextArchiveThese tags are specifically designed for article detail pages, capable of automatically identifying the current article and searching for the previous or next article with the same content model, sorted by publication time.

These tags, when called, will return an object containing detailed information about adjacent articles, from which we can extract the title of the article (",Title) and link (Link), even thumbnail (",Thumb) and other fields to construct links.

Core step: Add tags to the template file

To implement this feature on your website, you first need to edit the article detail page template file. As a rule, the article detail page template file is usually named{模型table}/detail.htmlFor example, if it is an article model, it may bearchive/detail.html. You can also find the custom article detail page template according to the content model settings on the backend.

We will show you how to add these links in two steps, from basic text links to richer text and image links.

Step one: Basic text link

In your article detail page template, find the location where you want to display the "Previous" and "Next" links, which is usually below the article content. Then, you can add the following code:

<div 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>
</div>

Code analysis:

• {% prevArchive prev %}This is a label that calls the previous document. It assigns the information of the previous article to a nameprev.
• {% nextArchive next %}Similarly, this label assigns the information of the next article to a namenext.
• {% if prev %}and{% if next %}This is a very important conditional judgment. If the current article is the first in its category, then there is no previous one;If it is the last one, there will be no next one. In this case, the correspondingprevornextThe variable will be empty. Through this judgment, we can avoid displaying empty links and provide friendly prompts, such as 'No previous article'.
• {{ prev.Link }}and{{ prev.Title }}:prevandnextThe variable is an object, we can go through.Visit their properties, such as the link and title of the article.

Step 2: Enhanced image and text link

If you want these navigation links to be more attractive, consider adding a thumbnail of the article. From Anqi CMS.prevArchiveandnextArchiveTags also providedThumb(thumbnail) field.

In the template, you can modify the code like this:

<div class="article-navigation-enhanced">
    {# 上一篇 #}
    <div class="nav-item prev-item">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                    {% if prev.Thumb %}
                        <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb"/>
                    {% endif %}
                    <p class="nav-label">« 上一篇</p>
                    <h3 class="nav-title">{{ prev.Title }}</h3>
                </a>
            {% else %}
                <span class="no-nav">« 没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    {# 下一篇 #}
    <div class="nav-item next-item">
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="{{ next.Title }}">
                    {% if next.Thumb %}
                        <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="nav-thumb"/>
                    {% endif %}
                    <p class="nav-label">下一篇 »</p>
                    <h3 class="nav-title">{{ next.Title }}</h3>
                </a>
            {% else %}
                <span class="no-nav">没有下一篇了 »</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</div>

Code enhancement points:

• {% if prev.Thumb %}: Similarly, we have made a judgment about the existence of thumbnails, in case some articles have not set thumbnails.
• imgLabel: Use{{ prev.Thumb }}to display thumbnails and matchaltproperties to enhance SEO friendliness.
• pandh3Label: Wrap the navigation text in semantically meaningful tags and add CSS classes for easy styling and beautification.

After adding the code, please make sure to upload the modified template file to your AnQiCMS system and refresh the page by using the 'Update Cache' feature in the background.Next, you may need to adjust the layout, color, and font of these links through CSS styles to keep them consistent with your website design.

Summary

Provided by AnQiCMSprevArchiveandnextArchiveTemplate tags, you can add navigation links to the previous and next articles on the article detail page very flexibly.This can optimize the browsing path of users on the website, reduce the bounce rate, and also effectively enhance the internal link structure of the website, providing a clearer website content map for search engines.

Frequently Asked Questions (FAQ)

Why did I add the code but the previous/next link did not display on the page?Answer: First, please check if your code has been saved and uploaded to the corresponding article detail page template file of Anqi CMS (for examplearchive/detail.htmlNext, confirm whether the current article has adjacent articles: if it is the first or last article in the category, then the corresponding 'previous' or 'next' link will not be displayed.At the same time, updating the system cache is also a necessary step.

Ask: What is the sorting rule of these links? Are they random?Answer: They are not random. Anqi CMS will sort articles based on the fields under the same category in theRelease Time(CreatedTimefield) for sorting.prevArchiveThe tag will find the closest article published before the current article, andnextArchiveThe tag will find the closest article published after the current article, and

Can I change the prompt text of 'No previous article' or 'No next article'?Of course, you can. In the above example code,<span>« 没有上一篇了</span>and<span>没有下一篇了 »</span>This text can be freely edited and replaced. You can change it according to the context of the website