開発者ドキュメント

Jekyllを使用して条件付きでスクリプトまたはスタイルシートをロードする

ページの重みを最小限に抑えるために、Jekyllの前書きが非常に便利になるいくつかのトリックがあります。

🐊の特定のページのみが特定のスクリプトを要求するか、特定のスタイルを適用する必要があります。 フロントマターではカスタム変数を作成できるため、必要な場合にのみスクリプトやスタイルシートを含めることが非常に簡単になります。

たとえば、ゲスト投稿の前書きで、興味深い部分が強調表示されています。

---
layout: page-fullwidth
title:  "Sass @each Loops"
categories:
    - sass
image:
    thumb: sass/sass-each-loops.png
meta_description: "Loop through maps and lists in Sass. Here's a quick snippet that shows you how."
guest: true
---

そして、これがフッターインクルードファイルに条件付きで含まれる方法です:

_includes / footer_scripts.html

  <link rel="stylesheet" property="stylesheet" href="/assets/css/authors.css">

bodyタグ内にスタイルシートを含めることは、通常、有効なhtmlでは許可されていないことに注意してください。 秘訣は、 type =“ text / css”の代わりにproperty =“ stylesheet” を使用して、バリデーターを満足させることです。

また、これにより新しいhttpリクエストが作成され、代わりに1つの大きなスタイルシートファイルを使用する方がよいと主張する人もいるかもしれません。 CSSを複数のモジュラーファイルに分離することは将来の方法のようですが、それを最適化しましょう!


次に、 Can I Usescriptを呼び出してデータを埋め込むことができる投稿の例を示します。

---
layout: page-fullwidth
title:  "The CSS calc() function"
categories:
    - css
image:
    title:  css/calc-2.svg
meta_description: "A nice little CSS function to let you calculate things."
caniuse: true
---

そして最後に、条件付きでフッターインクルードファイルに含める液体マークアップ:

_includes / footer_scripts.html

  <script async src="//cdn.jsdelivr.net/caniuse-embed/1.0.1/caniuse-embed.min.js"></script>

モバイルバージョンを終了