Реєстрація шорткоду в Eleventy

Зараз поглянемо, як можна зареєструвати шордкод у генераторі статичних сайтів Eleventy. Інструкція буде на прикладі додавання шордкоду для HTML5 тега <audio>.

У файлі .eleventy.js всередині функції module.exports = function(eleventyConfig) { (можна вкінці вище кінцевої фігурної дужки };) додаємо наступний код:

eleventyConfig.addShortcode('audio', function (path) {
    return `
<audio
  controls
  src="${path}">
      Твій браузер не підтримує
      <code>audio</code> теги.
</audio>
    `
})

Змінна path буде підставляти шлях до аудіофайлу.

Тепер у Markdown шаблоні статті вистачає додати наступне:

{% audio "audiofile.mp3" %}

І після генерування у файлі HTML з'явиться ось такий код:

<p><audio
    controls
    src="audiofile.mp3"><br>
Твій браузер не підтримує<br>
<code>audio</code> теги.<br>
</audio></p>

Раджу прочитати:

Створення шаблона WordPress. Файл index.php

Як із допомогою JavaScript змінити клас елемента

Створення шаблона WordPress. Вигляд категорій

Цікавий спосіб реалізації кнопки-бургера на сайті