つぶやき Web拍手を送る

実践編その②
作品(イラスト・写真)を展示するページを作ろう

作品展示ページを作るぞ

ひとまずトップページは形になったので、次は作品を展示するための個別ページを作っていきましょう。ここでは個別ページ用のフォルダを新しく作成し、その中にページの素材になるファイルを配置していくことにします。

まずは作業用フォルダ直下にフォルダgallery を作成し、htmlファイルをその中に作ります。名前はとりあえず001.htmlとしておきましょう。

galleryフォルダ内に001.htmlを作成

中身は画像とそのタイトル、説明文があるページを想定して以下のようにしてみます。例によって画像は適当なものを用意してsrcフォルダに入れておきます。レイアウトはlayout.htmlを適用することにして……

gallery/001.html
---
title: 展示ページ①
layout: layout.html
---
<section>
    <img src="/src/001.jpg" alt="">
    <h2>{{ title }}</h2>
    <p>けれどもぼくは、そんなことを習ったろうと思いながら答えました。僕いま苹果のことを考えているんですそうですか。けれども、誰だって、ただそう感じているのでした。つりがねそうか野ぎくかの花があちこち咲いていました。時計屋の店には明るくネオン燈がついて、たくさんのきいろな底をもった人に出しました。</p>
</section>

(サンプルのダミー文章作成にはLorem JPsumを使用しています)

今作ったページhttp://localhost:8080/gallery/001.htmlはこんな感じになりました。

作成したページ 001.html

ではこのページをコピペして中身を書き換えて、個別ページを増やしていきましょう。と、その前に……

共通の設定をひとつのファイルにまとめておこう

今、使用するレイアウトの設定はテンプレートファイル001.html に記述してあります。これから作成するページでも同じ記述をすれば同じ設定を使うことができます。
ただ、galleryフォルダ内のファイル全てに同じ設定を適用したいとなったとき、一つ一つのファイルに同じ記述をしていくのは大変です(コピペで済むとはいえ)。また、全てのファイルの設定を一斉に変えたい……例えば使用するレイアウトを作品展示ページ専用のものに変更したい、となると全てのファイルの記述を書き換えていく必要があります。フォルダ内のファイル全てで共通するような設定は1カ所でまとめて管理できるといいですよね。

……ということで、共通の設定をひとつのファイルにまとめてしまう方法を見ていきましょう。
ここではgalleryフォルダ内のすべてのテンプレートファイルで同じレイアウトを適用することを目標として進めていきます。
まず、galleryフォルダの直下にgallery.jsonというファイルを作成します。11tyでは、あるフォルダの直下にフォルダ名.jsonというファイルを作り、その中に設定を記述していくことで、そのフォルダ内のテンプレートファイル全てに同じ設定を適用できる、という仕組みになっています。 galleryフォルダ内にgallery.jsonを作成

ではこのgallery.jsonの中に設定を書いていきましょう。ただし、このファイルの中身はJSONの文法で記述していく必要があります。テンプレートファイルのフロントマターに書いていた時の文法(YAML)とはちょっと違うので注意が必要です。
とりあえず、下記の通りに記述します。

gallery/gallery.json
{
    "layout": "layout.html"
}

改行で少しわかりにくいですが、全体が波括弧{}で囲われているのと、コロン:の左辺と右辺がどちらもダブルクォーテーション""で囲まれているのが大きな違いです。ただ、属性名:値という書き方をしているのはフロントマター(YAML)の時と一緒です。

ではこのgallery.jsonを保存し、001.htmlの方からは以下のようにレイアウト設定の記述を消してしまいましょう。

gallery/001.html
 ---
 title: 展示ページ①
-layout: layout.html
 ---
 <section>
     <img src="/src/001.jpg" alt="">
     <h2>{{ title }}</h2>
     <p>けれどもぼくは、そんなことを習ったろうと思いながら答えました。僕いま苹果のことを考えているんですそうですか。けれども、誰だって、ただそう感じているのでした。つりがねそうか野ぎくかの花があちこち咲いていました。時計屋の店には明るくネオン燈がついて、たくさんのきいろな底をもった人に出しました。</p>
 </section>

この状態で001.htmlをブラウザで表示させると、前と同じようにlayout.html が適用された状態になっていると思います。

では個別ページを増やしていきましょう。テンプレートファイル001.htmlをいくつかコピペ＆名前変更してgalleryフォルダ内に配置します。

展示ページ001.htmlを6つに増殖させたところ

ブラウザで見た時にどれがどれだか分かるように、中身のタイトルや画像、文章なども適当に変えておきましょう。

例) gallery/002.html
---
title: 展示ページ②
---
<section>
    <img src="/src/002.jpg" alt="">
    <h2>{{ title }}</h2>
    <p>時計屋の店には明るくネオン燈がついて、赤や緑やきらきら燃えて光っている星だとジョバンニは思いました。たちまちみんなはいろいろな国語で一ぺんに傾きもう沈みかけました。まだ夕ごはんをたべないで待っていようかと言いました。僕たちしっかりやろうねえジョバンニがこう言いながらふりかえって見ましたら、家の中はしいんとなりました。下流の方で、見えない天の川の水のなかには涙がいっぱいに吹き込みました。</p>
</section>

今増やしたページをブラウザで表示させて確認します。同じレイアウトが適用された状態で表示されましたか？

001.htmlと同じレイアウトが適用された003.html
(((これは003.htmlのスクショ)))

この状態で設定ファイルgallery.jsonを書き換えれば、galleryフォルダ内全てのファイルに変更が適用されます。確認してみましょう。

確認のために、個別ページ専用のレイアウトgallery.htmlを_includesフォルダ内に作ります。今あるlayout.htmlをコピペして名前を変更しましょう。 gallery.htmlを作成

変化が分かりやすいよう、コンテンツとフッターの間に適当な文章を追加してみます。

_includes/gallery.html
 <!DOCTYPE html>
 <html lang="ja">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/src/style.css">
     <title>{{ title }} - Sample Site</title>
 </head>
 
 <body>
     {% include "partials/header.html" %}
     {{ content }}
+    <p>このページはgallery.htmlを使っているよ</p>
     {% include "partials/footer.html" %}
 </body>
 
 </html>

それでは、gallery.jsonのlayout属性をgallery.htmlに書き換えて保存、ブラウザの表示を見てみましょう。

gallery/gallery.json
{
    "layout": "gallery.html"
}

レイアウトgallery.htmlが反映された003.html

変更が適用されて適当な文章が表示されました！galleryフォルダ内に作った他のファイルでも同様に変更が反映されているはずですので確認してみましょう。

共通の設定をひとつのファイルにまとめる方法の基本は以上です。また、フォルダ内で共通の設定をしたものの特定のファイルだけは別の設定を使いたい……ということもあるでしょう。そんな時は、別の設定を適用させたいファイルに、従来と同じフロントマターに記述する方法で設定を書いてやればOKです。フロントマターの内容で設定を上書きすることができます。