What is the correct syntax and example of using the `prevArchive` tag?

Smart connection content stream: In-depth analysis of AnQiCMSprevArchiveThe correct usage and practice of tags

In the daily operation of AnQiCMS (AnQiCMS), we know that providing users with a smooth reading experience is the key to retaining visitors and enhancing the value of the website.A great website is not only rich in content, but also seamless in the connection between content, guiding users to naturally explore more information.Today, as an experienced website operation expert, I will take everyone deep into a seemingly simple but very practical template tag in AnQiCMS -prevArchiveIt can help us intelligently display the "Previous Article" content on the document detail page, thus optimizing the user journey and the internal link structure of the website.

prevArchiveTags: Make content flow more intelligently

Imagine if, while immersed in the reading of an article, a related or immediately preceding 'previous article' is recommended at the end, it would undoubtedly greatly extend the user's stay on the website and encourage them to explore more content.prevArchiveLabels are born for this. It can intelligently obtain the data of the previous document in the current document sequence based on specific logic, whether according to the publication time, ID order, or other default sorting rules set by the background, it can automatically judge and extract.

The strength of this tag lies in its 'context-aware' ability. You do not need to manually specify the ID of the previous article, nor do you need complex query logic,prevArchiveIt will automatically understand the document on the current page and find its 'previous sibling'.This means great convenience and efficiency for content operators, without having to worry about link expiration after article updates or the hassle of manual adjustments.

prevArchiveCorrect usage of tags syntax

In the template system of AnQiCMS,prevArchiveThe syntax is very concise and intuitive, it follows the style of the Django template engine, using single curly braces and percent signs to define tags, and double curly braces for outputting variables:

{% prevArchive 变量名称 %}
  {# 在这里使用变量名称访问上一篇文档的数据 #}
{% endprevArchive %}

here,变量名称Is a placeholder you can customize, for exampleprevOnce you have defined this variable name, you can access the data of the previous document by this variable name{% prevArchive %}and{% endprevArchive %}between them.

It is worth emphasizing that,prevArchiveThe tag itselfNo additional parameters are requiredUnlikearchiveListorarchiveDetailsuch tags needid/categoryIdormoduleIdetc. parameters to specify the target to be obtained,prevArchiveThe design初衷 is to provide an automatic, intelligent 'previous article' navigation, which will work automatically based on the document context loaded on the current page.This is the core of its convenience.

How to access the data of the previous document?

Once you pass{% prevArchive prev %}DefinedprevVariable, you can access the ordinary document object like this, through the dot (.The ） operator is used to obtain various attributes of the previous document. The following are some commonly used and practical fields that can help you build rich navigation information for the previous document:

  • IdThe unique ID of the previous document.
  • TitleThe title of the previous document, which is most commonly used for links.
  • LinkThe complete link address of the previous document, used directly for<a>label'shrefProperty.
  • DescriptionPrevious document's brief description or summary.
  • CategoryIdID of the category of the previous document.
  • ViewsPage views of the previous document.
  • Logo: The large image address of the main or cover image of the previous document.
  • Thumb: The thumbnail address of the previous document, suitable for displaying small images in navigation.
  • CreatedTime: The timestamp of the previous document's publication. This usually needs to be paired withstampToDateFiltered for formatting, for example.{{ stampToDate(prev.CreatedTime, "2006-01-02") }}.
  • UpdatedTime: The timestamp of the previous document's update, which also needs to be formatted.

Practical Example: Make the 'Previous Article' navigation lively

In practical applications, we usually place the 'Previous Article' navigation at the bottom or sidebar area of the document detail page. In order to ensure the robustness of the user experience, we mustfirst judgeprevDoes the variable existBecause if the current document is already the first article in the logical sequence, there will not be a previous document.

Example 1: Pure text link for 'Previous' navigation

This is the most common usage, simple and direct, suitable for most scenarios.

{# 在文档详情页的底部 #}
<div class="article-navigation">
  {% prevArchive prev %}
    {% if prev %}
      <a href="{{ prev.Link }}" title="{{ prev.Title }}">« 上一篇：{{ prev.Title }}</a>
    {% else %}
      <span>« 没有更早的文章了</span>
    {% endif %}
  {% endprevArchive %}
</div>

In this example, we first attempt to retrieveprevDocument. IfprevIf it exists, we create a link with itshrefWithprev.Link,titleattribute asprev.TitleAnd display the text and title of the previous article. Ifprevdoes not exist (i.e., the current article is already the first article), then a friendly prompt message will be displayed.

Example two: combined text and image 'Previous' navigation

If you want the navigation to be more attractive, you can combine it with thumbnails to display together, enhancing the visual effects and click-through rate.

{# 在文档详情页的侧边栏或内容底部 #}
<div class="previous-article-card">
  <h3>上一篇</h3>
  {% prevArchive prev %}
    {% if prev %}
      <a href="{{ prev.Link }}" class="card-link">
        {% if prev.Thumb %}
          <img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="card-thumbnail">
        {% else %}
          {# 如果没有缩略图，可以显示一个默认占位图或图标 #}
          <img src="/public/static/images/default-thumb.png" alt="默认缩略图" class="card-thumbnail">
        {% endif %}
        <span class="card-title">{{ prev.Title }}</span>
        <span class="card-date">{{ stampToDate(prev.CreatedTime, "2006-01-02") }}</span>
      </a>
    {% else %}
      <p class="no-prev-article">没有更早的文章了。</p>
    {% endif %}
  {% endprevArchive %}
</div>

Here, we not only show the title and link, but also throughprev.ThumbThe field displays a thumbnail. If the thumbnail does not exist, we also add an additional condition to display a default placeholder to maintain the consistency and aesthetics of the page layout.At the same time, throughstampToDateFormatted the publish time, providing more reference information for users

**Practice and Thought

  1. Clear navigation logic:prevArchiveThe "previous article" is determined based on the default document sorting of AnQiCMS backend (usually in reverse order by ID or publication time).Ensure that your content publication and sorting rules form a logical chain that is understandable to users.
  2. Elegantly handle no content situationsAlways use{% if prev %}Check if there is a previous document, to avoid blank links or error messages on the page.
  3. Pay attention to user experience.: The navigation text should be clear and understandable, for example, “Previous” with an arrow is more directional than just “Previous”. If possible, combining a thumbnail can significantly enhance attractiveness.
  4. SEO Value: Use reasonablyprevArchiveandnextArchiveTags can build a strong internal link network. This not only helps search engine spiders to better crawl and understand the structure of the website content, but also helps to pass page authority and improve the ranking of relevant pages.

Frequently Asked Questions (FAQ)

  1. Question: If the current article is the first in the category,prevArchivewhat will the tag display? Answer:If the current document is the first in its logical sequence (usually articles in the same category sorted by default), thenprevArchivethe tag will not