Romych: /* См. также */

2020-04-10T06:46:05Z

См. также

Нова сторінка

←[[Hugo]]

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

# Самый простой способ — подключить Bootstrap через [https://getbootstrap.com/ 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/SCSS с помощью Hugo Pipes ==

Файлы ваших стилей SASS, которые будут компилироваться в CSS с помощью Hugo Pipes, должны размещаться в папке <code>/assets</code>.

Создайте основной файл <code>assets/sass/main.scss</code> и добавьте в него строки:

<source lang="sass">
$not-so-white: FloralWhite;
body {
background-color: $not-so-white;
}
</source>

Вставьте в основной шаблон <code>layouts/_default/baseof.html</code>:

<source lang="html">
{{ $style := resources.Get "sass/main.scss" | toCSS }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
</source>

Теперь можно запустить Hugo и проверить — будет создан файл <code>/sass/main.css</code> и цвет фона станет [https://www.materialui.co/htmlcolors/floralwhite FloralWhite].

В принципе, на этом этапе можно применить первый способ подключения Bootstrap — добавить перед строкой <code><link rel="stylesheet"...</code> строку со ссылкой на [https://www.bootstrapcdn.com/ CDN Bootstrap] типа: <code><link rel="stylesheet" href="<nowiki>https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css</nowiki>"...</code> — и этого будет достаточно.

Чтобы использовать Bootstrap более тонко — например, включать только определенные части стилей, чтобы результирующий файл был минимального размера — установим Bootstrap в проекте и настроим его компиляцию вместе с вашими стилями.

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

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

sudo apt install npm

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

npm init .

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

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

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

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

Самый простой способ — добавить в начало файла <code>assets/sass/main.scss</code> строку:

<source lang="sass">
@import "../../node_modules/bootstrap/scss/bootstrap";
</source>

После компиляции в итоговом <code>.css</code> файле уже будут все стили Bootstrap.

=== Выборочный импорт стилей ===

Добавим параметр <code>includePaths</code>, в котором укажем, где искать стили Bootstrap:

<source lang="html">
{{ $options := (dict "includePaths" (slice "node_modules/bootstrap/scss")) }}
{{ $style := resources.Get "sass/main.scss" | toCSS $options }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
</source>

А в <code>assets/sass/main.scss</code> строку с путем к Bootstrap напишем просто:

<source lang="sass">
@import "bootstrap";
</source>

Теперь можно импортировать только часть стилей — например, только бутстраповский сброс стилей:

<source lang="sass">
@import "bootstrap-reboot";
</source>

или только сетку:

<source lang="sass">
@import "bootstrap-grid";
</source>

или только navbar (список со всеми зависимостями):

<source lang="sass">
@import "functions";
@import "variables";
@import "mixins";
@import "nav";
@import "navbar";
</source>

=== Переопределение переменных Bootstrap ===

Стандартные переменные Bootstrap хранятся в файле <code>node_modules/bootstrap/scss/_variables.scss</code>.

Лучше их редактировать не напрямую, а переопределять в собственном файле.

Создайте файл <code>assets/sass/custom_variables.scss</code> и в него копируйте те стандартные переменные Bootstrap, которые нужно переопределить.

При этом у ваших вариантов переменных удаляйте в конце директиву <code>!default</code>.

<div class="note">
Можно для удобства создать символическую ссылку на файл со стандартными переменными:

<source lang="bash">
ln -s $(pwd)/node_modules/bootstrap/scss/_variables.scss assets/sass/_variables.scss
</source>
</div>

Чтобы переопределение переменных сработало, нужно их подключать после стандартных переменных, но перед остальными компонентами Bootstrap.

Подключайте переопределенные переменные в <code>assets/sass/main.scss</code> примерно так:

<source lang="sass">
// Первые компоненты Bootstrap - должны быть в начале
@import "functions";
@import "variables";

// Переопределенные переменные
@import "custom_variables";

// Остальные компоненты Bootstrap
@import "mixins";
@import "root";
...

// Ваши стили
@import "styles.scss"
</source>

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

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

* <code>targetPath</code> — изменим имя и путь к результирующему файлу <code>.css</code>
* <code>enableSourceMap</code> — добавим Source Maps
* <code>outputStyle</code> — минифицируем код CSS
* <code>minify</code> — дополнительно минифицируем вторым способом (сожмет еще немного)
* <code>fingerprint</code> — добавим уникальный номер к имени <code>.css</code> файла, чтобы он не кешировался браузером при изменениях в стилях

<source lang="html">
{{ $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 }}" >
</source>

== Подключение 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/

Вставьте в конце <code>baseof.html</code> перед <code></body></code>:

<source lang="html">
{{ $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>
</source>

== См. также ==

* [[Hugo Pipes]]
* [[Сниппеты Bootstrap]]

=== Hugo Bootstrap Themes ===

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

* [https://themes.gohugo.io/minimal-bootstrap-hugo-theme/ Minimal Bootstrap Hugo Theme]
* [https://themes.gohugo.io/vanilla-bootstrap-hugo-theme/ Vanilla Bootstrap Hugo Theme]
* [https://themes.gohugo.io/bootstrap-bp-hugo-theme/ Bootstrap Bp Hugo Theme]
* [https://themes.gohugo.io/hugo-theme-bootstrap4-blog/ Hugo Theme Bootstrap4 Blog]
* [https://github.com/appernetic/hugo-bootstrap-premium Hugo appernetic bootstrap premium theme]
* [https://github.com/UtkarshVerma/startbootstrap-clean-blog GitHub - UtkarshVerma/startbootstrap-clean-blog: Hugo theme based on Start Bootstrap Clean blog]

[[Категория:Hugo]]
[[Категория:Bootstrap]]
[[Категория:Sass]]

Hugo + Bootstrap - Історія редагувань

Romych: /* См. также */