How to get the title and link of the previous and next articles of the current article?

As an experienced website operator familiar with Anqi CMS, I am well aware of the importance of article navigation in content management for improving user experience and optimizing website structure.When a reader is browsing an article meticulously crafted, if they can easily jump to the previous or next article in the related or sequential order, not only can it extend the user's stay on the website and increase the page views, but it can also convey a better internal link structure to search engines, thereby helping to enhance the website's SEO performance.Our CMS provides simple and powerful template tags, allowing content creators and template designers to easily achieve this core function.

Retrieve the title and link of the previous and next articles in AnQiCMS

AnQi CMS provides special template tags to obtain information about the previous and next articles of the current article.These tags do not require any additional complex configuration and can intelligently identify and obtain the titles and links of adjacent articles based on the current article's publishing order (usually based on article ID or publish time).The main tags involved areprevArchiveandnextArchiveThey are intended to be used on the article detail page to ensure that the adjacent content of the article being viewed can be accurately obtained.

How to get the title and link of the previous article

We can use it to display the title and link of the previous article on the article detail pageprevArchiveThe tag will try to retrieve the data of the previous article according to the system's default sorting rules (such as ID descending or publish time descending).

In your article detail template, you can use it like thisprevArchiveTags:

{% prevArchive prev %}
{% if prev %}
  <a href="{{ prev.Link }}">{{ prev.Title }}</a>
{% else %}
  <!-- 如果没有上一篇文章，可以显示提示信息或留空 -->
  <span>没有了</span>
{% endif %}
{% endprevArchive %}

In this example,{% prevArchive prev %}The statement retrieves the data of the previous article and assigns it to a variable namedprevThen we use{% if prev %}Check if the previous article was successfully retrieved. Ifprevthe variable exists (i.e., there is a previous article), proceed through{{ prev.Link }}obtaining the article link and proceed through{{ prev.Title }}Get the article title and render it as a clickable hyperlink.If there is no previous article, it can display "none" or other appropriate friendly prompt information to maintain the page's neatness and consistency of user experience.

How to get the title and link of the next article

The logic to get the title and link of the next article is similar, to get the title and link of the next article usingnextArchivetags. The working principle of this tag is similar toprevArchiveThe same, it will look for the data of the next article following the current one.

In your article detail template, you can use it like thisnextArchiveTags:

{% nextArchive next %}
{% if next %}
  <a href="{{ next.Link }}">{{ next.Title }}</a>
{% else %}
  <!-- 如果没有下一篇文章，可以显示提示信息或留空 -->
  <span>没有了</span>
{% endif %}
{% endnextArchive %}

here,{% nextArchive next %}The statement will retrieve the data of the next article and assign it to a variable namednextSimilarly, by{% if next %}Perform a conditional judgment to ensure that the title and link are displayed only when there is a next article.This conditional display method can avoid the appearance of empty links or unnecessary placeholders on the page, thereby enhancing the user's browsing experience.

Integrate the navigation of the previous and next articles in the article detail template

In general, the navigation for the previous and next articles is usually arranged side by side or vertically in the bottom or sidebar of the article content, providing readers with a seamless reading experience. Below is a complete example of integrating these two functions into the article detail template.

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

This code creates a simple article navigation area, which can clearly display the title and link of the previous and next articles. You can design it according to your website..article-navigation/.previous-articleand.next-articleAdd the corresponding CSS styles to the elements so that they can better integrate with the overall visual style of the website and provide more beautiful and practical navigation.

Points to note

prevArchiveandnextArchiveThese tags are specifically designed for use on article detail pages. They cannot be used on other page types, such as article list pages, website homepages, or single pages, as they require a clear 'current article' reference point to retrieve the correct contextual article data.Be sure to include the template in the actual deployment{% if prev %}or{% if next %}Such condition judgment, to elegantly handle the case of no adjacent articles, and avoid displaying incomplete links or errors on the page.In addition, the 'previous article' and 'next article' are sorted based on the publishing order of the articles (usually in ascending order of ID or publishing time), which means the oldest article is the 'previous article' and the latest article is the 'next article'.

Frequently Asked Questions (FAQ)

• Ask: WhyprevArchiveandnextArchiveThe tags do not work on my list page?

  • Answer:prevArchiveandnextArchiveThe tag is designed specifically for the article detail page. It needs a "current article" as a reference point to find the previous and next articles.On the article list page or other non-detail pages, the system cannot determine a unique "current article" as the context, therefore these tags will not be able to retrieve and display data normally.

• Ask: How can I customize the sorting logic for 'Previous' and 'Next' articles in Anqi CMS? For example, I want to sort by reading volume instead of publication time.

  • Answer:prevArchiveandnextArchiveThe tag is currently determined according to the default publication order of the article (usually by article ID or publication time) to determine the previous and next articles.The design of AnQi CMS aims to simplify the implementation of common functions. If you need more complex custom sorting logic, such as sorting by reading volume, you may need to combine the use ofarchiveListTags and more complex template logic or backend customization to achieve this.

• Question: If I delete an article, will the link to the previous or next article be affected?

  • Yes, when you delete or modify an article, the navigation links of adjacent articles will be affected immediately.The Anqi CMS calculates the previous and next articles in real-time with each page request, so the navigation links will automatically update when the article data changes.For example, if you delete an article from the middle of the list, the previous and next articles that originally pointed to it may now link directly to each other, or point to other new adjacent articles.