Bridgetown Slim Support

Slim テンプレートを Bridgetown 2.0 で扱うためのヘルパーとコンバーターを提供する RubyGems パッケージです。image_tag や link_to、部分テンプレート（render）などの Rails ライクな API を含みます。

• Slim ファイル (.slim) を HTML に変換する Bridgetown コンバーター
• image_tag, link_to の Slim/ERB 両対応テンプレートヘルパー
• Slim 部分テンプレートにも対応したカスタム Bridgetown::SlimSupport::View
• サイト初期化時にヘルパーとコンバーターを登録する Bridgetown フック

Gemfile に以下を追加します。

gem "bridgetown-slim-support"

Bundler でインストールします。

bundle install

bridgetown-slim-support は依存として slim / tilt / fastimage を自動でインストールします。Gemfile に個別に追記する必要はありません。

サイトの初期化時に Slim テンプレートエンジンを有効にするため、config/initializers.rb へ次のように追記してください。

Bridgetown.configure do |config|
  require "bridgetown/slim_support"  # Slim サポート一式をロード
  config.template_engine "slim"
end

これでサイトのリセット時に Slim コンバーターとヘルパーが登録されます。

Slim テンプレートではヘルパーメソッドを利用できます。

= image_tag "cover.jpg"
= link_to "アトリヱ未来", "https://atelier-mirai.net"

= render "shared/card", title: "Slim Sample", image: "cover.jpg" do
  p
    | Explore how Slim integrates with
    = link_to "Bridgetown", "https://www.bridgetownrb.com"

image_tag はローカル画像に対し幅・高さを自動付与し、link_to はテキストリンクおよびブロック構文の両方で利用できます。render では部分テンプレートにパラメータとブロックを同時に渡せます。

上記は次のような HTML に変換されます（width / height には FastImage が検出した実寸法が入ります）。

<img src="/images/cover.jpg" alt="Cover" loading="lazy" width="1200" height="600">
<a href="https://atelier-mirai.net">アトリヱ未来</a>
<div class="card">
  <div class="card__image">
    <img src="/images/cover.jpg" alt="Cover" loading="lazy" width="1200" height="600">
  </div>
  <div class="card__body">
    <h2>Slim Sample</h2>
    <p>Explore how Slim integrates with<a href="https://www.bridgetownrb.com">Bridgetown</a></p>
  </div>
</div>

部分テンプレートは _partials/shared/_card.slim のように配置できます。

/- src/_partials/shared/_card.slim
.card
  - if image
    .card__image
      == image_tag image
  .card__body
    - if title
      h2
        == title
    - if block_given?
      == yield

config/initializers.rb の Bridgetown.configure ブロック内に config.partials_dir = "_includes" を追記すれば、別ディレクトリを探索させることも可能です。

Bridgetown.configure do |config|
  require "bridgetown/slim_support" # Slim サポート一式をロード

  config.template_engine "slim"     # Slim サポートを有効
  config.partials_dir = "_includes" # 部分テンプレートを探索するディレクトリ

  # `image_tag` の既定 `loading` を無効化したい場合
  Bridgetown::SlimSupport::Helpers.default_loading = nil
  # 常に eager 読み込みさせたい場合
  Bridgetown::SlimSupport::Helpers.default_loading = :eager
end

デフォルトでは loading="lazy" が付与されますが、loading: :eager や loading: nil を指定するとその設定が優先されます。

= image_tag "cover.jpg"
= image_tag "hero.jpg", loading: :eager
= image_tag "key_visual.jpg", loading: nil

<img src="/images/cover.jpg" loading="lazy" alt="Cover" width="1200" height="600">
<img src="/images/hero.jpg" loading="eager" alt="Hero" width="1200" height="600">
<img src="/images/key_visual.jpg" alt="Key visual" width="1200" height="600">

.slim 拡張子以外のファイルでも、Front Matter に template_engine: slim を追加すると Slim としてレンダリングされます。

---
template_engine: slim
---
parent
  child XML with Slim syntax

例えば src/data.xml に上記を記述すれば、変換後も .xml のまま Slim テンプレートとして処理されます。

git clone https://github.com/atelier-mirai/bridgetown-slim-support.git
cd bridgetown-slim-support
bundle install

# テスト実行
bundle exec rake test

テストや追加機能を実装する際は lib/bridgetown/slim_support/ 配下のコードを編集してください。

• Atelier Mirai (https://atelier-mirai.net)

• fastimage — MIT License (https://github.com/sdsykes/fastimage)
• slim — MIT License (https://github.com/slim-template/slim)
• tilt — MIT License (https://github.com/rtomayko/tilt)

MIT License