Twig、PHP、CSS を使用したシンプルな Grav CMS テーマの構築

この記事は Symfony Station に初めて掲載されました。

導入

これを読んでいるなら、今日コンテンツ指向の Web サイトを構築するのは複雑すぎるクラスタファックであることをご存知でしょう。

しかし、それをより簡単かつシンプルにするコンテンツ管理システムがあります。これは特にフロントエンド開発者に当てはまります。それは Grav CMS です。

私の主なビジネス サイトである grav.mobileatom.net のテーマをカスタマイズします。何だと思う？ AI は一切関与しません。

そして、この記事を書くことは、私にとってその方法を学び、コミュニティを助けることになるでしょう。 Grav に関する記事はあまり見られません。

次の内容を取り上げます:

(1) 組織・ファイル構造
(2) 小枝テンプレート
(3)CSS
(4) Twig機能
(5)カスタマイズ

ご存知ない方のために説明しますと、GravCMS は Symfony をベースにした数多くの CMS の 1 つです。

この記事の技術的な詳細は、ほとんどが Grav ドキュメントからの言い換えです。先ほども言いましたが、私はこれを自分で学んでいます。

グラブ 言います:

「Grav のコアは、コンテンツのフォルダーとマークダウン ファイルの概念に基づいて構築されています。これらのフォルダーとファイルは自動的に HTML にコンパイルされ、パフォーマンスのためにキャッシュされます。

そのページには、CMS 全体の基盤となるフォルダー構造に直接関連する URL 経由でアクセスできます。 Twig テンプレートを使用してページをレンダリングすると、事実上制限なく、サイトの外観を完全に制御できます。」

それでは、テーマを見てみましょう。

Grav テーマ

Grav のテーマは Twig テンプレートを使用して構築されており、Twig について詳しくは、私の記事「Twig: プレミア PHP テンプレート言語の究極ガイド」で学ぶことができます。さらに、ここでいくつかの詳細を説明します。

そこでも書きましたが、Twig は MVC (モデル、ビュー、コントローラー) プログラミングのビューの HTML に変数を出力する PHP テンプレート言語です。したがって、Web サイトのフロントエンドの構造に貢献します。

Symfony も作成した Fabien Ponticier によって作成されたため、Grav で使用されるのも不思議ではありません。

彼は、「テンプレート言語は、この (MVC) 関心の分離を尊重したテンプレートを作成するのに役立つものです。テンプレート言語は、プレゼンテーション ロジックの実装を容易にする十分な機能を提供することと、高度な機能を制限することの間で適切なバランスを見つける必要があります。」ビジネス ロジックによってテンプレートが機能しなくなることを避けるための機能です。"

PHP テンプレートとは正確には何ですか?上で述べたように、これらは PHP アプリケーションのビューをそのモデルやオブジェクトから分離するために使用されます。

Twig の主な機能は次のとおりです:

• 高速: Twig はテンプレートをプレーンな最適化された PHP コードにコンパイルします。通常の PHP コードと比較したオーバーヘッドは最小限に抑えられました。
• 安全: Twig には、信頼できないテンプレート コードを評価するためのサンドボックス モードがあります。このモードでは、ユーザーがテンプレートのデザインを変更するアプリケーションのテンプレート言語として Twig を使用できます。
• 柔軟性: Twig は柔軟なレクサーとパーサーによって強化されています。この柔軟性により、開発者はカスタム タグとフィルター (詳細は後述) を定義し、独自の DSL を作成できます。

最後の簡単なメモ:

• Twig テンプレート名は .html.twig で終わります。
• YAML を使用して構成します。
• バニラ CSS ともうまく機能します。

管理インターフェースを介して Grav で作成した各ページは、Twig テンプレート ファイルを参照します。ベスト プラクティスは、テンプレート ファイル名とページ名をできるだけ一致させることです。または、少なくともコンテンツ ファイルのフォルダー構造。

たとえば、blog.md は Twig テンプレート blog.html.twig を使用してレンダリングします

