Drupal8 / 9のBootstrap4とBootstrapBarrio

公開: 2022-02-16

Drupal8 / 9のBootstrap4をBootstrapBarrioで使用します。 Drupal8 / 9のBootstrapBarrioテーマは、Bootstrap 4(または必要に応じてBootstrap 5)をDrupalサイトに統合します。

Bootstrapは、Webサイトを構築するための非常に人気のあるフレームワークです。 設計者と開発者にコミュニケーションのための共通言語を提供し、開発プロセスをはるかに簡単にします。

Barrioのサブテーマを作成するのは簡単なプロセスです。 このチュートリアルでは、完全なグラフィカルユーザーインターフェイスを介して管理されるテーマの基本的な構成オプションについて説明します。

方法を学ぶために読み続けてください!

ステップ#1。-テーマをインストールします

始める前に、テーマ設定を変更した後に比較できるように、サイトに少なくとも1つの記事があることを確認してください。 リージョンサイドバーの2番目の内側にもブロックを配置します([構造]> [ブロックレイアウト]> [ブロックの配置])。

  • オペレーティングシステムのターミナルアプリケーションを開きます。
  • Drupalインストールのルートにカーソルを置きます。
  • タイプcomposer require drupal / bootstrap_barrio

これにより、テーマの最新の安定バージョンが/ web / themes / contrib / bootstrap_barrioにダウンロードされます。


ステップ2.-サブテーマを作成する

  • bootstrap_barrioテーマディレクトリにカーソルを置きます
  • タイプ
 chmod +x scripts/create_subtheme.sh
./scripts/create_subtheme.sh
ポップアップで開く
chmod +x scripts/create_subtheme.sh
./scripts/create_subtheme.sh

これにより、scriptsフォルダー内のcreate_subthemeというスクリプトが実行可能になり、実行されます。

スクリプトは、カスタムサブテーマのマシン名と説明的な名前を要求します。

自分に最適な値を入力してください。 マシン名は小文字である必要があり、スペースを含めることはできません。

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

この手順はオプションです。

  • サブテーマのディレクトリ(/ web / themes / custom / mytheme )をコードエディタで開きます
  • `BootstrapBarrio`のすべてのインスタンスを`テーマの名前 `に置き換えます
  • すべてのファイルを保存する

ここでは、説明文のみを変更しているので、そのままにしておいても全く問題ありません。

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com


ステップ#3.-ブートストラップバリオ設定

  • Drupalサイトのバックエンドで[外観]をクリックします
  • カスタムテーマまで下にスクロールします
  • [インストール]をクリックしてデフォルトとして設定します

テーマがインストールされたら、

  • テーマの[設定]リンクをクリックします

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

画面の左側に、次のオプションを含む垂直タブのグループが表示されます。

  1. レイアウト(アクティブタブ)
  2. コンポーネント
  3. 接辞
  4. スクロールスパイ
  5. フォントとアイコン

レイアウト

デフォルトでは、[レイアウト]タブがアクティブになっています。 最初のオプション `Container`は、サイトの要素の幅を固定するか、それとも逆に画面全体に表示するかを指定します。 このオプションは今のところそのままにしておきます。

`Region`セクション内で、サイトのリージョンにカスタムCSSクラスを割り当てることができます。

  • 特定の地域に独自のカスタムクラスを追加する

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

  • `Region`セクションを閉じます
  • `サイドバーの位置`を開きます
  • `サイドバーの位置`の値を左に変更します
  • サイドバーの最初のレイアウト」と「サイドバーの最初のレイアウト」を開きます
  • 値をそれぞれ3列と2列に変更します

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

コンポーネント

  • [コンポーネント]垂直タブをクリックします
  • Button要素をアウトライン形式に変更します
  • [すべてのコンテンツ画像にimg-fluidスタイルを適用する]をオンにします

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

これにより、コンテンツエディタの画像ボタンから挿入した画像がデフォルトでレスポンシブになります。 画面のサイズに合わせて画像が縮小されます。

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

「ナビゲーションバー構造」セクションでは、ナビゲーションバーコンテナのサイズを扱います。 2つのナビゲーションバー(navbar-topとnavbar)を区別する必要があります。 Navbarは、サイトのメインナビゲーションメニューです。

  • ナビゲーションバーの位置を固定下部に変更し、ナビゲーションバーのリンクの色を暗い色に変更します
  • 小さな画面にスライド式のメインメニューを表示するには、[ナビゲーションバーの動作]セクションで[スライド式ナビゲーションバー]をオンにします

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

`Components`構成オプションの最後の3つのセクションは、Drupalの内部メッセージシステムによって配信されるメッセージの位置、ローカルタスクのタブ(コンテンツの編集タブなど)、およびフォーム要素の外観を参照します。 これらのオプションはそのままにしておきます。

接辞

affixを使用すると、要素を修正できます。つまり、CSSpositionプロパティの値をfixedに設定できます。

Scrollspy

Scrollspyは、カーソルの位置に基づいて、つまりサイトを上下にスクロールした場合に、ナビゲーションメニューのリンクを自動的に更新するために使用されます。 このトピックについては、今後のチュートリアルで取り上げます。

フォントとアイコン

ここでは、サイトのテキストにさまざまなGoogleFontsフォントの組み合わせから選択するオプションがあります。 さらに、投稿で使用する事前定義されたアイコンのセットから選択できます。

  • お好みのフォントの組み合わせとアイコンセットを選択してください

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

Drupalの内部メッセージの色をカスタマイズするためのオプションがここにあります。 ビューモジュールで生成されたものなど、サイトのテーブルをカスタマイズするためのオプションがあります。

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

下にスクロールし続けると、サブテーマの「配色」が表示されます。 デフォルトのテーマ領域のテキストと背景色をカスタマイズできます。

ロックアイコンを使用して、各要素の色を好みに合わせてカスタマイズし、ブロックすることができます。

ページ要素の表示、ロゴ画像、ファビコン

これらは、すべてのDrupalテーマのデフォルトオプションです。

ライブラリをロード

複数のオンラインですぐに使用できるBootswatchライブラリから選択して、ワンクリックでテーマのルックアンドフィールを強化できます。 これらのオプションは確認する価値があります。

Bootstrap(Bootstrap CSSおよびJS)をローカルまたはCDN経由でロードする場合は、ここで選択できます。 この構成はここで変更しないでください。 .info.ymlファイルのコードを変更することをお勧めします。

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

Drupal8 / 9のBootstrap4-とBootstrapBarrio-OSTraining.com

  • [構成の保存]をクリックします

あなたのサイトを見てください。 このチュートリアルは、UIデザインを教えることを意図したものではなく、Barrioテーマで利用できる可能性を説明することを目的としています。

ただし、これでデザインから始めて、テーマをそれに適合させることができます。

このチュートリアルが気に入っていただけたでしょうか。 読んでくれてありがとう!