Hugo + Bootstrap
←Hugo
Есть несколько вариантов подключения Bootstrap в Hugo:
- Самый простой способ — подключить Bootstrap через CDN
- Установить Bootstrap с помощью NPM и компилировать из SASS в CSS с помощью Gulp, Grunt, Webpack и.п.
- Установить Bootstrap с помощью NPM и компилировать из SASS в CSS с помощью Hugo Pipes.
- Монтировать Bootstrap с помощью модулей Go и компилировать из SASS в CSS с помощью Hugo Pipes.
Варианты с Hugo Pipes хороши тем, что они работают на встроенном в Hugo сервере. Это решение «из коробки» и с максимальным быстродействием.
Поэтьому рассмотрим третий вариант — сборку Bootstrap с помощью Hugo Pipes.
Файлы ваших стилей SASS, которые будут компилироваться в CSS с помощью Hugo Pipes, должны размещаться в папке /assets.
Создайте основной файл assets/sass/main.scss и добавьте в него строки:
$not-so-white: FloralWhite;
body {
background-color: $not-so-white;
}
Вставьте в основной шаблон layouts/_default/baseof.html:
{{ $style := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
Теперь можно запустить Hugo и проверить — будет создан файл /sass/main.css и цвет фона станет FloralWhite.
В принципе, на этом этапе можно применить первый способ подключения Bootstrap — добавить перед строкой <link rel="stylesheet"... строку со ссылкой на CDN Bootstrap типа: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"... — и этого будет достаточно.
Чтобы использовать Bootstrap более тонко — например, включать только определенные части стилей, чтобы результирующий файл был минимального размера — установим Bootstrap в проекте и настроим его компиляцию вместе с вашими стилями.
Установите NPM:
sudo apt install npm
Перейдите в корень проекта и инициализируйте приложение:
npm init .
Будут заданы вопросы (можно на все отвечать Enter) и создан конфиг package.json.
Установите в проекте Bootstrap:
npm install bootstrap jquery popper.js postcss-cli autoprefixer --save
Самый простой способ — добавить в начало файла assets/sass/main.scss строку:
@import "../../node_modules/bootstrap/scss/bootstrap";
После компиляции в итоговом .css файле уже будут все стили Bootstrap.
Добавим параметр includePaths, в котором укажем, где искать стили Bootstrap:
{{ $options := (dict "includePaths" (slice "node_modules/bootstrap/scss")) }}
{{ $style := resources.Get "sass/main.scss" | toCSS $options }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
А в assets/sass/main.scss строку с путем к Bootstrap напишем просто:
@import "bootstrap";
Теперь можно импортировать только часть стилей — например, только бутстраповский сброс стилей:
@import "bootstrap-reboot";
или только сетку:
@import "bootstrap-grid";
или только navbar (список со всеми зависимостями):
@import "functions";
@import "variables";
@import "mixins";
@import "nav";
@import "navbar";
Стандартные переменные Bootstrap хранятся в файле node_modules/bootstrap/scss/_variables.scss.
Лучше их редактировать не напрямую, а переопределять в собственном файле.
Создайте файл assets/sass/custom_variables.scss и в него копируйте те стандартные переменные Bootstrap, которые нужно переопределить.
При этом у ваших вариантов переменных удаляйте в конце директиву !default.
Можно для удобства создать символическую ссылку на файл со стандартными переменными:
ln -s $(pwd)/node_modules/bootstrap/scss/_variables.scss assets/sass/_variables.scss
Чтобы переопределение переменных сработало, нужно их подключать после стандартных переменных, но перед остальными компонентами Bootstrap.
Подключайте переопределенные переменные в assets/sass/main.scss примерно так:
// Первые компоненты Bootstrap - должны быть в начале
@import "functions";
@import "variables";
// Переопределенные переменные
@import "custom_variables";
// Остальные компоненты Bootstrap
@import "mixins";
@import "root";
...
// Ваши стили
@import "styles.scss"
Добавим несколько улучшений (подробнее см. Hugo Pipes):
targetPath— изменим имя и путь к результирующему файлу.cssenableSourceMap— добавим Source MapsoutputStyle— минифицируем код CSSminify— дополнительно минифицируем вторым способом (сожмет еще немного)fingerprint— добавим уникальный номер к имени.cssфайла, чтобы он не кешировался браузером при изменениях в стилях
{{ $options := (dict "targetPath" "css/main.css" "enableSourceMap" true "outputStyle" "compressed" "includePaths" (slice "node_modules/bootstrap/scss")) }}
{{ $style := resources.Get "sass/main.scss" | toCSS $options | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}" >
Создайте папку и скопируйте в нее файлы:
mkdir -p assets/js/vendor/ cp node_modules/jquery/dist/jquery.min.js assets/js/vendor/ cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js assets/js/vendor/
Вставьте в конце baseof.html перед </body>:
{{ $jquery := resources.Get "js/vendor/jquery.min.js" }}
{{ $bootstrap := resources.Get "js/vendor/bootstrap.bundle.min.js" }}
{{ $js := slice $jquery $bootstrap | resources.Concat "js/bundle.js" | resources.Minify }}
<script src="{{$js.RelPermalink}}"></script>
- Hugo Minimal Bootstrap Theme — наша сборка простого сайта на Hugo с минимальной темой Bootstrap