xm

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

This ist ein netter kleiner HTML-Präprozessor von Giuseppe Gurgone. Es hat sehr wenige Funktionen, aber eine davon sind HTML-Includes, was etwas ist, das mich weiterhin verwirrt, dass HTML nicht nativ unterstützt. Es gibt unzählige Möglichkeiten, damit umzugehen. Ich finde es albern, dass es seit *Jahrzehnten* durchgängig benötigt wird und HTML sich weiterentwickeln könnte, um es zu unterstützen, aber das nicht getan hat. Also, hier ist eine weitere Option, um damit umzugehen.

https://twitter.com/giuseppegurgone/status/1305851405660549122

Was extra nett ist, ist, dass es nicht nur Includes sind, sondern Templating mit Includes auf wirklich saubere Weise. Wenn dies Nunjucks wäre, lösen sie das, indem sie eine Datei wie template.njk erstellen...

{% block header %}
  This is the default (overridable) header.
{% endblock %}
<footer>
  {% block footer %}
    This is the default (overridable) footer.
  {% endblock %}
</footer>

Und dann verwenden Ihre tatsächlichen Seiten diese Vorlage wie...

{% extends "parent.html" %}
{% block footer %}
  Special footer for this page.
{% endblock %}

In xm bleibt die Syntax HTML-ähnlich, was nett ist. Also diese template.html...

<slot name="header"></slot>
<footer>
  <slot name="footer"></slot>
</footer>

...wird auf einer Seite wie dieser verwendet

<import src="template.html">
  <fill name="header">Custom Header</fill>
  <fill name="footer">
    <p>Custom footer</p>
  </fill>
</import>

Sehr sauber. Die zusätzliche Tatsache, dass Sie beliebig einen <markdown>-Tag überall einfügen und Markdown darin verwenden können, ist besonders praktisch.