How to use the `prevArchive` tag to display the thumbnail or cover image of the previous document?

Enhance content relevance: Use AnQiCMS cleverlyprevArchiveTag displays the thumbnail or cover image of the previous document

Today, with the fragmentation of content consumption, how can website operators effectively guide users to browse more content, improve the stay time on the website, and enhance the user experience, is a problem that needs to be deeply considered by each website operator.AnQiCMS as a highly efficient and customizable enterprise-level content management system provides a variety of powerful template tags, making content operation and display extremely flexible.Today, we will delve into how to make use of one of the very practical tags -prevArchiveAdd a thumbnail or cover image of the previous document to your article detail page to build a more attractive content navigation.

Imagine, after a user reads an excellent article, they can clearly see the title of the 'previous' document at the bottom of the page, even a striking thumbnail. This undoubtedly greatly increases the likelihood of the user clicking and continuing to read.This optimizes the user's reading path and also helps search engines better understand the structure of the website content, improving the overall SEO performance.

Get to knowprevArchiveTag: Quick access to the previous document

AnQiCMS knows the importance of the association between content, therefore it has built-in such a navigation tag in the template system.prevArchiveandnextArchivesuch navigation tags.prevArchiveThe tag's mission is very pure: it will intelligently obtain all related data from the "previous" document immediately adjacent to the current document in the timeline or sorting.

The strength of this tag lies in its automation and context-aware ability.You do not need to pass any parameters to it; it will automatically locate the previous content based on the current document's publication time, category, and the system's default sorting rules.If the current document is already the first in the series, thenprevArchiveThis will not return any data, this needs to be paid special attention to when writing the template to avoid blank pages or errors.

Master the key fields: make thumbnails and covers vivid.

prevArchiveThe tag encapsulates the data obtained from the previous document into a variable (usually namedprev)，and through this variable expose a series of fields for us to call in the template. To display thumbnails or cover images, we mainly focus on the following two core fields:

  • prev.LogoIt usually represents the "cover image" of a document, which is the highest priority image when editing documents in the background. If you upload multiple images or specify a cover image, it will be the one displayed first, typically larger in size and suitable as the main visual element.
  • prev.Thumb: Represents the cover thumbnail of the document. AnQiCMS provides flexible thumbnail processing methods in the content settings, where you can set uniform thumbnail size and cropping methods.If the thumbnail of the document is not manually uploaded, the system will also intelligently extract the first image from the document content and generate a thumbnail.

In addition to images,prevArchiveit also provides other very useful fields such asprev.Title(Document Title) andprev.Link(Document Link), they are an indispensable part of building a complete navigation experience.

Demonstration in practice: Display the thumbnail of the previous document in the template

Now, let's look at a specific code example to see how to implement this feature in your AnQiCMS template. Usually, this code is placed in your article detail page template file (such asarticle/detail.htmlor{模型table}/detail.htmlAt the bottom, after the end of the current document content.

{# 使用prevArchive标签获取上一篇文档的数据，并赋值给变量prev #}
{% prevArchive prev %}
    {# 重要的判断：只有当存在上一篇文档时才显示相关内容 #}
    {% if prev %}
    <div class="previous-article-navigation">
        <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
            <div class="thumbnail-wrapper">
                {# 判断prev.Thumb是否存在，存在则显示缩略图，否则可以显示默认图或留空 #}
                {% if prev.Thumb %}
                <img src="{{ prev.Thumb }}" alt="上一篇：{{ prev.Title }}" class="article-thumbnail">
                {% else %}
                {# 如果没有缩略图，可以考虑显示一个默认的占位图 #}
                <img src="/public/static/images/default-thumb.png" alt="无缩略图" class="article-thumbnail default-thumbnail">
                {% endif %}
            </div>
            <div class="article-info">
                <span class="navigation-label">上一篇</span>
                <h3 class="article-title">{{ prev.Title }}</h3>
            </div>
        </a>
    </div>
    {% endif %}
{% endprevArchive %}

In this code, we first use{% prevArchive prev %}Tag to get the data of the previous document. Next, a{% if prev %}The condition judgment is crucial, it ensures that navigation elements related to the previous document are rendered to the page only when the previous document actually exists.

Internally, we created a link pointing to{{ prev.Link }}, and use{{ prev.Title }}As a title. For the display of thumbnails, we further through{% if prev.Thumb %}To determine whether the previous document actually has a thumbnail. If it exists, display it; if not, we have provided a simple placeholder (/public/static/images/default-thumb.pngPlease replace it according to your actual template path and requirements), in order to ensure the integrity of the page layout.

If you want to display a larger cover image instead of a thumbnail, justprev.ThumbReplaceprev.Logoand it is done:

{# 示例：显示上一篇文档的封面首图 #}
{% prevArchive prev %}
    {% if prev %}
    <div class="previous-article-navigation large-cover">
        <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">
            <div class="cover-image-wrapper">
                {% if prev.Logo %}
                <img src="{{ prev.Logo }}" alt="上一篇：{{ prev.Title }}" class="article-cover-image">
                {% else %}
                <img src="/public/static/images/default-cover.png" alt="无封面图" class="article-cover-image default-cover">
                {% endif %}
            </div>
            <div class="article-info">
                <span class="navigation-label">上一篇</span>
                <h3 class="article-title">{{ prev.Title }}</h3>
            </div>
        </a>
    </div>
    {% endif %}
{% endprevArchive %}

**Practical Tips and Warnings

  1. Always performifthe judgment.Whether it isprevthe variable itself, orprev.Thumborprev.LogoIt is a good habit to make a judgment before calling. This can effectively avoid errors or abnormal display on the page due to missing data.
  2. Image optimizationEnsure your thumbnail or cover image is optimized, with moderate size and fast loading speed.AnQiCMS provides image auto-compression and conversion to WebP format in the background content settings, making good use of these features can significantly improve page loading performance.
  3. Accessibility: for<img>Add descriptive labels toaltProperties, not only friendly to SEO, but also help visually impaired users better understand the content of images, and improve the overall accessibility of the website.
  4. Custom styleThe above code only shows the structure, you need to add appropriate CSS styles according to the overall design style of the website for.previous-article-navigation/.thumbnail-wrapper/.article-titleclasses, so that they integrate into the page.
  5. Default image settingsIn the AnQiCMS backend's 'Content Settings' section, you can set a 'default thumbnail'. If the article does not upload a thumbnail and you have not specifically handled it in the template.elseBranch, the system may use this default image instead.

By using the above method, you can not only easily display the thumbnail or cover image of the previous document on the AnQiCMS website, but also provide users with a more smooth and intuitive browsing experience.This is the embodiment of AnQiCMS as an enterprise-level content management system, committed to empowering content operations through technical means.

Frequently Asked Questions (FAQ)

**Q1:prevArchiveHow does the tag determine the “Previous”