Grav-theme-customization

提供：Dev Guides
移動先:案内、検索

Grav-テーマのカスタマイズ

この章では、*テーマのカスタマイズ*について学習します。 テーマをカスタマイズするにはいくつかの方法があります。 Gravは、テーマを簡単にカスタマイズするための多くの機能といくつかの機能を提供します。

カスタムCSS

独自の custom.css ファイルを提供して、テーマをカスタマイズできます。 Antimatterテーマは、 Asset Manager を使用して css/custom.css ファイルを参照します。 CSSファイルへの参照が見つからない場合、 Asset Manager はHTMLへの参照を追加しません。 Antimatterの css/ フォルダーにCSSファイルを作成すると、デフォルトのCSSが上書きされます。 たとえば- 

*custom.css*
body a {
   color: #FFFF00;
}

デフォルトのリンクの色は上書きされ、黄色に設定されます。

カスタムSCSS/LESS

カスタムCSSファイルを提供する別の方法は、 custom.scss ファイルを使用することです。 SCSS（Syntactically Awesome Style Sheets）は、演算子、変数、ネスト構造、インポート、パーシャル、ミックスインを使用してCSSを効率的に構築できるCSSプリプロセッサです。 AntimatterはSCSSを使用して記述されています。

SCSSを使用するには、SCSSコンパイラが必要です。 コマンドラインツールとGUIアプリケーションを使用して、SCSSコンパイラを任意のプラットフォームにインストールできます。 Antimatterは scss/ フォルダーを使用して、すべての .scss ファイルを配置します。 コンパイルされたファイルは css-compiled/ フォルダーに保存されます。 

*SCSS* ファイルは、次のコマンドを使用して行うことができる更新を監視する必要があります-
scss --watch scss:css-compiled

上記のコマンドは、SCSSコンパイラーにscssというディレクトリを監視するように指示し、 css-compiled フォルダーが更新されるたびに、SCSSコンパイラーがそれをコンパイルする必要があります。

カスタムSCSSコードを scss/template/_custom.scss ファイルに保存できます。 このファイルにコードを保持することには多くの利点があります。

  • SCSSファイルおよびその他のCSSファイルからの更新は、 css-compiled/template.css ファイルにコンパイルされます。

  • テーマで使用されているSCSSのいずれかにアクセスし、使用可能なすべての変数とミックスインを使用できます。

  • 開発を容易にするために、標準SCSSのすべての機能にアクセスできます。

    *_custom.scss* ファイルの例を以下に示します-
body {
   a {
      color: darken($core-accent, 20%);
   }
}

テーマをアップグレードすると、すべてのカスタムCSSが上書きされます。 これは、この方法でテーマをカスタマイズすることの大きな欠点です。 これは、テーマの継承を使用することで解決できます。

テーマの継承

*Theme Inheritance* は、テーマを変更またはカスタマイズする最良の方法であり、いくつかのセットアップで実現できます。 基本的な考え方は、テーマは継承元のベーステーマとして定義され、一部のビットのみが変更可能で、残りの部分はベーステーマによって処理されるということです。 テーマの継承を使用する利点は、カスタマイズされた継承テーマが、ベーステーマが更新されるたびに直接影響を受けないことです。 これを実現するには、次の手順に従う必要があります。
  • 新しいテーマを保存するには、 /user/themes/ フォルダー内に mytheme/ という新しいフォルダーを作成します。
  • 次に、新しく作成された /user/themes/mytheme/ フォルダーの下に mytheme.yaml という名前の新しいテーマYAMLファイルを作成し、次のコンテンツを含める必要があります。
streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter
  • /user/themes/mytheme/ フォルダーに blueprints.yaml という名前のYAMLファイルを作成し、次のコンテンツを追加します。
name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org

これで、基本的な要素で構成されるテーマ blueprints.yaml を定義する方法を理解できます。 フォームの機能を制御するために、フォーム定義の詳細を提供できます。 詳細については、 blueprints.yaml ファイルを調べることができます。

  • user/config/system.yaml ファイルで* pages：theme：*オプションを編集して、以下に示すようにデフォルトテーマを新しいテーマに変更します。
pages:
   theme: mytheme

これで新しいテーマが作成され、Antimatterがこの新しい mytheme テーマの基本テーマになります。 特定のSCSSを変更する場合は、最初に mytheme テーマ、次にAntimatterテーマに見えるようにSCSSコンパイラーを構成する必要があります。

それは次の設定を使用します-

  • まず、 antimatter/scss/ フォルダーにある template.scss ファイルをコピーして、 mytheme/scss/ フォルダーに貼り付けます。 このファイルには、 template/_custom.scss やサブファイルなどのさまざまなファイルに対するすべての @ import 呼び出しが含まれます。
  • load-path は、多数のSCSSファイルを含む antimatter/scss/ フォルダーを指します。 SCSSコンパイラを実行するには、以下に示すように* load-pathを提供する必要があります。*
scss --load-path ../antimatter/scss --watch scss:css-compiled
  • ここで、 mytheme/scss/template/ の下に _custom.scss というファイルを作成します。 このファイルには、すべての変更が含まれます。

カスタムSCSSファイルが変更されると、自動的にすべてのSCSSファイルが mytheme/css-compiled/ フォルダーの下にある template.css に再びコンパイルされ、Gravはこれを正確に参照します。

「https://www.finddevguides.com/index.php?title=Grav-theme-customization&oldid=5735」から取得
Powered by MediaWiki