WebMatrix/ASP.NET Web Pages で Jekyll っぽいものを

執筆日時：

GitHub - jekyll/jekyll: Jekyll is a blog-aware static site generator in Ruby というのは、Markdown ドキュメントを置いておくとそれを HTML に変換しておいてくれる静的コンテンツの生成システムらしい。

Jekyll ドキュメントはこんなかんじ。

---
layout: post
title: テスト投稿タイトル
date: 2012-04-01 09:00:00
category : サンプル
tags : [intro, 初心者, jekyll, tutorial]
---

テスト投稿本文


    

  • a
    • 

  • b
    • 

  • c
    • 




  
    http://daruyanagi.net

Markdown テキストの先頭に YAML Front-Matter と呼ばれる設定を書いておけば、タイトル・レイアウト・投稿日時・カテゴリ・タグといったメタデータを付与することもできる。なんだか便利臭がプンプンするぜ。

さて、これを WebMatrix で HTML ドキュメントに変換してみようというのが今日のお題。SignalR + WebMatrix でサーバーフォルダの監視を行ってみる - だるろぐ などと組み合わせたら面白いものができそうな気がする。

必要なライブラリ

どちらも NuGet で取得できる。

サンプルコード

先ほどの Jekyll ドキュメントを ~/Default.md としておき、これを ~/Default.cshtml で読み込んで変換・表示してみる。あくまでもサンプルなので、汚いところ、あからさまにダメなところは無視してほしいかな（笑

@using System.Text.RegularExpressions
@using System.Yaml

@{
var path = Server.MapPath("~/Default.md");


var s = System.IO.File.ReadAllText(path);


// YAML Front-Matter を抽出する適当な正規表現
var r = new Regex("—.+—", RegexOptions.Singleline);


// YAML Front-Matter を取得（エラー処理なし！）


/* 配列として受け取る → 先頭はマッピング（ハッシュ）のはず */
var node = YamlNode.FromYaml(r.Match(s).ToString())[0]
as YamlMapping;


//YAML Front-Matter の値を変数に格納する


/* スカラ（値）の場合 */
var title = (node["title"] as YamlScalar)
.Value; // <- 生テキスト！
var date = (node["date"] as YamlScalar)
.NativeObject; // <- DateTime!
var category = (node["category"] as YamlScalar).Value;
var layout = (node["layout"] as YamlScalar).Value;


/* シーケンス（配列）の場合 */
var tags = (node["tags"] as YamlSequence)
.Select(_ => (_ as YamlScalar).Value);


// YAML Front-Matter を除去（危険が危ないデシ！）
s = r.Replace(s, string.Empty);


// 残りは Markdown ドキュメントです
var m = new MarkdownSharp.Markdown();
var text = m.Transform(s);
}


<!DOCTYPE html>


<html lang="ja">
<head>
<meta charset="utf-8" />
<title>@title</title>
</head>
<body>
<h1>@title</h1>


@Html.Raw(text)


<h2>Posted at</h2>
<p>@date</p>


<h2>Category</h2>
<p><a href="~/Category/@category">@category</a></p>


<h2>Tags</h2>
<ul>
@foreach(var tag in tags)
{
<li><a href="~/Tag/@tag">@tag</a></li>
}
</ul>
</body>
</html>

f:id:daruyanagi:20121009231737p:plain

なんとなく動いてるっぽい。