2023.10.03
【Phalcon】Voltでパーシャルを使う

UnsplashDawid Zawiłaが撮影した写真

動作確認した環境

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

使い方

パーシャルの使い方は以下の①、②だけです!

①パーシャルを作成する
  ファイルパス:/app/views/任意フォルダ/~.volt

②パーシャルを呼び出す
  呼び出すコード:{{ partial(“任意フォルダ/~.volt” }}

次に例用いてパーシャルの使い方をご説明します。

①パーシャルを作成する

以下のように「partials」フォルダと「header.volt」ファイルを作成してください。

/app/view/partials/header.volt

作成したらheader.voltに以下のコードを書き込んでください。

<header>
    <p style="background-color:#88f;padding:20px;font-size:24px">
        <strong>Logo</strong>
    </p>
</header>

②パーシャルを呼び出す

今回はPhalconのプロジェクト生成時にデフォルトで作成される「/app/views/index/index.phtml」の拡張子を変更し「index.volt」として、使います。

/app/views/index/index.voltに以下の赤字部分を追記してください。

{{ partial('partials/header') }}

<div class="page-header">
    <h1>Congratulations!</h1>
</div>

<p>You're now flying with Phalcon. Great things are about to happen!</p>

<p>This page is located at <code>views/index/index.phtml</code></p>

ブラウザで表示確認

正常に動作したらブラウザの表示は以下のようになるはずです。

パーシャルで引数を使う

パーシャルには引数を渡すことができ、

呼び出す場所によって表示を変えたい場合にとても活躍します。

①パーシャルを作成する

先ほど作成したパーシャルを以下のように書き換えてください。

赤字部分が書き換えた部分です。

引数を渡すことに加え、見栄えを多少良くするためにheaderにstyleを追加しました。

<header style="display:flex">
    <p style="background-color:#88f;padding:20px;font-size:24px">
        <strong>Logo</strong>
    </p>
    <p>{{ page_title }}</p>
</header>

「{{ 引数名 }}」のようにすると受け取る引数をパーシャル内で使えます。

②パーシャルを呼び出す

引数のあるパーシャルは以下のように呼び出します。

{{ partial('partials/header', ['page_title': 'トップページ']) }}

赤字部分のように、パーシャルに引数を渡す際は連想配列で渡します。

パーシャルの使い方は以上です!