web-dev-qa-db-ja.com

テーマ検索ブロック

デフォルトの検索ブロックのテーマをbootstrap検索バーに設定します。

HTMLで検索バーを作成すると、次のようになります。

<div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>

私はすでにinput--search.html.twigファイルを次のように変更しようとしました：

{% set classes = ['form-control',] %}

 <input {{ attributes.addClass(classes).setAttribute('placeholder', 'Search for...').setAttribute('type', 'text') }} />{{ children }}

そして、block--search-form-b​​lock.html.twigを以下に追加します：

<div class="input-group">
{{ content }}

                    <span class="input-group-btn">
                      <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div>

しかし、期待どおりにレイアウトが変更されることはありません。デフォルトの検索ブロックのレイアウトを変更する簡単な方法はありますか？

theming8blockssearch
4
JimmyD

私の問題を修正するための汚い方法を見つけました。 Drupal 8は特別な方法で検索フォームを作成するため、form.html.twigを手動で変更しました。

{% if element['#form_id'] == 'search_block_form' %}

  <form action="{{element['#action']}}" method="get" id="search-block-form" accept-charset="UTF-8" data-drupal-form-fields="edit-keys">
    <div class="input-group">
      <input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="text" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search form-control" placeholder="Search for...">
      </input>
      <span class="input-group-btn">
        <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="Search" class="btn btn-default js-form-submit submit-button">
        </input>
      </span>
    </div>
  </form>
{% else %}

  <form{{ attributes }}>
    {{ children }}
  </form>

{% endif %}
3
JimmyD