blog
初めての Middleman シリーズ初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化
この記事は書かれてから1年以上経過しており、内容が古い場合があります。
前回の記事レイアウト機能でレイアウトとコンテンツを分離するでレイアウト機能の活用方法を覚えたので、今回はパーシャルを使ってコンテンツをモジュール化し再利用する方法についてメモしておきます。詳しい解説は公式ドキュメントのパーシャルを確認してください。
ヘッダーを作る
レイアウトファイルlayouts/layout.erbに以下のようなヘッダーを追加します。
layout.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= current_page.data.title || "The Middleman" %></title>
<link rel="stylesheet" href="">
</head>
<body>
<header>
<h1>example.com</h1>
</header>
<%= yield %>
</body>
</html>
_header.erb
パーシャルファイルを管理するためにmodulesディレクトリを作り、このヘッダー部分を切り出して_header.erbというファイルにします。先頭のアンダースコア_がパーシャルファイルであることを表します。パーシャルファイルは読み込み専用となりHTMLとして出力されることはありません。
<header>
<h1>example.com</h1>
</header>
パーシャルを読み込んだlayout.erb
ヘッダー部分をパーシャルの読み込み<%= partial 'modules/header' %>に書き換えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= current_page.data.title || "The Middleman" %></title>
<link rel="stylesheet" href="">
</head>
<body>
<%= partial 'modules/header' %>
<%= yield %>
</body>
</html>
読み込み元からパーシャルにデータを渡す
読み込み元からパーシャルにデータを渡すこともできます。
layout.erb
パーシャルの読み込み部分に引数を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= current_page.data.title || "The Middleman" %></title>
<link rel="stylesheet" href="">
</head>
<body>
<%= partial('modules/header', :locals => { :description => 'hogehoge' }) %>
<%= yield %>
</body>
</html>
_header.erb
パーシャル側では引数に指定されたオブジェクトを変数として呼び出すことができます。
<header>
<h1>example.com</h1>
<p><%= description %></p>
</header>
Rubyの呼び出し
<% ... %>や<%= ... %>など、最初よくわかっていませんでしたが、簡単に言うと=が付く場合は出力されるということです。こちらの記事テンプレートの中でRubyコードを使うに一度目を通すと良いと思います。
これで、HTMLの操作はできるようになったので、次回、SCSSのコンパイルについて勉強します。
シリーズ
- 初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello World
- 初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する
- 初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化
- 初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎
- 初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる
- 初めてのMiddleman：データファイルとデータファイルを使った動的ページ生成
- 初めてのMiddleman：サイトにブログ機能を追加する
- 初めてのMiddleman：Amazon S3にビルドされたファイルを同期する
- 初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮する
- 初めてのMiddleman：設定について
- 初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
- 初めてのMiddleman：Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
- 初めてのMiddleman：Helperを使ってGravatarのアイコンを表示する
- 初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合
- 初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする
- 初めてのMiddleman：スケルトンを自作する方法
- 初めてのMiddleman：Middleman Blogの記事データを使いやすく管理する方法
- 初めてのMiddleman：Middleman-blogのシングルブログを前提としたSkeletonを作った
- 初めてのMiddleman：Middleman-blogでマルチブログを試してSkeletonを作った
- 初めてのMiddleman：Markdown EngineをkramdownからRedcarpetに切り替える
- 初めてのMiddleman：RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
- 初めてのMiddleman：Middleman-Syntaxを使ったシンタックスハイライト
- 初めてのMiddleman：Middleman-Blogで記事毎に画像を管理する方法
- 初めてのMiddleman：Gulpを使ってサムネイル画像を生成する
- 初めてのMiddleman：Middleman-OGPのOGP画像指定を相対パスで設定する
- 初めてのMiddleman：Middleman-OGPでMiddleman-BLogにOGPを設定する
- 初めてのMiddleman：Middleman-Titleでタイトルタグを手軽に設定する
- 初めてのMiddleman：多言語化 - 言語ファイルの作成とヘルパーの埋め込み
- 初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
- 初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする