Verwenden von Flüssigkeit in CSS versucht, auf Jekyll Hintergrundfarbe von Divs auf einer Seite pro Seite

Ich benutze Jekyll und Liquid für meine website.Verwenden von Flüssigkeit in CSS versucht, auf Jekyll Hintergrundfarbe von Divs auf einer Seite pro Seite

Ich bin vollständig auf die Verwendung von Flüssigkeit in der CSS fest, um korrekt zu kompilieren. Ich versuche, verschiedene Farben für die Ränder jeder Seite zu verwenden, und habe die Standardeinstellung auf Schwarz gesetzt.

Ich schätze jede Einsicht, die Sie haben können.

#splash {width: 100%; height: 10%;} 
 
    #splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}

<div id= "splash"> </div>

Quelle

2017-03-01 Anna Gardner

Meiner Meinung nach gibt es weniger komplizierte Möglichkeiten dafür, setzen Sie diese eine CSS-Zeile in '' von jeder Seite oder verwenden Sie eine' ID' für jede Seite, die Sie zum Stylen verwenden. – ata

Was ist das Problem? Dein angegebener Code kompiliert nicht? –

Sie müssen am Anfang der Datei auf 2 Reihen --- für sie richtig zu kompilieren.

Quelle: https://jekyllrb.com/docs/assets/

Sie müssen auch { um den CSS-Code für die Hintergrund-Farbe hinzufügen.

--- 
--- 

#splash { 
    width: 100%; height: 10%; 
} 

#splash { 
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}; 
}

Alternativ können Sie nur die 2 CSS-Anweisungen fusionieren wie folgt:

--- 
--- 

#splash { 
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}; 
    height: 10%; 
    width: 100%; 
}

Quelle

2017-03-01 10:02:08

Danke, dass du das "{"! Ich erhalte immer noch einen Fehler beim Seitenaufbau, nachdem ich den Code angepasst habe. Ungültiges CSS nach "... f page.accent%": expected "{", war "} {{page.accent ..." –

Außerdem habe ich die CSS-Datei überprüft und doppelt überprüft und tue es nicht scheinen irgendwelche Probleme mit irgendeiner Syntax zu haben, scheint es ein Problem mit dem CSS zu sein, das das flüssige Templating liest. Ich habe gesehen, dass in anderen Posts das Einfügen von YAML am oberen Rand des CSS nützlich war, aber ich kenne mich nicht mit YAML aus, daher waren meine Versuche, das oben auf der Seite zu hacken, nicht erfolgreich. –

@AnnaGardner Damit der Liquid-Compiler Ihre flüssige Syntax im CSS erkennt, müssen Sie die 2 Sätze von 3 hinzufügen - oben in der Datei (wie oben erwähnt). Ich kann auch nicht das page.accent-Objekt irgendwo in der Liquid-Referenz finden, vielleicht ist das das Problem? https://help.shopify.com/themes/liquid/objects/page –

Linked Sheets sind nicht als seitenspezifische gemeint, so ist dies nicht der richtige Weg zu gehen. Ich würde auch nicht seitenspezifische und website-spezifische CSS zusammenführen. Das Hinzufügen einer ID im Stylesheet der Websites für jede Seite, die Sie erstellen (jetzt und in Zukunft), erscheint ebenfalls nicht logisch.

Mein Rat ist, eine Layout-Datei im _layout-Verzeichnis namens page.html zu erstellen. Lassen Sie es so aussehen:

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

Fügen Sie Ihre Website-spezifische/normale CSS zu Ihrem Stylesheet. Das seitenspezifische CSS im Kopf überschreibt dies. Dann erstellen Sie eine index.md-Datei wie folgt:

--- 
accent: red 
layout: page 
--- 
content

Beachten Sie, dass auf jeder Seite nicht das Layout einstellen müssen, wenn Sie Standardeinstellungen finden Sie unter: front matter defaults.

Quelle

2017-03-02 07:57:41 JoostS

Verwenden von Flüssigkeit in CSS versucht, auf Jekyll Hintergrundfarbe von Divs auf einer Seite pro Seite

Antwort

Verwandte Themen