所有 children 的递归菜单

Question

我正在尝试生成站点树中所有页面的嵌套菜单。

docs显示了两个级别-我不知道有多少级别。

目前我知道某一点至少有四层深度，所以我有这个：

<ul>
<% loop $Menu(1) %>
    <li>
        <a href="$Link" title="Go to the $Title page" class="<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>">
            $MenuTitle
        </a>

        <% if $Children %>
        <ul>
        <% loop $Children %>
            <li class="<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>">
                <a href="$Link">$MenuTitle</a>

                <% if $Children %>
                <ul>
                <% loop $Children %>
                    <li class="<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>">
                        <a href="$Link">$MenuTitle</a>

                        <% if $Children %>
                        <ul>
                        <% loop $Children %>
                            <li class="<% if $isCurrent %>current<% else_if $isSection %>section<% end_if %>">
                                <a href="$Link">$MenuTitle</a>
                            </li>
                        <% end_loop %>
                        </ul>
                        <% end_if %>

                    </li>
                <% end_loop %>
                </ul>
                <% end_if %>

            </li>
        <% end_loop %>
        </ul>
        <% end_if %>

    </li>
<% end_loop %>
</ul>

它有效但不可靠（如果编辑器添加另一个级别）。这很简陋。有递归选项吗？

Answer 1

我们可以创建一个递归菜单项模板来创建一个与站点树一样深的菜单。

首先我们在主题的 Includes 目录中创建一个 MenuItem.ss 模板文件。在这个模板中，我们显示菜单项 link 并检查是否有任何子页面。我们遍历所有子页面并为每个子页面包含 MenuItem.ss 模板：

Includes/MenuItem.ss

<li class="$LinkingMode">
    <a href="$Link" aria-label="Go to the $Title.XML page">$MenuTitle</a>

    <% if $Children %>
    <ul>
        <% loop $Children %>
        <% include Includes/MenuItem %>
        <% end_loop %>
    </ul>
    <% end_if %>
</li>

我们模板中的主菜单代码变成如下：

<nav class="main-menu">
    <ul>
        <% loop $Menu(1) %>
        <% include Includes/MenuItem %>
        <% end_loop %>
    </ul>
</nav>

所有 children 的递归菜单

Recursive menu of all children

silverstripe

silverstripe-4