Jekyllによる複数レベルのサブナビゲーション

上記のようなHTMLドキュメントをセクションに分割するときに直面する明らかな問題は、何もネストされていないことです。 HTMLを解析するためのツールのほとんどは、ネストで機能するように構築されています。

これは取引を妨げるものではありませんが、もう少し作業を行う必要があることを意味します。以下の例では、各H2タグを見つけてから、兄弟を手動でスキャンしてH3タグを探します。

私は空想を得て、カスタム列挙子を使用しました。それらについて質問がある場合は、それらに関する私のブログ投稿をチェックしてください。

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').map do |h2|
          to_nav_item(page, h2).tap do |item|
            item["children"] = subheadings(h2).map { |h3| to_nav_item(page, h3) }
          end
        end
      end
    end
  end

  # Converts a heading into a hash of the info for a link
  def to_nav_item(page, heading)
    {
      "title" => heading.text,
      "url" => [page.url, heading['id']].join("#")
    }
  end

  # Returns an enumerator of all H3s "belonging" to an H2
  def subheadings(el)
    Enumerator.new do |y|
      next_el = el.next_sibling
      while next_el && next_el.name != "h2"
        if next_el.name == "h3"
          y << next_el
        end
        next_el = next_el.next_sibling
      end
    end
  end
end

これはあなたに投げかけるコードの塊であると私は理解していますが、それは以前の投稿で行った作業から構築されています。 Jekyllプラグインの構造や、nokogiriの使用方法について質問がある場合は、その記事を確認してください。

ドキュメントサイトに対してこのコードを実行すると、次のようなハッシュが表示されます。

[{"title"=>"Getting Started",
  "url"=>"/lib/java.html#getting-started",
  "sub_subnav"=>
   [{"title"=>"Download / Maven", "url"=>"/lib/java.html#download-maven"},
    {"title"=>"Stand Alone Usage", "url"=>"/lib/java.html#stand-alone-usage"},
    {"title"=>"Servlet Usage", "url"=>"/lib/java.html#servlet-usage"},
    {"title"=>"Play Usage", "url"=>"/lib/java.html#play-usage"},
    {"title"=>"API Usage", "url"=>"/lib/java.html#api-usage"}]},
    ...

今やらなければならないのは、液体テンプレートを使用してこれをレンダリングする方法を理解することだけです。

{% include navigation_item.html collection=page.subnav level=0 %}

{% if include.collection.size > 0 %}
<ul class="nav nav-list level-{{ include.level }}">
    {% for item in include.collection %}
      {% if item.url == page.url %}
      <li class="active">
      {% else %}
      <li>
      {% endif %}
        {% if item.subnav.size > 0 %}
          <a class="has-subnav" href="{{ item.url }}">
          <span class="glyphicon glyphicon-plus"></span>
          <span class="glyphicon glyphicon-minus"></span>
        {% else %}
          <a href="{{ item.url }}">
        {% endif %}
          {{ item.title }}
        </a>
        {% assign next_level = include.level | plus: 1 %}
        {% include navigation_item.html collection=item.children level=next_level %}
      </li>
    {% endfor %}
  </ul>
{% endif %}