CODEWITHSUNDEEP
htmljekyllkramdown
user7843034
user7843034

Reputation: 489

Jekyll link within page

I'm using Jekyll on Github, and I wonder whether there's a way to link to a section within a page. Say I have a section like

## Section 1 ##
section content

and later in the same page I want to link to this section. I've found how to link to another page within the blog and do footnotes, but not this.

As a note, I use markdown: kramdown in my _config.yml

Upvotes: 20

Views: 11638

Answers (6)

alexjj
alexjj

Reputation: 89

If you put {: #your-id-name} on the line underneath anything then it'll make an id for that element and you can link to it.

e.g. a paragraph:

This is some nice text.
{: #my-nice-text}

Will be rendered as:

<p id="my-nice-text">This is some nice text.</p>

So you could link to it with link

Upvotes: 0

Pablo
Pablo

Reputation: 3514

I found an alternative that works on my current jekyll static site

## My Subsection {#my-subsection}    

This is some content in the subsection.

[Link to the subsection](#my-subsection)

hope it helps.

Upvotes: 1

TrigonaMinima
TrigonaMinima

Reputation: 1978

If the section of the page you want to jump to is not a section heading, then this accepted answer didn't work for me. The following worked for me:

[jump](#final-solution)


<div id="final-solution"></div>

Upvotes: 0

Ilarion Halushka
Ilarion Halushka

Reputation: 2343

I found a nice repository that helps add anchors to all headers in three simple steps.

From docs:

  1. Download the anchor_headings.html file from the master branch

  2. Toss that file in your _includes folder

  3. Where you typically would put {{ content }} in your layout, you would instead use this Liquid tag to output your page's content:

    {% include anchor_headings.html html=content anchorBody="#" %}

As result you will see:

enter image description here

Which is easy to customize.

Upvotes: 1

spygi
spygi

Reputation: 442

It seems that this has been changed to #heading-section-1 (checking on Jekyll 3.7.3 right now).

As a way to figure this out on your own, you can inspect the element and see the id being used on the rendered page.

Upvotes: 5

marcanuy
marcanuy

Reputation: 23942

kramdown supports the automatic generation of header IDs if the option auto_ids is set to true (which is the default). This is done by converting the untransformed, i.e. plain, header text

So in the above example ## Section 1 ##, it would generate the following id: id="section-1", then the anchor is linked to via the A element:

<A href="#section-1">Section One</A>

Or in plain kramdown/markdown: [Section 1](#section-1)

Upvotes: 25

Related Questions