如何「主題」導航菜單

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

這裏有一些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使用更新的主題佈局引擎嫩枝。如果您創建了子主題，則可以使用位於<drupalroot>/themes/bootstrap/templates文件夾中的樹枝文件編輯佈局。任何編輯的文件複製到：<drupalroot>/themes/<bootstrap-sub-theme>/templates文件夾，然後清除緩存在Drupal：Administration > Configuration > Development > Performance

下面是完整的代碼的情況下，任何人的鬥爭，像我一樣：

文件名：菜單 - 主。 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

一第二，你又多了一個選項來覆蓋模板：

1. 打開網站在Chrome
2. 在導航菜單
3. 你會看到一些模板建議，這將覆蓋默認模板檢查元素。見屏幕截圖here
4. 這些是可用的模板重寫建議。
5. 創建一個名爲「themes/your_theme/templates/filename.html」中的建議之一的文件。小枝