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

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