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

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

カスタムCSS

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

custom.css

body a {
   color: #FFFF00;
}

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

カスタムSCSS / LESS

カスタムCSSファイルを提供する別の方法は、 custom.scssファイル。SCSS（構文的に素晴らしいスタイルシート）は、あなたが演算子、変数、ネストされた構造、輸入、パーシャルを使用して効率的にCSSを構築し、ミックスインをすることを可能にするCSSプリプロセッサです。反物質はSCSSを使用して書かれています。

SCSSを使用するには、SCSSコンパイラが必要です。コマンドラインツールとGUIアプリケーションを使用して、任意のプラットフォームにSCSSコンパイラをインストールできます。反物質は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テーマを変更またはカスタマイズするための最良の方法であり、いくつかの設定で実行できます。基本的な考え方は、テーマは継承元の基本テーマとして定義され、一部のビットのみを変更でき、残りは基本テーマによって処理されるというものです。テーマの継承を使用する利点は、基本テーマが更新されるたびに、カスタマイズされた継承されたテーマが直接影響を受けないことです。これを行うには、次の手順に従う必要があります。

新しいテーマを保存するには、という新しいフォルダを作成します mytheme/ 内部 /user/themes/ フォルダ。
次に、という新しいテーマYAMLファイルを作成する必要があります mytheme.yaml 新しく作成された下 /user/themes/mytheme/ 次の内容のフォルダ。

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

と呼ばれるYAMLファイルを作成します blueprints.yaml 下 /user/themes/mytheme/ 次の内容のフォルダ。

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を変更したい場合は、SCSSコンパイラを構成してmytheme 最初にテーマ、次に反物質テーマ。

以下の設定を使用します-

最初にコピーします template.scss に配置されるファイル antimatter/scss/ フォルダに貼り付けて mytheme/scss/フォルダ。このファイルには、@import 次のようなさまざまなファイルが必要です template/_custom.scss およびサブファイル。
ザ・ load-path に指差す antimatter/scss/多数のSCSSファイルを含むフォルダー。SCSSコンパイラを実行するには、以下を提供する必要がありますload-path to it as shown below.

scss --load-path ../antimatter/scss --watch scss:css-compiled

次に、というファイルを作成します _custom.scss 下 mytheme/scss/template/。このファイルには、すべての変更が含まれます。

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