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 dynamically adding CSS classes based on the boolean value 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, allowing templates to be highly customized for different business needs.

Understand the custom boolean field in AnQiCMS

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

  1. Single selection field：Create a single-choice (radio) or dropdown selection (select) field, options set to "Yes/No
  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 crucial in determining its true or false nature.

Get the value of the custom field

In AnQiCMS template, we mainly usearchiveDetailorarchiveParamstags to get custom field values of articles, products, and other contents.

Assuming you have created a custom field in the content model, for example, namedis_featured（representing “whether recommended”），it is set to a single selection type, with options “yes” and “no”. In the article detail page template, you can retrieve 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_featuredvalue (e.g., "yes" or "no").

Judge boolean values and dynamically add CSS classes

获取到自定义字段的值后，下一步就是判断其真假，并根据判断结果动态地为 HTML 元素添加 CSS 类。AnQiCMS 的模板引擎支持强大的条件判断 ({% if %}Labels) and filters, making this task very intuitive.

Considering that custom fields may be stored as strings ("yes", "no", "true", "false") or numbers (1, 0), we can cleverly utilizeyesnoFilter for general judgment.yesnoThe filter can map a value to one of three states: “yes”, “no”, or “maybe”. We can also customize these mappings.

Let us use the aboveis_featured_valueVariable as an 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 '是', then return the string '是'; if it equals '否', then return '否'; if it is neither of these (for example, if the field is not filled in or is empty), then return an empty string.
  • == "是"：we checkyesnoThe filter returns whether the result is "yes", thereby determining the boolean state as 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 useintegerThe filter makes the following 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 == 1It willis_promoted_valueconvert to an integer and then check if it is equal to 1.

Actual application scenarios

Dynamically add CSS classes has extensive application value in website operation:

  1. Highlight important contentHighlight articles where the 'Recommended' field is true or use a different background color.
  2. Special layout processingTo provide exclusive layout styles for product cards marked as 'VIP Content' and attract user clicks.
  3. Visual feedbackEnglish: According to content status (such as the "Out of stock" field is true) dynamically add a gray mask or "SOLD OUT" label.
  4. English: A/B testThrough different CSS classes to test the visual effects of page elements and optimize the user experience.

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

Common Questions (FAQ)

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

You can directly useintegerThe filter converts field values to integers for judgment. For example, if the custom field name isis_activeyou 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 can I determine which one is true?

Similar to the 'yes/no' examples in the article, you can useyesnofilters and customize 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 report an error?

AnQiCMS template engine handles null values (nil or empty strings) very robustly. Directly in{% if %}using variables in tags, such as{% if custom_field_value %}