Drupal8がリリースされてから３年経過しましたが、これまで利用してきたThemesで安定版リリースまで行かなかったりするので、Drupal7からDrupal8へ移行するのも躊躇していた。

今年に入り、Bootstrap4がリリースされました。

DrupalでもBootstrap4ベースで安定版テーマが出て来たので、自分のサイトをDrupal8へ移行するキッカケとなったBootstrap 4 Base ThemesのBarrioを簡単に解説します。

※Barrioには、通常のテーマとSASSを使ったものがあります。間口を広げて通常のテーマを使って解説しようとしましたが、軽く詰んだのでSASSにします・・・。

（2020.5.21現在）
ほぼファイルの修正なく適用出来るようになっていたので下記のバージョンで見直しました。
Bootstrap 4 - Barrio SASS Starter Kit（8.x-1.12）
Barrio（8.x-4.28）

Bootstrap 4 - Barrio SASS Starter Kit
(https://www.drupal.org/project/bootstrap_sass)

Drupal8をインストールしているドキュメントルートで下記のコマンドを実行

Composerでインストール

composer require 'drupal/bootstrap_sass:^1.12'

実行後、themesのディレクトリを中を確認するとcontrib/bootstrap_barrioとcontrib/bootstrap_sassのディレクトリが作成されています。

themes/contrib/bootstrap_barrio
themes/contrib/bootstrap_sass

themes/contrib/bootstrap_sassに移動して下記のコマンドを実行すると、２回ほど聞いて来ます。
最初の問いはディレクトリ・テンプレート名で、次はテーマ名です。
最初は「qiita_sass」と入力し、次は「Qiita_SASS」と入力します。

bash

cd themes/contrib/bootstrap_sass
sh scripts/create_subtheme.sh
+------------------------------------------------------------------------+
| With this script you could quickly create bootstrap_sass sub-theme     |
| In order to use this:                                                  |
| - bootstrap_sass theme (this folder) should be in the contrib folder   |
+------------------------------------------------------------------------+
The machine name of your custom theme? [e.g. mycustom_bootstrap_sass]
qiita_sass
Your theme name ? [e.g. My custom bootstrap_sass]
Qiita_SASS
# Check the themes/custom folder for your new sub-theme.

実行後、下記themes/custom/qiita_sassディレクトリが生成されるので移動してgulpをインストールしてBootstrapもインストールします。
※事前にnode.jsが必要です。

cd themes/custom/qiita_sass
$ npm install --global gulp-cli
$ npm install

themes/custom/qiita_sass/gulpfile.js
の61行目付近のローカルなどの開発環境ドメインに修正

browserSync.init({
  proxy: "http://yourdomain.com",
});

ここまで設定したら、Drupalの管理画面で/admin/appearanceアクセスすると、Qiita SASSが選べるようになっていると思いますので、「インストールしてデフォルトに設定」で設定します。

themes/custom/qiita_sassでgulpと入力実行すると、別にブラウザが起動しbrowser-synが利用できます。


$ gulp
[17:05:16] Using gulpfile ~/themes/custom/qiita/gulpfile.js
[17:05:16] Starting 'default'...
[17:05:16] Starting 'styles'...
[17:05:19] Finished 'styles' after 2.37 s
[17:05:19] Starting 'js'...
[17:05:19] Starting 'serve'...
[Browsersync] Proxying: http://****:88
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.155:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] 3 files changed (bootstrap.min.js, jquery.min.js, popper.min.js.map)
[17:05:19] Finished 'js' after 140 ms
[Browsersync] Reloading Browsers... (buffered 3 events)

ページが表示されると、一番上のログイン部分がいらないので、非表示にします。
Drupalの管理画面でadmin/structure/blockにアクセスしてブロックレイアウトのページで
Secondary menuのところのユーザーアカウントメニューを無効にしまします。

また、ヘッダーを上部に固定したい場合は、テーマの設定画面から指定します。
admin/appearance/settings/テーマ名
AffixのタブのAFFIX NAVBARを開いて、Affix navbarにチェックを入れて設定を保存します。

この設定で、どのページでもヘッダーが固定されます。

しかし検索ページがどこでも表示されているので、ブロックレイアウトで
Sidebar firstにある検索ブロックをPrimary menuに移動し、保存します。

また検索ブロックの設定を開いてディスプレイ・タイトルのチェックを外してます。
画面幅を狭くすると表示されるボタンを押すと、検索ブロックが表示されます。

Drupal7より簡単にテーマのカスタマイズが出来るようになりました。後日、少し詳しく追記します。