私はwebsiteのためにJekyllとLiquidを使用しています。JekyllのCSSで液体の誘惑を利用してページ単位でdivの背景色を調整する
私はCSSで液体を使って正しくコンパイルすることに完全に固執しています。私は、各ページの境界線に異なる色を使い、デフォルトを黒に設定しようとしています。
ご存知の方々に感謝します。
#splash {width: 100%; height: 10%;}
#splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}<div id= "splash"> </div>それは正しくコンパイルするためにあなたは、あなたのファイルの先頭に---の2行にする必要があります。
出典：https://jekyllrb.com/docs/assets/
また、背景色のためのあなたのCSSコードの周り{を追加する必要があります。
---
---
#splash {
width: 100%; height: 10%;
}
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}
別の方法としては、ちょうどそうのような2 CSS文をマージすることができます
---
---
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
height: 10%;
width: 100%;
}
ありがとうございます "{"！私はまだコードを調整した後にページビルドの失敗を得ています。 "... f page.accent％"の後に無効なCSSがあります： "{"、 "} {{page.accent ..." –
}また、私はCSSファイルを見て、ダブルチェックしました。どのような構文でも問題があるようですが、液体テンプレートを読むCSSには問題があるようです。他の投稿では、CSSの上部にYAMLを挿入するのは便利でしたが、私はYAMLに慣れていないので、一般的にページ上部にハックする試みは成功しませんでした。 –
@AnnaGardner Liquidコンパイラが液体の構文をCSSで認識できるようにするには、ファイルの先頭に3つの2つのセットを追加する必要があります（前述）。私はまた、Liquid参照のどこにでもpage.accentオブジェクトを見つけることができないようですが、それはおそらく問題でしょうか？ https://help.shopify.com/themes/liquid/objects/page –
リンクされたスタイルシートは、ページ固有であることを意味していないので、これは行くための正しい方法ではありませんされています。私はまた、ページ固有とウェブサイト固有のCSSをマージしません。作成するすべてのページ（現在および将来）のIDをウェブサイトスタイルシートに追加することは、論理的ではないようです。
私の助言は、_layoutディレクトリにpage.htmlという名前のレイアウトファイルを作成することです。
<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
/* page-specific CSS goes here */
#splash {
background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
}
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>
あなたのスタイルシートにあなたのウェブサイト特有の/普通のCSSを追加してください。ヘッドのページ固有のCSSがこれを上書きします。あなたはデフォルト値を設定したときに表示される、すべてのページにレイアウトを設定する必要はありません
---
accent: red
layout: page
---
content
注：front matter defaults次に、このようなindex.mdファイルを作成します。
私の意見では、この1行のCSSを各ページの '
'に入れたり、各ページに 'id'を使用していつものようにスタイリングするのに使う複雑な方法はありません。 – ata問題は何ですか？あなたの与えられたコードはコンパイルされませんか？ –