(1) 組織・ファイル構造

それでは、Grav テーマがどのように構成されているかを見てみましょう。

各テーマには、blueprints.yaml という名前の定義ファイルがあります。管理パネルのフォーム定義も提供できます。

テーマ定義オプションを使用するには、your_theme_name.yaml ファイルにデフォルト設定を指定します。

テーマのルートに、thumbnail.jpg という名前の 303x300 jpg を含めます。

(2) 小枝テンプレートなど

Grav ページの Twig テンプレートは、次のサブフォルダーを持つ template/ フォルダーに存在する必要があります。

• フォーム/
• モジュラー/
• 部分/

ベスト プラクティスは、コンテンツを推測してテーマを作成することです。この戦略は、私が Grav にこれほど投資している理由の 1 つです。ページ ファイル = Twig テンプレート。

繰り返しますが、default.md、blog.md、error.md、item.md、modular.md は、default.html.twig、blog.html.twig などに相当します。

テーマには CSS 用の css/ フォルダーが必要です。

カスタム アセットを保存するために、images/、fonts/、および js/ フォルダーをルートに追加します。

前述のように、blueprints/ フォルダーにはフォーム定義を含むファイルが格納されます。

プラグインはフックを介して Grav テーマに取り込まれます。

つまり、your_theme_name.php には Twig 以外のロジックが格納されます。

参考までに、他の人に販売する商用テーマを作成したい場合は、次のファイルも必要になります:

• CHANGELOG.md
• ライセンス.md
• README.md
• スクリーンショット.jpg
• サムネイル.jpg

基本テンプレート

Grav を使用すると、デフォルトの Twig テンプレートだけで私のものを取得できます。

ただし、Twig Extends タグを使用して、ベース テンプレート内のブロックを介してベース レイアウトを定義することをお勧めします。このファイルは、partials/ サブフォルダーにbase.html.twig として保存されます。上の画像をご覧ください。

デフォルトおよびその他の特殊なテンプレートでは、extends タグを使用して、base.html.twig からベース レイアウトを取得します。

Twig 構文を使用して、default.html.twig ファイルに対して次のようにコード化します。

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

最初のコード セットは、基本レイアウトを含む基本テンプレートを拡張します。

2 つ目は、基本テンプレートのコンテンツを新しいテンプレートのコードで上書きします。

(3) テーマCSS

次に、Grav テーマの CSS を見てみましょう。 SCSS を含めて実装するにはいくつかの方法があります。ただし、シンプルにするという観点から、バニラ CSS に焦点を当てます。短いですよ。 Custom.css ファイルを追加して街に行きましょう。

(4) Twig の機能

Twig がどのように機能するかについても簡単に見てみましょう。

Extend などの Twig タグは、テンプレートのロジックを制御します。彼らはツイッグに何をすべきかを指示します。私見ですが、ブロックは最も重要なタグです。

その他には次のものが含まれます:

• キャッシュ
• 値下げ
• スクリプト
• スタイル
• スイッチ
• など

Twig フィルターは、テキストと変数の書式設定と操作に役立ちます。

それらには以下が含まれます:

• 日付
• 逃げる
• 参加
• 下
• スライス
• など

関数はコンテンツを生成し、機能を実装できます (当然のことです)。また、フィルタで実行できるのと同じことのいくつかを実行することもできます。

そのため、テンプレートには、独自のニーズに必要な Twig タグ、フィルター、関数を使用してください。

グラヴの小枝のタグ

選択したタグに加えて、Grav には機能を拡張するためのカスタム Twig タグが含まれています。

それらには以下が含まれます:

• 値下げ
• スクリプト (たとえば、JavaScript を取り込むことができます)
• スタイル
• リンク
• スイッチ
• 遅延 (アセットのロード)
• スロー (例外)
• 試す/捕まえる
• レンダリング (フレックスオブジェクト)
• キャッシュ

テーマの構成

