How to customize the `Spacer` character style and content before the subcategory in multi-level nested `categoryList`?

As a senior website operations expert, I am well aware of the importance of website navigation and content categorization for user experience and SEO.AnQiCMS (AnQi CMS) offers us powerful content display capabilities with its flexible template engine and rich tag system.categoryListSubcategory before the tagSpacerCharacter style and content.

Insight into the beauty of levels: Custom in Anqi CMScategoryListSubcategorySpacerThe mystery and practice of it

When building a content-rich website, a clear classification structure can greatly enhance user experience and help visitors quickly locate the information they need. The Anqi CMS'scategoryListTags are the core tools to achieve this goal. They not only make it easy to list categories, but also intelligently add a "" in front of subcategories when dealing with multi-level nested categories.SpacerCharacters, visualized to display the hierarchy relationship. However, it is merely the default.SpacerMay not meet our pursuit of beauty and personality. So, how can we, in the Anqi CMS, customize the seemingly simpleSpacerin terms of style and content?

UnderstandingSpacerthe essence: it is not just a character

firstly, we need to understandSpacerhave a clear understanding. In the template tag system of Anqi CMS,categoryListWhen traversing categories, each category object (item) is passed into the template. When encountering a subcategory, item.SpacerThis variable will automatically include a pre-generated string used to represent the indentation level of the current category relative to its parent category. For example, it may appear as  ├─/  │    ├─These are all intelligently added by the system to show the sense of hierarchy.

It is worth noting that,item.Spaceritself isalready includes the string with indentation information for the hierarchy.. This means that we cannot directly accesscategoryListThe parameter of the tag to specifySpacerspecific characters (such as putting├─change it to---）。Anqi CMS generatescategoryListthe list data according to the depth of the category and fills it inSpacerThe value. Our task is not to 'configure'Spacerthe generation method, but to 'beautify' and 'enhance' its presentation in the template.

Intag-categoryList.mdIn the document, we can see such usage:{{item.Spacer|safe}}{{item.Title}}.|safeThe filter is very important here, it ensuresSpacerHTML entities that may be contained in it (such as) can be correctly parsed by the browser instead of being displayed directly as text.

CustomizationSpacerThe visual style: give it life

Sinceitem.Spaceris a string, we can use the power of HTML and CSS to control its visual presentation.

1. Control the overall style through the parent element:

The simplest way to include a category list:<li>or<a>Label CSS style addition. For example, by increasing the left margin to simulate deeper indentation, or changing the font color.

<style>
    .category-level-1 { margin-left: 20px; color: #333; }
    .category-level-2 { margin-left: 40px; color: #666; }
    /* 更多层级样式 */
</style>

<ul>
    {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
            <li class="category-item category-level-{{ item.Level }}"> {# 假设有一个 item.Level 字段表示层级 #}
                <a href="{{ item.Link }}">{{ item.Spacer|safe }}{{ item.Title }}</a>
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

Here we assumeiteman object containsLevelField indicates the depth of the current category. If not, you can infer the level by the loop context variable (such asforloop.Depth, if the template engine supports it) or manual calculation.

2. RegardingSpacerThe refined style of characters:

If you want toSpacerapply more specific style controls to it, such as changing its font size, color, or adding a background, we can wrap it in a<span>Tags inside.

<style>
    .spacer-prefix {
        color: #999;
        font-family: monospace; /* 等宽字体，保持对齐 */
        font-size: 0.9em;
        margin-right: 5px; /* 与分类标题保持距离 */
    }
</style>

<ul>
    {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
            <li>
                <a href="{{ item.Link }}">
                    <span class="spacer-prefix">{{ item.Spacer|safe }}</span>{{ item.Title }}
                </a>
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

By setting a<span>Tag class name addition, you can define various styles according to your needs. It is important to note that,item.SpacerThe HTML entities (such as) already contain some spacing, consider the overlay effect when setting in CSS.marginorpadding.

richSpacerof the content: beyond the default symbols

Althoughitem.SpacerThe default content is generated by the system, but we can still 'enrich' it by adding custom content around it.This can include additional text, icons, even more complex HTML structures.

1. Add custom symbols or text:

You can do this on{{item.Spacer|safe}}Add any characters or phrases you want before or after.

<ul>
    {% categoryList categories with moduleId="1" parentId="0" %}
        {% for item in categories %}
            <li>
                <a href="{{ item.Link }}">
                    <span class="spacer-prefix">{{ item.Spacer|safe }}</span>
                    {% if item.HasChildren %}
                        <i class="icon-folder-open"></i> {# 如果有子分类，显示文件夹图标 #}
                    {% else %}
                        <i class="icon-file"></i> {# 否则显示文件图标 #}
                    {% endif %}
                    {{ item.Title }}
                </a>
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

Here we combine:item.HasChildrenProperty (indicating whether the current category has subcategories), which implements dynamic display of different icons. This makes the hierarchy more intuitive.icon-folder-openandicon-fileIt is the class name provided by the icon library (such as FontAwesome) used in your project.

2. Combine with filters for advanced content processing:

Althoughitem.SpacerIt is not easy to directly modify characters, but if in some cases, the default characters it generates are relatively simple and predictable (for example, always a fixed number of spaces or dashes), you can try to usereplaceReplace using filters. However, considering its dynamically generated nature, this method may not be as flexible and stable as adding directly in.SpacerFlexible and stable when adding content externally.

3. Display only at specific levels.SpacerOr additional content:

PassifConditional judgment, you can controlSpacerOr additional content is only displayed at certain levels. For example, you may only want to display it starting from the second-level categorySpacer.

`twig

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <li>