Skip to content

Conversation

kitt-cat
Copy link

@kitt-cat kitt-cat commented Mar 14, 2019

Implementation for #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>

@kitt-cat kitt-cat force-pushed the customize_anchor_injection branch from e3d1091 to d68bb90 Compare March 14, 2019 07:35

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering why you need to configure page.url.

I think anchor's href should be #heading-title, for instance. 🤔

Copy link
Author

@kitt-cat kitt-cat Mar 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this example, the idea is for the anchor to provide an absolute reference so right click -> copy link gives something which can be pasted anywhere. Of course, the goal is for customization; you could of course just use #{{ heading_id }} to get a relative reference, if that is what one wishes.

@toshimaru
Copy link
Owner

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

#43 (comment)

@kitt-cat
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants