使用freemarker构建Liferay 7 mega菜单(多级菜单)

Question

我想建立一个巨型菜单(多级菜单)在生命之路7与freemarker语言。我使用的主题只是打印菜单，但不是多级的。

如何更改代码并添加类和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>

Answer 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进行一些更改以适应您的颜色和口味。