, ,

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

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

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

Contents

Haml 記法で書くと

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

%a(title="テスト" href="/about.html") テスト

Emmet では、{} 書式で展開されますね。

%a{:href => "/about.html"} テキスト

File: REFERENCE — Haml Documentation

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

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

= link_to "テスト", "/about.html", title: "テスト"
= link_to image_tag("img.png", alt: ""), "/about.html"

link_to (ActionView::Helpers::UrlHelper) – APIdock

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

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

Rails haml – image_tag inside a link_to method – Stack Overflow

data-* attributes

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

相対パスへ変更

このような絶対パスを

<a class="foo" href="/about.html">

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

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

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

<a class="foo" href="about.html">

[ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ ｜ Developers.IO

/ で終えずに

<a class="foo" href="/">

このように書いておく。

<a class="foo" href="/index.html">

補遺