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

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

Источник

4 ответа

Решение

Поскольку 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, в свой _include /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 создается при каждой сборке.

Источник

Обновление для Bootstrap 4.3.1 и Jekyll 4.0

вы можете использовать bunder для установки BS на свой сайт

bundle install bootstrap

добавьте его в файл драгоценного камня:

gem 'bootstrap', '~> 4.3.1'

получить путь BS

bundle info bootstrap

Добавьте этот путь в _config.yml

sass:
    load_paths:
        - _sass
        -  C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/bootstrap-4.3.1/assets/stylesheets

вместо этого можно добавить относительный путь.

Наконец, добавьте бутстрап в style.scss

 @import "bootstrap";

https://getbootstrap.com/docs/4.3/getting-started/download/

Источник

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

Поскольку 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>
Источник

Другой подход, отличный от ответа GorvGoyl, - это установка драгоценных камней в папку вашего проекта. Таким образом зависимости связаны с проектом.

Предварительные условия

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

      foo@bar:~$ jekyll new myproject --blank

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

      foo@bar:~/myproject$ bundle init

Настройте путь установки Bundler внутри подкаталога проекта:

      foo@bar:~/myproject$ bundle config set --local path 'vendor/bundle'

Теперь драгоценные камни, установленные с помощью Bundler, будут находиться подvendor/bundlerподкаталог проекта.

Добавьте Jekyll в Gemfile:

      foo@bar:~/myproject$ bundle add jekyll

Добавьте Bootstrap в проект

Добавьте Bootstrap в Gemfile:

      foo@bar:~/myproject$ bundle add bootstrap

Получить путь начальной загрузки:

      foo@bar:~/myproject$ bundle info bootstrap

Добавьте относительный путь Bootstrap в_config.yml:

      sass:
  load_paths:
      - ./vendor/bundle/ruby/3.1.0/gems/bootstrap-5.3.1/assets/stylesheets

Последний шаг: импортируйте Bootstrap в ваш основной.scssфайл подasset/cssпуть:

      ---
---
@import "bootstrap";
Источник
Другие вопросы по тегам