如何“主题化”导航菜单

Question

我在试图弄清楚如何使用 Bootstrap 为 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>

基本上我只是希望菜单固定在底部，每个菜单链接之间的间距相等，并且宽度与容器大小（而不是页面的宽度）相同。我花了两天时间试图弄清楚我需要编辑哪个部分，但我已经不知道了。

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

Answer 1

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

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

文件名：菜单--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 2

这里是一些 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 3

同意@user2470057

你还有一个选项来覆盖模板：

1. 在 chrome 中打开网站
2. 检查导航菜单中的元素
3. 您将看到一些将覆盖默认模板的模板建议。见截图here
4. 这些是可用的模板覆盖建议。
5. 在“themes/your_theme/templates/filename.html.twig”中创建一个名为建议之一的文件