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

In AnQi CMS, adding navigation links to the previous and next articles on the article detail page is a key step to improve user reading experience and optimize the internal link structure of the website.This not only encourages visitors to browse more content, but also helps search engines better understand the website structure.The AnQi CMS provides very intuitive and easy-to-use template tags, allowing us to easily implement this feature.

Understanding the mechanism of 'Previous' and 'Next' navigation

The Anqi CMS template system is designed to be very flexible.When we access a specific article (document), the system automatically identifies the position of the current article in the category or model it belongs to.Based on this position, it can intelligently judge and provide information about the previous and next articles adjacent to the current article.prevArchiveandnextArchive.

These tags will attempt to retrieve data related to the previous or next article associated with the current article.If they exist, they will return an object containing the article title, link, and other information; if they do not exist (for example, if the current article is the first or last in the category), they will return an empty value, which allows us to make conditional judgments in the template and elegantly handle cases where there is no corresponding article.

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

To implement this feature, we first need to find the template file that controls the display of the article detail page. According to the template production conventions of Anqi CMS, the template for the article detail page is usually located/template/{你的模板目录}/{模型table}/detail.htmlFor example, if your article belongs to the "Article Model" (the default model table name is usuallyarticle), then you may need to edit the filetemplate/default/article/detail.html(assuming you are using a template nameddefault).

Open.detail.htmlAfter the file, you can choose to add the following code snippet at the bottom of the article content, above the comments section, or at any other position you think is appropriate to display navigation for the previous and next articles.

1. Write the link and title of the previous article

First, we useprevArchiveTag to try to get the information of the previous article. To better control the output, we will assign the obtained article data to a variable such asprev), and through{% if prev %}to judge.

{# 获取上一篇文章的数据 #}
{% prevArchive prev %}
<div class="article-prev">
    {% if prev %}
        <a href="{{ prev.Link }}">
            <span class="nav-label">上一篇：</span>
            <span class="nav-title">{{ prev.Title }}</span>
        </a>
    {% else %}
        <span class="nav-label">上一篇：</span>
        <span class="nav-title">没有了</span>
    {% endif %}
</div>
{% endprevArchive %}

In the code above:

  • {% prevArchive prev %}The tag tries to get the previous article and store its data inprevthe variable.
  • {% if prev %}CheckprevCheck if the variable contains content.
  • IfprevIf it exists, we create a link with itshrefattribute usage{{ prev.Link }}To get the article URL, the link text should be used{{ prev.Title }}To display the article title.
  • IfprevThere is none (i.e., the current article is the first in the category or model), and we will display a "none" prompt.

2. Write the link and title of the next article.

Continuing in a similar manner, we usenextArchivetags to retrieve information about the next article.

{# 获取下一篇文章的数据 #}
{% nextArchive next %}
<div class="article-next">
    {% if next %}
        <a href="{{ next.Link }}">
            <span class="nav-label">下一篇：</span>
            <span class="nav-title">{{ next.Title }}</span>
        </a>
    {% else %}
        <span class="nav-label">下一篇：</span>
        <span class="nav-title">没有了</span>
    {% endif %}
</div>
{% endnextArchive %}

This code follows the same logic as the previous one, just thatprevArchiveReplacenextArchivethe variable names have been changed fromprevchanges tonextTo get the data for the next article.

3. Integrate code snippets and beautify the style.

In order to make the navigation look neater, we usually put these two parts in a container and add some CSS classes for subsequent styling customization.

<div class="article-detail-nav">
    {# 上一篇导航 #}
    {% prevArchive prev %}
    <div class="nav-item nav-prev">
        {% if prev %}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                <i class="icon-arrow-left"></i>
                <span class="nav-text">上一篇：{{ prev.Title }}</span>
            </a>
        {% else %}
            <span class="nav-text no-more">没有了</span>
        {% endif %}
    </div>
    {% endprevArchive %}

    {# 下一篇导航 #}
    {% nextArchive next %}
    <div class="nav-item nav-next">
        {% if next %}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span class="nav-text">下一篇：{{ next.Title }}</span>
                <i class="icon-arrow-right"></i>
            </a>
        {% else %}
            <span class="nav-text no-more">没有了</span>
        {% endif %}
    </div>
    {% endnextArchive %}
</div>

Please note the code in the aboveicon-arrow-leftandicon-arrow-rightJust a placeholder, you may need to replace it with the actual icon class according to the icon library you are using (such as Font Awesome), or use text arrows directly. Style (article-detail-nav,nav-item,nav-prev,nav-next,nav-text,no-moreThe CSS for this needs to be defined by you, to maintain consistency with your website style.

More customization options

Besides titles and links,prevArchiveandnextArchiveTags also provide other available fields, such asThumb(Thumbnail) andDescription(Summary). If you want to enrich navigation, you can try adding a thumbnail to the link:

<div class="nav-item nav-prev">
    {% if prev %}
        <a href="{{ prev.Link }}" title="{{ prev.Title }}">
            {% if prev.Thumb %}
                <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="nav-thumb">
            {% endif %}
            <span class="nav-text">上一篇：{{ prev.Title }}</span>
        </a>
    {% else %}
        <span class="nav-text no-more">没有了</span>
    {% endif %}
</div>

By using these simple template tags, you can not only enhance the user experience of the website, but also optimize the internal link structure between articles, which will have a positive impact on the overall SEO performance of the website.After completing the template modifications, remember to save the file, refresh the article detail page in the browser, and check if the navigation displays as expected.

Frequently Asked Questions (FAQ)

1. Why did I add the code according to the steps, but the link to the previous/next article did not show up?

  • Check the template file path:Ensure you are editing the correct article detail page template file (usuallytemplate/{你的模板目录}/{模型table}/detail.html)
  • Check the article sequence:Ensure that the current article is not the first or last in its category.If so, the corresponding 'previous' or 'next' link will naturally not be displayed.You can try testing in the middle article.
  • Check the spelling of tags:Template tags are case-sensitive, please make sureprevArchiveandnextArchiveas well as field names likeprev.Link/prev.TitleThe spelling is completely correct.
  • Clear the cache:If you modify the template in the background, sometimes the system cache may cause the changes not to take effect immediately. Try to clear the cache in the "Update Cache" function of the Anqicms background.

2. Can I display the thumbnail or summary of the previous/next article?Absolutely, you can.prevArchiveandnextArchiveThe object returned by the tag contains multiple article information. BesidesTitleandLinkYou can also go through{{ prev.Thumb }}Get the thumbnail link through{{ prev.Description }}Get the article summary. Just add these fields in the corresponding position in the template and add them as needed{% if prev.Thumb %}Such conditional judgment to prevent placeholder images from appearing when there is no thumbnail.

3. How can I completely hide the navigation block that has no corresponding article instead of displaying the text 'Nothing'?That is also very simple. In the above code example,{% else %}This is used to display the text 'No more'. If you want the entire navigation block to not display when there is no previous or next article, just removediv.nav-item.{% else %}and its corresponding content can be used. For example, the navigation of the previous article can be modified to:

{% prevArchive prev %}
{% if prev %}
<div class="nav-item nav-prev">
    <a href="{{ prev.Link }}" title="{{ prev.Title }}">
        <i class="icon-arrow-left"></i>
        <span class="nav-text">上一篇：{{ prev.Title }}</span>
    </a>
</div>
{% endif %}
{% endprevArchive %}

So whenprev