jekyll-toc icon indicating copy to clipboard operation
jekyll-toc copied to clipboard

Add a simple way to customize anchor injection

Open kizycat opened this issue 6 years ago • 2 comments

Implementation for https://github.com/toshimaru/jekyll-toc/issues/43

This change adds a setting for a liquid template to be used for anchor injection:

toc:
  injection_template: 'path/to/template.html'

The template is supplied with the original text content (heading_text) and id (heading_id) for each heading element:

<!-- Append an anchor pilcrow after the heading text, Sphinx style: -->
{{ heading_text }} <a class="anchor" aria-hidden="true" href="{{ page.url }}{{ heading_id }}">¶</a>

The above template, when injected on an <h1>, yields html like the following:

<h1 id="this-is-a-heading">
  <!-- Append an anchor pilcrow after the heading text, Sphinx style: -->
  This is a heading <a class="anchor" aria-hidden="true" href="example.com/this/page.html#this-is-a-heading">¶</a>
</h1>

kizycat avatar Mar 14 '19 07:03 kizycat

@gandalf3 How do you think about using anchor.js? Does this meet your requirement?

https://github.com/toshimaru/jekyll-toc/issues/43#issuecomment-481910393

toshimaru avatar Apr 25 '19 23:04 toshimaru

@toshimaru I was also looking for a way to do this in jekyll to avoid (imo unnecessary) javascript. That said I understand if most are happy with a javascript solution, and I can live with using my patched version for my own purposes if you decide this feature doesn't fit in jekyll-toc.

kizycat avatar Apr 29 '19 13:04 kizycat