MiddlemanのHTML共通化機能

投稿者: | 2016年12月25日

HTMLの共通化はMiddlemanのテンプレート機能を使って行います。
プロジェクトを作成するとlayoutsフォルダの中にlayout.erbが作成されます。
これがデフォルトのテンプレートになります。

<!doctype html>
<html>
  <head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <!-- Use title if it's in the page YAML frontmatter -->
    <title><%= current_page.data.title || "Middleman" %></title>
    <link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
    <%= stylesheet_link_tag :site %>
    <%= javascript_include_tag :all %>
  </head>
  <body class="<%= page_classes %>">
    <%= yield %>
  </body>
</html>

プロジェクトフォルダ直下のhtml.erbには<%= yield %>の中身だけ記述します。
また、titleタグはhtml.erbの最初の3行で定義をします。

---
title: Welcome to Middleman
---

これがタイトルタグで設定している「current_page.data.title」と置き換わります。
デフォルトのままだとmetaタグが定義されていません。
なので下記のようにtitleタグの下にmetaタグ(descriptionとkeywords)を追加します。

    <title><%= current_page.data.title || "Middleman" %></title>
    <meta name="description" content="<%= current_page.data.description %>">
    <meta name="keywords" content="<%= current_page.data.keywords %>">

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA