How to determine if the boolean value of a custom field in the AnQiCMS template is true and dynamically add a CSS class?

In AnQiCMS template development, we often need to adjust the display style of the page based on the specific attributes of the content.This includes adding CSS classes dynamically based on boolean values of custom fields (i.e., true or false status), thus achieving a more flexible and expressive interface.

AnQiCMS with its flexible content model design, allows users to create various custom fields for different content types (such as articles, products).These custom fields greatly enrich the expression of content, enabling templates to be highly customized for different business needs.

Understand the custom boolean field in AnQiCMS

Although AnQiCMS does not provide a field type named 'Boolean', we can simulate boolean logic through other field types. This is usually done in the following way:

1. Single choice field: Create a radio (radio) or dropdown (select) field with options set to "Yes/No", "True/False", or "1/0".
2. Text fieldEnter 'true', 'false', '1', or '0' directly.
3. Numeric fieldStore '1' for true, '0' for false.

Understanding how your custom field stores boolean values is key to determining its true or false nature.

Get the value of the custom field.

In the AnQiCMS template, we mainly usearchiveDetailorarchiveParamstags to obtain custom field values for articles, products, and other content.

Assuming you have created a custom field in the content model, such as namedis_featuredIt represents whether it is recommended, it is set to a single selection type, the options are yes and no. In the article detail page template, you can get the value of this field in this way:

{# 获取当前文档的自定义字段 'is_featured' 的值 #}
{% archiveDetail is_featured_value with name="is_featured" %}

here,is_featured_valueThe variable will store a custom fieldis_featuredThe value (for example, “yes” or “no”).*

Determine the boolean value and dynamically add a CSS class

After obtaining the value of the custom field, the next step is to judge its truth or falsity and dynamically add CSS classes to the HTML element. The AnQiCMS template engine supports powerful conditional judgments ({% if %}Tags and filters make this task very intuitive.

Considering that custom fields may be stored as strings ("yes","no","true","false") or numbers (1,0), we can cleverly utilizeyesnoA filter for general judgment.yesnoThe filter can map a value to one of the three states: "yes", "no", or

Let's go aboveis_featured_valueFor example, if it stores “yes” or “no”：“

<div class="article-item
    {%- if is_featured_value|yesno:"是,否," == "是" -%}
        featured-article
    {%- endif -%}
">
    <!-- 这里是文章内容 -->
    <h2 class="article-title">
        {{- archive.Title -}}
    </h2>
    <p class="article-description">
        {{- archive.Description -}}
    </p>
    {# 其他文章详情内容 #}
</div>

In this example:

• is_featured_value|yesno:"是,否,"This part is the core. It tells the AnQiCMS template engine ifis_featured_valueIf the value equals 'yes', return the string 'yes'; if it equals 'no', return 'no'; if it is neither of these (such as a field not filled in or empty), return an empty string.
• == "是": We checkyesnoWhether the result returned by the filter is "yes", thus determining the boolean state to be true.
• featured-article: If the condition is true, this CSS class will be added todivthe element.

If you store custom fields as numbers (1 represents true, 0 represents false), you can useintegera filter to make the judgment:

{# 假设 'is_promoted' 字段存储为 1 或 0 #}
{% archiveDetail is_promoted_value with name="is_promoted" %}

<div class="product-card
    {%- if is_promoted_value|integer == 1 -%}
        promoted-product
    {%- endif -%}
">
    <!-- 这里是产品卡片内容 -->
    <h3 class="product-name">
        {{- archive.Title -}}
    </h3>
    <span class="product-price">
        ¥{{- archive.Price -}}
    </span>
    {# 其他产品详情内容 #}
</div>

here,is_promoted_value|integer == 1Willis_promoted_valueconvert it to an integer and then check if it is equal to 1.

Application scenarios in practice

Dynamically adding CSS classes has a wide range of applications in website operations:

1. Highlighting important contentHighlight articles where the 'Recommended' field is true or use a different background color.
2. Special layout processing：To provide exclusive layout styles for product cards marked as “VIP Content”, attract user clicks.
3. Visual feedback: Add a gray overlay or 'SOLD OUT' label dynamically based on the content status (such as the 'sold out' field being true).
4. A/B test: Test the visual effects of page elements through different CSS classes to optimize the user experience.

In this way, you can make your AnQiCMS website template more intelligent, automatically adapting and displaying a **user experience.

Frequently Asked Questions (FAQ)

1. If my custom field is of 'number' type, storing 1 or 0 to represent boolean values, how should I judge?

You can use it directly.integerThe filter converts the field value to an integer for judgment. For example, if the custom field name isis_active, you can write it like this:{% if archive.is_active|integer == 1 %}.

2. My custom field is of 'single choice' type, with options 'True' and 'False'. How do I determine which is true?

Similar to the examples of "yes/no" in the article, you can useyesnoa filter and customize the mapping values. For example:{% if custom_field_value|yesno:"True,False," == "True" %}.

3. If the custom field may be empty (not set), how will the template handle it, will it cause an error?

AnQiCMS template engine handles null values (nil or empty strings) very robustly. It can be used directly in{% if %}tags, such as{% if custom_field_value %}