Что написано в коде блока-шаблона?
Пытаюсь понять, как правильно создавать готовую сборку для работы над вэб-проектами и дальнейшей сборки через webpack.
Нашел вроде бы неплохую статью про это: https://nicothin.pro/page/my-start-kit Но некоторые моменты непонятны, а именно:
В статье есть ссылка на "веб-представление" https://nicothin.pro/NTH-start-project/blocks-demo.html в котором есть описания блоков со ссылками на гитхаб.
Например, код блока footer:
https://github.com/nicothin/NTH-start-project/blob/master/src/blocks/page-footer/page-footer.pug
Понятно, что создается миксин mixin page-footer, но непонятно, что за (mods)? Хоть там и написано, что mods {string} - принимает список модификаторов, но ...зачем, для чего и куда это применять? Это же вроде просто миксин, вызвал с помощью +page-footer и все, но для чего этот (mods)?
Также непонятно, что в целом написано после комментария // список модификаторов. Единственное, что я понял, так это что в переменной var modsList = mods.split(',') задается разделение модификаторов через запятые и что modsList[i].trim() удаляет пробелы у элемента цикла.
Ответы (1 шт):
В HTML коде модификаторы будут выглядеть, как дополнительные классы стилей к блоку с подвалом. Например:
<footer class="page-footer page-footer--black page-footer--big">...</footer>
Миксин на скриншоте помогает компоновать этот HTML. Вызываем page-footer('black,big') и получаем указанный выше код для подвала.
Фрагмент под комментарием "список модификаторов" обрабатывает параметр mods, который мы передали миксину. В этом параметре мы перечислили через запятую окончания классов-модификаторов: 'black,big'.
- проверяем, что он задан и что он не пустой:
if(typeof(mods) !== 'undefined' && mods); - разбиваем строку из
modsна элементы массива; - поочерёдно дополняем их до полных названий классов-модификаторов и добавляем к переменной
allMods:
allMods = allMods + ' page-footer--' + modList[i].trim()
В итоге переменная allMods будет содержать строку вида page-footer--black page-footer--big, которую используем в следующем фрагменте кода. Её значение попадёт в атрибут class нашего подвала как добавление к основному классу page-footer.