Does AnQiCMS support custom HTML structure and CSS style rendering for breadcrumb navigation tags?

As an experienced website operations expert, I know that the flexibility of a content management system (CMS) template is crucial for the long-term operation, brand image, and user experience of a website.AnQiCMS (AnQiCMS) relies on its efficient Go language architecture and Django/Blade style template engine, providing powerful functions while also giving developers and operators great freedom.Today, let's delve into a question that everyone is concerned about: 'Does AnQiCMS breadcrumb navigation tag support custom HTML structure and CSS style rendering?'}]

AnQiCMS breadcrumb navigation: Does it support custom HTML structure and CSS style rendering?——In-depth interpretation and practical guide

For the question 'Does AnQiCMS breadcrumb navigation tag support custom HTML structure and CSS style rendering', I can confidently tell you that: AnQi CMS not only supports, but also provides the ultimate customization space. This is one of the great advantages of AnQi CMS in terms of content display flexibility.

An in-depth analysis of the AnQiCMS breadcrumb navigation mechanism

In many CMS, breadcrumb navigation is usually a fixed output module, and operators can only switch or slightly adjust the levels.However, AnQiCMS adopted a more open and 'template-friendly' design concept.{% breadcrumb crumbs %}When the tag is used, it does not directly spit out a pile of predefined HTML code, but plays aData providerrole.

ThisbreadcrumbThe main task of the label is to prepare a name for youcrumbsThe array object of (or any other custom variable name) contains all the hierarchical data required to build breadcrumb navigation. Each item in this array is an independent 'breadcrumb fragment', which contains at least two core pieces of information:Name(Link name, text displayed to the user) andLink(Link address, URL to be redirected to).

This means that AnQiCMS completely separates data from display logic. It gives you the decision of what to display, while it is only responsible for providing the data.

Custom HTML structure: design as you wish

due tobreadcrumbTags only providecrumbsdata arrays, you can then use them to{% breadcrumb crumbs %}and{% endbreadcrumb %}Within these tags, build the breadcrumb navigation structure you want as freely as writing any other HTML code.

For example, you can choose to use a standard unordered list.<ul>and list item<li>to wrap each breadcrumb, you can also choose to use<div>/<span>even<p>Label.You can add icons before and after each link text, or insert custom separators between different levels.

{# 默认用法，自动获取当前页面面包屑数据 #}
<div>
    {% breadcrumb crumbs with index="首页" title=true %}
    <ol class="custom-breadcrumb"> {# 您可以替换为任何HTML标签，并添加自定义类名 #}
        {% for item in crumbs %}
            <li class="breadcrumb-item"> {# 每个面包屑项的HTML结构完全由您控制 #}
                {% if forloop.Last %} {# 可以利用循环判断来特殊处理最后一个面包屑，例如不加链接 #}
                    <span class="active">{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}" class="breadcrumb-link">{{item.Name}}</a>
                    <span class="separator"> &gt; </span> {# 自定义分隔符 #}
                {% endif %}
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</div>

the above example clearly shows, you can fully control each breadcrumb item's<li>label, even you can according toforloop.LastSuch a loop variable is used to determine whether the current one is the last breadcrumb, so that different HTML structures can be rendered (for example, the last breadcrumb does not add a link, only text is displayed).

Apply CSS styles flexibly: create exclusive visual effects

Once you can fully control the HTML structure, the application of CSS styles comes naturally. You can freely add any class names required for your website design on custom HTML tags.class）ID（id）or other HTML attributes.

For example, in the above code, we added to the breadcrumb container.custom-breadcrumbclass for each item.breadcrumb-itemclass for the link.breadcrumb-linkThe class even adds a current active item.activeclass.These class names can seamlessly integrate with your website's CSS stylesheet.style.css/main.cssIn the external style sheets, write the corresponding CSS rules for these custom class names.

Anqi CMS will not impose any restrictions on these HTML structures or CSS rules, which means you can create a unique breadcrumb navigation according to the designer's requirements or your own aesthetic preferences.

Practice exercise: An example of a simple custom breadcrumb

Assuming we want the breadcrumb navigation to be presented in a list form, and the last item is an unclickable current page title, and a simple hierarchy is achieved through CSS:

HTML (in your template file, for example_partials/breadcrumb.htmlor directly in the page):

{% breadcrumb crumbs with index="首页" title=true %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb my-custom-breadcrumb">
    {% for item in crumbs %}
      <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
        {% if forloop.Last %}
          <span class="text-primary">{{item.Name}}</span>
        {% else %}
          <a href="{{item.Link}}" class="text-secondary">{{item.Name}}</a>
        {% endif %}
      </li>
    {% endfor %}
  </ol>
</nav>
{% endbreadcrumb %}

CSS (in yourpublic/static/css/style.cssor other style files):

/* 自定义面包屑容器 */
.my-custom-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    list-style: none; /* 移除默认列表点 */
    background-color: #f8f9fa; /* 淡灰色背景 */
    border-radius: 0.25rem; /* 圆角 */
}

/* 每个面包屑项的样式 */
.my-custom-breadcrumb .breadcrumb-item {
    font-size: 0.9rem;
    color: #6c757d; /* 默认文字颜色 */
}

/* 非当前页面的链接样式 */
.my-custom-breadcrumb .breadcrumb-item .text-secondary {
    color: #007bff; /* 蓝色链接 */
    text-decoration: none; /* 移除下划线 */
}

.my-custom-breadcrumb .breadcrumb-item .text-secondary:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* 面包屑分隔符 */
.my-custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    content: "/"; /* 使用斜杠作为分隔符 */
}

/* 当前活动页面的样式 */
.my-custom-breadcrumb .breadcrumb-item.active {
    color: #343a40; /* 深色文字 */
    font-weight: bold; /* 加粗 */
}

By the above example, you can see how AnQiCMS, while maintaining simplicity and efficiency, hands over the final control of content display to you, allowing you to flexibly create a beautiful and practical breadcrumb navigation according to the project requirements.

Conclusion

As an enterprise-level CMS, AnQiCMS deeply understands the importance of template flexibility. Its breadcrumb navigation tag design philosophy fully embodies