Question

很多兴奋和几次点击太多让我拥有了两件似乎不自然兼容的东西：广泛的（编译后我相信 - 没有LESS或SASS文件夹/文件）Bootstrap 3网站模板（{{3使用Bootstrap基本主题安装Drupal 8。大约10多个小时的研究/测试让我难以理解：

尝试修改一个通用的Bootstrap 3 HTML网站模板（就像我购买的那个）与Drupal 8一起工作是否可能/合理/有效？或者它是或者（Bootstrap 3自己与Drupal 8 + Bootstrap基础主题）？

我有兴趣了解这是否是一个知识渊博的人可以在一两个小时内完成的事情，而不是10个多小时。如果它有所帮助，差异开始加起来如此：

与drupal的主题完全不同的文件结构
尝试在libraries.yml
内容被硬编码到HTML中？所以我相信这意味着完全使用Drupal主题（？）

Answer 1

我最近做过类似的事情，虽然这是一个小项目。

Drupal 8（核心）不再具有硬编码的HTML（或非常非常少）。您可能对contrib模块有不同的经验。

我不认为主题结构是一个障碍。只需将正确的文件包含在libraries.yml文件中即可。

主要的战斗是你必须覆盖twig文件才能将正确的（引导程序）类分配给元素。

<强> input--submit.html.twig

例如，这会将Bootstrap btn，btn-block和btn-lg类添加到所有提交按钮。

我还自定义了提交按钮以接受图标属性（data-icon）。对于现有表单，您需要使用hook_form_alter来添加属性。对于您自己的表单，您只需将其添加到#attributes数组。

{% set classes = [
    'btn', 'btn-block', 'btn-lg',
] %}

<button{{ attributes.addClass(classes) }}>
    <span class="glyphicon {{ attributes['data-icon'] }}"></span>
    <span>{{ attributes.value }}</span>
</button>{{ children }}

<强> input--password.html.twig

这是用于密码表单元素。我添加了form-control类。

<input{{ attributes.addClass("form-control") }} />{{ children }}

<强> block--clean-main-menu.html.twig

另外，最后一个例子我希望网站的菜单位于顶部，因此我必须添加navbar类。

{% set heading_id = attributes.id ~ '-menu'|clean_id %}
<nav {{ attributes.addClass('navbar navbar-default navbar-static-top') }}>
  <div class="container">
    <div class="col-lg-12">
      {% block content %}
        {{ content }}
      {% endblock %}
    </div>
  </div>
</nav>

正如我在开始时写的那样，这是一个小项目。对于更大的项目，您将有更多的工作，或者您希望为不同的提交按钮设置不同的样式（提示：使用hook_theme_suggestions_field_alter添加新的主题覆盖）。

我们在公司中使用了很多100％可自定义的主题，完全覆盖每一件小事都很常见所以我们已经习惯了;）

另外，不要忘记安装devel扩展。当您想知道哪个twig文件用于什么时，它会对您有所帮助。

是否可以修改bootstrap 3 HTML模板以与Drupal 8一起工作？

1 个答案: