У меня есть статический сайт, использующий одиннадцатьдесят, tailwindcss и nunjucks. это мой первый раз, и в целом он мне очень нравится, но я все еще нахожу макет немного запутанным.
я хотел бы создать страницу повторно используемых компонентов, каждый компонент из двух частей. пример отображения компонента, а затем под ним div, содержащий код компонентов для копирования и вставки.
в моем каталоге /src/utils/ я добавил простую функцию переключения для добавления и удаления блока класса (tailwindcss)
я не понимаю, как получить доступ к этой функции в моем коде файлов /src/site/components.njk, чтобы добавить функциональность на мою страницу.
многочисленные и длинные запросы в Google и Duck Duck Go не дали много информации, поэтому любая помощь приветствуется.
🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.
Поскольку вы хотите иметь эту функциональность на стороне клиента, вам необходимо убедиться, что ваш JavaScript включен в вывод вашего сайта. Поскольку ваш каталог /src/ существует только в вашем репозитории, он не будет доступен для браузера после того, как ваш сайт будет создан. Самый простой способ сделать его доступным для браузера — скопировать файл JavaScript в выходной каталог, а затем включить его как сценарий в выходной HTML-код. Убедитесь, что URL-адрес соответствует выходному местоположению. Например, если ваш исходный файл — /src/utils/component-toggle.js, ваш выходной каталог — /dist/, и вы копируете файл в /dist/utils/component-toggle.js, тег скрипта должен выглядеть так:
<script src = "/utils/component-toggle.js" defer></script>
См. Сквозное копирование файлов, чтобы узнать, как копировать статические файлы на этапе сборки.
Убедитесь, что ваш файл JavaScript работает и в контексте браузера. Например, вы не можете использовать CommonJS (синтаксис module.exports и require()), так как это концепция NodeJS и ее нет в браузерах. Если вы используете синтаксис модуля ES (синтаксис export default {}), убедитесь, что он поддерживается во всех браузерах, которые поддерживает ваш сайт.
Недавно я написал более подробный ответ на эту тему, в котором объясняется, почему вы должны делать это именно так, а также разница между JavaScript во время сборки и во время выполнения для генераторов статических сайтов, вы можете прочитать его здесь если вы Хотите узнать больше.