Question

我在试图弄清楚如何主题＆＃34;时遇到了一些困难。使用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

以下是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 文件夹中的树枝文件来编辑布局。将所有已修改的文件复制到： <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

如何＆＃34;主题＆＃34;导航菜单

3 个答案: