Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a simple way to customize anchor injection #75

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

gandalf3
Copy link

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


```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

@gandalf3 gandalf3 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)

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

None yet

2 participants