web-dev-qa-db-ja.com

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

私は2週間ほどの間Jekyllで遊んでいて、各ブログ投稿のデフォルトスタイルを作成しようとしていますが、それがどこでどのように行われるべきか正確にはわかりません。メインのインデックスページはスタイリングの点では問題なく機能しますが、さまざまな方法を試しても、投稿にCSSが渡されません。

ブログ投稿のCSSは_layouts/default.htmlまたは_layouts/posts.htmlで記述されることになっていますか。また、{% include ...%}を使用するか、または

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

明確な答えを与える情報を見つけることができませんでした。

htmlcssjekyll
23
gabed123

これを行うジキルの方法は、最終ページに使用するレイアウト（たとえば、_layouts/posts.html）、HTMLドキュメントのスケルトンを作成します（つまり、html、head、およびbodyタグ）。レイアウト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の追加、削除、または変更）とそのセクションを簡単に更新できますすべてのブログ投稿に自動的に反映されます。

次のリンクは、テーマのデフォルトを上書きする一般的な手順を示しています： Jekyll：テーマのデフォルトの上書き 。このページには、新しいCSSリンクで変更する必要があるhtmlベースレイアウトファイルのコピーを（テーマから）取得するための手順が記載されています。

ご不明な点がございましたら、ご連絡ください。

13
Maximillian Laumeister

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
14
Kayce Basques

Custom.css（私がお勧めします）とスタイルを作成できます。

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

Jekyllのテーマに関しても、きちんとしたチュートリアルがあります。 https://learn.andrewmunsell.com/learn/jekyll-by-example/tutorial

0
nykc

あなたはインクルードで本当に夢中になることができます、そして間違いなくコードはうまく分解されてクールに見えることになります。ただし、生産性は打撃を受ける可能性があります。特に最初は、 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

0
Christopher Markus