As a website operator familiar with the AanQi CMS, I am well aware of the importance of article navigation in enhancing user experience and optimizing website structure.When readers are browsing a well-crafted article, if they can easily jump to the related or sequential previous and next articles, it not only extends the user's stay time on the website, increases the page views, but also conveys a better internal link structure to search engines, thereby helping to improve the website's SEO performance.This provides a simple and powerful template tag for Anqi CMS, allowing content creators and template designers to easily achieve this core function.

English CMS to get the title and link of the previous and next articles

prevArchiveandnextArchiveThey 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

To display the title and link of the previous article on the article detail page, we can useprevArchiveLabel. This label will attempt to retrieve the data of the previous article according to the system's default sorting rules (such as ID descending or publishing 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 %}Condition judgment to check if the previous article has been successfully obtained. Ifprevthe variable exists (i.e., there is a previous article), then{{ prev.Link }}obtain the article link and then{{ prev.Title }}Get the article title and render it as a clickable hyperlink.If there is no previous article, it can display "None" or any other friendly prompt you think is appropriate to maintain the page's neatness and consistency of user experience.

How to get the title and link of the next article

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

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 get 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 subsequent 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

The navigation to the previous and next articles is typically placed side by side or vertically at the bottom or sidebar of the article content, providing a seamless reading experience for the reader. Here is a complete example of integrating these two features 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 that can clearly display the title and link of the previous and next articles. You can customize it according to your website design,.article-navigation/.previous-articleand.next-articleAdd the corresponding CSS styles to these elements to make them better integrate with the overall visual style of the website, providing more beautiful and practical navigation.

Precautions

prevArchiveandnextArchive{% if prev %}or{% if next %}This condition judgment is elegant in handling situations without adjacent articles, avoiding incomplete links on the page or errors.In addition, the "previous article" and "next article

Common Questions and Answers (FAQ)

  • Q: Why?prevArchiveandnextArchiveWhy doesn't the tag work on my list page?

    • Answer:prevArchiveandnextArchive

  • 问：How to customize the sorting logic for 'Previous Article' and 'Next Article' in AnQi CMS? For example, I want to sort by the number of views instead of the publication time.

    • Answer:prevArchiveandnextArchiveThe label is currently determined by the default publishing order of the article (usually by article ID or publishing time) to determine the previous and next articles.The design of Anqi CMS aims to simplify the implementation of common functions.archiveListLabels and more complex template logic or backend customization development to implement.

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