サイドバー付きのレイアウト
サイドバーやヘッダーなどを配置したレイアウトの作り方を学びましょう。
上記のようなレイアウトを 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 を差し込めるようにテンプレート化すると以下のようになります。別の 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>
次に、 このテンプレートに差し込む Markdown ファイルを用意します。
index.md--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。
このように記述した内容が ${content} に差し込まれるのでしたよね。しかし、 これでは ${content} が定義されているだけで、 ${mysidebar} が定義されていません。
コンテント・ブロック記述
Catalpa のコンテント ・ ブロック記述を使うと、 ${mysidebar} を追加定義することができます。
行頭が #-- で始まり、 行末が -- で終わる行はコンテント ・ ブロックの開始宣言として認識されます。#--mysidebar-- という行を記述すれば、 mysidebar という名前のコンテント ・ ブロックの開始宣言となります。
index.md--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。 #--mysidebar-- ここはわたしのサイドバーです。
- D:¥mysite
- templates
- default
.ftl
- default
- index
.md
- templates
これらのファイルを Catalpa で処理すると結果は以下のようになります。
既定のコンテント・ブロック
さきほどの index#--content-- を明示的に書くこともできます。
---
template: default.ftl {.copy}
---
#--content--
# ようこそ #
わたしのメイン・コンテンツです。
#--mysidebar--
ここはわたしのサイドバーです。
これまでの Markdown 記述では #--content-- を省略していたのです。最初のコンテント ・ ブロックは宣言を省略することができ、 その場合、 コンテント ・ ブロックの名前は自動的に content になります。
config.ymlで宣言することもできます
サイドバーなどサイト全体で共通にしたい、 個別の Markdown ファイルに記述したくない、 ということもありますよね。
コンテント ・ ブロックは config
mysidebar の定義を config
config.yml#--mysidebar--
これはサイト全体で共通のサイドバーです。
indexmysidebar の定義を削除します。
index.md--- template: default.ftl --- # ようこそ # わたしのメイン・コンテンツです。
- D:¥mysite
- templates
- default
.ftl
- default
- index
.md - config
.yml
- templates
mysidebar を宣言した config
config