サイドバー付きのレイアウト

サイドバーやヘッダーなどを配置したレイアウトの作り方を学びましょう。

上記のようなレイアウトを CSS フレックスレイアウトで実現する場合 以下のような HTML になります。

sample.html
<!DOCTYPE html> <HTML> <HEAD> <META charset="utf-8"> </HEAD> <BODY style="margin:0"> <DIV style="display:flex;height:100vh;"> <DIV style="flex-grow:1; padding: 1em; background-color:#FEE"> ここがサイドバーです。 </DIV> <DIV style="flex-grow:3; padding: 1em; background:#EFF"> ここがメイン・コンテンツです。 </DIV> </DIV> </BODY> </HTML>

これをマークダウンを差し込めるようにテンプレート化すると以下のようになります。別の Markdown ファイルから差し込みたい部分を ${content} にするのでしたね。

defult.ftl
<!DOCTYPE html> <HTML> <HEAD> <META charset="utf-8"> </HEAD> <BODY style="margin:0"> <DIV style="display:flex;height:100vh;"> <DIV style="flex-grow:1; padding: 1em; background-color:#FEE"> ここがサイドバーです。 </DIV> <DIV style="flex-grow:3; padding: 1em; background:#EFF"> <@markdown>${content}</@markdown> </DIV> </DIV> </BODY> </HTML>

メイン コンテンツのほうは ${content} としました。では サイドバーのほうはどうしたらよいでしょうか?

サイドバーのほうも任意の名前で変数に置き換えることができます。今回は ${mysidebar} という名前を使ってみましょう。

defult.ftl
<!DOCTYPE html> <HTML> <HEAD> <META charset="utf-8"> </HEAD> <BODY style="margin:0"> <DIV style="display:flex;height:100vh;"> <DIV style="flex-grow:1; padding: 1em; background-color:#FEE"> <@markdown>${mysidebar}</@markdown> </DIV> <DIV style="flex-grow:3; padding: 1em; background:#EFF"> <@markdown>${content}</@markdown> </DIV> </DIV> </BODY> </HTML>

次に このテンプレートに差し込むマークダウンファイルを用意します。

index.md
--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。

このように記述した内容が ${content} に差し込まれるのでしたよね。しかし これでは ${content} が定義されているだけで ${mysidebar} が定義されていません。

コンテント ブロック記述

Catalpa のコンテント ブロック記述を使うと ${mysidebar} を追加定義することができます。

行頭が #-- で始まり 行末が -- で終わる行はコンテント ブロックの開始宣言として認識されます。#--mysidebar-- という行を記述すれば mysidebar という名前のコンテント ブロックの開始宣言となります。

index.md
--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。 #--mysidebar-- ここはわたしのサイドバーです。
  • D:¥mysite
    • templates
      • default.ftl
    • index.md

これらのファイルを Catalpa で処理すると結果は以下のようになります。

既定のコンテント ブロック

さきほどの index.md は以下のように #--content-- を明示的に書くこともできます。

---
template: default.ftl {.copy}
---

#--content--

# ようこそ #

わたしのメイン・コンテンツです。

#--mysidebar--

ここはわたしのサイドバーです。

これまでの Markdown 記述では #--content-- を省略していたのです。最初のコンテント ブロックは宣言を省略することができ その場合 コンテント ブロックの名前は自動的に content になります。

config.yml で宣言することもできます

サイドバーなどサイト全体で共通にしたい 個別の Markdown ファイルに記述したくない ということもありますよね。

コンテント ブロックは config.yml で宣言することもできます。

mysidebar の定義を config.yml に書いてみましょう。

config.yml
#--mysidebar--  これはサイト全体で共通のサイドバーです。

index.md からは mysidebar の定義を削除します。

index.md
--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。
  • D:¥mysite
    • templates
      • default.ftl
    • index.md
    • config.yml

mysidebar を宣言した config.yml を加えて Catalpa で処理すると結果は以下のようになります。

config.yml Markdown ファイルで同じ名前のコンテント ブロックを宣言した場合は Markdown ファイルの宣言が優先されます。content.yml で共通のサイドバーを定義しておき 一部のページだけサイドバーを変えたいといったときは Markdown ファイルで宣言を上書きできるわけです。