Меню категорій

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

Кілька слів про те, як спростити собі життя, зареєструвавши шорткод в Eleventy.
Категорії: 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>

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

Прокоментувати

На сайті відображається лише твоє ім'я та коментар. Електронна пошта зберігається виключно для зв'язку з тобою за потреби та в жодному разі не передається стороннім особам.

Цей сайт захищений системою reCAPTCHA від Google. Політика конфіденційності та Загальні положення та умови.