How to add custom HTML style or CSS class to the `categoryList` returned category name?

As an experienced website operation expert, I fully understand that the readability and visual aesthetics of the website content are crucial for user experience, and the flexible template customization ability is the key to achieving this goal.In AnQiCMS, even for a simple category list, we have multiple ways to add personalized HTML styles or CSS classes, thereby enhancing the overall attractiveness and functionality of the website.categoryListThe returned category name is given a custom style.

English CMS with its efficient Go language and the flexible syntax of Django templates provides us with great creative freedom. When we usecategoryListWhen looping to output the classification of a website, you will usually get a series of classification names.How can these category names be made more prominent visually, or presented with different styles according to different business logic?categoryListThe label exposes the classification data, and unique CSS classes or inline styles are added to the HTML elements containing the classification names through conditional judgment or direct concatenation.

UnderstandingcategoryListThe core output of the tag

When usingcategoryListWhen labeling, we usually write template code like this:

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

Here,itemThe variable represents each classification object in the current loop. It not only contains the classification ofTitle(Name) andLink(Link), also includes a series of useful properties, such asId(Category ID),IsCurrent(Whether the current category),HasChildren(Does it have subcategories) etc. It is these properties that provide us with a rich 'grasp' for customizing styles.

Strategy one: use built-in properties to add universal or specific styles

The most direct and recommended way is to useitemthe existing properties in the object, the container elements for category names (usually<a>tags or the elements within them<span>). Add CSS classes.

1. Highlight style added based on whether it is the current categoryIsCurrent)In the website navigation, the current category of the user is often highlighted.IsCurrentProperty is a boolean value, when categorized as the current page category, its value istrue.

   {% 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 %}
   

   Then, you can define in your CSS file.activethe style of the class, for example:

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

2. Add unique styles based on category ID (Id)If a particular category requires a completely unique visual style, we can make use of its uniqueId.

   {% 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 %}
   

   Thus, the category with ID 5 will havecategory-id-5This class name, you can control it precisely in CSS:

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

3. Add style based on whether it contains a subcategory (HasChildren)For categories that contain subcategories, sometimes a visual cue is needed, such as a small arrow icon or a different font style.

   {% 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 %}
   

   This can be defined in CSS as follows:

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

Strategy two: Make conditional judgment and style customization based on the category name content

When you need to apply styles based on the text content of the category name, you can combine with the template'sifLogical judgment and string filter.

For example, if you want the name of the 'Company News' category to be displayed in red and the 'Industry Dynamics' in green:

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

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