VPSでTwigを使用してテンプレートページをデザインする方法

投稿日: 2022-04-20 2022-10-13
タグ: php, PHP Frameworks

Twigについて

Twig は、PHP用に設計された最新のテンプレートエンジンであり、デザイナーと開発者の両方に適しています。これは、Webアプリケーションのプレゼンテーションロジックを構築するPHPTemplateの方法に代わる非常に優れた方法であり、はるかにクリーンなテンプレート作成エクスペリエンスを表します。この点で、非常に理解しやすい構文が付属しており、テンプレートファイルで動的なPHP操作を実行することを制限します。

前のチュートリアルでは、Composerを使用してTwigをセットアップし、最も基本的なレベルで使用を開始する方法を説明しました。このチュートリアルでは、その構文と、それを使用してテンプレートファイルを作成する方法についてもう少し詳しく説明します。

最初に知っておく必要があるのは、ページにコメントを追加する方法です。そのための簡単な構文があります： {＃＃}。このブロック内に配置したものはすべて解析されません。また、複数行にすることもできます。

{# 
  This is a comment that won’t be parsed. 
#}

変数

変数をテンプレートファイルに渡す方法と、それを印刷する方法（二重中括弧の間）については、すでに説明しました。私たちが見たのは、非常に単純な文字列PHP変数でした。ただし、 render（）メソッドを配列またはオブジェクトに渡すこともできます。

アプリケーションに次のPHPクラスがあるとします。

class Box
{

    public $shape = 'square';

    public function displayShape() {
        return $this->shape;
    }
}

このクラスに基づいて新しいオブジェクトをインスタンス化し（ myBox と呼びましょう）、それをTwigテンプレートに渡すと、次のように操作できます。 $ shape 属性を出力する場合は、次のようにします。

{{ myBox.shape }}

displayShape（）メソッドを返したい場合は、次のようにします。

{{ myBox.displayShape() }}

配列の場合、それは非常に似ています。 myBox が、キーshapeを持つ1つの要素を持つ配列であるとします。オブジェクト属性と同じ構文で出力します。

{{ myBox.shape }}

さらに、他のTwig区切り文字 {%%} を使用して、テンプレートファイルに新しい変数を設定できます。

{% set shape = 'square' %}

フィルタ

Twigの優れた点は、非常に便利で使いやすいフィルターが多数用意されていることです。あなたが求めるフィルターは何ですか？説明する最も簡単な方法は、例を使用することです。

{{ shape|upper }}

これにより、形状変数の値がすべて大文字で出力されます。また、必要に応じて、複数のフィルターを組み合わせることもできます。

{{ shape|upper|trim }}

これは、変数値の最初と最後の空のスペースもトリミングします。さらに、ブロック全体にフィルターを適用できます。

{% filter upper %}
  This box is {{ shape }}.
{% endfilter %}

上記のステートメントは、フィルターブロック内のすべてを大文字に変換します。

TwigドキュメントのWebサイトで確認できる便利なフィルターがたくさんあります。日付変数を表示する形式を指定するdateフィルターのように、引数を取るものもあります。 Twigを学んでいる場合は、何かをチェックするためにそこに行くことがよくあります。

制御構造

テンプレートファイルはループまたはif/elseステートメントなしでは使用できないため、Twigではデータにさまざまな制御構造を使用することもできます。たとえば、これは通常のforeach反復を行う方法です。

{% for shape in shapes %}
  {{ shape }} 
{% endfor %}

これにより、 shapes 配列がループされ、各shapeが出力されます。 if/elseステートメントは次のようになります。

{% if shape is defined %}
  {{ shape }}
{% endif %}

これにより、shape変数が設定されている場合にのみ出力されます。制御構造の詳細については、Twigドキュメントページを参照してください。

テンプレートの包含と継承

Twigには非常に強力な機能があり、テンプレートを相互に含めることができます。説明しましょう：

{% include 'header.html' %}

このステートメントは、 header.html ファイルをロードし、それを含むテンプレートの現在のコンテキスト内にレンダリングします。これは、インクルードテンプレートで使用可能なすべての変数にアクセスできることを意味します。これは、複数の、しかしはるかにクリーンなファイルを保持できる優れた機能です。

さらに、継承はTwigのもう1つのさらに強力な機能です。これにより、ブロックを定義するテンプレートを作成し、これらのブロックのデフォルトコンテンツを上書きしたり、新しいコンテンツを追加したりできる他のテンプレートによってそれらを拡張することができます。簡単な例：

テンプレートA（ layout.html ）には、次のものが含まれています（これは単なる例であることに注意してください）。

<div class=”eight columns”>{% block mainContent %}{% endblock %}</div>
<div class=”four columns”>{% block rightSidebar %}{% endblock %}</div>

ご覧のとおり、定義されたブロック内にコンテンツはありません。必要に応じて追加できます。ただし、テンプレートBもこのテンプレートを拡張して、これらのブロックにコンテンツを追加できます。

{% extends "layout.html" %}

{% block mainContent %}Some page text{% endblock %}
{% block rightSidebar %}Some sidebar content{% endblock %}

ここで何が起こるかというと、テンプレートBはテンプレートAを拡張します（基本的にテンプレートAをページにロードしてレンダリングします）が、現在空である定義済みのブロックにもデータを入力します。テンプレートAのブロックにコンテンツがある場合、上記の例では、テンプレートBがそのコンテンツを上書きします。上書きする代わりに既存のコンテンツに追加するには、次のようにする必要があります。

{% block mainContent %}
  {{ parent() }}
  Some page text
{% endblock %}

そのため、 mainContent ブロックは、拡張する親にあるものをロードし、それを印刷して、さらにいくつかのコンテンツを下に追加します。

言及すべきいくつかの重要なポイント。テンプレートを拡張する場合は、extendsブロックをページの最初に配置する必要があります。また、これを行うと、拡張するテンプレートで定義されたブロックの外にコンテンツを含めることはできません。したがって、テンプレートBでは、追加するすべてのコンテンツは、テンプレートAで定義されたブロックの1つに入る必要があります。

拡張タグを介した継承の詳細については、Twigドキュメントページを参照してください。

結論

この記事では、Twigを使用してテンプレートページを作成する方法について少し詳しく説明しました。コメントシステムの使用方法、変数（配列やオブジェクトなどの単純なものと複雑なものの両方）の出力、より動的な結果を得るための制御構造の使用、およびテンプレートの組み込みと拡張の方法を見てきました。小枝ファイルにはもっとたくさんのことができるので、ぜひチェックしてみてください。

また、PHPフレームワークを使用するのが好きな場合は、TwigがSymfony2のデフォルトのテンプレートエンジンであることに注意してください。また、今後のメジャーDrupal 8リリースでは、テンプレートにもTwigを使用します。

投稿者： Danny

getdocs

13036