Заголовок с якорем

Компонент добавляет заголовок c якорем от H2 до H6.

./src/pug/components/headlines.pug

Вызов компонента

PUG
+h2("Заголовок H2", 'component', "link-h2")
+h3("Заголовок H3", 'component', "link-h3")
+h4("Заголовок H4", 'component', "link-h4")
+h5("Заголовок H5", 'component', "link-h5")
+h6("Заголовок H6", 'component', "link-h6")

Содержимое компонента

PUG
mixin h2(title, path = "", link = "")
  h2(id=link)  
    a(href=path + "#" + link, aria-label="Ссылка на раздел: " + title)

mixin h3(title, path = "", link = "")
  h3(id=link)  
    a(href=path + "#" + link, aria-label="Ссылка на раздел: " + title)

mixin h4(title, path = "", link = "")
  h4(id=link)  
    a(href=path + "#" + link, aria-label="Ссылка на раздел: " + title)

mixin h5(title, path = "", link = "")
  h5(id=link)  
    a(href=path + "#" + link, aria-label="Ссылка на раздел: " + title)

mixin h6(title, path = "", link = "")
  h6(id=link)  
    a(href=path + "#" + link, aria-label="Ссылка на раздел: " + title)

Сборка компонента

HTML
<h2 id="link-h2">Заголовок H2 
  <a href="component#link-h2" aria-label="Ссылка на раздел: Заголовок H2"></a>
</h2>

<h3 id="link-h3">Заголовок H3 
  <a href="component#link-h3" aria-label="Ссылка на раздел: Заголовок H3"></a>
</h3>

<h4 id="link-h4">Заголовок H4 
  <a href="component#link-h4" aria-label="Ссылка на раздел: Заголовок H4"></a>
</h4>

<h5 id="link-h5">Заголовок H5 
  <a href="component#link-h5" aria-label="Ссылка на раздел: Заголовок H5"></a>
</h5>

<h6 id="link-h6">Заголовок H6 
  <a href="component#link-h6" aria-label="Ссылка на раздел: Заголовок H6"></a>
</h6>