How to display the title and link of the previous and next articles on the AnQiCMS article detail page?

Managing website content in AnQiCMS and providing users with a smooth browsing experience is one of the key factors in content operation.After a user reads a wonderful article, they often hope to be able to jump to related or consecutive content easily, and the "previous" and "next" navigation on the article detail page is an important function to meet this need.AnQiCMS provides simple and powerful template tags, allowing you to easily implement this feature on the article detail page.

Easily implement: Add navigation for the previous and next articles on the AnQiCMS article detail page

In your AnQiCMS site, the article detail page is the core area for users to gain a deeper understanding of the content.Generally, we would provide users with links to navigate to the previous or next related article at the bottom of the article content or near the sidebar.This not only improves the user experience, encourages them to discover more relevant content, but also effectively improves the page depth (Page Depth) of the website, and is very beneficial for search engine optimization (SEO).

AnQiCMS provides two very convenient template tags for this:prevArchiveandnextArchiveThey are used to retrieve the data of the previous and next articles of the current article.

It introduces the titles and links of the previous and next articles.

To display the title and link of the previous article, you can use the template file on the article detail page (usuallyarchive/detail.htmlor{模型table}/detail.html) like thisprevArchiveTags:

{% prevArchive prev %}
  {% if prev %}
    <a href="{{ prev.Link }}">{{ prev.Title }}</a>
  {% else %}
    <span>没有上一篇文章了</span>
  {% endif %}
{% endprevArchive %}

Here we use aifTo judge the statementprevDoes the variable exist. If it exists, it will display a link to an article (prev.Link) and the title (prev.TitleThe link to the previous article; if it does not exist, it means that the current article is already the first in the category, and then a prompt text can be displayed, such as 'There is no previous article.'

Similarly, to display the title and link of the next article, you can usenextArchiveTags:

{% nextArchive next %}
  {% if next %}
    <a href="{{ next.Link }}">{{ next.Title }}</a>
  {% else %}
    <span>没有下一篇文章了</span>
  {% endif %}
{% endnextArchive %}

This is also passed hereifthe statement to judgenextVariable, ensure that the link is displayed only when the next article exists, otherwise display 'No next article.'

To make the page layout neater, you usually place these two navigations in a container and add some descriptive text, the final effect may be something like this:

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

You can further beautify by using external CSS stylesarticle-navigation/prev-articleandnext-articleLayout and appearance of elements, to keep them consistent with your website design style

More available article information

Besides titles and links,prevArchiveandnextArchiveThe tag also provides other practical article information, you can also call it according to your design needs, for example, the article ID (Id), description (Description)，and thumbnail (Thumb）et al. If you want to display thumbnails in navigation, you can write it like this:

{% 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>没有了</span>
  {% endif %}
{% endnextArchive %}

Here passnext.ThumbGet the thumbnail address and pass it throughnext.TitleAs an imagealtattributes to optimize the performance of images in search engines.

Enhance user experience and SEO effects

This navigation method not only improves the user's browsing experience, encourages them to discover more related content, but also effectively improves the page depth of the website (Page Depth), and is very beneficial for search engine optimization (SEO).A well-structured internal link can help search engine spiders better crawl and index your website content, thus potentially bringing better rankings.

Implementing the navigation function for the previous and next articles in AnQiCMS, it can be completed with just a few lines of simple template code, which fully reflects the flexibility and ease of use of AnQiCMS in content management.

Frequently Asked Questions (FAQ)

1. Why did I add the code but the previous/next article did not display on the page?After modifying the template file, if the front-end page does not take effect immediately, the most common reason may be that the system cache has not been updated in time.You can try to go to the AnQiCMS background, click the "Update Cache" function in the left menu, clear the system cache, and then refresh the page to see the effect.In addition, make sure that your code is added to the correct template file that is being used on the article detail page, for examplearchive/detail.htmlOr the article template you customized.

2. What will happen if my article does not have a previous or next article? prevArchiveandnextArchiveWhen a tag does not have a corresponding previous or next article, its internal variables (such asprevornext) will be empty. The code examples provided in the article already contain{% if prev %}This condition judgment, in this case, it will elegantly display "none" or a custom prompt message without causing the page to error or display blank.

3. Can I use these tags on non-article detail pages? prevArchiveandnextArchiveTags are designed specifically for article detail pages. They depend on the context of the current page's article to determine which article is the "previous" and "next" article.Therefore, using them on non-article detail pages (such as the homepage, category list page, or single page) may not retrieve the correct article data, or the content may not be displayed at all.If you need to get a list of articles or a specific article on other pages, you should use a more generalarchiveListTags, and filter and display content through their parameters.