hakyllのteaser設定方法が好みではなかったので自作した

  • hakyllのteaser設定方法が好みではなかったので自作した
  • twitterがopen graphに対応していたことを知った

背景

twitterにdescriptionを設定したかった.

hakyllのteaser設定方法

hakyll公式のteaser設定方法はmoreをmarkdownに書くものである.

We use <!--more--> for this to mimic the WordPress convention:

Hakyll - Using teasers in Hakyll

手動でいちいち「続きを読む」部分を書くのは人間の行う作業ではないし,マークアップの流儀とも反している.

また,descriptionは文字列のサイズで適当に切り捨てられるので,切り捨てをいちいち考えるのも面倒くさい.

手動で文章を綺麗に切り抜いたほうが,美しいwebページを作ることは出来るのだろう.しかし,手動で切り抜き部分を指定するのは,私の美学に反する.

pandocで変換する

というわけで私のサイトでは,pandocにhtmlからplaintextに変換してもらい,そこから指定の文字数だけを切り取ることにした.

富豪的なやりかただが,hakyllのcacheは賢いため,問題にはならない.

teaserFieldByResource :: Int -> String -> Snapshot -> Context String
teaserFieldByResource l key snapshot = field key $ \item ->
    take l . stripTags . trans . itemBody <$> loadSnapshot (itemIdentifier item) snapshot
  where trans h = either (error . show) id (writePlain def <$> readHtml def h)

twitterはopen graphに対応していた

teaserも無事に設定できたので,twitterのdescriptionを設定することにした.それまでは仕方がないのでtitleと同じものを設定していた.

そしてtwitter cardのドキュメントを見直したら,twitterが独自のtwitter card形式だけでなく,標準のopen graph形式に対応していたことを知った.

既にオープングラフプロトコルを使用してページのデータを記述している場合は、タグやデータを複製しなくてもTwitterカードを作成できます。

スタートガイド — Twitter Developers

なので,標準形式で対応してfacebookなどにも対応させた.

設定が正常かは以下のサイトでチェックした.