JekyllのH2からサブナビゲーションを自動的に生成します

Jekyll用に作成できるプラグインにはいくつかの種類があります。ジェネレーターを作成します。

ジェネレーターは、Jekyll::Generatorから継承する単なるクラスです。 generateと呼ばれるメソッドを提供します 。

ジェネレーターは、Jekyllがすべてのマークダウンファイルをロードした後、それらのファイルがHTMLに変換される前に実行されます。 site オブジェクトはgenerateメソッドに渡されます。また、サイトオブジェクトを使用して、すべてのサイトページ、投稿、その他のリソースにアクセスできます。

以下の例では、すべてのページをループしてタイトルを出力するジェネレーターを作成します。

class MySubnavGenerator < Jekyll::Generator
  def generate(site)
    site.pages.each do |page|
      puts page.data["title"]
    end
  end
end

ジェネレーター内のページとサイトのデータを変更することもできます。データはフロントマターとサイト構成ファイルから読み込まれます。

   page.data["title"] += " - modified!"
   site.data["tagline"]

HTMLへの事前レンダリングマークダウン

マークダウンドキュメントから見出しを抽出したいと思います。これを行う最も簡単な方法は、マークダウンをHTMLに変換してから、nokogiriなどのツールを使用してHTMLを解析することです。

これは私を少し汚く感じさせますか？うん。ちょっと遅いでしょうか？絶対。しかし、Jekyllは静的サイトジェネレーターなので、リアルタイムのパフォーマンスについて心配する必要はありません。だから私はただ鼻を押さえてそれを成し遂げるつもりです。

ここでは、Jekyllの組み込みのマークダウンラッパーを使用して、すべてのマークダウンページをHTMLに変換します。

class MySubnavGenerator < Jekyll::Generator
  def generate(site)
    parser = Jekyll::Converters::Markdown.new(site.config)

    site.pages.each do |page|
      if page.ext == ".md"
        html = parser.convert(page['content'])
        # Do something with the html here
      end
    end
  end
end

require "nokogiri"

class MySubnavGenerator < Jekyll::Generator
  def generate(site)
    parser = Jekyll::Converters::Markdown.new(site.config)

    site.pages.each do |page|
      if page.ext == ".md"
        doc = Nokogiri::HTML(parser.convert(page['content']))
        doc.css('h2').each do |heading|
          puts "#{ heading.text }: #{ heading['id'] }"
        end
      end
    end
  end
end

require "nokogiri"

class MySubnavGenerator < Jekyll::Generator
  def generate(site)
    parser = Jekyll::Converters::Markdown.new(site.config)

    site.pages.each do |page|
      if page.ext == ".md"
        doc = Nokogiri::HTML(parser.convert(page['content']))
        page.data["subnav"] = []
        doc.css('h2').each do |heading|
          page.data["subnav"] << { "title" => heading.text, "url" => [page.url, heading['id']].join("#") }
        end
      end
    end
  end
end

{% for item in page.subnav %}
  <a href="{{ item.url }}">{{ item.title }}</a>
{% endfor %}

# Use the redcarpet Markdown renderer
markdown: redcarpet
redcarpet:
    extensions: [
        'no_intra_emphasis',
        'fenced_code_blocks',
        'autolink',
        'strikethrough',
        'superscript',
        'with_toc_data',
        'tables',
        'hardwrap'
    ]