How to implement conditional judgment in templates, such as deciding whether to display an image based on whether the article has a thumbnail?

In website content presentation, images play a crucial role.However, not all content has corresponding thumbnails, or for the sake of design aesthetics and loading speed, we may need to decide based on the actual situation whether to display images, or even show different placeholders.AnqiCMS provides a flexible and powerful template engine, allowing us to easily implement this conditional image display logic, thereby enhancing the flexibility of website content and user experience.

This article will focus on how to determine whether to display an image in AnqiCMS templates based on whether the article has a thumbnail, and will detail the implementation method.

AnqiCMS Template's basic conditional judgment

AnqiCMS's template system borrows the syntax of Django template engine, and its conditional judgment mainly through{% if 条件 %}and{% endif %}The tag is used to implement. WhenifThe condition expression in the tag is true (True), its content will be rendered and displayed; otherwise, the content will be ignored.

For example, to judge a variablemyVariableIs it existent or not empty, it can be used directly:

{% if myVariable %}
    {# myVariable 存在且非空时显示这里的内容 #}
{% else %}
    {# myVariable 不存在或为空时显示这里的内容 #}
{% endif %}

This concise syntax makes it very intuitive to handle various logical judgments in templates.

Scene one: Determine if a single article has a thumbnail on the article detail page

The data of the current article is usually directly exposed in the template on the article detail pagearchiveObject. Therefore, we can directly accessarchive.Thumbfield to determine whether the current article has a thumbnail.archive.ThumbIt will return the path string of the thumbnail, if the article does not have a thumbnail set, this field will usually be an empty string.

Below is an example of code that determines and displays a thumbnail on an article detail page:

{# 假设这是文章详情页的模板（例如 detail.html） #}

<div class="article-content">
    <h1>{{ archive.Title }}</h1> {# 文章标题 #}
    <div class="article-meta">
        <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{{ archive.Views }}</span>
    </div>

    {# 判断文章是否有缩略图 #}
    {% if archive.Thumb %}
        <div class="article-thumbnail">
            <img src="{{ archive.Thumb }}" alt="{{ archive.Title }}" loading="lazy">
        </div>
    {% else %}
        {# 如果没有缩略图，可以显示一个默认的占位图 #}
        <div class="article-thumbnail-placeholder">
            <img src="/public/static/images/default-thumb.png" alt="无图" loading="lazy">
        </div>
        {# 或者，如果不想显示任何图片，可以直接省略 else 部分 #}
    {% endif %}

    <div class="article-body">
        {{ archive.Content|safe }} {# 文章内容，使用 safe 过滤器防止 HTML 被转义 #}
    </div>
</div>

In this example, we first check:archive.ThumbDoes the value exist. If it exists, show this thumbnail; if not, show a preset default placeholder image.

Scene two: Loop through each article to check if it has a thumbnail in the article list page

We usually use in the article list page,{% archiveList %}Label to get the article list and iterate through it. Inside the loop, the data of each article item will be accessed through a variable (for exampleitemorarticle). Similarly,item.ThumbTo judge the thumbnail status of each article.

Below is an example of code that implements conditional judgment and displays thumbnails on the article list page:

{# 假设这是文章列表页的模板（例如 list.html） #}

<div class="article-list">
    {% archiveList articles with type="page" limit="10" %} {# 获取分页文章列表，每页10篇 #}
        {% for article in articles %}
            <div class="article-item">
                {# 判断当前文章是否有缩略图 #}
                {% if article.Thumb %}
                    <div class="item-thumbnail">
                        <img src="{{ article.Thumb }}" alt="{{ article.Title }}" loading="lazy">
                    </div>
                {% else %}
                    {# 如果没有缩略图，显示一个列表页的默认占位图 #}
                    <div class="item-thumbnail-placeholder">
                        <img src="/public/static/images/default-list-thumb.png" alt="无图" loading="lazy">
                    </div>
                {% endif %}

                <div class="item-info">
                    <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
                    <p>{{ article.Description|truncatechars:120 }}</p> {# 截取文章描述 #}
                    <a href="{{ article.Link }}" class="read-more">阅读详情</a>
                </div>
            </div>
        {% empty %}
            {# 如果文章列表为空，显示提示信息 #}
            <p class="no-articles">目前还没有文章发布。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 列表页的分页导航 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
            {# 分页代码，此处省略具体实现，参考 AnqiCMS 分页标签文档 #}
        {% endpagination %}
    </div>
</div>

In this list page example, we traversearticlesEvery item in the setarticleobject, and for eacharticle.Thumbperform a conditional judgment, thereby dynamically displaying thumbnails or placeholder images for each article.

More flexible image judgment: Logo, Images and Custom Fields

ExceptThumbField, AnqiCMS also provides other fields related to images, you can judge according to your needs:

1. archive.Logo(Cover First Image)：通常代表文章的封面大图或主图。其判断方式与archive.Thumbsimilar.

   {% if archive.Logo %}
       <img src="{{ archive.Logo }}" alt="{{ archive.Title }}">
   {% endif %}
   

2. archive.Images（组图）：如果文章上传了多张图片作为组图，archive.ImagesIt will be an array of image paths (Slice).Check if the group image exists by checking the length of this array.

   <div class="article-gallery">
       <img src="{{ archive.Images[0] }}" alt="{{ archive.Title }} - 第一张图片"> {# 显示组图的第一张图片 #}
       {# 如果需要，也可以循环显示所有组图 #}
       {% for image_url in archive.