Не знаете, что такое одиннадцать? Прежде чем читать дальше, ознакомьтесь с этой замечательной серией статей от Татьяны Мак, чтобы узнать больше о eleventy и генераторах статических сайтов в целом.
Шорткоды используются для вызова определенной функции, которая возвращает некоторые html или любые другие данные на основе переданной информации. В основном они используются для повторного использования html-шаблонов, требующих некоторой предварительной обработки.
Во время написания блогов я столкнулся с необходимостью встраивать кодовые ручки в свои статьи для быстрой демонстрации кода.
Первоначально я копировал и вставлял код для встраивания, предоставленный сайтом codepen. Это совсем не осуществимо.
Дело было не в том, что я вообще не знал о шорткодах, потому что использовал их в DEV, но я не был уверен, что что-то подобное существовало и в одиннадцатом. Итак, я пристегнулся и отправился изучать шорткоды в одиннадцать!
Руководство
Согласно официальной документации одиннадцати, механизм шаблонов по умолчанию для файлов уценки — liquid, поэтому здесь я использовал в качестве примера шорткод liquid. Вы также можете создать шорткод для других шаблонизаторов.
Внутри файла .eleventy.js напишите следующий код в функции module.exports:
Шорткод: {% codepen 'url' %}
Поместите вышеуказанный shortcode туда, где вы хотите, чтобы ваш codepen был встроен.
Передайте codepen url функции шорткода. Разделите url, используя / в качестве разделителя.
Вы получите массив, из которого вы можете отфильтровать слаг после URL-адреса profile. Преобразуйте отфильтрованный массив в строку, используя join(""). Вы получаете profile url пользователя codepen.
Точно так же вы можете извлечь username, а также codepen id.
Скопируйте код embed из codepen и отредактируйте его, чтобы сделать его динамичным. Функция возвращает код embed, встроенный в ваш шаблон html.
Подписание.
Первоначально опубликовано на https://syntackle.live 7 июня 2022 г.
