1

I was wondering if there is a way to generate an anchor for each of my headings. I was hoping to achieve the following using Pug:

h2 Some heading

process into

<div id="some-heading">
<h2>Some heading</h2>
</div>

Is there an option to do this in Pug?

2 Answers 2

1

This is a great opportunity to use a mixin, with javascript to transform your headline into an id-safe string.

Additionally, you can add a level parameter and use tag name interpolation to support multiple levels of headings.

Mixin:

mixin h(level, headline)
  - let id = headline.toLowerCase().replace(' ', '-').replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
  section(id= id)
    #{'h' + level}= headline
    if block
      block

Usage:

+h(2, 'Section A')

+h(2, 'Section B')
  p Lorem ipsum dolor amit

+h(2, 'Section C')
  p Lorem ipsum dolor amit
  +h(3, 'Section C, Subsection A')
    p Lorem ipsum dolor amit

Compiles to:

<section id="section-a">
  <h2>Section A</h2>
</section>

<section id="section-b">
  <h2>Section B</h2>
  <p>Lorem ipsum dolor amit</p>
</section>

<section id="section-c">
  <h2>Section C</h2>
  <p>Lorem ipsum dolor amit</p>
  <section id="section-c-subsection-a">
    <h3>Section C, Subsection A</h3>
    <p>Lorem ipsum dolor amit</p>
  </section>
</section>
3
  • Hello @sean, thank you for posting this mixin approach! It pretty much exactly does what I hope to achieve. I've tweaked it a little with a new prototype for "replaceAll" instead of "replace" for replace(' ', '-'). Do you know a way to make it work for multiple levels (h1-h6) without replicating the same code over and over again? Jun 13, 2019 at 10:01
  • Awesome, this completely solves my problem - a dream! Thank you so much Sean! Jun 14, 2019 at 10:16
  • 1
    No problem. Mixins are the best
    – Sean
    Jun 14, 2019 at 13:20
0

Usually you're looping through an array with this sort of thing. Let's assume it's just called headings for the sake of argument.

- var headings = ["Heading1", "Heading2", " Heading3"];

each heading in headings
  div(id= heading)
    h2= heading

Outputs:

<div id="Heading1">
  <h2>Heading1</h2>
</div>
<div id="Heading2">
  <h2>Heading2</h2>
</div>
<div id="Heading3">
  <h2>Heading3</h2>
</div>

To have a different ID from the heading label you could create an array of objects:

- var headings = [];
- headings.push({ "id": "heading-1", label: "Heading #1" });
- headings.push({ "id": "heading-249", label: "Heading #249" });


each heading in headings
  div(id= heading.id)
    h2= heading.label

Outputs:

<div id="heading-1">
  <h2>Heading #1</h2>
</div>
<div id="heading-249">
  <h2>Heading #249</h2>
</div>

Of course, you shouldn't be setting up arrays in your pug template. That should all be done in the route handler before you call res.render in your node/express route handler.

3
  • Hmmm, as I'm using the pug file to store my content more than as a template engine this might not be ideal Jun 11, 2019 at 9:28
  • 1
    In my experience any time you start moving content or logic into the pug template it overly complicates things and you end up pulling it out in the end. It makes the template inflexible and anything but the simplest transformations are very difficult.
    – Graham
    Jun 11, 2019 at 10:48
  • hmmmm, I'll have a rethink about it. Might run a process after to fix it up - but that isn't idea. Jun 11, 2019 at 11:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.