HTML¶

Die HTML-Render-Klasse Alvine\Application\Minerva\Builder\Renderer\Html bindet Inhalte im HTML-Format ein.

Die zu verwendende HTML-Datei wird über die Variable source angegeben.

source: inhalt.html

Die eingebundene HTML-Datei kann, wie das Template, ebenfalls Platzhalter und Kontrollstrukturen verwenden.

Über das Schlüsselwort wrap lässt sich der Inhalt in eine andere Struktur einschlissen.

Anpassen der HTML-Struktur¶

Die HTML-Struktur kann über Tuner-Klassen angepasst werden. Dazu muss im Element das Data-Attribute data-tuner-class angegeben werden. Das Element wird an die entsprechende Klasse übergeben.

Bilder¶

Eingebettete Bilder¶

Die Klasse \Alvine\Application\Minerva\Builder\Renderer\Html\Tuner\EmbedImage ermöglicht es Bilder automatisch in den HTML-Code einzubinden.

<img data-tuner-class="\Alvine\Application\Minerva\Builder\Renderer\Html\Tuner\EmbedImage"
     src="image/my-image.jpg">

Das src-Attribute im Image wird dann durch die Bilddaten im Base64-Format ersetzt. <img src="data: image/jpeg;base64, xyz .... Dies kann, bei kleinen Bildern die Performace steigern.

SVG-Bilder können entweder über den Standard-Image-Tag img oder über einen SVG-Tag svg eingebunden werden.

<img data-tuner-class="\Alvine\Application\Minerva\Builder\Renderer\Html\Tuner\EmbedImage"
     data-tuner-svg src="image/my-image.jpg">

Um ein Bild als SVG einzubinden, muss das Attribute data-tuner-images-assvg gesetzt sein.

Über das Attribute data-tuner-images-maxbytes kann man die maximale Größe von eingebetteten Bildern definieren. Bilder die größer als MaxBytes sind, werden nicht eingebunden. Der Standardwert ist 4096.

Responsive Bilder¶

Die Klasse \Alvine\Application\Minerva\Builder\Renderer\Html\Tuner\ResponsiveImage ermöglicht es Bilder automatisch in mehreren Versionen - über das srcset-Attribute bereitzustellen.

<img data-tuner-class="\Alvine\Application\Minerva\Builder\Renderer\Html\Tuner\ResponsiveImage"
     data-tuner-images-sizes="320,480,640,768,1024,1440"
     src="image/my-image.jpg">

Dies führt in der fertigen Webseite zu folgendem Code:

<img src="/image/my-image1440w.jpeg" 
     srcset="/image/warum-telearbeit-fuer-uns-wichtig-ist/my-image1440w.jpeg 1440w, 
             /image/warum-telearbeit-fuer-uns-wichtig-ist/my-image1024w.jpeg 1024w, 
             /image/warum-telearbeit-fuer-uns-wichtig-ist/my-image768w.jpeg 768w, 
             /image/warum-telearbeit-fuer-uns-wichtig-ist/my-image640w.jpeg 640w, 
             /image/warum-telearbeit-fuer-uns-wichtig-ist/my-image480w.jpeg 480w, 
             /image/warum-telearbeit-fuer-uns-wichtig-ist/my-image320w.jpeg 320w" 
     alt="arbeiten-im-homeoffice.jpg">

Sitemap¶

Der HTML-Builder besitzt auch die Funktion eine XML-Sitemap sitemap.xml zu erstellen. Dazu werden alle Seiten die indiziert werden sollen und eine gültige URL besitzen aufgenommen.

Seiten die in den Metatags die Werte noindex oder none enthalten, werden nicht in die Seitemap aufgenommen. Ausgewertet wird das Feld meta > robots in der Seitendefinition.

Eine Seite mit folgendem Wert wird nicht in die Sitemap aufgenommen:

meta:
   robots: noindex, noarchive

Gültige Werte für meta > robots:

all (keine Einschränkungen)
noindex (Diese Seite nicht in den Suchergebnissen anzeigen.)
nofollow (Den Links auf dieser Seite nicht folgen)
none (Entspricht noindex, nofollow)
noarchive (Keinen Cache anzeigen)
nosnippet (Kein Text-Snippet und keine Videovorschau in den Suchergebnissen)
max-snippet:[number] (Höchstens [number] Zeichen als Textauszug für dieses Suchergebnis verwenden.)
max-image-preview:[setting] (Legt die maximale Größe einer Bildvorschau in den Suchergebnissen für diese Seite fest.)
max-video-preview:[number] (Zeit für Preview von Videos.)
notranslate (Keine Übersetzung dieser Seite in Suchergebnissen anbieten)
noimageindex (Bilder auf dieser Seite nicht indexieren)
unavailable_after: [date/time] (Diese Seite nach dem angegebenen Datum bzw. der angegebenen Uhrzeit nicht mehr in den Suchergebnissen anzeigen.)

Quelle: developers.google.com/search/reference/robots_meta_tag