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: devs@getgrav.org
   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 テーマの全体的なフォルダー構造を以下に示します。

Grav Theme Basics

Grav-themes-basics