使用 freemarker 构建 Liferay 7 巨型菜单（多级菜单）

Posted 2023-02-19

【中文标题】使用 freemarker 构建 Liferay 7 巨型菜单（多级菜单）

【英文标题】：Build Liferay 7 mega menu (multilevel menu) with freemarker

【发布时间】：2018-02-23 03:48:20

【问题描述】：

我想用 freemarker 语言在 liferay 7 中构建一个超级菜单（多级菜单）。我使用的主题只是打印菜单但不是多级的。

如何更改代码并添加我的类和 js？

代码是：

<nav class="navbar-nav navbar-right site-navigation" id="navigation" role="navigation">
        <#assign
        VOID = freeMarkerPortletPreferences.setValue("displayDepth", "1")
        VOID = freeMarkerPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone")
        />

        <@liferay.navigation_menu
        instance_id="main_navigation_menu"
        default_preferences="$freeMarkerPortletPreferences"
        />

        <#assign VOID = freeMarkerPortletPreferences.reset() />

    </nav>

【问题讨论】：

愚蠢的问题，我不知道：当您将 displayDepth 设置为 2 或更多时会发生什么？

这很难解释，但是......如果您在这些页面上，它只会显示深度 2 的链接。如果您在深度 1 或其他页面，则菜单不会显示任何链接。

【参考方案1】：

我设法用 freemarker 语言打印了链接：

我创建了 custom_navigation.ftl 文件并将其添加到 portal_normal.ftl 中，代码如下：

<#if has_navigation>
    <#include "$full_templates_path/custom_navigation.ftl" />
</#if>

custom_navigation.ftl 代码：

    <ul class="nav navbar-nav">
    <#assign  count = 0 />
    <#list nav_items as nav_item>
        <#assign  count = count +1  />
        <#assign  nav_item_class = "item-" + count />

        <#if count == 1>
            <#assign  nav_item_class = nav_item_class + " first" />
        </#if>

        <#if nav_item.isSelected() >
            <#assign nav_item_class = nav_item_class + " selected" />
        </#if>

        <#if nav_item.hasChildren() >
            <#assign nav_item_class = nav_item_class + " dropdown mega-dropdown" />
        </#if>

        <#if nav_item.hasChildren()>
            <li class="$nav_item_class">
                <a href="$nav_item.getURL()" $nav_item.getTarget() class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-menu-hamburger pull-left"></span> $nav_item.getName()
                </a>

                <ul class="dropdown-menu mega-dropdown-menu row">
                    <#list nav_item.getChildren() as nav_child>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header"><a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a></li>
                                <#if nav_child.hasChildren()>
                                    <#list nav_child.getChildren() as nav_child_2>
                                        <li><a href="$nav_child_2.getURL()" $nav_child_2.getTarget()>$nav_child_2.getName()</a></li>
                                    </#list>
                                </#if>
                            </ul>
                        </li>
                    </#list>
                </ul>
            </li>
        <#else>
            <li class="$nav_item_class">
                <a href="$nav_item.getURL()" $nav_item.getTarget()>
                    <span>$nav_item.getName()</span>
                </a>
            </li>
        </#if>

    </#list>
    </ul>
</nav>

我遵循的引导超级菜单示例是this。

最后，您需要对 CSS 进行一些更改以适应您的颜色和品味。