6.2. Drupal 8 のテーマが何で構成されているか。Stark テーマの概要。

30/08/2019, by mikhail

Drupal 7 では、Zen 上でサブテーマを素早く簡単に作り、ウェブサイトの構築を始められました。Drupal 8 でも、独自のテーマを作成するためのテーマビルダーがいくつかあります。しかし、それらでサブテーマを作る前に、どこに何があるかを少し理解する必要があります。

Drupal の開発者は、Stark サンプルテーマを検討することを提案しています。このテーマは、テーマがどう構成されているかに慣れるためだけに Drupal に追加されました。このテーマの中に何があるか見てみましょう:

Stark.info.yml ファイル

stark.info.yml ファイルから見ていきます。以前 Drupal 7 では、テーマデータは .info ファイルに保存されていましたが、Drupal 8 ではどこでも YML を使うので、.info ファイルは今では YML 形式の info.yml です。YML 形式では、キーと値はコロンで区切られます

テーマ名:

name: Stark

プロジェクトのタイプはテーマ、モジュールがあり得ます。私たちはこれをテーマとして持っています。

type: theme

テーマのページに表示される説明:

description: 'An intentionally plain theme with no styling to demonstrate default Drupal’s HTML and CSS. Learn how to build a custom theme from Stark in the Theming Guide '

便宜のための Drupal プロジェクトのグループ化。例えば、モジュールが組み込まれると、タブにグループ化されます:

package: Core

contrib モジュールのバージョンは自動的に設定されるので、ここには VERSION 変数があり、行自体はコメントアウトされています。実際、バージョンは下に記載されています:

# version: VERSION

Drupal のコアバージョンもコメントアウトされ、drupal.org によって自動的に貼り付けられます:

Drupal 8.8 以上の場合:

core: 8.x
core_version_requirement: ^8 || ^9

Drupal 8.8 以下の場合:

# core: 8.x

何らかの基底テーマを使うかどうか。false は使わないことを意味します:

base theme: false

テーマのバージョンとどのコアかのブロックは、drupal.org によって自動的に挿入されます:

# Information added by Drupal.org packaging script on 2016-02-03
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

stark.libraries.yml ファイル

ここで css と js のテーマファイルを組み込みます:

global-styling:
  version: VERSION
  css:
    base:
      css/layout.css: {}

javascript ファイルも組み込めます

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}

また、jQuery は今では使用が任意で、ページに表示されないことがある点にも注意すべきです。カスタムスクリプトで jQuery を使う場合は、テーマに追加する必要があります:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

さらに、css ファイルに対して、どのファイルを常に表示し、どれを印刷版でのみ表示するかを設定することもできます

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

説明ファイル README.txt、screenshot.png

これらのファイルは、テーマがどう見えるか、そしてインストールや使用に何か特徴がある場合、どうインストールするかを示します。

Logo.svg ファイル

ロゴファイルは、サイトのルートにあれば、自動的にデザインテーマに接続されます。テーマの設定を通じて独自のロゴを入力することもできます。

config フォルダーと stark.schema.yml ファイル

テーマ設定が保存されるもう 1 つの YML テーマファイル。Stark テーマの場合、ここにあるのは Stark テーマ設定ページのタイトルだけです。

css、js フォルダー

これらのフォルダーには、カスタムの css、javascript ファイルが保存されます。ファイルをフォルダーに置くだけでは組み込まれないことを忘れないでください。各ファイルは stark.libraries.yml を通じて個別に接続する必要があります。

stark.breakpoints.yml ファイル

このファイルは、サイトのモバイル版の画面サイズを定義します。これは Drupal の新機能で、続く記事の 1 つで詳しく説明します。

stark.mobile:
   label: mobile
   mediaQuery: '(min-width: 0px)'
   weight: 0
   multipliers:
    - 1x
stark.narrow:
   label: narrow
   mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
   weight: 1
   multipliers:
     - 1x
stark.wide:
   label: wide
   mediaQuery: 'all and (min-width: 960px)'
   weight: 2
   multipliers:
     - 1x

これが慣れておくべきテーマ Stark です。次の記事では、Stable テーマをベースに独自のテーマを作成する方法を見ていきます。

パレット - カラフルに🎨