phoenixのデフォルトのテンプレートエンジンは eex
というRoRのerb
風味のシンタックスですが、個人的にslimの方が好きなので、phoenix frameworkでもslimを利用しましょう、という話。
[変更履歴]
2016/01/08
リポジトリ名がphoenix-slimから phoenix_slimeに改名されていたため修正
2016/03/29
generatorについて記述追加
phoenix_slimeのインストール
mix.exs
にphoenix_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
いろいろ実験していて気づいたこと。
- eexとslimが混在していてもうまく動作してくれる、例えばlayoutsがeexでその下の子コンポーネントがslimでも動作に全く問題はない。
- eexとslimが同一ディレクトリに同名である場合はeexが優先される。
hello.html.eex
とhello.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