[Middleman 3] Middleman: anchor tag はテンプレートヘルパを使おう

公開日: 2014/12/18
更新日: 2018/10/29

Middleman や Rails プロジェクトで a tag を書く場合は、テンプレートヘルパを使おう。
を忘れるので memo.

[markdown]
## Haml 記法で書くと

Haml を利用する場合、例えばこんな感じで書けます。

“`haml
%a(title=”テスト” href=”/about.html”) テスト
“`

[Emmet](http://emmet.io/) では、`{}` 書式で展開されますね。

“`haml
%a{:href => “/about.html”} テキスト
“`

> [File: REFERENCE — Haml Documentation](http://haml.info/docs/yardoc/file.REFERENCE.html#attributes)

## テンプレートヘルパをつかう

リンクヘルパ `link_to` で書こう。

“`haml
= link_to “テスト”, “/about.html”, title: “テスト”
= link_to image_tag(“img.png”, alt: “”), “/about.html”
“`

> [link_to (ActionView::Helpers::UrlHelper) – APIdock](http://apidock.com/rails/v2.0.3/ActionView/Helpers/UrlHelper/link_to)

でも class など属性が増えがちなので、`link_to … do` のブロックで書いた方が見通しが良いかも。

“`haml
= link_to “/about.html”, class: “” do
= image_tag(“img.png”, class: “”, alt: “”)
テキストリンク
“`

> [Rails haml – image_tag inside a link_to method – Stack Overflow](http://stackoverflow.com/questions/17799725/rails-haml-image-tag-inside-a-link-to-method)

### data-* attributes

“`haml
= link_to(“https://placeimg.com/512/384”, data: { lightbox: “image”, title: “My caption” }) do
%button.btn.btn-primary
%span.glyphicon.glyphicon-off
Click!
“`

### 相対パスへ変更

このような絶対パスを

“`html

“`

config.rb に以下の設定を加えることで、

“`ruby:config.rb
# Use relative URLs
# activate :relative_assets
set :relative_links, true
“`

相対パスに一括で変更できます。

“`html

“`

> [[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ｜ Developers.IO](http://dev.classmethod.jp/tool/middleman-supersonic-01-try-middleman/)