Добавление Bootstrap в Jekyll
Я новичок в Jekyll и хотел бы задействовать некоторые функции Twitter Bootstrap. Кто-нибудь это сделал, и если да, есть ли у вас какие-либо советы? Я бы пошел с Jekyll-Bootstrap, но больше нет поддержки. Я построил сайт Jekyll, и я надеюсь, что вы сможете найти Bootstrap.
Ответы
Ответ 1
Поскольку Jekyll поддерживает sass, вы можете использовать bootstrap-sass.
Я лично устанавливаю его с помощью команды bower install bootstrap-sass
.
Это устанавливает Bootstrap и JQuery в папку bower_components
.
Конфигурация
В вашем _config.yml добавьте:
sass:
# loading path from site root
# default to _sass
sass_dir: bower_components/bootstrap-sass/assets/stylesheets
# style : nested (default), compact, compressed, expanded
# :nested, :compact, :compressed, :expanded also works
# see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
# on a typical twitter bootstrap stats are :
# nested 138,7kB, compact 129,1kB, expanded 135,9 kB, compressed 122,4 kB
style: compressed
Javascript
Если вы хотите использовать javascript, в вашем _includes/footer.html добавьте:
<script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
Использование
В css/main.scss
удалить предыдущий контент и добавить
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
/* path to glyphicons */
$icon-font-path: "/bower_components/bootstrap-sass/assets/fonts/bootstrap/";
/* custom variable */
$body-bg: red;
/* any style customization must be before the bootstrap import */
@import "bootstrap";
Вы можете видеть все переменные, доступные в bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
Вы можете удалить старую папку _sass.
Теперь ваш файл css создается в каждой сборке.
Ответ 2
Обновление для бета-версии Bootstrap 4
Поскольку Bootstrap 4 Beta теперь работает на Sass, вы можете использовать "официальный" пакет bower.
Вот что я сделал:
1. Установите Bootstrap с помощью Bower
bower install bootstrap#v4.0.0-beta --save
, чтобы установить Bootstrap и его зависимости в папку bower_components
.
2. Конфигурация
В _config.yml
я изменил папку Sass и исключил bower_components
из обработки:
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
Я изменил assets/css/main.scss
следующим образом:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import "variables"; // (2)
@import "../../bower_components/bootstrap/scss/bootstrap"; // (1)
// Import other styling below
// ...
(1) Обратите внимание, что второй оператор импорта должен относиться к каталогу Sass, указанному в _config.yml
. Поскольку я выбираю его как папку, которая также содержит main.scss
, ссылка на ресурс в вашей любимой среде IDE (например, WebStorm) не будет прерываться.
(2) Чтобы перезаписать переменные Bootstrap Sass, я создал assets/css/_variables.scss
, который нужно импортировать перед библиотекой Bootstrap.
4. Javascript
Поскольку я не нашел способ использовать JS, отправленный в bower_components
, я решил включить версии CDN как было предложено Bootstrap:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>