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

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

ここ数週間、Jekyll をいじっていて、ブログ投稿ごとにデフォルトのスタイルを作成しようとしていますが、どこでどのように行うべきかよくわかりません。メインのインデックス ページはスタイル設定の点では問題なく機能していますが、さまざまな方法を試しても、投稿にはまったく CSS が渡されません。

ブログ投稿のCSSは_layouts/default.htmlまたはで記述する必要がありますか?また、 を使用するか、 と記述して_layouts/posts.html、YAMLで使用するスタイルシートを指定する必要がありますか?{% include ...%}

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

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

ベストアンサー1

Jekyll でこれを行うには、最終ページに使用するレイアウト ( など_layouts/posts.html) を取得し、そこに HTML ドキュメントのスケルトンを作成します (つまりhtmlhead、 、bodyタグ)。headレイアウト HTML の に、 を配置します{% 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 ベース レイアウト ファイルのコピー (テーマから) を取得する手順を説明します。

何か明確にして欲しいことがあれば、ぜひフォローアップしてください。

おすすめ記事