rarilog

主にゲーム制作に関することを書いていきます

2014/08/19 : Jekyll

静的サイトジェネレーター Jekyll のメモ

この blog を作るために Jekyll を使ったので、得られた知識を書き残しておきます。

学習リソース

とりあえず以下を読めば、大体の概要が掴めます。

以下はドキュメントへのリンクです。テンプレート言語の構文を知りたければ Liquid のドキュメントを、利用可能な Markdown 記法を知りたければ kramdown のドキュメントを読みましょう。

  • Jekyll
  • Liquid : テンプレートエンジン
  • kramdown : デフォルトの Markdown コンバーター

Tips

デフォルトレイアウトを設定する

記事を書く度に YAML front matter で layout を指定するのは面倒なので、デフォルトレイアウトを設定します。

例えば、blog 記事(_posts ディレクトリに格納するもの)のデフォルトレイアウトを post.html にしたければ、_config.yml に以下のように記述します。

defaults:
  -
    scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
参考

Sass (SCSS) を使う

Jekyll は v2.0 から Sass (SCSS) を built-in でサポートしています。拡張子が sass もしくは scss のファイルに空の YAML front matter を付けておけば、CSS に変換したものを _site ディレクトリに格納してくれます。また、_sass ディレクトリ内のファイルを @import 対象にすることができます。

css/example.scss

---
---
$color: #123456;

@import "part"

_sass/_part.scss : import用(単体で変換・出力されない)

p { color: $color; }

css/example.css : 出力結果

p {
  color: #123456; }
参考
  • Assets : Jekyll のドキュメント

タグ毎に blog 記事の一覧ページを作成する

以下のページにプラグインの作例が載っているので、参考にするとよいでしょう。

日付の書式を指定する

Liquid の date filter を利用すれば、page.date で取得した日付の書式を指定することができます。

{{ page.date }}                         → 2014-08-19 00:02:00 +0900
{{ page.date | date: "%Y/%m/%d" }}      → 2014/08/19
{{ page.date | date: "%a, %b %d, %y" }} → Tue, Aug 19, 14
参考

Liquid のテンプレートタグをエスケープする

Liquid テンプレートタグをそのまま出力させたい場合は、以下のプラグインが役に立ちます。

プラグインを使わずに記述する方法もありますが、記法が複雑で覚えにくい上に、ダブルクォーテーション (") が入っているタグをエスケープすることができないので、素直にプラグインを使いましょう。

参考

HTML element に attribute を付加する

kramdown には、HTML element に attribute を付加する記法があります。Markdown Extra にも似たような記法がありますが、kramdown には以下の利点があります。

  • class, id 以外の attribute を付加できる
  • attribute を付加できる要素が多い
  • attribute list を定義して、後から呼び出すことができる

以下は、Google Code Prettify によるシンタックスハイライトのために、pre 要素に attribute を付加する例です。1 行目で attribute list gcp を定義し、9 行目で呼び出しています。

{:gcp: .prettyprint title="none"}

~~~
int main(void) {
    puts("Hello, world!");
    return 0;
}
~~~
{:gcp .lang-c title="helloworld"}

これを変換すると、以下が得られます。

<pre class="prettyprint lang-c" title="helloworld"><code>int main(void) {
    puts("Hello, world!");
    return 0;
}
</code></pre>
参考