How to determine if the `linkList` friend link tag list is empty and avoid displaying an empty tag?

As an experienced website operations expert, I have accumulated rich experience in content management and template optimization for AnQiCMS.I know well that a smooth, beautiful, and quickly loaded website cannot be achieved without meticulous attention to every detail.linkListWhen the friend link tag list is empty, avoid displaying redundant empty tags.

Avoid displaying empty tags: AnQi CMSlinkListThe elegant way to handle friend link tags

Friendship links are an important way for websites to refer traffic to each other and enhance SEO weight. They are usually presented in the form of a list in the footer or sidebar of a website. AnQiCMS's powerful template system throughlinkListTags, allowing easy calling and displaying of these links.However, in actual operation, the友情链接 may be temporarily empty for various reasons (such as cooperation adjustments, data migration, or initial non-configuration).<ul>/<div>Or other packaging HTML tags, which not only affects the page aesthetics, but may also cause unnecessary DOM structure redundancy.

How can one elegantly solve this problem, making the friendship link area 'disappear silently' when the list is empty? AnQiCMS provides several flexible and practical methods.

Analyze the problem: Why do empty tags appear?

When we uselinkListWhen obtaining friendship links, the following structure is usually adopted:

{% linkList friendLinks %}
    <div class="friend-links-section">
        <h3>友情链接</h3>
        <ul>
            {% for item in friendLinks %}
            <li><a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a></li>
            {% endfor %}
        </ul>
    </div>
{% endlinkList %}

In this code,{% for item in friendLinks %}The loop will only handle actual friendship link data. IffriendLinksThe list is empty,forThe content inside the loop will not be rendered, but this does not mean that the external content will not be rendered<div class="friend-links-section">/<h3>and<ul>The label will also disappear. The browser will still parse and display these empty tags, resulting in an empty title and list area on the page, which is clearly not what we want to see.

Solution One: Skillfully UtilizeifConditional judgment

AnQiCMS template engine supports a powerful conditional judgment syntax similar to Django.linkListTags will assign the result to a variable after obtaining data (for example, in the previous example,friendLinks). If no friendship link is configured,friendLinksThe variable will be an empty array or slice. We can take advantage of this to check whether the variable contains data before rendering any HTML structure.

{% linkList friendLinks %}
    {% if friendLinks %} {# 核心判断：如果friendLinks不为空，则渲染以下内容 #}
    <div class="friend-links-section">
        <h3>友情链接</h3>
        <ul>
            {% for item in friendLinks %}
            <li><a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a></li>
            {% endfor %}
        </ul>
    </div>
    {% endif %} {# 结束条件判断 #}
{% endlinkList %}

By adding an outer layer,{% if friendLinks %}we ensure that only whenfriendLinksthere is actually data in the variable,<h3>including the title and<ul>the entire friend link block including the list will be rendered. IffriendLinksit is empty, thenifThe code within the statement will be completely skipped, and no HTML tags related to the friendship link will appear on the page, thus achieving a perfect 'disappearance'.

Solution two:for...emptyThe Benefits of Syntactic Sugar

AnQiCMS template engine also provides a more concisefor...emptyA structure specifically used to handle the case of an empty loop list. This syntax sugar not only avoids rendering an empty list but also provides a friendly prompt message when the list is empty.

{% linkList friendLinks %}
    <div class="friend-links-section">
        <h3>友情链接</h3>
        <ul>
            {% for item in friendLinks %} {# 循环友情链接项 #}
            <li><a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a></li>
            {% empty %} {# 当friendLinks为空时，执行这里的内容 #}
            <li>暂无友情链接，敬请期待！</li>
            {% endfor %}
        </ul>
    </div>
{% endlinkList %}

This method compared to pureifjudgment, is more focused on handling empty states within the *list container*. It will retain<h3>including the title and<ul>labels, but when the list is empty, it will<ul>Internal display the prompt information<ul>If your design requires that the title and a "No Link" prompt be retained even when there are no links, thenfor...emptyis a very suitable choice.

If you wish to have the entirefriend-links-sectionThe block does not display at all when there are no links,if friendLinksthe solution would be more direct. But if you just want to replace the list content,for...emptyit is more elegant and concise.

**Thoughts on Practice and Template Design

In actual project development, the choice of method depends on your specific design requirements.

• If both the list content and the title need to disappear completely when there is no data: Preferred{% if 变量名 %}...{% endif %}Wrap the entire content block.
• If the list container (such as<ul>) and the title need to be retained, but the list items are empty and a prompt text is displayed:{% for item in 变量名 %}...{% empty %} 提示信息 {% endfor %}this would be a better choice.

---

Common Questions (FAQ)

Q1: Why did I use{% if friendLinks %}but still displays an emptydivorulTags?

A1:This is usually because yourifThe range of judgment is not wide enough. Please make sure that your{% if friendLinks %}condition judgment wraps all *HTML tags you want to hide when the friendship link is empty, including the outermostdivcontainer and titleh3andulLabel. Ififonly wrapped.ulso thatdivandh3It will still be rendered.

Q2:if friendLinksandfor...emptyWhat are the main differences between these two methods of handling empty lists? Which one should I choose?

A2:The main difference lies in the granularity of control.

• if friendLinks: Used to determine if the entire data set exists or contains content. IffriendLinksis empty, it will prevent the entire friendship link *block* including the title from being rendered.
• for...emptyUsed primarily to handle *internal* content in loops. IffriendLinksis empty, it will skipforrendering of data items in the loop, instead renderingemptythe prompt information inside the tag, but will not hide the wrapperforThe outer HTML container for loops (such asulordiv). Choose which one depends on your design goal: if you want the entire friend link area (including the title) to disappear completely when there are no links, chooseifIf you want to keep the title and display prompts like 'No link available', thenfor...emptyis more suitable.

Q3: Besides the友情链接 (friendship link), what other tags in AnQiCMS can be used to judge if a list is empty in a similar manner?

A3:This judgment of an empty list pattern is universal in the AnQiCMS template and is suitable for all tags that return array or slice type data. For example:

• archiveList(Document list)
• categoryList(Category List)
• pageList(Single Page List)
• navList(Navigation List)
• tagList(Tag List)
• commentList(Comment List) etc. As long as the variables for these tags may return empty data, they can be used{% if 变量名 %}or{% for item in 变量名 %}{% empty %}Optimize the template display.