是否可以为 Pug 中的每个标题生成锚点？

Question

我想知道是否有办法为我的每个标题生成锚点。我希望使用 Pug 实现以下目标：

h2 Some heading

加工成

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

Pug 中有执行此操作的选项吗？

Answer 1

通常你会用这种东西循环数组。假设为了争论起见，它只是被称为 headings。

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

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

输出：

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

要使用与标题标签不同的 ID，您可以创建一个数组 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

输出：

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

当然，您不应该在哈巴狗模板中设置数组。在 node/express 路由处理程序中调用 res.render 之前，这一切都应该在路由处理程序中完成。

Answer 2

这是使用 mixin 和 javascript 将标题转换为 id 安全字符串的绝佳机会。

此外，您可以添加一个级别参数并使用tag name interpolation来支持多级标题。

混音：

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

用法：

+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

编译为：

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

是否可以为 Pug 中的每个标题生成锚点？

Is it possible to generate anchor for each heading in Pug?

html

pug