在 AnQiCMS 模板开发中，我们常常需要根据内容的特定属性来调整页面的展示样式。这其中就包括了依据自定义字段的布尔值（即真或假的状态）来动态添加 CSS 类，从而实现更加灵活和富有表现力的界面。

AnQiCMS 以其灵活的内容模型设计，允许用户为不同的内容类型（如文章、产品）创建各种自定义字段。这些自定义字段极大地丰富了内容的表现形式，使得模板可以针对不同的业务需求进行高度定制。

理解 AnQiCMS 中的自定义布尔字段

AnQiCMS 虽然没有直接提供一个名为“布尔值”的字段类型，但我们可以通过其他字段类型来模拟布尔逻辑。通常，这会通过以下方式实现：

  1. 单选字段：创建一个单选（radio）或下拉选择（select）字段，选项设置为“是/否”、“True/False”或“1/0”。
  2. 文本字段：直接输入“true”、“false”或“1”、“0”。
  3. 数字字段：存储“1”表示真，“0”表示假。

理解您的自定义字段是以何种形式存储布尔值的，是判断其真假的关键。

获取自定义字段的值

在 AnQiCMS 模板中，我们主要通过 archiveDetail 或 archiveParams 标签来获取文章、产品等内容的自定义字段值。

假设您在内容模型中创建了一个自定义字段，例如名为 is_featured（代表“是否推荐”），它被设置为单选类型，选项为“是”和“否”。在文章详情页的模板中，您可以这样获取这个字段的值：

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

这里，is_featured_value 变量将存储自定义字段 is_featured 的值（例如“是”或“否”）。

判断布尔值并动态添加 CSS 类

获取到自定义字段的值后，下一步就是判断其真假，并根据判断结果动态地为 HTML 元素添加 CSS 类。AnQiCMS 的模板引擎支持强大的条件判断 ({% if %} 标签) 和过滤器，这使得这项任务变得非常直观。

考虑到自定义字段可能存储为字符串（“是”、“否”、“true”、“false”）或数字（1、0），我们可以巧妙地利用 yesno 过滤器来进行通用判断。yesno 过滤器可以将一个值映射到“yes”、“no”或“maybe”三种状态，我们还可以自定义这些映射关系。

让我们以上面 is_featured_value 变量为例，如果它存储的是“是”或“否”：

<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>

在这个示例中：

  • is_featured_value|yesno:"是,否,"：这个部分是核心。它告诉 AnQiCMS 模板引擎，如果 is_featured_value 的值等于“是”，则返回字符串“是”；如果等于“否”，则返回“否”；如果不是这两者（例如字段未填写或为空），则返回空字符串。
  • == "是"：我们检查 yesno 过滤器返回的结果是否为“是”，以此来判断布尔状态为真。
  • featured-article：如果条件为真，这个 CSS 类就会被添加到 div 元素上。

如果您将自定义字段存储为数字（1 代表真，0 代表假），则可以使用 integer 过滤器进行判断：

{# 假设 '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>

这里，is_promoted_value|integer == 1 会将 is_promoted_value 转换为整数，然后判断是否等于 1。

实际应用场景

动态添加 CSS 类在网站运营中具有广泛的应用价值：

  1. 突出重要内容：将“是否推荐”字段为真的文章高亮显示，或使用不同的背景色。
  2. 特殊布局处理：为标记为“VIP 内容”的产品卡片提供专属的布局样式，吸引用户点击。
  3. 视觉反馈：根据内容状态（如“已售罄”字段为真）动态添加灰色蒙版或“SOLD OUT”标签。
  4. A/B 测试：通过不同的 CSS 类来测试页面元素的视觉效果，优化用户体验。

通过这种方式，您可以让您的 AnQiCMS 网站模板更加智能化，根据内容的属性自动适应并展示出**的用户体验。

常见问题 (FAQ)

1. 如果我的自定义字段是“数字”类型，存储 1 或 0 来表示布尔值，我应该如何判断？

您可以直接使用 integer 过滤器将字段值转换为整数进行判断。例如，如果自定义字段名为 is_active，您可以这样写： {% if archive.is_active|integer == 1 %}。

2. 我的自定义字段是“单选”类型，选项是“True”和“False”，如何判断哪个是真？

与文章中“是/否”的例子类似，您可以使用 yesno 过滤器并自定义映射值。例如： {% if custom_field_value|yesno:"True,False," == "True" %}。

3. 如果自定义字段可能为空（未设置），模板会如何处理，是否会报错？

AnQiCMS 模板引擎对空值（nil 或空字符串）的处理非常健壮。直接在 {% if %} 标签中使用变量，如 {% if custom_field_value %}