Jekyll table of contents per page

This filter creates a table of contents list based on all h2 tags that are on your site.

module TocFilter
  def toc(input)
    output = "<ul class=\"toc\">"
    input.scan(/<(h2)(?:>|\s+(.*?)>)([^<]*)<\/\1\s*>/mi).each do |entry|
      id = (entry[1][/^id=(['"])(.*)\1$/, 2] rescue nil)
      title = entry[2].gsub(/<(\w*).*?>(.*?)<\/\1\s*>/m, '\2').strip
      if id
        output << %{<li><a href="##{id}">#{title}</a></li>}
      else
        output << %{<li>#{title}</li>}
      end
    end
    output << '</ul>'
    output
  end
end
Liquid::Template.register_filter(TocFilter)

Use it with

{{ content | toc }}

Anywhere in your layouts.

Related Articles

• August 9, 2016 | Jekyll Jekyll filter: Use Liquid in front-matter
• September 1, 2015 | Jekyll Custom Jekyll Includes Directory
• January 2, 2014 | Jamstack, Remake, Jekyll, Wordpress, CMS, Website Remake, Remodel! Part Three: How to switch from Wordpress to Jekyll