Добавляем Bootstrap в проект
Затем нам нужно скачать код Bootstrap с https://getbootstrap.com/.
Скачав пакет, извлеките его и переместите в каталог _sass в нашем проекте Jekyll. Вы можете перемещать только файлы scss, но также работает и добавление всей папки.
📦 jekyll_bootstrap_project
┣ 📂 _data
┣ 📂 _includes
┣ 📂 _layouts
┣ 📂 _posts
┣ 📂 _sass
┃ ┗ 📂 bootstrap-5.0.1
┣ 📂 _site
┣ 📂 assets
┃ ┗ 📂 css
┃ ┗ 📜 styles.scss
┣ 📜 _config.yml
┣ 📜 .gitignore
┗ 📜 index.html
Теперь вы включили Bootstrap в проект — почти готово!
Настраиваем Bootstrap с Sass
Теперь нам нужно убедиться, что мы включили Bootstrap Sass в основной scss для нашего проекта. Это довольно просто.
Наш файл styles.scss, расположенный в assets/css, выглядит так:
---
---
@import "main";
Что это значит? Я позволю документации по Jekyll объяснить.
Пустая передняя часть вверху сообщает Jekyll, что ему нужно обработать файл. @import "main" указывает Sass искать файл с именем main.scss в каталоге sass (_sass/) по умолчанию, который вы уже создали непосредственно в корневой папке вашего веб-сайта). На этом этапе у вас будет только основной файл css. Для больших проектов это отличный способ упорядочить CSS.
Этот файл будет генерировать CSS для использования на нашем веб-сайте. Итак, теперь всё, что осталось сделать, это настроить, где мы будем добавлять пользовательские стили поверх Bootstrap Sass, который мы уже добавили в наш проект.
Нам нужно создать два файла в нашем каталоге _sass:
- main.scss
- vars.scss
Первый файл, main.scss, является основным файлом нашего проекта. Мы будем писать все наши пользовательские стили там.
Вам нужно будет добавить следующий код в main.scss:
@import "vars";
@import "bootstrap-5.0.1/scss/bootstrap.scss";
/* Custom Styles */
Этот код импортирует как наш код Bootstrap SCSS, так и наш другой файл, vars.scss, в main.scss, чтобы мы могли его использовать.
Другой файл, vars.scss, будет специально использоваться для переопределения любых значений Bootstrap по умолчанию, которые мы хотим изменить.
Это должно выглядеть так:
/* Custom Variables */
$primary: red; /* change Bootstrap 5 primary color to red */
Когда вы это сделаете, проект должен выглядеть примерно так:
📦 jekyll_bootstrap_project
┣ 📂 _data
┣ 📂 _includes
┣ 📂 _layouts
┣ 📂 _posts
┣ 📂 _sass
┃ ┗ 📂 bootstrap-5.0.1
┃ ┗ 📜 main.scss
┃ ┗ 📜 vars.scss
┣ 📂 _site
┣ 📂 assets
┃ ┗ 📂 css
┃ ┗ 📜 styles.scss
┣ 📜 _config.yml
┣ 📜 .gitignore
┗ 📜 index.html
Последним шагом является включение сгенерированной таблицы стилей в вашу разметку. В нашем случае мы хотим добавить styles.scss в наш файл index.html.
Вот и всё!
Теперь просто запустите следующую команду, чтобы открыть свой сайт:
$ jekyll serve
И ваш проект запущен и работает с Bootstrap 5!
Вам нужно будет добавить стили, чтобы увидеть элементы Bootstrap. Я считаю полезным создать файл components.html, который я храню в корне проектов.
Таким образом, я могу увидеть, как выглядят переопределяющие значения по умолчанию.
Почему я использую этот метод?
Я обнаружил, что этот метод лучше всего работает для меня при работе над простыми проектами. Это очень быстро — и при этом не делает предположений о структуре вашего проекта.
Этот метод также не требует много кода (всего менее 15 строк). И это легко запомнить, так что я могу сделать это с новой машины без необходимости гуглить всё.
И последнее, но не менее важное: мне не нужно беспокоиться о зависимостях или изменении других проектов. Единственная проблема заключается в том, что вам нужна локальная копия Jekyll и Bootstrap.
Заметки для перфекционистов
Этот метод, вероятно, не соответствует "лучшим практикам".
Использование плагинов и гемов может сэкономить время и силы, сделать вещи более воспроизводимыми и упростить обновления. Но я обнаружил, что их сложно установить. И они сделали мои проекты трудными для понимания. Мне нравится вносить изменения в настройки Bootstrap по умолчанию, и делать это с помощью плагинов и гемов никогда не было легко для меня.
Но это действительно легко для меня. И, надеюсь, кому-то еще это будет полезно.
Для решений, которые просто работают, есть место и время.
Перевод с некоторыми авторскими заголовками.
Автор оригинала: Colin Gallagher.