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 %>">