Grav を使用すると、Twig および PHP ファイルからテーマの設定とブループリント情報にアクセスできます。これはテーマ オブジェクト経由で行うことも、PHP 構文で Grav プラグインを使用することもできます。

ベスト プラクティスとして、テーマのデフォルトの your_theme_name.yaml ファイルを変更しないでください (上の画像を参照)。 user/config/themes フォルダーでオーバーライドします。

最後の注意として、Twig にはカスタム オブジェクトと変数もありますが、ここでは説明しません。簡単にしておきます。

アセットマネージャー

Grav のアセット マネージャーは、CSS および JavaScript ファイルを管理する柔軟な方法を提供します。アセットを縮小、圧縮、インライン化するためのアセット パイプラインが含まれています。

これは利用可能であり、プラグイン イベント フックで、または Twig 呼び出しを介してテーマで直接アクセスできます。 user/config/system.yaml に独自の構成ファイルがあります。

Asset Manager を使用するとエンタープライズレベルの詳細を取得できるため、ここではこれ以上詳しく説明しません。

シンプルにするという観点から、Assets プラグインを使用することをお勧めします (上の画像を参照)。 Grav 管理者からダウンロードします。次に、それを使用して、必要に応じてアセットを更新または追加します。

(5) カスタマイズ

これで、すばやく簡単な Grav テーマを構築する方法を説明しました。構造を設定し、Twig テンプレートを構築し、必要に応じて CSS と JavaScript を追加します。

Grav テーマを単純または複雑なニーズに合わせて作成するにはさまざまな方法があることがわかりましたが、Grav にはそれをさらに簡単にするための機能が用意されています。そして、これが私のサイトのテーマをカスタマイズする方法です。

テーマの継承

そのより簡単な方法は、テーマの継承を使用することです。これは私が WordPress や Drupal テーマで行ったことと似ているので気に入っています。

これは、テーマをカスタマイズするための Grav の推奨方法でもあります。

継承元の基本テーマを定義します。たとえば、デフォルトのテーマ Quark または購入したテーマです。次に、カスタマイズしたいものを追加または編集し、残りは基本テーマに処理させます。

この戦略により、継承テーマのカスタマイズを失うことなく、基本テーマを更新することもできます。

継承テーマを作成するにはいくつかの方法があります。ただし、ここでも簡単にするために、手動プロセスを見てみましょう。

新しいフォルダーを作成します ->カスタムテーマを保持する user/messages/your_theme_name。

次に、継承元のテーマから YAML ファイルを新しいフォルダーにコピーします。 your_theme_name.yaml という名前を付け、Quark が表示される場所で新しいテーマ名を切り替えます。

次に、users/themes/quark/blueprint.yaml ファイルを user/themes/your_theme_name フォルダーにコピーします。

次に、user/config/system.yaml ファイルのデフォルトのテーマを変更します。

ページ:
テーマ: your_theme_name

最後に、高度なイベント駆動型機能を追加するには、user/messages/your_theme_name/your_theme_name.php ファイルを作成します。

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

これで、まず your_theme_name を調べてから Quark を試行するように、Grav のストリームを設定しました。

次に、必要な CSS、JS、および Twig テンプレートの変更を提供します。

これで完了です。かなり単純です。

結論

うわー。記事を最後まで読んでいただきありがとうございます。

これで、Grav テーマについてさらに詳しく知ることができました':

(1) 組織・ファイル構造
(2) 小枝テンプレート
(3)CSS
(4) Twig機能
(5)カスタマイズ

特にテーマをカスタマイズする場合は、簡単さのため Grav の使用を検討してください。 PHP、Twig、バニラ CSS、JS の気に入らない点。コンテンツもマークダウンで作成します。

シンフォニスタとグラビノートのコーディングを続けてください!

リソース

https://learn.getgrav.org/17/主題

https://twig.symfony.com/

https://twig.symfony.com/doc/3.x/

https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet

以上がTwig、PHP、CSS を使用したシンプルな Grav CMS テーマの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。