Question

我正在尝试在ExpressionEngine中输出通道条目的类别，以便我可以将它用作HTML元素的CSS类 - 请参阅下面示例中我尝试使用的{category_name}：

{exp:channel:entries 
    channel="panels"
    disable="member_data|pagination|trackbacks|categories|category_fields" 
    status="open"
    dynamic="no"
}

    <div class="panel {category_name}">
        <h4>{title}</h4>
        {if panel_image}
            <img src="{panel_image}" /> 
        {/if}       
        <p>{panel_text}</p>
        <a href="{panel_link}">{panel_link_text}</a>
    </div>

{/exp:channel:entries}

正如您所看到的，我正在尝试将条目的类别用作CSS样式“钩子”...但我无法弄清楚如何在模板中输出条目的类别。

我宁愿避免在我的模板中使用PHP。有谁知道如何改进我的代码？

Answer 1

在{category_name}周围换Categories Tag Pair，这将输出分配给条目的所有类别：

<div class="panel {categories}{category_name} {/categories}">

但是，这将输出您的类别的“漂亮名称” - 这对于CSS类或HTML元素上的ID是不可取的：

<div class="panel Category One Category Two ">

相反，请使用{category_url_title}，这是类别名称的网络安全版：

<!-- Categories Tag Pair code -->
<div class="panel {categories}{category_url_title} {/categories}">

<!-- Outputs the following -->
<div class="panel category_one category_two ">

要特别注意上面示例中的额外空间，这是将多个类别（CSS类）与空格分开所必需的。

如果您对标记过于强迫，可以使用backspace=参数在输出多个类别时删除尾随空格：

{categories backspace="1"}{category_url_title} {/categories}

如果您希望限制输出的类别数量或来自哪个类别组，请使用Categories Tag Pair Parameters来满足您的需求：

<!-- No whitespace is needed, since we're outputting only one category -->
{categories limit="1"}{category_url_title}{/categories}

以下是供审核的完整代码段：

{exp:channel:entries channel="panels" dynamic="no"}
    <div class="panel {categories}{category_url_title} {/categories}">
        <h4>{title}</h4>

        {if panel_image}
            <img src="{panel_image}" /> 
        {/if}

        <p>{panel_text}</p>
        <a href="{panel_link}">{panel_link_text}</a>
    </div>
{/exp:channel:entries}

ExpressionEngine中的输出条目类别

1 个答案: