How to safely use the `prevArchive` tag in a template to display images and prevent empty image links?

In AnQiCMS template development, achieving smooth user experience and elegant page display is our core goal.Wherein, the 'Previous/Next' navigation on the article detail page is an important link to enhance user browsing depth and site stickiness.prevArchiveandnextArchiveSuch template tags allow us to easily guide users to related content.However, in this process, how to safely and beautifully display the pictures of related articles, and avoid annoying broken image links, has become a detail worth in-depth discussion.

Today, let's talk about how to discuss how to use AnQiCMS templates, especially usingprevArchivetags, cleverly handle image display, and say goodbye to the trouble of empty image links.

UnderstandingprevArchiveLabel and its image attributes

First, let's take a look back atprevArchiveLabel function. According to the AnQiCMS template tag convention,prevArchiveUsed to obtain the data of the previous document of the current article. When we call it in the template, we usually write it like this:

{% prevArchive prev %}
  {# 在这里使用prev对象来展示上一篇文章的信息 #}
{% endprevArchive %}

Here,prevIt represents the object of the previous article. It includes such asId(Document ID),Title(Title),Link(Link) and core information. For images,prevusually providesThumb(Document cover thumbnail) andLogo(Document cover first image) These fields. Ideally, we can use them directly to display images:

<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" />

However, the problem often lies here: not all articles upload thumbnail or cover images.prev.Thumborprev.Logois empty, then<img>Tagssrcthe attribute will becomesrc=""This will display as a broken icon in the browser, severely affecting the visual professionalism and user experience of the website.

Potential issues with empty image links

Ansrc=""The image link, not just visual incoherence. From a technical perspective, it may lead to:

  1. User experience is compromised:The broken icon makes the page look incomplete, even making the user think that content is missing or there is a problem with the website.
  2. Additional HTTP requests:Some browsers may try to interpret emptysrcParsed as the URL of the current page, thus initiating unnecessary HTTP requests, slightly increasing the server load.
  3. Not conducive to SEO:Although the impact is minimal, a page filled with broken images may be considered poor user experience by search engines, indirectly affecting rankings.

Therefore, we need a robust strategy to deal with this situation.

Strategy and practice of secure image display

To prevent the appearance of empty image links, we can introduce some logical judgments and backup mechanisms in the template. This mainly includes the following steps:

First step: Check if the previous document exists

Before attempting to display any information, we must first confirmprevArchiveWhether the previous document was successfully retrieved. If there is no previous document, there is no need to continue processing the image.

{% prevArchive prev %}
  {% if prev %}
    {# 存在上一篇文档，继续处理 #}
  {% else %}
    <span class="no-prev-article">没有上一篇了</span>
  {% endif %}
{% endprevArchive %}

Step 2: Determine if the previous document has available images

After confirmingprevAnQiCMS typically providesThumbThumbnail andLogo（First Image）field, we can use thumbnails preferentially, and if thumbnails are not available, then consider using the first image.

”`twig {% prevArchive prev %} {% if prev and prev.Link %} {# Ensure that the prev object exists and has a valid link #}

<a href="{{ prev.Link }}" title="{{ prev.Title }}">
  {% if prev.Thumb %}
    <img src="{{ prev.Thumb }}" alt