Nプログラマです。
今回はLiquidのincludeタグで、_includesのサブディレクトリに配置したファイルを読み込んでみました。
事前の準備
環境
- Jekyllの環境構築済み (環境構築の記事はこちら)
サンプルの構成
今回のファイル構成です。
ディレクトリ構造
今回のサンプルのツリー構造です。
app
├── _includes
│ ├── common
│ │ └── footer.html
│ └── header.html
└── index.html
コード
index.html
---
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<header>ヘッダー</header>
<div>
メインコンテンツ
</div>
<footer>フッター</footer>
</body>
</html>header.html
<header>ヘッダー</header>footer.html
<footer>フッター</footer>それではサンプルでやってみましょ。
サンプル
サンプルですることは、以下の二点です。
- header部分を_includes直下のheader.htmlに置き換え
- footer部分を_includesのサブディレクトリにあるfooter.htmlで置き換え （記事のメイン）
headerの置き換え(_includes直下のファイルを読み込む)
まずはドキュメントにあるサンプルを参考に、headerをincludeタグで置き換えます。
includeの使い方
{% include ファイル名 %}head.htmlを読み込むので、こうなります。
{% include header.html %}このタグを使ってindex.htmlのheader部分を置き換えてみました。
index.html(header部分を置き換え)
---
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
{% include header.html %} <!-- 置き換えた部分(header) -->
<div>
メインコンテンツ
</div>
<footer>フッター</footer>
</body>
</html>出力されたhtmlを確認すると、includeで読み込んだファイルが置き換えられていることが確認できます。
ビルド後のindex.html (headerを置き換えたもの)
置き換える前のindex.htmlと同じ内容になっていると思います。もしかするとビルドで置き換えた部分に改行が入っているかもしれません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<header>ヘッダー</header>
<!-- 置き換えた部分(header) -->
<div>
メインコンテンツ
</div>
<footer>フッター</footer>
</body>
</html>footerの置き換え(_includesのサブディレクトリからファイルを読み出す)
今回のメインです。
includeでサブディレクトリ(commonディレクトリ)に置いてあるfooter.htmlの読み出しを行います。
使い方は簡単で、スラッシュで区切って書いてあげると読み込むことができます。
{% include common/footer.html %}ドキュメントにはfooter.htmlの読み込みサンプルだけで、次はinclude_relativeの説明になっています。
サブディレクトリから読み出すサンプルがなかったのでできないかと思っていたのですが、試してみるとできました。
include_relativeでサブディレクトリの例になっているので、includeも同じようにできるよ、という意味でしょうかね。
これを使って先程のindex.htmlのfooter部分を置き換えてみました。
index.html(headerとfooterを置き換えたもの)
---
---
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
{% include header.html %} <!-- 置き換えた部分(header) -->
<div>
メインコンテンツ
</div>
{% include common/footer.html %} <!-- 置き換えた部分(footer) -->
</body>
</html>これで出力されたhtmlを確認してみると、post/head.htmlの内容が確認できました。
ビルドされたindex.html(headerとfooterを置き換えたもの)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<header>ヘッダー</header>
<!-- 置き換えた部分(header) -->
<div>
メインコンテンツ
</div>
<footer>フッター</footer>
<!-- 置き換えた部分(footer) -->
</body>
</html>出力されたhtmlを確認すると、サブディレクトリのfooter.htmlで置き換わっていますね。
おわりに
今回は、includesタグでサブディレクトリからファイルを読み出すという内容でした。
これでディレクトリ単位でinclude用のファイルを分けることができますね。
数が増えると管理が大変なので、分けすぎには注意しましょう。
それでは、このへんで。
バイナリー！
参考
