【Elixir】Phoenixでのレイアウトテンプレート設定方法

Elixir Phoenixでのレイアウトテンプレート設定方法。

確認環境

Elixir 1.14.2
Phoenix 1.6.3

アクションの設定

put_layout を利用することでテンプレートを変更することが可能です。
基本的な使い方は以下のようになります。

1
2
3
4
5
6
7
8
9
defmodule MyAppWeb.PageController do
  use MyAppWeb, :controller

  def index(conn, _params) do
    conn
    |> put_layout("special.html")
    |> render("index.html")
  end
end

上記のコードでは、indexアクションが呼び出されたときにspecial.html.heexという名前のレイアウトが適用されます。
put_layout に fasle を渡すとレイアウトを使用しなくなります。

ルートテンプレートの変更には put_root_layout を使用することで可能です。

ルーターでの設定

Phoenixフレームワークにおいて、レイアウトは通常　lib/my_app_web/templates/layout/app.html.eex　というパスに配置されますが、put_root_layoutを使用してこのデフォルトを上書きすることが可能です。

以下に例を示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  # 使用するレイアウトの指定
  pipeline :custom_layout do
    plug :put_layout, {MyAppWeb.LayoutView, "custom.html"}
  end

  scope "/", MyAppWeb do
    pipe_through [:browser, :custom_layout]

    get "/", PageController, :index
  end
end

上記のコードでは、custom_layoutパイプラインを新たに作成して put_root_layoutプラグを追加し、そのレイアウトとしてcustom.html.eexを指定しています。
これにより、このパイプラインを通るすべてのリクエストに対してcustom.html.heexレイアウトが適用されます。

put_layoutとput_root_layoutは、Phoenixフレームワークにおけるレイアウト管理の柔軟性を高めるための重要なツールです。
これらをうまく利用することで、ウェブアプリケーションの見た目をコントローラーやアクションレベルで細かく制御することが可能となります。