Grav-themes-basics
Grav-テーマの基本
テーマは、Gravサイトの外観を制御します。 Gravのテーマは、強力なhttps://twig.sensiolabs.org/[Twigテンプレートエンジン]で構築されています。
コンテンツページとTwigテンプレート
作成するページは、名前によって、またはページのテンプレートヘッダー変数を設定することにより、特定のテンプレートファイルを参照します。 メンテナンスを簡単にするために、ページ名を使用することをお勧めします。
Grav Baseパッケージをインストールすると、user/pages/01.homeフォルダーに defauld.md ファイルが見つかります。 ファイルの名前、つまり default は、 themes/<mytheme>/templates フォルダー内に配置された小枝テンプレート defaultl.twig でこのページをレンダリングする必要があることをGravに伝えます。
たとえば、 contact.md というファイルがある場合、twigテンプレートを使用して* themes/<mytheme>/templates/contactl.twig*としてレンダリングされます。
テーマ構成
次のセクションでは、テーマの構成、つまりその定義、構成などについて説明します。
定義と構成
テーマに関する情報は user/themes/antimatter/blueprints.yaml ファイルで定義され、管理パネルで使用されるフォーム定義はオプションで提供されます。 * Antimatterテーマ*の user/themes/antimatter/blueprints.yaml ファイルに次のコンテンツが表示されます。
name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
name: Team Grav
email: [email protected]
url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT
form:
validation: loose
fields:
dropdown.enabled:
type: toggle
label: Dropdown in navbar
highlight: 1
default: 1
options:
1: Enabled
0: Disabled
validate:
type: bool
テーマ設定オプションを使用するには、 user/themes/<mytheme>/<mytheme> .yaml というファイルでデフォルト設定を提供する必要があります。
例
enable: true
テーマとプラグインのイベント
プラグインアーキテクチャを介してGravと対話するテーマの機能は、Gravのもう1つの強力な機能です。 これを実現するには、 user/themes/<mytheme>/<mytheme> .php (たとえば、デフォルトのAntimatterテーマの antimatter.php )ファイルを作成し、次の形式を使用します。
<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class MyTheme extends Theme {
public static function getSubscribedEvents() {
return [
'onThemeInitialized' => ['onThemeInitialized', 0]
];
}
public function onThemeInitialized() {
if ($this->isAdmin()) {
$this->active = false;
return;
}
$this->enable([
'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
]);
}
public function onTwigSiteVariables() {
$this->grav['assets']
->addCss('plugin://css/mytheme-core.css')
->addCss('plugin://css/mytheme-custom.css');
$this->grav['assets']
->add('jquery', 101)
->addJs('theme://js/jquery.myscript.min.js');
}
}
テンプレート
Gravテーマの構造には、各ページタイプのコンテンツのtemplates/フォルダーに関連付けられた小枝テンプレートがある必要があることを除いて、設定ルールはありません。
ページコンテンツとTwigテンプレートは密接に結合しているため、https://getgrav.org/downloads/skeletons [downloads page]で利用可能なスケルトンパッケージに基づいて一般的なテーマを作成することをお勧めします。
テーマでモジュラーテンプレートをサポートする場合、 modular/ フォルダーを作成し、その中に小枝テンプレートファイルを保存する必要があります。 フォームをサポートする場合は、 form/ フォルダーを作成し、その中にフォームテンプレートを保存する必要があります。
設計図
すべての単一テンプレートファイルのオプションと構成のフォームを定義するには、 blueprints/ フォルダーが使用されます。 これらは Administrator Panel では編集できず、オプションで使用されます。 テーマは blueprints フォルダーなしで完全に機能します。
SCSS/LESS/CSS
SASSまたはLESSを使用してサイトを開発する場合は、 user/themes/<mytheme>/scss/ にサブフォルダーを作成する必要があり、css/フォルダーとともにLESSが必要な場合は less/ を作成する必要があります。
SASSまたはLESSからコンパイルされた自動生成ファイルの場合、 css-compiled/ フォルダーが使用されます。 Antimatterテーマでは、SASSの scss バリアントが使用されます。
次の手順に従って、マシンにSASSをインストールします。
- テーマのルートで、次のコマンドを入力してscssシェルスクリプトを実行します。
$ ./scss.sh
- 次のコマンドを入力して、直接実行します。
$ scss --sourcemap --watch scss:css-compiled
*css-compiled/* には、コンパイルされたすべてのscssファイルが含まれ、cssファイルはテーマ内に生成されます。
その他のフォルダー
テーマで使用される画像、フォント、およびJavaScriptファイル用に、 user/themes/<mytheme>/ フォルダーに images/、fonts/ および js/ フォルダーを個別に作成することをお勧めします。
テーマの例
これまでに説明した Antimatter テーマの全体的なフォルダー構造を以下に示します。