使用 WayFinder 创建 Bootstrap 菜单
Create a Bootstrap menu with WayFinder
正在尝试使用 WayFinder 创建 Bootstrap 菜单。如何完成?
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
<ul class="dropdown-menu" aria-labelledby="drop1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop2" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
<ul class="dropdown-menu" aria-labelledby="drop2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
到目前为止我的 WayFinder 调用:
[[Wayfinder? &startId=`0` &level=`1`
&hideSubMenus=`TRUE` &includeDocs=`1,2,3,4,5,55,7,8,74`
&outerTpl=`chunk_navigation-menu`]]
我的 chunk_navigation-menu 看起来像这样:
<ul class="navbar-nav nav">[+wf.wrapper+]</ul>
首先,我假设您使用的是 MODX Evolution。
最简单的方法是使用
&outerClass
&parentClass
&innerClass
&parentRowTpl
在您的 Wayfinder 电话中。
它应该是这样的:
[[Wayfinder? &startId=`[(site_start)]` &level=`2` &outerClass=`nav navbar-nav` &parentClass=`dropdown` &innerClass=`dropdown-menu` &parentRowTpl=`navbar_parentRowTpl`]]
注意:如果您不在上下文中使用 [(site_start)],请将其替换为菜单的父资源 ID。
在这种情况下,您还必须创建 navbar_parentRowTpl
。这个块应该是这样的:
<li[+wf.id+][+wf.classes+] class="dropdown" id="menu[+id+]">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[+id+]" href="[+wf.link+]" title="[+wf.title+]">
[+wf.linktext+]
<b class="caret"></b>
</a>
[+wf.wrapper+]</li>
由于我已经很长时间没有使用 Evo,如果此代码有任何问题请告诉我,我可以为您提供帮助。
我用这个例子作为参考:https://gist.github.com/mkay/f0afc97ec1536932e0a3
并使用此 table 转换为 Evo 语法:
https://rtfm.modx.com/revolution/2.x/making-sites-with-modx/tag-syntax
正在尝试使用 WayFinder 创建 Bootstrap 菜单。如何完成?
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
<ul class="dropdown-menu" aria-labelledby="drop1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop2" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>
<ul class="dropdown-menu" aria-labelledby="drop2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
到目前为止我的 WayFinder 调用:
[[Wayfinder? &startId=`0` &level=`1`
&hideSubMenus=`TRUE` &includeDocs=`1,2,3,4,5,55,7,8,74`
&outerTpl=`chunk_navigation-menu`]]
我的 chunk_navigation-menu 看起来像这样:
<ul class="navbar-nav nav">[+wf.wrapper+]</ul>
首先,我假设您使用的是 MODX Evolution。
最简单的方法是使用
&outerClass
&parentClass
&innerClass
&parentRowTpl
在您的 Wayfinder 电话中。
它应该是这样的:
[[Wayfinder? &startId=`[(site_start)]` &level=`2` &outerClass=`nav navbar-nav` &parentClass=`dropdown` &innerClass=`dropdown-menu` &parentRowTpl=`navbar_parentRowTpl`]]
注意:如果您不在上下文中使用 [(site_start)],请将其替换为菜单的父资源 ID。
在这种情况下,您还必须创建 navbar_parentRowTpl
。这个块应该是这样的:
<li[+wf.id+][+wf.classes+] class="dropdown" id="menu[+id+]">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[+id+]" href="[+wf.link+]" title="[+wf.title+]">
[+wf.linktext+]
<b class="caret"></b>
</a>
[+wf.wrapper+]</li>
由于我已经很长时间没有使用 Evo,如果此代码有任何问题请告诉我,我可以为您提供帮助。
我用这个例子作为参考:https://gist.github.com/mkay/f0afc97ec1536932e0a3
并使用此 table 转换为 Evo 语法:
https://rtfm.modx.com/revolution/2.x/making-sites-with-modx/tag-syntax