Effective organization and convenient navigation of website content is the key to improving user experience and extending visit duration.When the visitor is immersed in your article, if they can seamlessly jump to related or adjacent content, it will undoubtedly greatly enhance their browsing continuity.AnQiCMS as a fully functional content management system provides intuitive and powerful template tags, helping us easily implement the display of "Previous" and "Next" document links and titles on article detail pages.

Understand the template mechanism of AnQiCMS

The AnQiCMS template system adopts a syntax style similar to Django, which allows partners familiar with front-end development to get started quickly. In the template files, we mainly use two ways to display content or control logic: using double curly braces{{变量}}Output the value of the variable, as well as using single curly braces and percent signs{% 标签 %}To execute logical judgment, loop traversal, or call specific function modules.For the "Previous" and "Next" navigation on the article detail page, AnQiCMS has built-in tags that can intelligently identify the current article and provide data for adjacent articles.

Core function:prevArchiveandnextArchiveTag

Need to be on the article detail page (usually corresponding to template files such asarchive/detail.htmlIn it show the "Previous" and "Next" articles, we need to useprevArchiveandnextArchivethese tags. They work in a very simple way:

  • prevArchiveTag：Used to obtain the 'previous' article data in the order of publication time of the current article.
  • nextArchiveTag：Used to obtain the 'next' article data in the order of publication time of the current article.

These tags do not require additional parameters, the system will automatically find the corresponding adjacent articles based on the current article ID and category (or other internal logic).They will return a variable containing detailed information about the article, if there is no previous or next one, it will return an empty value.We can take advantage of this feature to flexibly control the display of navigation.

These tags provide variables that include the article'sId/Title(Title),Link(Link),Description(Description),Thumb(thumbnail) and other rich information, which is enough to meet our navigation needs.

Implementing the link and title of the previous article

Assuming we want to display a navigation link to the previous article at the bottom of the article. We can write the code in the template like this:

<div class="article-prev-nav">
  {% prevArchive prev %}
    {% if prev %}
      <a href="{{ prev.Link }}" title="{{ prev.Title }}">
        « 上一篇: {{ prev.Title }}
      </a>
    {% else %}
      <span class="no-prev">« 没有了</span>
    {% endif %}
  {% endprevArchive %}
</div>

The meaning of this code is:

  1. {% prevArchive prev %}This line of code will attempt to get the previous article data of the current article and assign it to a variable namedprev.
  2. {% if prev %}We use conditional judgment to checkprevwhether the variable is empty. IfprevExists (i.e., there is a previous article), then executeifThe code within the block.
  3. <a href="{{ prev.Link }}" title="{{ prev.Title }}">...</a>: Here, we created a hyperlink.{{ prev.Link }}Will output the URL address of the previous article, and{{ prev.Title }}It will display the title of the previous article as link text.titleThe settings of the attribute also help to improve user experience and SEO.
  4. {% else %}If:prevThe variable is empty (i.e., there is no previous article, such as the current article is the first in the category), then executeelseThe code within the block.
  5. <span class="no-prev">« 没有了</span>: Display a prompt message to inform the user that there are no earlier articles. You can hide or beautify this prompt according to your design requirements.
  6. {% endif %}and{% endprevArchive %}: Turn off conditional judgment andprevArchive.

Implement the link and title of the next article

Similar to the implementation of the previous article, to display the link and title of the next article, we usenextArchiveTags:

<div class="article-next-nav">
  {% nextArchive next %}
    {% if next %}
      <a href="{{ next.Link }}" title="{{ next.Title }}">
        下一篇: {{ next.Title }} »
      </a>
    {% else %}
      <span class="no-next">没有了 »</span>
    {% endif %}
  {% endnextArchive %}
</div>

This code logic is exactly the same as the previous one, just thatprevthe variable is replaced withnext, and the text direction is adjusted.

Integrated into the article detail page template

In your article detail page template file (for example/template/您的模板目录/archive/detail.htmlYou can place these two navigation code snippets in the appropriate position, usually at the bottom of the article: 

<!-- 文章详情内容区域... -->
<div class="article-content">
  {{ archive.Content|safe }} {# 假设 archive 是当前文章变量，Content 是文章内容 #}
</div>

<div class="article-pagination-nav">
  <div class="article-prev-nav">
    {% prevArchive prev %}
      {% if prev %}
        <a href="{{ prev.Link }}" title="{{ prev.Title }}">
          « 上一篇: {{ prev.Title }}
        </a>
      {% else %}
        <span class="no-prev">« 没有了</span>
      {% endif %}
    {% endprevArchive %}
  </div>

  <div class="article-next-nav">
    {% nextArchive next %}
      {% if next %}
        <a href="{{ next.Link }}" title="{{ next.Title }}">
          下一篇: {{ next.Title }} »
        </a>
      {% else %}
        <span class="no-next">没有了 »</span>
      {% endif %}
    {% endnextArchive %}
  </div>
</div>
<!-- 其他模板底部内容... -->

By using the simple tag call and conditional judgment mentioned above, we can provide users with clear and convenient navigation functions for "Previous Article" and "Next Article" in the article detail page of AnQiCMS.This not only optimizes the internal link structure of the website, but also helps to enhance the user's browsing depth and the overall SEO performance of the website.

Frequently Asked Questions (FAQ)

**