如何给`categoryList`返回的分类名称添加自定义的HTML样式或CSS类？

作为一名资深的网站运营专家，我深知网站内容的可读性与视觉美观度对于用户体验至关重要，而灵活的模板定制能力正是实现这一目标的关键。在安企CMS（AnQiCMS）中，即便是一个简单的分类列表，我们也有多种方式为其增添个性化的HTML样式或CSS类，从而提升网站的整体吸引力与功能性。今天，我们就来深入探讨如何为categoryList返回的分类名称赋予自定义的样式。

安企CMS以其Go语言的高效性与Django模板引擎的灵活语法，为我们提供了极大的创作自由。当我们使用categoryList标签来循环输出网站的分类时，通常会得到一系列分类名称。如何让这些分类名称在视觉上更加突出，或者根据不同的业务逻辑呈现不同的样式呢？核心思路在于巧妙地利用categoryList标签所暴露的分类数据，并通过条件判断或直接拼接的方式，为分类名称所在的HTML元素添加独特的CSS类或内联样式。

理解categoryList标签的核心输出

在使用categoryList标签时，我们通常会这样编写模板代码：

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <a href="{{ item.Link }}">{{ item.Title }}</a>
    {% endfor %}
{% endcategoryList %}

在这里，item变量代表了当前循环的每一个分类对象。它不仅仅包含分类的Title（名称）和Link（链接），还包含了一系列有用的属性，例如Id（分类ID）、IsCurrent（是否当前分类）、HasChildren（是否有子分类）等等。正是这些属性，为我们定制样式提供了丰富的“抓手”。

策略一：利用内置属性添加通用或特定样式

最直接且推荐的方式是利用item对象中已有的属性，为分类名称的容器元素（通常是<a>标签或其内部的<span>）添加CSS类。

1. 根据是否为当前分类添加高亮样式 (IsCurrent) 网站导航中，当前用户所处分类往往需要高亮显示。IsCurrent属性是一个布尔值，当分类为当前页面所属分类时，其值为true。

   {% categoryList categories with moduleId="1" parentId="0" %}
       <ul class="category-nav">
           {% for item in categories %}
               <li class="nav-item">
                   <a href="{{ item.Link }}" class="category-link {% if item.IsCurrent %}active{% endif %}">
                       {{ item.Title }}
                   </a>
               </li>
           {% endfor %}
       </ul>
   {% endcategoryList %}
   

   然后，您可以在您的CSS文件中定义.active类的样式，例如：

   .category-nav .category-link.active {
       color: #007bff; /* 蓝色字体 */
       font-weight: bold; /* 加粗 */
       border-bottom: 2px solid #007bff; /* 底部边框 */
   }
   

2. 根据分类ID添加独有样式 (Id) 如果某个特定的分类需要完全独特的视觉风格，我们可以利用其唯一的Id。

   {% categoryList categories with moduleId="1" parentId="0" %}
       <ul class="category-nav">
           {% for item in categories %}
               <li class="nav-item">
                   <a href="{{ item.Link }}" class="category-link category-id-{{ item.Id }}">
                       {{ item.Title }}
                   </a>
               </li>
           {% endfor %}
       </ul>
   {% endcategoryList %}
   

   这样，ID为5的分类就会拥有category-id-5这个类名，您可以在CSS中精准控制：

   .category-nav .category-id-5 {
       background-color: #ffc107; /* 黄色背景 */
       color: #333;
       padding: 5px 10px;
       border-radius: 5px;
   }
   

3. 根据是否含有子分类添加样式 (HasChildren) 对于那些包含下级分类的父级分类，有时需要视觉上的提示，比如一个小箭头图标或不同的字体样式。

   {% categoryList categories with moduleId="1" parentId="0" %}
       <ul class="category-nav">
           {% for item in categories %}
               <li class="nav-item">
                   <a href="{{ item.Link }}" class="category-link {% if item.HasChildren %}has-sub-category{% endif %}">
                       {{ item.Title }}
                       {% if item.HasChildren %}<i class="icon-arrow-down"></i>{% endif %} {# 假设您有icon-arrow-down图标类 #}
                   </a>
               </li>
           {% endfor %}
       </ul>
   {% endcategoryList %}
   

   CSS中可以这样定义：

   .category-nav .category-link.has-sub-category {
       font-style: italic; /* 斜体 */
   }
   .category-nav .has-sub-category .icon-arrow-down {
       margin-left: 5px;
       /* 样式化箭头图标 */
   }
   

策略二：根据分类名称内容进行条件判断与样式定制

当您需要根据分类名称的文本内容来应用样式时，可以结合模板的if逻辑判断和字符串过滤器。

例如，如果您想让“公司新闻”分类的名称显示为红色，而“行业动态”显示为绿色：

”`twig {% categoryList categories with moduleId=“1” parentId=“0” %}

<ul class="category-nav">
    {% for item in categories %}
        <li class="nav-item">