post用のレイアウトを作ってなかったがさすがにみづらいので仮で作った。
参考:
結果として今はこんな感じ
---
layout : default
---
<header class="page-header">
<h1>{{page.title}}</h1>
<dl class="dl-horizontal">
<dt>created</dt>
<dd>{{page.date | date : "%F"}}</dd>
<dt>last change</dt>
<dd>{{page.lastchange}}</dd>
</dl>
</header>
<div class="row">
{{ content }}
</div>
過程は以下
Postのレイアウト
次に記事にも専用のレイアウトを用意します。_layoutsディレクトリ以下に
post.htmlを作って、次のような内容にします。% touch _layouts/post.html--- layout: default --- <header> <div>{{ page.date | date_to_string }}</div> <h1>{{ page.title }}</h1> </header> <div class='main'> {{ content }} </div> <footer> <p>- rendered with post template -</p> </footer>Front-Matterでdefault.htmlを読み込むようにします。これによりpost.htmlはdefault.htmlのサブテンプレートになります。header部分に投稿日とタイトルを表示するようLiquidで指定します。
なお、
{{ page.date | date_to_string }}はJekyllで拡張されたLiquidのフィルターという機能を使って、 出力の整形を行なっています(Templates)。 default.htmlと同様に、このテンプレートが読み込まれたことを見るために rendered with post template を追加しておきます。
これを参考にbootstrap風味にする。
Page header
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1’s default small element, as well as most other components (with additional styles).
Example page header Subtext for header
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
page-header クラスがあるので利用する。
他に作成日時と、変更日時を独自に仕込んでいるので入れたい。
Horizontal description
Make terms and descriptions in
<dl>line up side-by-side. Starts off stacked like default<dl>s, but when the navbar expands, so do these.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
date
Converts a timestamp into another date format. The format for this syntax is the same as strftime.
Input
{{ article.published_at | date: "%a, %b %d, %y" }}Output
Fri, Jul 17, 15
定義リストとこの書式制御を利用することにした。