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

Intelligent Content Flow Connection: Deep Analysis of AnQiCMSprevArchiveThe Correct Usage and Practice of Tags

In the daily operation of 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 lies in the seamless connection between the content, guiding users to naturally explore more information.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 a scenario where the user is immersed in reading an article. If, at the end, they are recommended a related article or a "previous" article that follows in the timeline, it would undoubtedly greatly extend the user's stay on the website and encourage them to explore more content.prevArchiveTags were born for this.It can intelligently retrieve the data of the previous document in the specific logical sequence of the current document, whether it is based on 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 don't 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 worrying about link expiration after article updates or the hassle of manual adjustments.

prevArchiveThe correct syntax of the tag usage

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

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

Here,变量名称is a placeholder that you can customize, for exampleprev. Once you define this variable name, you can access the data of the previous document{% prevArchive %}and{% endprevArchive %}by using this variable name between them.

It is worth emphasizing that,prevArchivethe tag itselfdoes not require any additional parameters. UnlikearchiveListorarchiveDetailthe tag that requiresid/categoryIdormoduleIdParameters to specify the target to be retrieved.prevArchiveThe original design intention was to provide an automatic and intelligent 'Previous Article' navigation that would work automatically based on the context of the document loaded on the current page.This is at the core of its convenience.

How to access the data of the previous document?

Once you have passed through{% prevArchive prev %}DefinedprevVariables, you can access them like a normal document object, by using a dot (.Use the ) operator to retrieve various attributes of the previous document. Here are some commonly used and practical fields that can help you build rich navigation information for the previous document:

  • Id【en】: The unique ID of the previous document.
  • Title【en】: The title of the previous document, which is most commonly used for links.
  • Link【en】: The full link address of the previous document, used directly for<a>Tagshrefproperties.
  • Description【en】Summary or abstract of the previous document.
  • CategoryId【en】ID of the category to which the previous document belongs.
  • Views【en】Page views of the previous document.
  • Logo【en】: The large image address of the main image or cover of the previous document.
  • Thumb【en】: The thumbnail address of the previous document, suitable for displaying small images in navigation.
  • CreatedTimeThis is the timestamp of the previous document's publication. It usually needs to be used withstampToDatea filter to format, for example{{ stampToDate(prev.CreatedTime, "2006-01-02") }}.
  • UpdatedTimeThis is the timestamp of the previous document's update, which also needs to be formatted.

Practice Example: Make the 'Previous Article' navigation vivid

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 user experience, we mustfirst judgeprevDoes the variable exist?Because if the current document is the first article in the logical sequence, there will be no 'Previous document'.

Example 1: 'Previous document' navigation for plain text links

This is the most common usage, simple and direct, suitable for the vast majority of 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 try to getprevthe document. Ifprevexists, we create a link whosehrefresponse forprev.Link,titleattribute ofprev.Titleand display the text and title of 'Previous Article'. Ifprevit does not exist (i.e., the current article is already the 'First Article'), a friendly prompt message will be displayed.

Example two: Navigation combining text and images

If you want the navigation to be more attractive, you can display it with thumbnails together to enhance the visual effect 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 display the title and link, but alsoprev.ThumbThe field shows the thumbnail.If the thumbnail does not exist, we have also added an additional condition check to display a default placeholder image, in order to maintain the consistency and aesthetics of the page layout.stampToDateformat the publishing time, providing users with more reference information.

**Practice and Reflection

  1. define navigation logic clearly:prevArchiveThe previous article is based on the default document sorting of AnQiCMS backend (usually in reverse order by ID or publishing time).Ensure that your content publication and sorting rules form a user-understandable logical chain.
  2. Handle empty situations elegantlyAlways use:{% if prev %}To determine if there is a previous document, avoid blank links or error messages on the page.
  3. Pay attention to user experienceThe navigation text should be clear and explicit, for example, « Previous » is more directional than just 'Previous'. If possible, combining thumbnails can significantly enhance attractiveness.
  4. SEO ValueUse it reasonablyprevArchiveandnextArchiveTags can build a powerful internal link network.This not only helps search engine spiders better crawl and understand the structure of the website content, but also passes on page authority, improving the ranking of related pages.

Common Questions and Answers (FAQ)

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