twitter bootstrap - Añadiendo Bootstrap a Jekyll

twitter-bootstrap jekyll-bootstrap

Question

Soy nuevo en Jekyll y me gustaría incorporar algunas de las funciones de Twitter Bootstrap. ¿Alguien ha hecho esto y, si es así, tienes algún consejo? Habría ido con Jekyll-Bootstrap, pero ya no hay soporte para eso. He construido mi sitio Jekyll y espero que haya una forma de recuperar Bootstrap.

Answer 1

Actualización para Bootstrap 4 Beta

Como Bootstrap 4 Beta ahora se ejecuta en Sass , puede usar el paquete de bower "oficial".

Esto es lo que hice:

1. Instale Bootstrap utilizando Bower

bower install bootstrap#v4.0.0-beta --save para instalar Bootstrap y sus dependencias en la carpeta bower_components .

2. Configuración

En _config.yml , cambié la carpeta Sass y bower_components a bower_components del procesamiento:

sass:
   sass_dir: assets/css

# Exclude from processing.
exclude:
  - bower_components

3. Sass

Cambié los assets/css/main.scss siguiente manera:

---
# 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) Tenga en cuenta que la segunda declaración de importación debe ser relativa al directorio Sass especificado en _config.yml . Como lo elegí como la carpeta que también contiene main.scss , el enlace de activos en su IDE favorito (por ejemplo, WebStorm) no se romperá.

(2) Para sobrescribir las variables Bootstrap Sass, creé assets/css/_variables.scss que se debe importar antes de la biblioteca Bootstrap.

4. Javascript

Como no encontré una forma de usar el JS enviado a los bower_components , decidí incluir las versiones de CDN según lo propuesto por 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 2

Como Jekyll soporta Sass de forma nativa, puedes usar bootstrap-sass .

Personalmente lo instalo con el comando bower install bootstrap-sass .

Esto instala Bootstrap y Jquery en la carpeta bower_components .

Configuración

En tu _config.yml agrega:

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

Si desea utilizar javascript, en sus _includes / footer.html agregue:

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

Utilizar

En css/main.scss borre el contenido anterior y agregue

---
# 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";

Puede ver todas las variables disponibles en bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

Puedes eliminar tu vieja carpeta _sass.

Ahora su archivo css se genera en cada compilación.