How to display links to the previous and next articles on the AnQiCMS article detail page?

When visitors browse articles on a website, they often hope to be able to jump to related content conveniently, especially the previous or next one.This design not only improves the user experience, but also has a positive impact on the internal link structure of the website and search engine optimization.AnQiCMS has fully considered this user's needs, built simple and efficient template tags, and helped us easily implement the function of linking to the previous and next articles on the article detail page.

Display links to the previous and next articles on the AnQiCMS article detail page

In AnQiCMS, displaying the link to the previous and next articles mainly depends on two core template tags:prevArchiveandnextArchiveThese tags will automatically find and return adjacent article information based on the publication time of the current article.

To implement this feature, we need to edit the template file of the article detail page. According to the template conventions of AnQiCMS, the template file for the article detail page is usually located in your template directory.{模型table}/detail.htmlFor example, if it is an article model, it is usuallyarticle/detail.html.

When editing the template file, you can add the following code snippet to the location where you want to display the links to the previous and next articles, such as at the bottom or sidebar of the article content.

Basic Usage Example (Only Display Title):

First, let's see how to simply display the link and title of the previous article:

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

In this code,{% prevArchive prev %}The tag attempts to retrieve the information of the previous article of the current article and stores it inprevthe variable. We use{% if prev %}to determine if the previous article exists. If it does, then through{{ prev.Link }}Retrieve article link through{{ prev.Title }}Get the article title and display it as a clickable link.If there is no previous article (for example, the current article is the first in a series), then display the prompt 'none'.

Similarly, the link and title of the next article can be usednextArchivetags to implement:

<div class="article-navigation">
    <div class="next-article">
        {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}">{{ next.Title }} &raquo;</a>
        {% else %}
            <span>没有了 &raquo;</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

here,{% nextArchive next %}The tag will store the information of the next article innextthe variable, with the logic ofprevArchivebeing exactly the same.

Enhanced usage example (including thumbnails and full layout):

To provide a richer navigation experience, we usually combine the display of article titles and thumbnails. Here is a complete example of linking the previous and next articles side by side, including a thumbnail:

<div class="article-pagination-wrapper">
    <div class="prev-article-link">
        {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                {% if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />{% endif %}
                <span>&laquo; {{ prev.Title }}</span>
            </a>
        {% else %}
            <span class="no-article-link">&laquo; 没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article-link">
        {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span>{{ next.Title }} &raquo;</span>
                {% if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" />{% endif %}
            </a>
        {% else %}
            <span class="no-article-link">没有了 &raquo;</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

In this enhanced example:

• We usedivThe element wraps the links to the previous and next posts and adds respectively:prev-article-linkandnext-article-linkClass names, which are convenient for subsequent CSS styling and achieve left-right layouts, etc.
• {% if prev.Thumb %}and{% if next.Thumb %}Check if the article has a thumbnail.ThumbThe field will return the URL of the thumbnail.
• altThe attribute is set to the article title, which is very important for image SEO and accessibility.
• titleThe attribute has added a mouse hover tip to the link.

Please note the code in the abovearticle-pagination-wrapper/prev-article-link/next-article-linkandno-article-linkThese are sample CSS class names, you can modify or replace them according to your website design needs, and write the corresponding CSS styles.

Important reminder and **practice

• Location of the template file: Make sure you are editing the correct article detail page template. Typically, its naming will be related to the content model, for examplearticle/detail.htmlorproduct/detail.html.
• Conditional judgment:Always use{% if prev %}or{% if next %}Make a judgment because not all articles have a previous or next article.For example, the article with the earliest publication time does not have a previous one, and the article with the latest publication time does not have a next one.This can prevent invalid empty links from appearing on the page.
• Automatically obtain context: prevArchiveandnextArchiveThe tag on the article detail page will automatically retrieve the context information of the current article, usually you do not need to pass it manuallyidorcategoryIdsuch parameters, which will intelligently find the adjacent articles.
• Style control:The template code is responsible for outputting the HTML structure and content, while the layout, color, font, and other visual presentations of the links need to be controlled through CSS stylesheets. You can add the following code in yourdivandaAdd custom class names to tags and then define styles in your CSS file.
• SEO friendly:The link to the previous and next article is a good internal link practice, which helps search engine spiders crawl more pages of the website, pass on page authority, and thus improve the overall SEO performance of the website.

Provided by AnQiCMSprevArchiveandnextArchiveLabel, we can flexibly and efficiently add previous and next article navigation to the article detail page, which not only optimizes the user experience but also plays a positive role in the overall structure of the website and search engine optimization.

Frequently Asked Questions (FAQ)

1. Why did I add the code but the previous/next article link is not displayed on the page?First, please check if your template file has been saved and activated.Next, make sure that the current article indeed has a logical 'previous' or 'next'.For example, if your website only has one article, or you are viewing the first article you published, then there is no previous one;On the contrary, if you are looking at the last article you have published, then there is no next one.In addition, please confirm that your article is in a normal published state on the AnQiCMS backend, and not in a draft or recycling bin.

2. If I want to display only the article title in the link without the thumbnail, how should I adjust?If you do not want to display thumbnails, just remove all the parts included in the sample code{% if prev.Thumb %}...{% endif %}or{% if next.Thumb %}...{% endif %}Keep it<span>{{ prev.Title }}</span>or<span>{{ next.Title }}</span>Just do it.

3. What determines the order of these previous/next articles?The previous and next article links in AnQiCMS are based on the publication time order (by default, it is sorted according to theCreatedTimeThe field is automatically determined. The system will find the nearest article before the current article's publication time as the previous article, and the nearest article after the publication time as the next article.