【Phalcon】Volt_テンプレートの継承の使い方

2023.10.02

UnsplashのHendrik Cornelissenが撮影した写真

1 はじめに
2 動作確認した環境
3 使い方
4 例
5 生成されるHTML

はじめに

「テンプレートの継承」を使うことでビューをシンプルに管理でき快適に開発を進められます！

公式ページはこれです↓
https://docs.phalcon.io/4.0/en/volt#inheritance

動作確認した環境

OS：Windows11 Home / WSL(Ubuntu20.04)
php：v7.4.33
phalcon：4.0.6
Phalcon DevTools：v4.2.0

使い方

この後に例を使ってテンプレートの継承のやり方をご説明するので、ここでは簡単に使い方をご紹介します。

使い方の手順は以下①～③です。

①親テンプレートファイルを作成する

　　子テンプレートから値を受取る場所に{% block ~~ %}{% endblock %}を定義する

※親テンプレート内で以下のように書くとデフォルトのコードを記述できます。

　{% block ~~ %}デフォルト{% endblock %}

②子テンプレートを作成する

　・子テンプレートの１行目に以下を追記する

　　　　{% extends “親テンプレートのviews以降のパス” %}

　・親テンプレート中の{% block ~~ %}{% endblock %}に埋め込むHTMLを記述する

③「views/index.phtml」を削除する

例

それでは、実際にテンプレートの継承を使ってみます。

①親テンプレートファイルを作成する

以下の場所に「templates」と「base.volt」を作成します。

/app/views/templates/base.volt

作成したらbase.voltに以下を記述します。

<html>
    <head>
        <title>{% block title %}TOP{% endblock %} - My Webpage</title>
    </head>
    <body>
        <h2>base.voltに記述したh2</h2>
        {% block content1 %}{% endblock %}
        {% block content2 %}<p>デフォルト</p>{% endblock %}
    </body>
</html>

子テンプレートからコードを受け取りたい箇所に{% block 任意の文字列 %}{% endblock %}を記述しておきます。

②子テンプレートを作成する

子テンプレートには「/app/views/index/index.phtml」の拡張子を変え「/app/views/index/index.volt」を使おうと思います。

index.voltを以下のように編集してください。

{% extends "templates/base.volt" %}  ⇐親テンプレートの指定

{% block title %}Index{% endblock %}　⇐親に渡す値の指定

{% block content1 %}　　　⇐親に渡す値の指定
    <h2>index.voltに記述したh2</h2>
{% endblock %}

親テンプレートに渡したいコードを{% block ~~ %}{% endblock %}で囲みます。

③「views/index.phtml」を削除する

「views/index.phtml」はvoltで作成した親テンプレートより優先されてしまうので、削除します。

生成されるHTML

この例のようにコードを書くと以下のようなHTMLが生成されます。

<html>
    <head>
        <title>Index - My Webpage</title>
    </head>
    <body>
        <h2>base.voltに記述したh2</h2>
        <h2>index.voltに記述したh2</h2>
        <p>デフォルト</p>
    </body>
</html>

テンプレートの継承の使い方は以上です。