将 Bootstrap 添加到 Jekyll

Question

我是 Jekyll 的新手，想引入一些 Twitter Bootstrap 功能。有没有人这样做过，如果这样做，您有什么建议吗？我会选择 Jekyll-Bootstrap，但不再支持它。我已经建立了我的 Jekyll 站点，我希望有一种方法可以引入 Bootstrap.

Answer 1

由于 Jekyll 原生支持 sass，您可以使用 bootstrap-sass.

我个人是用bower install bootstrap-sass命令安装的

这会在 bower_components 文件夹中安装 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 文件会在每次构建时生成。

Answer 2

Bootstrap 4 Beta

更新

As Bootstrap 4 Beta now runs on Sass，你可以使用 "official" bower 包。

这是我所做的：

1。使用 Bower

安装 Bootstrap

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) 请注意，第二个导入语句必须相对于 _config.yml 中指定的 Sass 目录。因为我选择它作为也包含 main.scss 的文件夹，所以您最喜欢的 IDE（例如 WebStorm）中的资产链接不会中断。

(2) 为了覆盖 Bootstrap Sass 变量，我创建了 assets/css/_variables.scss 必须在 [=55= 之前导入]图书馆。

4。 Javascript

因为我没有找到使用 bower_components 中的 JS 的方法，所以我选择包含 CDN 版本 as proposed by 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>

Answer 3

Update for Bootstrap 4.3.1 & Jekyll 4.0

您可以使用 bunder 将 BS 安装到您的站点中

bundle install bootstrap

将其添加到 gem 文件：

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

也可以添加相对路径。

最后，将bootstrap添加到style.scss

 @import "bootstrap";

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

将 Bootstrap 添加到 Jekyll

Adding Bootstrap to Jekyll

twitter-bootstrap

jekyll

jekyll-bootstrap

配置