Jekyll(Liquid)で記事の目次を出力するプラグインを作ってみた

Tags: [ Jekyll ] [ Liquid ] [ Ruby ] Published: 2012/10/10

あらすじ

Jekyllのプラグイン作成の練習。エントリから見出しを抽出して目次を出力してみたい。

参考サイト

ソース

まだできてない事

  • 記事中に h1 (#) タグがあるとうまく生成されない
    • 記事タイトルが h1 (#) なので、 h2 (##) 以下の見出しを集めてくるようにしている
  • 目次から記事へのリンク
    • Markdownでは ## <a name="section"> hoge と記載すればnameを振ってくれるようだけど、めんどいので自動で振ってほしい
    • むしろ今はaタグを入れているとレイアウトが崩れる
      • …あれ? 別の環境でやったら hタグに section , section-1 , section-2 … って連番が振られてる!? なんで!

作り方

最小単位はこうなるみたい。(何もしないプラグイン)

    module Jekyll
  class SampleTag < Liquid::Tag
    def initialize(tag_name, xxx, tokens)
      super
    end

    def render(context)
    end
  end
end

Liquid::Template.register_tag('sample', Jekyll::SampleTag)
  

これでMarkdown中に {% sample hogehoge fuga %} と書くと、initializeメソッドの tag_name にsample、 xxx にhogehoge fuga、 tokens に本文が渡される。

という事でタグにつけた引数や本文を使う場合はinitializeで確保しとく。

renderメソッドでreturnした文字列がそのままページに出力される。

※ 新しくタグを作ったときは、Jekyllを再起動しないと Unknown tag が出続ける。

  • 己のJekyll下の _pluginstree_list.rb を突っ込む
  • html(postするMarkdownファイルでもいいし、テンプレートのhtmlでもいい)のどこかに {% tree %} を埋め込む
  • $ jekyll --server 実行後localhost:4000にアクセス

これで文中の見出しが目次としてかき集められる。ただし、GitHub Pagesを使っている場合はソースをそのままpushするだけではダメで、対策が必要っぽい。

blog comments powered by Disqus

Author: kk_Ataka / Powered by Jekyll on GitHub Pages