How to split and render multi-level navigation path strings when creating a dynamic navigation menu using the `split` filter?

In the daily operation of AnQi CMS, we often need to build flexible and diverse navigation menus to adapt to the changing content structure and user needs. Although AnQi CMS provides powerfulnavListLabels are used to manage the navigation of the background configuration, but in certain specific scenarios, such as when we need to dynamically generate multi-level navigation based on a string storing complete path information, or render a breadcrumb navigation with a depth far exceeding two levels, the built-in labels may not fully meet our refined needs.

This is the template engine built-in of Anqi CMSsplitThe filter comes in handy. It helps us to cleverly 'cut' the seemingly ordinary path string into individual navigation elements, thus allowing for flexible rendering.

Get to knowsplitFilter

splitThe filter is a very practical string processing tool.The core function is to split a string into an array (or slice) according to the specified delimiter.splitThey can be broken down one by one, allowing you to handle each word separately.

Its basic usage is very simple:{{ 你的字符串变量|split:"你的分隔符" }}.

For example, if you have a string"Apple,Banana,Orange"comma)

{% set fruits_string = "Apple,Banana,Orange" %}
{% set fruits_array = fruits_string|split:"," %}
{# 此时 fruits_array 将是一个包含 ["Apple", "Banana", "Orange"] 的数组 #}

BysplitAfter processing,fruits_arrayit becomes an array that can beforlooped through, with each element being a part of the original string.

Scenario setup: Manage multi-level navigation path strings

Assuming our website has a complex classification hierarchy, such as "Home > Products > Electronic Equipment > Camera", we hope to dynamically display such a complete navigation path at the top of each product detail page or category page, and each part should be a clickable link.

We can use the "Content ManagementFullNavPathThe custom field. In this field, we will store the navigation path in a specific format, for example:

首页|/ > 产品|/products/ > 电子设备|/products/electronics/ > 相机|/products/electronics/cameras/

This string contains navigation level information, display text, and corresponding links. Here we use “> as the level separator, as well as “| as the separator between the title and the link.}

Practice: Cut and render dynamic navigation

Now that we have the stored path string, the next step is how to use it in the templatesplitFilter it and render it out.

Step 1: Get the navigation path string

Firstly, we need to retrieve the custom fields stored in the background templateFullNavPathString. If it is on the category detail page, we can obtain it throughcategoryDetailtags:

{# 假设我们正在一个分类详情页，并已在该分类的自定义字段中设置了 FullNavPath #}
{% categoryDetail currentCategory with name="FullNavPath" %}
{% set fullPathString = currentCategory %} {# currentCategory现在就是我们的路径字符串 #}

Step two: First cut - split the navigation items

With the complete path string, we first use “>Separate the entire path into individual navigation items using the delimiter.

{% set pathSegments = fullPathString|split:" > " %}
{# 此时 pathSegments 会是类似这样的数组：["首页|/", "产品|/products/", "电子设备|/products/electronics/", "相机|/products/electronics/cameras/"] #}

Step three: Loop rendering and cut again - extract titles and links.

pathSegmentsNow is an array, each element is a标题|链接formatted string. We need to traverse the array and use each element againsplitFilter, extracts the title and link and renders them as HTML links.

`twig