web-dev-qa-db-ja.com

Bootstrap=をJekyllに追加する

私はJekyllを使い始めたばかりで、Twitter Bootstrapの機能のいくつかを取り入れたいと思っています。誰かがこれを行ったことがありますか。 Bootstrapはサポートされていませんが、Jekyllサイトを構築し、Bootstrapを取り込む方法があることを期待しています。

twitter-bootstrapjekylljekyll-bootstrap
27
maximos

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

39
David Jacquel

Bootstrap 4 Betaの更新

Bootstrap 4 BetaがSassで実行されるようになりました のように、「公式」バウアーパッケージを使用できます。

これが私がしたことです：

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.サス

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）2番目のインポート文は、_config.ymlで指定されたSassディレクトリを基準にする必要があることに注意してください。 main.scssも含むフォルダーを選択したので、お気に入りのIDE（例：WebStorm））でリンクしているアセットは壊れません。

（2）Bootstrap Sass変数を上書きするため、assets/css/_variables.scssを作成しました。これは、 Bootstrapライブラリ。

4. JavaScript

bower_componentsに付属するJSを使用する方法が見つからなかったため、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
Jonas Vogel