How to customize the `categoryList` in multi-level nesting, the character style and content before the child category `Spacer`?

As an experienced website operations expert, I fully understand the importance of website navigation and content classification for user experience and SEO.AnQiCMS (AnQiCMS) with its flexible template engine and rich tag system, provides us with powerful content display capabilities.Today, let's delve deeply into a detail that is common in multi-level classification display but often overlooked - how to customizecategoryListbefore the subcategory in the tagSpacercharacter style and content.

Perceiving the beauty of levels: customized in AnQi CMScategoryListsubcategoriesSpacerthe mysteries and practices

When building a content-rich website, a clear classification structure can greatly enhance user experience and help visitors quickly locate the information they need. Anqi CMS'scategoryListThe label is the core tool to achieve this goal. It can not only easily list categories, but also intelligently add a SpacerCharacters, to visually represent the hierarchy. However, it is just the default one.SpacerIt may not meet our pursuit of beauty and individuality. Then, how can we customize the seemingly simpleSpacerin Anqi CMS with fine-grained style and content customization?

UnderstandingSpacerthe essence: it is not just a character

first, we need toSpacerhave a clear understanding. In the template tag system of AnQi CMS,categoryListWhen traversing categories, each category object (item) will be passed into the template. When encountering a subcategory, item.SpacerThis variable will automatically include a pre-generated string to represent the indentation level of the current category relative to its parent category. For example, it may look like this  ├─/  │    ├─And these are all intelligently added by the system to show the level sense.

It is worth noting that,item.SpacerIt is aString that already contains hierarchical indentation information. This means that we cannot directly pass through.categoryListSpecify the parameters of the labelSpacerSpecific characters (for example, change├─to---)。Safe CMS is generatingcategoryListthe list data and has already calculated and filled according to the depth of the categorySpacerThe value. Our task is not to 'configure'SpacerThe way it is generated, but to 'beautify' and 'enhance' its presentation in the template.

Intag-/anqiapi-category/151.htmlIn the documentation, we can see such usage:{{item.Spacer|safe}}{{item.Title}}.|safeThe filter is very important here, it ensuresSpacerThat HTML entities that may be included can be parsed correctly by the browser rather than displayed as text.

CustomizationSpacerThe visual style: gives it vitality

Sinceitem.SpacerIt is a string, we can use the power of HTML and CSS to control its visual performance.

1. Control the overall style through the parent element:

The simplest way is to classify the list that contains the category:<li>or<a>Add CSS styles to the tag. 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 contained oneLevelThe field indicates the depth of the current category. If not, you can infer the hierarchy through loop context variables (such asforloop.Depthif the template engine supports it) or manually calculate it.

2. RegardingSpacerFine-grained style of characters:

If you want toSpacerControl the style of itself more specifically, for example, changing its font size, color, or adding a background, we can wrap it in a<span>Tag 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 using<span>Add a class name to the tag, you can define various styles according to your needs. It should be noted that ifitem.SpacerIt already contains some space HTML entities (such as), when set in CSSmarginorpaddingconsider the stacking effect

richSpacercontent: 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, and even complex HTML structures.

1. Add custom symbols or text:

You can in{{item.Spacer|safe}}Add any characters or phrases you want around it.

<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 combineditem.HasChildrenThe property indicates whether the current category has subcategories, and it implements dynamic display of different icons. This makes the hierarchy structure more intuitive.icon-folder-openandicon-fileIs the class name provided by the icon library used in your project (such as FontAwesome).

2. Combine filters for advanced content processing:

Althoughitem.SpacerIt is not easy to directly modify characters, but if in some cases, the default characters generated are relatively single and predictable (such as always being a fixed number of spaces or dashes), you can try usingreplaceReplace filters with. But considering its dynamically generated characteristics, this method may not be as flexible and stable as adding directly inSpacerAdding content externally is more flexible and stable.

3. Only display at specific levelsSpacerAdditional content:

ByifConditional judgment, you can controlSpacerAdditional 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>