Question

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

SftpStreamingMessageSource

进入

SftpStreamingInboundChannelAdapterSpec

在帕格（Pug）可以选择执行此操作吗？

Answer 1

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

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

Mixin：

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>

Answer 2

通常，您正在使用这种东西遍历数组。为了进行讨论，我们假设将其简称为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，您可以创建一个对象数组：

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

当然，您不应该在帕格模板中设置数组。在节点/快速路由处理程序中调用res.render之前，应该先在路由处理程序中完成所有操作。

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

2 个答案: