Edited at
DrupalDay 16

Bootstrap 4 SASS - Barrio Starter Kitを試してみた

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

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

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

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

Barrio

(https://www.drupal.org/project/bootstrap_barrio)

Bootstrap 4 Barrio SASS Subtheme

(https://www.drupal.org/project/bootstrap_sass)

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

Composerでインストール

composer require 'drupal/bootstrap_barrio:^4.17'

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

themes/contrib/bootstrap_barrio

そしてBootstrap 4 Barrio SASS Subthemesも実行します。

composer require 'drupal/bootstrap_sass:^1.6'

実行後、下記ディレクトリが生成されています。

themes/contrib/bootstrap_sass

テーマ名のリネーム

今回は「qiita_sass」としました。


themes/contrib/bootstrap_sassthemes/custom/bootstrap_sassにコピーします。

今回は「bootstrap_sass」を「qiita_sass」とリネームしました。

themes/contrib/bootstrap_sass


themes/custom/qiita_sass

themes/custom/qiita_sass配下でファイル名の変更をします。

bootstrap_sass.theme → qiita_sass.theme

bootstrap_sass.info.yml → qiita_sass.info.yml
bootstrap_sass.libraries.yml → qiita_sass.libraries.yml
/config/install/bootstrap_sass.settings.yml → /config/install/qiita_sass.settings.yml
/config/schema/bootstrap_sass.schema.yml → /config/schema/qiita_sass.schema.yml

qiita_sass.info.ymlを修正します。1行目・3行目・9行目を変更します。

name: Qiita SASS

type: theme
description: 'Qiita Advent Calendar 2018.'
# version: VERSION
# core: 8.x
base theme: bootstrap_barrio

libraries:
- bootstrap_sass/global-styling

8行目のlibrariesの下の

bootstrap_sass/global-styling → qiita_sass/global-styling

に変更します。

qiita_sass.themeを修正します。15行目を変更しました。

function bootstrap_sass_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {


function qiita_sass_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {

themes/contrib/qiita_sass/gulpfile.js

の29行目にローカルなどの開発環境ドメインに修正

browserSync.init({

proxy: "http://yourdomain.com",
});

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

qiita201801.jpg

とりあえず、テーマのデフォルト設定はしましたが、まだやることが残っております。

SASSを使えるようにするには、コマンドラインでthemes/custom/qiita_sassディレクトリに移動して、下記コマンドを実行します。

※node.jsが必要です。

※必要じゃなければ3番目は入れなくても大丈夫かと思います。

$ npm install --global gulp-cli

$ npm install bootstrap@4.1.3
$ npm install mdbootstrap
$ npm install gulp browser-sync gulp-sass gulp-autoprefixer gulp-compress gulp-minify-css gulp-sourcemaps gulp-uglify gulp-concat --save-dev

コマンド実行後にthemes/custom/qiita_sassgulpと入力実行すると、別にブラウザが起動しbrowser-synが利用できます。

qiita201802.jpg

ページが表示されると、一番上のログイン部分がいらないので、非表示にします。

Drupalの管理画面でadmin/structure/blockにアクセスしてブロックレイアウトのページで

Secondary menuのところのユーザーアカウントメニューを無効にしまします。

また、ヘッダーを上部に固定したい場合は、テーマの設定画面から指定します。

admin/appearance/settings/テーマ名

AffixのタブのAFFIX NAVBARを開いて、Affix navbarにチェックを入れて設定を保存します。

qiita201803.jpg

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

しかし検索ページがどこでも表示されているので、ブロックレイアウトで

Sidebar firstにある検索ブロックをPrimary menuに移動し、保存します。

また検索ブロックの設定を開いてディスプレイ・タイトルのチェックを外してます。

画面幅を狭くすると表示されるボタンを押すと、検索ブロックが表示されます。

qiita201804.jpg

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