web-dev-qa-db-ja.com

デフォルトの検索ブロックをカスタマイズする

カスタムDrupal 8テーマの.themeファイルで、デフォルトの検索ブロックをカスタマイズして、カスタムクラスを追加し、入力ラベルを変更してWordの「search」を削除できるようにするにはどうすればよいですか。代わりにfontawesomeの検索アイコンがありますか？

ほとんどの場合、最終的な出力コードは次のようになります。

<div class="infoBar-search">
  <form action="#!" class="searchForm">
    <input type="search" name="sitesearch" placeholder="Search...">
    <input type="submit" class="searchForm-submit fa" value="&#xf002;">
  </form>
</div>

.themeアプローチはこれを行うための最良の方法でしょうか？いくつかのテンプレートファイルを変更してみましたが、サイトの他のフォームにも影響することに気付きました。

8blockstheming
3
ACanadianCoder

これはよりエレガントにできると確信していますが、フォーム[]の#icon_variableを使用してこれを行うことで、入力候補を変更できました。ボタンのアイコンを追加するサイドと追加のオプションを...- icon-class.html.twigなどに追加しました。

1）入力に提案を追加する

function MODULE_theme_suggestions_input_alter(array &$suggestions, array $variables, $hook) {

   if (isset($variables['element']['#icon']) || isset($variables['element']['#icon-left']) || isset($variables['element']['#icon-right'])) {
         $suggestions[] = 'input__submit_icon';
         if (isset($variables['element']['#icon'])) {
           $suggestions[] = 'input__submit_icon_' . $variables['element']['#icon'];
         }
      }
   }

次に、これをフォームに追加/変更できます。

   $form['actions']['submit']['#icon-left'] = 'icon-class';

input__submit_icon.html.twigのようなテンプレートで：

<button {{ attributes }} >
    {% if element['#icon-left'] %}
        <i class="{{ element['#icon-left'] }}"></i>
    {% endif %}
    {{ attributes.value }}
    {% if element['#icon-right'] %}
        <i class="{{ element['#icon-right'] }}"></i>
    {% endif %}
</button>
2
Dylan

最初にdrupal 8の検索ブロックを使用し、次に検索フォームをhook_form_alter関数でオーバーライドします。次に、最後にそのブロックをテンプレートファイルにレンダリングします。

まず、これをオーバーライドしますtwigカスタムテーマテンプレートのファイル。block--search-form-b​​lock.html.twig _div class="infoBar-search"> {{ title_prefix }} {% if label %} {{ label }} {% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %} /div>_

Divタグを修正してください。次に、.themeファイルのhook_form_alterを使用して、変更したいものを変更します。

function hook_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) { if ($form_id == 'search_block_form') { $form['#attributes']['class'][] = 'searchForm'; $form['keys']['#attributes']['placeholder'] = t('Search...'); $form['actions']['submit']['#attributes']['class'][] = '"searchForm-submit fa'; }

1
Deepak modi