Hugo Minimal Bootstrap Theme

←Hugo

Сборка простого сайта на Hugo с минимальной темой Bootstrap:

• https://gitlab.com/romychvk/hugo-minimal-bootstrap

В теме используется сборка CSS и JS с помощью Hugo Pipes, поэтому нужна Extended версия Hugo.

Главные файлы темы:

1. config.toml — основной конфигурационный файл
2. themes/minimal-bootstrap-zina/layouts/_default/baseof.html — главный шаблон

SASS и Bootstrap

Настроены два варианта подключения JS и CSS — в config.toml в параметрах includeJS и includeCSS:

• cdn — подключение ссылкой на CDN Bootstrap, работает по умолчанию.
• local — подключение сборкой из локальной версии Bootstrap (нужно установить, см. Hugo + Bootstrap).

Редактируются эти подключения в шаблонах:

themes/minimal-bootstrap-zina/layouts/partials/css/head.html
themes/minimal-bootstrap-zina/layouts/partials/js/footer.html

Там же настроено включение Source Maps только при режиме локальной разработки (когда запущен hugo server).

Основной файл стилей — assets/scss/main.scss. При режиме cdn он компилируется в css/main.css и подключается после Bootstrap. При режиме local итоговый css/main.css собирается из assets/scss/main-bootstrap.scss — а уже в нем после Bootstrap инклюдится основной файл assets/scss/main.scss.

Файлы стилей можно держать как в папке темы themes/minimal-bootstrap-zina/assets/scss/, так и в основной папке проекта assets/scss/.

Два режима меню

Включены два варианта формирования основного меню:

• themes/minimal-bootstrap-zina/layouts/partials/menu/section.html — меню на основе секций (разделов, папок) сайта. Порядок определяется весом секций (weight в _index.html каждой папки).
• themes/minimal-bootstrap-zina/layouts/partials/menu/nav.html — меню на основе таксономии [[menu.nav]] в config.toml. Порядок задается тоже в config.toml.

Меню задается в стандартном для Bootstrap шаблоне navbar:

themes/minimal-bootstrap-zina/layouts/partials/navbar.html

Режим отладки

В config.toml в параметре devMode можно включить режим отладки, при котором будут показаны значения основных параметров и переменных.

Если devMode = true, то учитываются еще и значения двух других параметров:

• devVarsShow — показать дополнительные списки переменных
• devVarsList — какие именно списки переменных

Шаблоны devMode со списками переменных лежат здесь:

themes/minimal-bootstrap-zina/layouts/partials/dev