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

Enhance content relevance: Make good use of it in AnQiCMSprevArchiveShow the thumbnail or cover image of the previous document in the tag display

How to effectively guide users to browse more content, increase the dwell time on the website, and enhance the user experience, is a problem that every website operator needs to think deeply about in today's increasingly fragmented content consumption.AnQiCMS as an enterprise-level content management system focusing on efficiency and customization, provides many powerful template tags, making content operation and display extremely flexible.prevArchiveAdd a thumbnail or cover image of the previous document to your article detail page to create a more attractive content navigation.

Imagine, when the user finishes reading a wonderful article, they can directly see the title of the previous document at the bottom of the page, even a striking thumbnail. This will undoubtedly greatly increase the likelihood of the user clicking and continuing to read.This not only optimizes the user's reading path, but also helps search engines better understand the structural content of the website, enhancing the overall SEO performance.

KnowprevArchiveTag: Quick access to the previous document

AnQiCMS knows the importance of the correlation between content, and therefore built-in in the template systemprevArchiveandnextArchivesuch navigation tags.prevArchiveThe mission of the label is very pure: it will intelligently obtain all related data of the 'previous' document that is closely adjacent to the current document in terms of timeline or sorting.

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

Master the key fields: make the thumbnail and cover image vivid.

prevArchiveThe label will encapsulate it into a variable after obtaining the data of the previous document (usually named in English)prev），and expose a series of fields through this variable for us to call in the template. To display thumbnails or cover images, we mainly focus on the following two core fields:

  • prev.Logo：usually represents the "cover first image" of the document, that is, when editing the document in the background, if you upload multiple images or specify a cover image, it will be the one with the highest priority. It is usually larger in size and suitable as the main visual element.
  • prev.ThumbThe 'cover thumbnail' of the document.AnQiCMS provides flexible thumbnail processing methods in the content settings, you can set unified thumbnail size and cropping methods.If the thumbnail is not manually uploaded for the document, the system will also intelligently extract the first image from the document content and generate a thumbnail.

Except for images,prevArchiveother very useful fields are also provided, such asprev.Title(document title) andprev.Link(document link), they are an indispensable part of building a complete navigation experience.

实战演示：在模板中显示上一篇文章缩略图

Now, let's look at how to implement this feature in your AnQiCMS template through specific code examples. Usually, this code is placed in your article detail page template file (for example,article/detail.htmlor{模型table}/detail.htmlThe bottom of the section, after the current document content ends.

{# 使用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 are only rendered on the page when there is indeed a previous document.

Internally, we create a link pointing to{{ prev.Link }}and is used{{ prev.Title }}As a title. For thumbnail display, we further through{% if prev.Thumb %}To determine if the previous document actually has a thumbnail. If it exists, display it; if not, we provide a simple placeholder image./public/static/images/default-thumb.pngPlease replace it with your actual template path and requirements) to ensure the integrity of the page layout.

If you want to display a larger cover image instead of a thumbnail, justprev.Thumbwithprev.Logoas follows:

{# 示例：显示上一篇文档的封面首图 #}
{% 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 %}

**Practice and Tips

  1. Always performifJudgment：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 that your thumbnail or cover image is optimized, with moderate size and fast loading speed.AnQiCMS in the background content settings provides features such as automatic image compression and conversion to WebP format, taking advantage of these features can significantly improve page loading performance.
  3. Accessibility: For<img>Descriptive label addedaltProperties, 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 style：The above code only shows the structure, you need to adjust the CSS style according to the overall design style of the website..previous-article-navigation/.thumbnail-wrapper/.article-titleto add appropriate CSS styles to these classes, so that they can integrate into the page.
  5. Default image settingsIn the 'Content Settings' of AnQiCMS backend, you can set a 'default thumbnail'. If no thumbnail is uploaded for the article and you have not specifically handled it in the templateelseBranch, the system may use this default image instead.

Through 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.

Common Questions (FAQ)

**Q1:prevArchiveHow to determine the previous article