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

As a website manager who deeply understands the operation of Anqing CMS, I am well aware of the importance of the details of content presentation for user experience and the overall performance of the website.The navigation function on the article detail page can not only effectively guide users to continue browsing and reduce the bounce rate, but also is an effective means to enhance the correlation between pages and optimize the internal link structure.AnQi CMS provides a concise and efficient template tag, allowing us to easily implement this function.

Improve content coherence: Implementing previous and next article navigation in AnQiCMS

In website content operation, the 'Previous' and 'Next' navigation function on the article detail page is a key element to enhance user experience and guide users to in-depth browsing.It can not only help readers seamlessly jump from the current article to related content, but also effectively enhance the internal link structure of the website, and is also very beneficial for search engine optimization (SEO).AnQiCMS (AnQiCMS) provides intuitive and powerful template tags, allowing website operators to easily implement this feature and flexibly control the displayed content.

Understanding the previous and next article navigation mechanism in AnQiCMS

AnQiCMS's template system adopts the syntax of Django template engine, providing special tags to obtain the previous and next articles of the current article:prevArchiveandnextArchiveThese tags work automatically in the context of the article detail page, and there is no need for complex parameter configuration to obtain data from adjacent articles.The object returned includes the title, link, thumbnail, and other common information that can be directly called in the template.

Get information about the previous article

To display the title, link, and thumbnail of the previous article on the current article page, we can useprevArchiveThe tag returns an object representing the article that is ranked before the current article according to the system's default sorting rules (usually publication time or ID).

We first use{% prevArchive prev %}Attempt to retrieve the data of the previous article and assign it to a variable namedprev. To ensure the robustness of the page rendering, we also need to judge thisprevDoes the variable exist, because not all articles have a previous one (such as the first article in a series).

InprevWhen the variable exists, we can safely access its properties:

• {{ prev.Title }}Get the title of the previous article.
• {{ prev.Link }}Get the link address of the previous article.
• {{ prev.Thumb }}Get the thumbnail address of the previous article.

The following is an example of the template code to implement the navigation of the previous article:

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

In this code, we first try to obtainprevthe article object. IfprevThe object exists (i.e., there is a previous article), then render a thumbnail, title, and link<a>tag. If it does not exist, then display a prompt message.

Get information about the next article

Similarly, to get and display the navigation information of the next article, we usenextArchiveThe tag will return an object representing an article that follows the current article according to the system's default sorting rule.

We pass{% nextArchive next %}The statement retrieves the data of the next article and assigns it tonextVariable. Similarly, it also needs to be judged.nextDoes the variable exist?

InnextWhen the variable exists, we can access the following properties:

• {{ next.Title }}: Get the title of the next article.
• {{ next.Link }}Get the link address of the next article.
• {{ next.Thumb }}Get the thumbnail address of the next article.

Here is an example of the template code to implement navigation to the next article.

{% nextArchive next %}
<div class="next-article-nav">
  {% if next %}
    <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
      <img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" class="article-thumb">
      <span class="article-title">{{ next.Title }}</span>
    </a>
  {% else %}
    <span class="no-next-article">没有下一篇文章了</span>
  {% endif %}
</div>
{% endnextArchive %}

This code logic is similar to the previous article, ensuring navigation is provided when there is a next article, otherwise a prompt is displayed.

Complete example with **practice

In the actual website article detail page, we usually place the navigation for the previous and next articles side by side to provide a continuous reading experience.

A typical article detail page footer navigation structure may look like this:

<article class="article-detail-content">
  <!-- 这里是当前文章的内容 -->
</article>

<nav class="article-pagination">
  {% prevArchive prev %}
  <div class="nav-item prev-article">
    {% if prev %}
      <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
        <img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="thumb">
        <span class="label">上一篇</span>
        <span class="title">{{ prev.Title }}</span>
      </a>
    {% else %}
      <span class="placeholder">没有上一篇文章了</span>
    {% endif %}
  </div>
  {% endprevArchive %}

  {% nextArchive next %}
  <div class="nav-item next-article">
    {% if next %}
      <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">
        <img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" class="thumb">
        <span class="label">下一篇</span>
        <span class="title">{{ next.Title }}</span>
      </a>
    {% else %}
      <span class="placeholder">没有下一篇文章了</span>
    {% endif %}
  </div>
  {% endnextArchive %}
</nav>

During the implementation process, it is recommended to place these code snippets in the template file of the article detail page (for example{模型table}/detail.htmlMeanwhile, using CSS to style these navigation elements, making them consistent with the overall visual style of the website, thus providing users with a better reading experience.By reasonably using these tags, we can significantly improve the fluidity and user engagement of the website content.

Frequently Asked Questions (FAQ)

1.prevArchiveandnextArchiveHow to determine the 'previous' and 'next' articles of an article?

Of Security CMSprevArchiveandnextArchiveTags are usually based on the publication time of the article (CreatedTimeOr sort by article ID to determine the nearest articles. They will automatically search in the context of the current article, such as in the same category or throughout the site.These tags do not accept additional sorting parameters and therefore follow the default system sorting logic or that determined by the content model.

2. Can I also get other information about the previous/next article besides the title, link, and thumbnail?

Of course you can.prevArchiveandnextArchiveThe object returned by the tag witharchiveDetailThe label returns an object structure similar, so you can access almost all fields of the article. For example, you can through{{ prev.Description }}Get the summary of the previous article through{{ next.Views }}Get the next article's view count. You can check the AnQiCMS template tag document for more information.archiveDetailList of all available fields, these fields are also applicable toprevandnextObject.

3. If the article does not have a thumbnail,{{ prev.Thumb }}what will be displayed?

If the article does not have a thumbnail set explicitly,{{ prev.Thumb }}(or{{ next.Thumb }}It will usually return an empty string. To avoid broken image icons on the page, you can use conditional judgment in the template, for example:

{% if prev.Thumb %}
  <img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="thumb">
{% else %}
  <img src="/static/images/default-thumb.png" alt="无图" class="thumb"> {# 显示默认缩略图 #}
{% endif %}

Or, you can also configure the default thumbnail in the AnQiCMS backend "Content Settings".This way, when the article does not have a specific thumbnail, the system will automatically use the default image you uploaded.