6.1.1 - Zen をベースにしたテーマの作成 Drupal 8

Zen は Drupal で最も人気のあるビルダーテーマです。3 カラムレイアウトをベースにサイトのレスポンシブデザインを素早く作る必要があるなら、Zen がまさに必要なものです。インストールして npm install を実行するだけで、Zen がデザインの基盤を用意してくれます。順を追って見ていきましょう。

公式ウェブサイトから Zen 親テーマをダウンロードします:

https://www.drupal.org/project/zen

Drupal 8 では、テーマを直接 /themes フォルダーに置けるので、テーマのフォルダーをそこに置きます。

/themes/zen/STARTERKIT フォルダーには、手動で独自のサブテーマを作れるサブテーマがあります。そのためには、どこでも STARTERKIT をあなたのテーマ名に置き換え、Zen テーマをアップグレードするときに新しいサブテーマが失われないように、新しいサブテーマのフォルダーを /themes/zen フォルダーから移動する必要があります。しかし、drush かテーマジェネレーターを使うことを強くお勧めします。

Zen テーマには、Components Libraries モジュールもインストールする必要があります:

https://www.drupal.org/project/components

Zen テーマを有効にしましょう。ただし、デフォルトとしてはインストールしません。デフォルトでは、後で私たちのサブテーマをインストールします。drush コマンドを実行します:

drush zen drupalbook

Drush が私たちのために drupalbook サブテーマを作成します。drupalbook の代わりに任意のテーマ名を挿入できます。これで、新しい drupalbook サブテーマをデフォルトで有効にできます。テーマは動作しますが、次に gulp タスクを有効にする必要があります。そのために、Node.js をインストールする必要があります

https://nodejs.org/en/download/

Node.js は Windows/Mac OS/Ubuntu やその他のシステムにインストールできます。

また、Node.js がインストールされたら、Node.js 用のパッケージマネージャー npm を構成する必要があります:

https://docs.npmjs.com/getting-started/installing-node

次に、PhpStorm コンソールで /themes/drupalbook フォルダーに移動します:

cd themes/drupalbook

そして、すべての Zen の依存関係を一度にインストールするコマンドを実行します:

npm install

次に、gulpfile.js ファイルを右ボタンでクリックし、Show Gulp Tasks を選択します:

最初、すべてのスタイルはコンパイルされ、フォルダー /themes/drupalbook/components/asset-builds/css にあります。新しいスタイルを書くには、.scss で書くと gulp がそれらを再コンパイルします。そのために、watch: css タスクを実行します。これで、sass を変更すると、Zen が自動的に CSS ファイルを生成します（あるいは Ctrl + S を押して。PhpStorm で設定を変更できます）。

javascript テーマを編集するには、付属のファイル /themes/drupalbook/js/script.js を使えます。

Drupal 8 用の Zen ベースのサブテーマが、さらなる作業の準備が整いました:

Node.js のインストール時、gulp のエラーがよく発生することがあります。Zen を構成できたかどうか、コメントに書いてください。