如何 "theme" 导航菜单

Question

我在尝试弄清楚如何使用 Bootstrap "theme" Drupal 8 中的主导航菜单时遇到了一些困难。似乎 Drupal 8 主题引擎覆盖了我在 Bootstrap.

中尝试的任何内容

我试图让它看起来像这样：

<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
    <div class="container">
        <ul class = "nav navbar-nav" style="display: flex; justify-content: space-between;">
            <li><a href = "#">ITEM ONE</a></li>
            <li><a href = "#">ITEM TWO</a></li>
            <li><a href = "#">ITEM THREE</a></li>
            <li><a href = "#">ITEM FOUR</a></li>         
        </ul>
    </div>
</nav>

基本上我只想将菜单固定在底部，每个菜单之间的间距相等link，并且宽度与容器大小相同（不是页面的宽度） ).我花了两天时间想弄清楚我需要编辑哪一部分，但我已经没有头绪了。

感谢任何能解决我问题的聪明人。

Answer 1

这里有一些Drupal7的经验，如果适用于Drupal8你可以看看

$ find . -type f |grep page\.tpl\.php
./modules/block/tests/themes/block_test_theme/page.tpl.php
./modules/system/maintenance-page.tpl.php
./modules/system/page.tpl.php
./sites/all/modules/ctools/page_manager/theme/page-manager-edit-page.tpl.php
./themes/bartik/templates/maintenance-page.tpl.php
./themes/bartik/templates/page.tpl.php
./themes/garland/maintenance-page.tpl.php
./themes/garland/page.tpl.php
./themes/seven/maintenance-page.tpl.php
./themes/seven/page.tpl.php

从上面的输出中，您可以发现页面的默认模板文件是 ./modules/system/page.tpl.php，您永远不会更改它，而它有关于如何自定义此模板的精美文档。

然后再次查看命令输出，可以找到嵌入主题提供的模板，例如./themes/bartik/templates/page.tpl.php。比较这两个文件，您将了解主题如何覆盖默认值。然后你可以很容易地复制任何人到你的自定义主题，并把html放进去。

但这只是针对 Drupal7，我在 Drupal8 中没有深入研究，希望它能有所帮助。

Answer 2

Drupal 8 使用名为 twig 的较新主题布局引擎。如果您创建了子主题，则可以使用 <drupalroot>/themes/bootstrap/templates 文件夹中的 twig 文件编辑布局。将任何编辑过的文件复制到：<drupalroot>/themes/<bootstrap-sub-theme>/templates 文件夹，然后清除 drupal 中的缓存：Administration > Configuration > Development > Performance

这是完整的代码，以防有人像我一样挣扎：

FILENAME: 菜单--main.html.twig

{#
/**
 * @file
  * Default theme implementation to display a menu.
  *
  * Available variables:
  * - menu_name: The machine name of the menu.
  * - items: A nested list of menu items. Each menu item contains:
  *   - attributes: HTML attributes for the menu item.
  *   - below: The menu item child items.
  *   - title: The menu link title.
  *   - url: The menu link url, instance of \Drupal\Core\Url
  *   - localized_options: Menu link localized options.
  *
  * @ingroup templates
  */
 #}
 {% import _self as menus %}

 {#
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
 {{ menus.menu_links(items, attributes, 0) }}

 {% macro menu_links(items, attributes, menu_level) %}
   {% import _self as menus %}
   {% if items %}
     {% if menu_level == 0 %}
     <div class="container" style="display: flex; justify-content: space-between;">
       <ul{{ attributes.addClass('menu', 'nav', 'navbar-nav', 'container') }} style="display: flex; justify-content: space-between;">
     {% else %}
       <ul{{ attributes.addClass('dropdown-menu') }}>
     {% endif %}
     {% for item in items %}
       {% if menu_level == 0 and item.is_expanded %}
         <li{{ item.attributes.addClass('expanded', 'dropdown') }}>
         <a href="{{ item.url }}" class="dropdown-toggle" data-target="#" data-toggle="dropdown">{{ item.title }} <span class="caret"></span></a>
       {% else %}
         <li{{ item.attributes }}>
         {{ link(item.title, item.url) }}
       {% endif %}
       {% if item.below %}
         {{ menus.menu_links(item.below, attributes.removeClass('nav', 'navbar-nav'), menu_level + 1) }}
       {% endif %}
       </li>
     {% endfor %}

     </ul>
         </div>
   {% endif %}
 {% endmacro %}

Answer 3

同意@user2470057

并且您还有一个替代模板的选项：

在chrome
检查导航菜单中的元素
您将看到一些模板建议，这些建议将覆盖默认模板。查看屏幕截图 here
这些是可用的模板覆盖建议。
创建一个名为“themes/your_theme/templates/filename.html.twig

如何 "theme" 导航菜单

How to "theme" a Navigation Menu

css

drupal-8

twitter-bootstrap-3