How to display the link to the previous and next article on the Anqi CMS content page?

In Anqi CMS, to enhance the user experience of the website and the efficiency of internal links, it is a common requirement to add navigation links to the "Previous Article" and "Next Article" on the content page.These links not only help visitors browse related content more smoothly, but also have a positive impact on the website's SEO performance.AnQi CMS provides a set of intuitive template tags, allowing you to easily display these navigation functions on content detail pages.

Core feature: useprevArchiveandnextArchiveTag

Anqi CMS passedprevArchiveandnextArchiveThese specialized template tags are used to obtain information about the previous and next articles of the current article.The strength of these tags lies in their ability to intelligently recognize the document being viewed and automatically find the previous and next content in the same category, without the need to manually pass the article ID or category ID.

Let's take a look at how to implement this function in your Anqi CMS template.

1. Basic 'Previous/Next' text links

First, in your article detail page template file (usually located intemplate/{您的模板名称}/archive/detail.htmlOr in a similar path) find the appropriate location, usually below the article content or in the sidebar area. You can use the following code to display simple text links:

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

Code analysis:

• {% prevArchive prev %}and{% nextArchive next %}This is the tag provided by AnQi CMS, used to retrieve the data of the previous and next articles. The data obtained will be assigned toprevandnextVariable.
• {% if prev %}and{% if next %}In practical applications, not all articles have a previous or next article (for example, the first article in a category does not have a previous one, and the last article does not have a next one). Therefore, usingifTo judge the statementprevornextThe variable should exist to avoid displaying empty links and to provide a friendly prompt, such as 'None.'
• {{ prev.Link }}and{{ next.Link }}: Output the link addresses of the previous and next articles.
• {{ prev.Title }}and{{ next.Title }}: Output the title of the previous and next articles.

2. Add thumbnails to make navigation more attractive.

If your website design allows it, and articles usually include thumbnails, you can also add thumbnails to the navigation links of the previous/next articles to make them more visually appealing.

<div class="article-navigation-enhanced">
    <div class="prev-article">
        {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                {% if prev.Thumb %}
                    <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumb" />
                {% endif %}
                <span>上一篇：{{ prev.Title }}</span>
            </a>
        {% else %}
            <span>没有上一篇了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}" title="{{ next.Title }}">
                <span>下一篇：{{ next.Title }}</span>
                {% if next.Thumb %}
                    <img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumb" />
                {% endif %}
            </a>
        {% else %}
            <span>没有下一篇了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

Code analysis:

• {% if prev.Thumb %}and{% if next.Thumb %}Here again usedifThe statement to determine whether the article has a thumbnailThumbField). If it exists, the thumbnail is displayed.
• {{ prev.Thumb }}and{{ next.Thumb }}Here is the thumbnail address of the article.

You can flexibly combine according to your template design and actual needsprevandnextFor example, other fields provided by the variableDescription(Description),CreatedTime(Creation time) and other, to build a more diverse navigation style. If you need to format the timestamp, you can use{{ stampToDate(item.CreatedTime, "2006-01-02") }}This kind of filter.

Positioning and design considerations

These 'Previous/Next' navigation links are usually placed at the bottom of the article content area or as a floating sidebar component.

• Bottom navigation:Located after the main content of the article, before the comments section or related article recommendation area, to provide a natural continuation of content for users.
• Sidebar:If the page layout has a sidebar, you can also consider displaying the simplified title of the previous/next article in the sidebar for easy user switching.

No matter which placement method you choose, you should ensure that its design style is consistent with the overall website and easy for users to recognize and click.

Frequently Asked Questions (FAQ)

1. Why does the 'Previous' or 'Next' link show 'None'?

This indicates that no earlier or later articles were found in the category of the current article.For example, if you are browsing the latest article posted under a category, there will be no 'next';Similarly, the oldest article will not have 'Previous Article'. This is a normal behavior, through{% if 变量 %}Judgment can be used to handle this situation to avoid displaying empty links.

2. Do these tags automatically limit to the same category?

Yes,prevArchiveandnextArchiveThe tag defaults to finding the previous and next articles based on the current article's category.This means you do not need any additional configuration to ensure that users do not jump to sports articles while browsing technology articles, thereby maintaining the relevance of the content.

3. Besides the title and link, what information can I display?

prevandnextThe variable contains many detailed information about the article, such asId(article ID),Keywords(Keywords),Description(Summary),Logo(Cover Image),Thumb(Thumbnail),Views(Views),CreatedTime(Publish Time) etc. You can freely call these fields in the template, for example{{ prev.Views }}or{{ stampToDate(next.CreatedTime, "2006-01-02 15:04") }}Show more article information.