☰

JekyllにBootstrapを追加する質問する

tag-icon • tag-icon twitter-bootstrap jekyll jekyll-bootstrap
JekyllにBootstrapを追加する質問する

私は Jekyll を初めて使用しており、Twitter Bootstrap の機能をいくつか取り入れたいと思っています。これを実行した人はいますか? もし実行したなら、何かアドバイスはありますか? Jekyll-Bootstrap を使用するつもりでしたが、サポートされなくなりました。私は Jekyll サイトを構築しましたが、Bootstrap を取り入れる方法があることを願っています。

ベストアンサー1

Jekyllはネイティブで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 を使用する場合は、_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 ファイルが生成されます。

おすすめ記事