Drupalの管理セクションでは、各テーマにはadmin/appearance/settings/themeNameに独自の設定ページがあります。このページには、「ロゴ画像の設定」や「ファビコン設定」などの標準設定を含むフォームがあります。
Drupal 8にはブレークポイントを編集するためのユーザーインターフェースはありません。ブレークポイントが設定ファイルで定義されているため、contribでユーザーインターフェースを提供することもできません。
ブレークポイントは、ビューポート(画面、プリンター、その他の種類のメディア出力)の高さまたは幅をステージに分割するために使用され、レスポンシブデザインがさまざまなデバイスで正しく表示されるように調整されるケースを提供します。Breakpointsモジュールはブレークポイントの使用を標準化し、モジュールとテーマが相互のブレークポイントを公開または使用できるようにします。Breakpointsモジュールは、高さ、幅、解像度ごとにブレークポイントを追跡します。
CSSブレークポイントをbreakpoints.ymlファイルに入力する必要があるのは、Responsive Imagesモジュールの場合のように、Drupalがブレークポイントと対話する必要がある場合のみであることに注意してください。
Drupal 7と同様に、前処理関数を使用して特定のHTMLの出力に影響を与えることができます。たとえば、メニューにクラスを追加したい場合で、PHPレベルで行うことを好むなら、それができます。これはテーマ固有のマークアップを変更する良い方法ですが、テーマに依存しないマークアップにしたい場合は、独自のモジュールを作成する方が適しています。
(注:このドキュメントでは、「mytheme」はテーマのマシン名です。たとえば、「bartik」はテーマのマシン名です。)
前処理関数を操作するには:
1. テーマのディレクトリにmytheme.themeという名前のファイルを作成または編集します
2. mytheme_preprocess_HOOKのような関数を作成します。ここで、HOOKは影響を与えたい要素を参照します*
3. 変更を書いて保存します
4. 変更が有効になるようにキャッシュを再構築します(drushがインストールされている場合、コマンドラインでdrush crを実行します)
多くのTwigテンプレートには、変数として渡される1つ以上のAttributeオブジェクトがあります。Attributeオブジェクトの役割は、HTML属性のセットを保存し、開発者にこのデータを操作するための便利なメソッドを提供し、属性を簡単に出力できるようにすることです。たとえば、attributes.addClass('myclass')を使用すると、文字列の正確な連結を心配することなく単一のクラスを追加できます。
通常、テンプレートの属性は次のようになります:
<div{{ attributes }}></div>
タグ名とTwig構文の間にスペースを入れてはいけません。Drupal 8コアに含まれる「stable」テーマには、学習できる属性の例が多数あります。
デフォルトでは、すべてのテンプレートで次の属性オブジェクト変数が利用可能です:attributes、title_attributes、content_attributes。
多くの開発者は、ヘッダー/フッターコードを別のファイルに保存し、page.html.twigでそのファイルを呼び出すことを好みます
プロセス
テーマのフォルダーにヘッダー用の次のファイルを作成したとします:
THEME_NAME/templates/includes/header.html.twig
そして、このファイルを次に含めたいとします:
page.html.twig
推奨される方法
Drupal 8テーマの正しい方法は、Twig名前空間を使用して現在のテーマの「templates」ディレクトリを宣言することです。例:
Drupalには強力な画像管理システムがあり、画像にさまざまな効果を適用して元の画像から派生バージョンを作成できる画像スタイルを作成できます。この機能は、コアが提供する画像スタイルに依存するのではなく、そのテーマで動作するように作成されたデフォルトの画像スタイルセットを含めたいテーマで使用できます。
テーマに画像スタイルを含めるプロセスは、モジュールにデフォルト設定を含めるプロセスと似ています。
- ユーザーインターフェースを使用して、含めたい画像スタイルを作成します
- 画像スタイルをYAMLとしてエクスポートします
- 適切な命名規則に従って、エクスポートしたYAMLをテーマのconfig/installディレクトリに含めます。
まず、「設定」>「メディア」>「画像スタイル」(admin/config/media/image-styles)の管理者インターフェースを使用して画像スタイルを作成します。画像スタイルが作成されて保存されると、その画像スタイルを構成する設定がサイトのアクティブ設定に保存されます。
Drupal 8 RC 2のclassyテーマに含まれるすべてのCSSクラスセレクターを文書化します
形式:
.foo { }
.foo-bar { }
filename.html.twig / filename.css
Twig - Available CSS selectors in the Classy theme:
LAYOUT
Body
.user-logged-in { }
.path-frontpage { }
.path-[root_path] { }
.node--type-[node_type] { }
.db-offline { }
.visually-hidden { }
.focusable { }
.skip-link { }
file: html.html.twig
サブテーマは、他のテーマと同様ですが、1つだけ違いがあります。親テーマのリソースを継承する点です。サブテーマを親テーマに接続するチェーンに制限はありません。サブテーマは別のサブテーマの子になることができ、必要に応じて分岐して編成できます。これがサブテーマに大きな可能性を与えています。
サブテーマを作成するには、他のテーマと同様に定義し、「base theme」キーを使用してベーステーマを宣言します。(このキーにはアンダースコアがないことに注意してください。)