How to add custom HTML styles or CSS classes to the category names returned by `categoryList`?

As an experienced website operation expert, I know that the readability and visual aesthetics of website content are crucial for user experience, and the flexible template customization capability 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 to enhance the overall attractiveness and functionality of the website.Today, let's delve deep into how to use forcategoryListThe category name returns a custom style.

AnQi CMS, with its efficiency in Go language and the flexible syntax of Django template engine, provides us with great creative freedom. When we usecategoryListTags are usually used to loop through website categories and get a series of category names.How can we make these category names more prominent visually, or present different styles according to different business logic?The core idea lies in cleverly utilizingcategoryListThe category data exposed by the tag, and through conditional judgment or direct concatenation, add a unique CSS class or inline style to the HTML element where the category name is located.

UnderstandingcategoryListLabel core output

While usingcategoryListWhen labeling, we usually write the 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 category object in the current loop. It does not only contain the category'sTitle(Name) andLink(Link), it also includes a series of useful properties such asId(Category ID),IsCurrent(Whether the current category),HasChildren(Do they have subcategories) etc. It is these properties that provide us with a rich 'handle' for customizing styles.

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

The most direct and recommended way is to useitemexisting properties in the object, as a container element for category names (usually<a>or the internal<span>). Add CSS classes to it.

1. Highlight styles are added based on whether it is the current category (IsCurrent)In the website navigation, the category currently occupied by the user often needs to be highlighted.IsCurrentThe property is a boolean value, its value is set when the category is the category of the current pagetrue.

   {% 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 it 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 the category ID (Id)If a particular category needs a completely unique visual style, we can take advantage 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 accurately 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 hint 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:

   .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 judgments and style customization based on the content of the category name

When you need to apply styles based on the text content of the category name, you can combine the template with itifLogical judgments and string filters.

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

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

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