JekyllページにCSSスタイルシートを含める

Question

私は数週間Jekyllで遊んでいましたが、私はそれぞれのブログ投稿のデフォルトスタイルを作成しようとしていますが、どこにどのようになっているのかは分かりません行われなければ。私の主な索引ページはスタイリングの点では問題なく機能しますが、私の投稿にはさまざまな方法を試してもCSSが渡されることはありません。

は _layouts/default.htmlまたは _layouts/posts.htmlで書かれることになってブログの投稿のためのCSSです、そして、または

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

Iを書き込むことによって、私は{% include ...%}を使用することによって、YAMLで使用したいスタイルシートを指定する必要がありません明確な解答を与えた情報を見つけることができませんでした。

Answer 1

これを行うにはジキルの方法は、あなたが（たとえば_layouts/posts.html用）の最終ページに使用しようとしている方のレイアウト取ると、そこに（すなわちhtml、head、およびbodyタグ）HTMLドキュメントのスケルトンを作成することです。レイアウトHTMLのheadには、{% include blog-head.html %}と入力します。このblog-head.htmlファイルは、すべてのブログページに必要なCSS、JSなどのすべてを含める場所です。

は、その後、あなたのblog-head.htmlで、あなただけのCSSファイルを書き込むことができますカスタムCSSファイルを含める：

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

この方法で、簡単にあなたのブログの投稿ページのすべてに同じheadセクションを含むことができ、そのheadセクション（CSS/JSの追加、削除、または変更）を簡単に更新でき、自動的にすべてのブログ投稿に適用されます。

私が何かを明確にしたい場合はフォローアップしてください。

Answer 2

custom.css（これは私がお勧めします）とスタイルを作成することができます。

これは正しい方向に開始するのに役立ちます。 http://markdotto.com/2014/02/28/including-css-in-jekyll/

ここではジキルのテーマについてもまともなチュートリアルです。 https://learn.andrewmunsell.com/learn/jekyll-by-example/tutorial

Answer 3

あなたは実際にインクルードで夢中になることができます。そして、コードがうまく分解されてクールに見えることは間違いありません。しかし、生産性が低下する可能性があります。特に最初に、Brackets.ioのような「ライブプレビュー」ツールを使用して作業の大部分を行っている場合があります。早い段階で、あなたの「ジキル・サーブ」のワークフロー・パターンを開始する準備ができていないかもしれません。あなたの問題の一部が 'baseurl'設定パラメータを含んでいないと思われます。

私にとっては、条件付きでヘッダーリンクを含めることができます。

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

これは、ライブプレビュー、jekyllサーバー、および制作のすべてのワークフローを処理します。

jekyllを使用してローカルでテストする場合は、空のbaseurlパラメータを渡すことができます。

jekyll serve --baseurl '' 

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

Answer 4

私はポストにいくつかのCSSを追加するために迅速かつ汚い方法をしたい場合は、私はちょうど私のポストのボディに<style>タグを追加します。

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