Ich ertappe mich oft dabei, dieselben Code-Schnipsel immer wieder zu erstellen oder zu wiederholen. Heutzutage suche ich nach Möglichkeiten, die Dinge einfach und modular zu halten, sodass ich sie schnell abrufen und in jedem Projekt wiederverwenden kann.
Dieser „Standardabschnitt und -block“-Ausschnitt ist die Grundlage für die meisten Elemente, die ich erstelle.
Ich habe festgestellt, dass nicht alle Abschnitte einer Site die gleiche Auffüllung für Desktop und Mobilgeräte benötigen. Anstatt dies also in Stile „fest zu codieren“, wozu mindestens CSS-Kenntnisse erforderlich wären, habe ich mir überlegt, die Option für Mobilgeräte und Desktops gleich von Anfang an anzubieten!
Dieser kleine Codeausschnitt funktioniert bisher gut mit dem Dawn-Theme bis Version 14. Ich dachte, ich würde einfach teilen, was meiner Meinung nach ein kleiner „Zeitsparer“ ist.
{% comment %}
Default settings for a section with blocks
{% endcomment %}
{% comment %}
Styles to be applied from section and block settings - this can also be done via passing the --var into a style sheet. I do the essential parts here due to page loading and content shift avoidance.
{% endcomment %}
{%- style -%}
.Abschnitt- {{ section.id }} -Padding {
Polsterung oben: {{ section.settings.padding_top | times: 0.75 | round: 0 }} px;
Polsterung unten: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }} px;
}
{% if section.settings.full-width == false %}
.Abschnitt- {{ section.id }} -Padding {
maximale Breite: 1320px;
Rand: 0 automatisch;
}
{% endif %}
@media screen und (max-width: 750px) {
.Abschnitt- {{ section.id }} -Padding {
Polsterung oben: {{ section.settings.padding_top_mobile | times: 0.75 | round: 0 }} px;
Polsterung unten: {{ section.settings.padding_bottom_mobile | times: 0.75 | round: 0 }} px;
}
}
{%- endstyle -%}
{% comment %}
Dies wird der Link zu Ihrem Stylesheet für den Abschnitt und den Block sein. Ich habe die Klasse der obersten Ebene mit dem gleichen Namen wie die Datei benannt, damit Sie die Datei vom Frontend der Site aus schnell finden können.
{% endcomment %}
{% comment %}
{{ 'jsm-default.css' | asset_url | stylesheet_tag }}
{% endcomment %}
{% comment %}
Der Inhalt für Ihren Abschnitt und Block :)
{% endcomment %}
{% comment %}
Der Inhalt für Ihren Abschnitt und Block :)
{% endcomment %}
{% comment %}
Ihr Skript oder Skriptaufrufe, nachdem der Inhalt geladen wurde
{% endcomment %}
{% schema %}
{
"Name": "jsm-Standards",
"Klasse": "jsm-Standard",
"tag": "Abschnitt",
"Einstellungen": [
{
"Typ": "Header",
"content": "Desktop-Einstellungen"
},
{
"Typ": "Bereich",
"id": "padding_top",
"min": 0,
"max": 100,
"Schritt": 1,
"Einheit": "px",
"Beschriftung": "t:Abschnitte.alle.padding.padding_top",
"Standard": 0
},
{
"Typ": "Bereich",
"id": "padding_bottom",
"min": 0,
"max": 100,
"Schritt": 1,
"Einheit": "px",
"Beschriftung": "t:Abschnitte.alle.padding.padding_bottom",
"Standard": 0
},
{
"Typ": "Header",
"content": "Mobile Einstellungen"
},
{
"Typ": "Bereich",
"id": "padding_top_mobile",
"min": 0,
"max": 100,
"Schritt": 1,
"Einheit": "px",
"Beschriftung": "t:Abschnitte.alle.padding.padding_top",
"Standard": 0
},
{
"Typ": "Bereich",
"id": "padding_bottom_mobile",
"min": 0,
"max": 100,
"Schritt": 1,
"Einheit": "px",
"Beschriftung": "t:Abschnitte.alle.padding.padding_bottom",
"Standard": 0
},
{
"Typ": "Header",
"content": "Allgemeine Einstellungen"
},
{
"Typ": "Kontrollkästchen",
"id": "volle Breite",
"Standard": falsch,
"label": "Volle Breite"
}
],
"Blöcke": [
],
"Voreinstellungen": [
{
"Name": "JSM-Standards"
}
]
}
{% endschema %}