将Bootstrap添加到Jekyll

nvbavucw  于 12个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(112)

我是Jekyll的新手,想引入一些Twitter Bootstrap功能。有人这样做过吗?如果有,你有什么建议吗?我本来会选择Jekyll-Bootstrap,但现在已经没有人支持它了。我已经建立了我的Jekyll网站,并希望有一种方法来拉在Bootstrap。

e0bqpujr

e0bqpujr1#

由于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文件是在每次构建时生成的。

fnx2tebb

fnx2tebb2#

更新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/

jmp7cifd

jmp7cifd3#

Bootstrap 4 Beta更新

As Bootstrap 4 Beta now runs on Sass,你可以使用“官方”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)**注意,第二个import语句必须相对于_config.yml中指定的Sass目录。因为我选择它作为还包含main.scss的文件夹,所以您最喜欢的IDE中的资源链接(例如:WebStorm)不会崩溃。
**(2)**为了覆盖Bootstrap Sass变量,我创建了assets/css/_variables.scss,它必须在Bootstrap库之前导入。

4. JavaScript

由于我没有找到一种方法来使用bower_components中附带的JS,我选择包含Bootstrap建议的CDN版本:

<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>
djp7away

djp7away4#

一个不同的方法从GorvGoyl的答案,可以安装gems在您的项目文件夹。通过这种方式,依赖关系与项目绑定在一起。

预设

创建新的空白项目:

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

在项目文件夹中移动并初始化Bundler:

foo@bar:~/myproject$ bundle init

在项目子目录中配置Bundler安装路径:

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

现在,与Bundler一起安装的gem将位于vendor/bundler项目子目录下。
将Jekyll添加到Gemfile:

foo@bar:~/myproject$ bundle add jekyll

将Bootstrap添加到项目中

将Bootstrap添加到Gemfile:

foo@bar:~/myproject$ bundle add bootstrap

获取Bootstrap路径:

foo@bar:~/myproject$ bundle info bootstrap

将相对引导路径添加到_config.yml

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

最后一步,在asset/css路径下的主.scss文件中导入Bootstrap:

---
---
@import "bootstrap";

相关问题