How to obtain and display the links and titles of the previous and next articles?

When we manage and publish content in Anqi CMS, in order to enhance the user experience and content discoverability of the website, it is usually necessary to provide the function of navigating to the "previous" and "next" articles on the article detail page.This not only encourages readers to continue browsing the site's content, but also provides a good internal link structure for search engine optimization (SEO).

The AnQi CMS provides a very concise and intuitive template tag, allowing us to easily achieve this requirement.

Core function:prevArchiveandnextArchiveTag

AnQi CMS provides us with two special template tags for retrieving adjacent article data:prevArchiveUsed to get the previous article, andnextArchiveIt is used to get the next article. Their strength lies in the fact that there is no need to manually specify the article ID or category, the system will intelligently find the article adjacent in time sequence to the current article.

These tags are usually on the article detail page (for examplearticle/detail.htmlOr a custom model corresponding todetail.htmlIs used in the template to ensure that they can accurately identify the article in the current context.

Basic usage: Only display title and link

In your article detail template, you can use the following code snippet to retrieve and display the title and link of the previous and next articles.An important practice is to check if the article exists before using it to avoid empty links or errors when there are no adjacent articles.

<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 the code above:

• {% prevArchive prev %}Defined a namedprevThe variable, it will carry all the data of the previous article.
• {% nextArchive next %}Similarly, a variable namednextis defined to store the data of the next article.
• {% if prev %}and{% if next %}Is a conditional statement to ensure that the link and title will be displayed only when the previous article or the next article exists.If not found, it will display a prompt like 'Not available'.
• {{ prev.Link }}and{{ next.Link }}Retrieve the URL links of the previous and next articles.
• {{ prev.Title }}and{{ next.Title }}Retrieve the titles of the previous and next articles.

In this way, you can clearly present article navigation at the bottom or sidebar of the article.

Advanced usage: combine thumbnails to enhance visual experience.

To make the navigation of the previous and next articles more prominent and attractive, we can choose to add thumbnails. The article data of Anqi CMS usually containsThumb(thumbnail) orLogo(Cover first image) field, you can choose to use it according to your design requirements.

Here is an example of how to integrate thumbnails in links:

<div class="article-navigation-visual">
    <div class="nav-item prev-item">
        {% 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 class="no-article">没有上一篇文章了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="nav-item next-item">
        {% nextArchive next %}
        {% if next %}
        <a href="{{ next.Link }}">
            {% if next.Thumb %}
            <img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" />
            {% endif %}
            <span>下一篇：{{ next.Title }}</span>
        </a>
        {% else %}
        <span class="no-article">没有下一篇文章了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this advanced example, we added a{% if prev.Thumb %}The judgment ensures that the image is displayed only when the article has a thumbnail.altThe setting of the property is also very important for SEO and accessibility. You can also, as needed,prevandnextAccess other fields within a variable, for exampleDescription(Article summary),Views(Views) orCreatedTime(Publish time) etc.

Where should the code be placed?

These template codes are usually placed in your article detail page template. Depending on your template design, it may be:

• Below the main content area of the article.
• The top of the comment section or related article recommendation area.
• The fixed position of the page sidebar.

In Anqi CMS, the template file of the article detail page is usually named.{模型table}/detail.html(For example)article/detail.htmlorproduct/detail.html). Just open the corresponding template file, paste the above code in the appropriate position, and then save it.

A温馨提示 with **practice

• Customize the style:The code provided only offers the basic HTML structure. To make the navigation of the previous and next articles look coordinated and beautiful on your website, you need to write the corresponding CSS styles to beautify them.
• Clear instructions: Ensure that the text descriptions of 'Previous' and 'Next' are clear, making it easy for users to understand.
• Uniformity:Maintain the consistency of the navigation area design throughout the website, which helps to improve the overall user experience.
• SEO friendly:This internal link structure naturally guides search engine crawlers to discover more pages, which helps improve the inclusion and ranking of website content.

By using these simple and practical template tags, you can easily build a highly efficient and user-friendly article navigation function in AnQi CMS, which will further enhance the value of your website.

Frequently Asked Questions (FAQ)

Q1: What will be displayed if my article does not have a previous or next article?A1: As shown in the example code in the article, we recommend that you use{% if prev %}or{% if next %}To determine whether the previous or next article exists.