Добавление Bootstrap в Jekyll

Я новичок в Jekyll и хотел бы вытащить некоторые функции загрузки Twitter. Кто-нибудь это сделал, и если да, то есть ли у вас какие-либо советы? Я бы пошел с Jekyll-Bootstrap, но для этого больше нет поддержки. Я построил свой сайт Jekyll и надеюсь, что есть способ вытащить Bootstrap.

24
jekyll jekyll-bootstrap twitter-bootstrap

2 ответов

поскольку Jekyll изначально поддерживает sass, вы можете использовать bootstrap-sass.

Я лично устанавливаю его с помощью .

это устанавливает Bootstrap и Jquery в .

конфигурация

в _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 генерируется при каждой сборке.

37

обновление для Bootstrap 4 Beta

как Bootstrap 4 Beta теперь работает на Sass, вы можете использовать" официальный " пакет bower.

вот что я сделал:

1. Установите Bootstrap с помощью Bower

bower install bootstrap#v4.0.0-beta --save для установки Bootstrap и его зависимостей к .

2. Конфигурация

на _config.yml, Я изменил папку Sass и исключить bower_components от обработка:

sass:
   sass_dir: assets/css

# Exclude from processing.
exclude:
  - bower_components

3. Сасс!--21-->

сменил 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) чтобы перезаписать переменные начальной загрузки 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>
1