Можно ли сгенерировать привязку для каждого заголовка в Pug? - PullRequest
Новая
       18

Можно ли сгенерировать привязку для каждого заголовка в Pug?

0 голосов
/ 11 июня 2019

Мне было интересно, есть ли способ создать привязку для каждого из моих заголовков. Я надеялся добиться следующего с помощью мопса: 

h2 Some heading

процесс в 

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

Есть ли возможность сделать это в Pug?

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Это прекрасная возможность использовать mixin с javascript для преобразования заголовка в id -защищенную строку.

Кроме того, вы можете добавить параметр уровня и использовать интерполяцию имени тега для поддержки нескольких уровней заголовков.

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>
0 голосов
/ 11 июня 2019

Обычно вы проходите через массив с такими вещами.Давайте предположим, что он просто называется 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>

Чтобы иметь другой идентификатор из метки заголовка, вы можете создать массив объектов: 

- 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 в вашем узле / обработчике экспресс-маршрута.

...