web-dev-qa-db-fra.com

Inclusion de feuilles de style CSS dans les pages Jekyll

Je joue avec Jekyll depuis quelques semaines maintenant et j'essaie de créer un style par défaut pour chacun de mes articles de blog, mais je ne sais pas exactement où et comment c'est censé être fait. Ma page d'index principale fonctionne bien en termes de style, mais mes publications n'ont aucun CSS qui leur soit transmis, malgré les différentes méthodes.

Le CSS des articles de blog est-il censé être écrit en _layouts/default.html ou _layouts/posts.html, et dois-je spécifier les feuilles de style que je veux utiliser dans le YAML, en utilisant {% include ...%}, ou en écrivant

{% if page.style %}
    <link rel="stylesheet" href="{{ page.style }}">
{% endif %}

Je n'ai pas pu trouver d'informations qui donnaient une réponse claire.

htmlcssjekyll
23
gabed123

Pour ce faire, Jekyll prend la disposition que vous allez utiliser pour la page finale (par exemple _layouts/posts.html) et créez votre squelette de document HTML (c'est-à-dire les balises html, head et body). Dans le head du HTML de mise en page, mettez {% include blog-head.html %}. Ce blog-head.html le fichier est l'endroit où nous allons inclure tous les CSS, JS, etc. qui sont nécessaires pour chaque page de blog.

Puis dans votre blog-head.html, vous pouvez simplement écrire le fichier CSS inclus pour un fichier CSS personnalisé:

<link rel="stylesheet" href="blogposts.css">

De cette façon, vous pouvez facilement inclure la même section head dans toutes les pages de vos articles de blog, et vous pouvez facilement mettre à jour cette section head (ajouter, supprimer ou modifier CSS/JS) et prendra automatiquement effet sur tous vos articles de blog.

Le lien suivant fournit des étapes générales sur la substitution des valeurs par défaut du thème: Jekyll: remplacement des valeurs par défaut du thème . La page fournit des instructions pour obtenir une copie du fichier de mise en page de base html (à partir de votre thème) que vous devrez modifier avec le nouveau lien CSS.

Veuillez poursuivre si vous souhaitez que je clarifie quoi que ce soit!

13
Maximillian Laumeister

Quand je veux un moyen rapide et sale d'ajouter du CSS dans un article, je vais simplement ajouter un <style> tag dans le corps de mon message.

---
layout: post
title: "quick and dirty CSS in jekyll posts"
date: 2016-04-08 13:04:00
---

<style type="text/css">
  p {
    border: 1px solid black;
  }
</style>

whoa this paragraph has a border around it, such magic
14
Kayce Basques

Vous pouvez créer un custom.css (que je recommanderais) et un style à partir de cela.

Cela devrait vous aider à démarrer dans la bonne direction. http://markdotto.com/2014/02/28/including-css-in-jekyll/

Voici également un tutoriel décent en ce qui concerne le thème Jekyll. https://learn.andrewmunsell.com/learn/jekyll-by-example/tutorial

0
nykc

Vous pouvez devenir vraiment fou avec les inclusions et sans aucun doute le code semble bien factorisé et cool. Cependant, la productivité peut en pâtir. Surtout au début, lorsque vous effectuez la majeure partie de votre travail avec un outil de prévisualisation en direct comme Brackets.io . Au début, vous n'êtes peut-être pas prêt à démarrer votre modèle de flux de travail "jekyll serve". Je soupçonne qu'une partie de votre problème n'inclut pas le paramètre de configuration "baseurl".

Une solution de juste milieu qui fonctionne pour moi consiste à inclure conditionnellement des liens d'en-tête.

{% if site.baseurl %}
  {% include links.html %}
{% else %}
  <link rel="stylesheet" href="/solarized-dark.css">
  <link rel="stylesheet" href="/site.css">
{% endif %}

Cela gère tous les workflows: prévisualisation en direct, serveur jekyll et production.

Si vous testez localement avec jekyll, vous pouvez passer un paramètre baseurl vide.

jekyll serve --baseurl ''

http://jekyllrb.com/docs/github-pages/#project-page-url-structure

0
Christopher Markus