Elixir
Phoenix

phoenixのテンプレートエンジンをデフォルトのeexからslimにする

More than 1 year has passed since last update.

phoenixのデフォルトのテンプレートエンジンは eex というRoRのerb風味のシンタックスですが、個人的にslimの方が好きなので、phoenix frameworkでもslimを利用しましょう、という話。


[変更履歴]

2016/01/08

リポジトリ名がphoenix-slimから phoenix_slimeに改名されていたため修正

2016/03/29

generatorについて記述追加



phoenix_slimeのインストール

mix.exsphoenix_slimeを追加する。


mix.exs

  # Type `mix help deps` for examples and options.

defp deps do
[{:phoenix, "~> 1.1.4"},
{:postgrex, ">= 0.0.0"},
{:phoenix_ecto, "~> 2.0"},
{:phoenix_html, "~> 2.4"},
{:phoenix_live_reload, "~> 1.0", only: :dev},
{:gettext, "~> 0.9"},
{:phoenix_slime, "~> 0.5.1"}, #追加
{:cowboy, "~> 1.0"}]
end

mix.exsに追加が終わったら deps.get コマンドを実行する。

$ mix deps.get


config.exsにテンプレートエンジンの記述を追加

config/config.exs に以下を追加する


config.exs

config :phoenix, :template_engines,

slim: PhoenixSlime.Engine,
slime: PhoenixSlime.Engine


slimをライブリロードに対応させる


dev.exs

config :phoenix_slim_example, PhoenixSlimExample.Endpoint,

live_reload: [
patterns: [
~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
~r{web/views/.*(ex)$},
~r{web/templates/.*(eex|slim|slime)$}
]
]

web/templatesのファイル拡張子にslim|slimeを追加。


拡張子


  • ◯◯.html.slim

  • ◯◯.html.slime

どちらも利用可能。


エディタのシンタックスやlinterの都合もあって基本はslimにしてます。(slimeによる利点てあるのかな・・・)


slimテンプレートを利用してみる


hello.html.eex

<div class="jumbotron">

<h2> hello, phoenix </h2>
</div>

slimで書くとこうなる


hello.html.slim

.jumbotron

h2 hello, phoenix

いろいろ実験していて気づいたこと。


  1. eexとslimが混在していてもうまく動作してくれる、例えばlayoutsがeexでその下の子コンポーネントがslimでも動作に全く問題はない。

  2. eexとslimが同一ディレクトリに同名である場合はeexが優先される。 hello.html.eexhello.html.slimが同一ディレクトリ内にある場合は、eexが優先されるようだ。slim側を読ませたければeexのファイルを削除するなりする。


Generator

v0.5からslim記法でのscaffoldも追加されたようです。

コマンドの引数は$ mix phoenix.gen.htmlと一緒、詳しくはコチラ

mix phoenix.gen.html.slime Comment comments content:string user_id:integer article_id:integer

* creating web/controllers/comment_controller.ex
* creating web/views/comment_view.ex
* creating test/controllers/comment_controller_test.exs
* creating web/templates/comment/edit.html.slim
* creating web/templates/comment/form.html.slim
* creating web/templates/comment/index.html.slim
* creating web/templates/comment/new.html.slim
* creating web/templates/comment/show.html.slim
* creating priv/repo/migrations/20160328153716_create_comment.exs
* creating web/models/comment.ex
* creating test/models/comment_test.exs

Add the resource to your browser scope in web/router.ex:

resources "/comments", CommentController

Remember to update your repository by running migrations:

$ mix ecto.migrate


ルートページをslimで書き直す

pages/index.html.slim


index.html.slim

.jumbotron

h2 Welcome to Phoenix!
p.lead
| A productive web framework that

| does not compromise speed and maintainability.
.row.marketing
.col-lg-6
h4 Resources
ul
li
a href="http://phoenixframework.org/docs/overview" Guides
li
a href="http://hexdocs.pm/phoenix" Docs
li
a href="https://github.com/phoenixframework/phoenix" Source
.col-lg-6
h4 Help
ul
li
a href="http://groups.google.com/group/phoenix-talk" Mailing list
li
a href="http://webchat.freenode.net/?channels=elixir-lang" #elixir-lang on freenode IRC
li
a href="https://twitter.com/elixirphoenix" @elixirphoenix