Hugo + Bootstrap

←Hugo

Есть несколько вариантов подключения Bootstrap в Hugo:

1. Самый простой способ — подключить Bootstrap через CDN
2. Установить Bootstrap с помощью NPM и компилировать из SASS в CSS с помощью Gulp, Grunt, Webpack и.п.
3. Установить Bootstrap с помощью NPM и компилировать из SASS в CSS с помощью Hugo Pipes.
4. Монтировать Bootstrap с помощью модулей Go и компилировать из SASS в CSS с помощью Hugo Pipes.

Варианты с Hugo Pipes хороши тем, что они работают на встроенном в Hugo сервере. Это решение «из коробки» и с максимальным быстродействием.

Поэтьому рассмотрим третий вариант — сборку Bootstrap с помощью Hugo Pipes.

Компиляция SASS/SCSS с помощью 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 в проекте и настроим его компиляцию вместе с вашими стилями.

Установка Bootstrap через NPM

Установите NPM:

sudo apt install npm

Перейдите в корень проекта и инициализируйте приложение:

npm init .

Будут заданы вопросы (можно на все отвечать Enter) и создан конфиг package.json.

Установите в проекте Bootstrap:

npm install bootstrap jquery popper.js postcss-cli autoprefixer --save

Импорт стилей Bootstrap

Самый простой способ — добавить в начало файла 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

Стандартные переменные 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"

Дополнительные параметры компиляции SASS

Добавим несколько улучшений (подробнее см. Hugo Pipes):

• targetPath — изменим имя и путь к результирующему файлу .css
• enableSourceMap — добавим Source Maps
• outputStyle — минифицируем код CSS
• minify — дополнительно минифицируем вторым способом (сожмет еще немного)
• 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 }}" >

Подключение JavaScript

Создайте папку и скопируйте в нее файлы:

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 Pipes
• Сниппеты Bootstrap

Hugo Bootstrap Themes

• Hugo Minimal Bootstrap Theme — наша сборка простого сайта на Hugo с минимальной темой Bootstrap

• Minimal Bootstrap Hugo Theme
• Vanilla Bootstrap Hugo Theme
• Bootstrap Bp Hugo Theme
• Hugo Theme Bootstrap4 Blog
• Hugo appernetic bootstrap premium theme
• GitHub - UtkarshVerma/startbootstrap-clean-blog: Hugo theme based on Start Bootstrap Clean blog