0

是否有任何使用 wordpress+timber+bootstrap 创建的教程或模板？

我的菜单有问题...

菜单-head.twig：

<nav class="navbar navbar-custom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            {% include "menu.twig" with {'menu': menu.get_items} %}
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

menu.twig：

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} {% for item in menu %}
    <li class="{{item.classes | join(' ')}}">
        <a href="{{item.get_link}}">{{item.title}}</a> {% include "menu.twig" with {'menu': item.get_children} %}
    </li>
    {% endfor %}
</ul>
{% endif %}

不幸的结果是这个： 在此处输入图像描述

我不知道如何将子菜单显示为下拉菜单来实现它...请帮助...

编辑：我将搬到基金会... :)

4

4 回答 4

2

@manson-mamaril 你只是在menu.twig. 而不是{% for item in menu %}它应该是{% for item in menu.get_items %}：

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} 
    {% for item in menu.get_items %}
        <li class="{{item.classes | join(' ')}}">
            <a href="{{item.get_link}}">{{item.title}}</a> 
            {% include "menu.twig" with {'menu': item.get_children} %}
        </li>
    {% endfor %}
</ul>
{% endif %}
于 2017-01-31T15:12:11.460 回答
0

In your menu-head.twig, replace {% include "menu.twig" with {'menu': menu.get_items} %} by {% include "menu.twig" with {'menu': menu} %}

Then, in your menu.twig 

{% if menu %}
<ul class="nav navbar-nav navbar-right">
    {#
    <li><a href="#">Link</a></li>#} {% for item in menu.items %}
    <li class="{{item.classes | join(' ')}}">
        <a href="{{item.get_link}}">{{item.title}}</a> {% include "menu.twig" with {'menu': item.get_children} %}
    </li>
    {% endfor %}
</ul>
{% endif %}

You should iterate trough menu.items which is an array containing all your menu items.

By the way, make sure, you pass your menu to the context :

$context['menu'] = new \Timber\Menu(ID);

Finally, if you easily want to see what happens in you menu object, you can display this object with menu|print_r

于 2019-03-10T09:27:24.257 回答
0

在搜索 WP-Timber-Foundtion 6 信息时，我发现了大约一年前的一篇博客文章。

http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html

于 2016-07-21T20:52:33.990 回答
0

像这样的东西应该工作

  <div class="collapse navbar-collapse" id="navbarmain">
      <ul class="nav navbar-nav main-menu">
          {% for item in menu.get_items %}
              <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
                  {% if item.get_children %}
                      <ul class="dropdown-menu" role="menu">
                          {% for child in item.get_children %}
                              <li><a href="{{child.get_link}}" class="transition">{{child.title}}</a></li>
                          {% endfor %}
                      </ul>
                  {% endif %}
              </li>
          {% endfor %}
      </ul>
  </div>
于 2017-01-24T12:47:55.470 回答