blog.bouzuya.net

2012-08-22 enliveでHTMLを生成する

昨日はJekyllのpostを解釈し、Clojureのmapに変換した。今日はこのmapを使って、今度は独自のHTMLを生成する。

テンプレートとなるHTMLを用意しておき、そこにmapから必要なデータを取得し埋めてやる。この動作にはClojure製テンプレートエンジンであるenliveを使う。enliveは以前にも紹介したライブラリである。

流れを整理すると、次のようになる。

Jekyllのpost(既存の日記データ)
|
| (option(YAML),content(Markdown)を解釈. Markdown->HTML by MarkdownJ)
|
V
Clojureのmap
|
| (テンプレートに埋め込み by enlive)
|
V
HTML

最終的にはこの動きをmisakiのcompilerとして組み込めればと考えている。ただテンプレートとしてHTMLを要求するenliveの動作はmisakiのhiccupベースの動作とうまくとけあわないかもしれない。そもそもmisakiではファイル中に関数を書けるので、ファイルにこの動作をする関数を埋め込むだけでかたがつくかもしれない。最悪misakiベースのオレオレ静的Blogジェネレーターを作ることになるだけで、大した違いはない。

さて、今日のコードはこんな感じ。全体はbouzuya/clj-ex-mkdとしてGitHubに公開している。enliveを普通に使っているくらいで、特に面白いところはない。Jekyllのpostが扱いやすい状態になっているおかげであとは好き勝手はめこむだけ。実際にはもうすこし凝ったことをやらないと実用的ではないが、これでも見れる形には変換される。

テンプレートはこんな感じ。シンプルなHTML5によるマークアップである。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <article class="post">
        <header class="post-header">
            <h1 class="post-title">post-title</h1>
        </header>
        <div class="post-body"></div>
    </article>
</body>
</html>

Jekyllのpost(一部抜粋)はこんな感じ。pubdateがbouzuya.github.comの独自仕様だけど、それくらいかな。

---
layout: post
pubdate: '2012-02-16T15:50:06+09:00'
title: Jekyllを試す
tags: jekyll
---
今日は[Jekyll][jekyll]を試した。今日からはGitHub Pages(Jekyll)でブログを書こうと思う。

出力結果は、こうなる(一部省略)。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Jekyllを試す</title>
</head>
<body>
    <article class="post">
        <header class="post-header">
            <h1 class="post-title">Jekyllを試す</h1>
        </header>
        <div class="post-body"><p>今日は<a href="http://jekyllrb.com/">Jekyll</a>を試した。今日からはGitHub Pages(Jekyll)でブログを書こうと思う。</p>
</div>
    </article>
</body>
</html>

いい感じに埋め込まれているのが分かるはず。この調子で進めばmisakiと仲良くなれる日も遠くないな。

20 min.