Skip to content

Doku Entwickler Tags

Jump to bottom
blackcoder87 edited this page Jun 7, 2023 · 9 revisions

Link-, Meta- und Script-Tags dynamisch einfügen

Inhaltsverzeichnis
https://github.com/IlchCMS/Ilch-2.0/wiki/Doku-Entwickler-Tags#eigenschaften-des-models Als das Open Graph Protokoll in das Artikel-Modul eingebunden wurde, wurde gleichzeitig eine Möglichkeit geschaffen dynamisch Meta-Tags in den Header einzubinden. Auch für Link- und Script-Tags ist es wünschenswert, dass diese dynamisch eingebunden werden können. Das dynamische Einfügen von Link-, Meta- und Script-Tags ist aktuell nur im Frontend möglich.

Link-Tags (seit 2.1.22, erweitert mit 2.1.50)

Die Definition von 'link' in der HTML5 Spezifikation:
https://www.w3.org/TR/html50/document-metadata.html#the-link-element

Hinzufügen von Link-Tags

use Ilch\Layout\Helper\LinkTag\Model as LinkTagModel;
$linkTagModel = new LinkTagModel();
$linkTagModel->setRel('stylesheet')
             ->setHref('default.css');
$this->getLayout()->add('linkTags', 'defaultStyleSheet', $linkTagModel);

Bei ungültigen Kombinationen wird versucht eine gültige Rückgabe zu liefern. Bei der Angabe eines ungültigen Wertes für "crossorigin", "referrerPolicy", "as", "blocking" oder "fetchpriority" wird eine InvalidArgumentException mit einer entsprechenden Nachricht geworfen.

Zum Zeitpunkt der Implementierung gültige Werte für die obigen Attribute

referrerpolicy: 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'
crossorigin: 'anonymous', 'use-credentials'
as: 'audio', 'document', 'embed', 'fetch', 'font', 'image', 'object', 'script', 'style', 'track', 'video', 'worker'
blocking: 'render'
fetchpriority: 'high', 'low', 'auto'

Beim abschließenden Hinzufügen des Link-Tags durch den Aufruf von add() muss für den Parameter "key" zwingend "linkTags" übergeben werden, da der Link-Tag sonst nicht eingebunden wird. Der Parameter "objectKey" kann frei gewählt werden, sollte aber eindeutig sein und es wird empfohlen, dass dieser den Link-Tag beschreibt. Als Parameter "value" wird das entsprechende Model übergeben.

/**
 * Adds value with specific key ($objectKey) to an array in view data.
 *
 * @param string $key
 * @param string $objectKey
 * @param mixed $value
 *
 * @return bool
 * @throws \Exception
 * @since 2.1.0
 */
public function add($key, $objectKey, $value)
{
    // [...]
}

Beispiele gültiger Link-Tags

<link rel="stylesheet" href="default.css">

<link rel="stylesheet" href="green.css" title="Green styles">

<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

<link rel="icon" href="demo_icon.gif" sizes="16x16" type="image/gif">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

<link rel="preload" href="myFont.woff2" crossorigin="anonymous" type="font/woff2" as="font">
<link rel="preload" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" as="image">

<link rel="stylesheet" href="https://localhost/css/stylesheet.min.css" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc">

<link rel="alternate stylesheet" href="css/pooh" disabled>

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#193860">

<link rel="stylesheet" href="green.css" blocking="render">

<link rel="stylesheet" href="styles.css" type="text/css" referrerpolicy="no-referrer">

<link rel="stylesheet" href="/path/to/main.css" fetchpriority="high">

Eigenschaften der Models

application/libraries/Ilch/Layout/Helper/LinkTag/Model.php

  • href
  • crossorigin
  • rel
  • media
  • integrity
  • hreflang
  • type
  • referrerpolicy
  • imagesrcset
  • sizes
  • as
  • blocking
  • color
  • disabled
  • fetchpriority
  • title

Meta-Tags (seit 2.1.0)

Die Definition von 'meta' in der HTML5 Spezifikation:
https://www.w3.org/TR/html5/document-metadata.html#the-meta-element

Hinzufügen von Meta-Tags

Auszug aus dem Artikel-Modul.

use Ilch\Layout\Helper\MetaTag\Model as MetaTagModel;
$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:title')
             ->setContent($article->getTitle());
$this->getLayout()->add('metaTags', 'og:title', $metaTagModel);

$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:description')
             ->setContent($article->getDescription());
$this->getLayout()->add('metaTags', 'og:description', $metaTagModel);

$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:type')
             ->setContent('article');
$this->getLayout()->add('metaTags', 'og:type', $metaTagModel);

if (!empty($article->getImage())) {
    $metaTagModel = new MetaTagModel();
    $metaTagModel->setName('og:image')
                 ->setContent(BASE_URL.'/'.$article->getImage());
    $this->getLayout()->add('metaTags', 'og:image', $metaTagModel);
}

if (!empty($article->getLocale())) {
    $metaTagModel = new MetaTagModel();
    $metaTagModel->setName('og:locale')
                 ->setContent($article->getLocale());
    $this->getLayout()->add('metaTags', 'og:locale', $metaTagModel);
}

Beim abschließenden Hinzufügen des Meta-Tags durch den Aufruf von add() muss für den Parameter "key" zwingend "metaTags" übergeben werden, da der Meta-Tag sonst nicht eingebunden wird. Im Falle eines Link-Tags war dies "linkTags". Der Parameter "objectKey" kann frei gewählt werden, sollte aber eindeutig sein und es wird empfohlen, dass dieser den Meta-Tag beschreibt. Als Parameter "value" wird das entsprechende Model übergeben.

/**
 * Adds value with specific key ($objectKey) to an array in view data.
 *
 * @param string $key
 * @param string $objectKey
 * @param mixed $value
 *
 * @return bool
 * @throws \Exception
 * @since 2.1.0
 */
public function add($key, $objectKey, $value)
{
    // [...]
}

Beispiele gültiger Meta-Tags

<meta name="generator" content="Frontweaver 8.2">

<meta name="keywords" content="british,type face,font,fonts,highway,highways">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta http-equiv="Refresh" content="300">
<meta http-equiv="Refresh" content="20; URL=page4.html">

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

<meta charset="utf-8">

<meta name="og:title" content="Willkommen">
<meta name="og:type" content="article">

Eigenschaften der Models

application/libraries/Ilch/Layout/Helper/MetaTag/Model.php

  • httpEquiv
  • name
  • content
  • charset

Script-Tags (seit 2.1.50)

Die Definition des Script-Elements in der HTML5 Spezifikation: https://html.spec.whatwg.org/multipage/scripting.html#the-script-element

Die Implementierung sollte es ermöglichen alle laut Spezifikation möglichen Einsatzzwecke des Script-Elements abzudecken.

Hinzufügen von Script-Tags

use Ilch\Layout\Helper\ScriptTag\Model as ScriptTagModel;
$scriptTagModel = new ScriptTagModel();
$scriptTagModel->setSrc('https://localhost/script.js');
$this->getLayout()->add('scriptTags', 'snowflakeScript', $scriptTagModel);

Bei ungültigen Kombinationen wird versucht eine gültige Rückgabe zu liefern. Zum Beispiel wäre eine Kombination eines klassische "Inline"-Skripts mit der Angabe von "async" nicht möglich. Async wird in diesem Fall verworfen. Bei der Angabe eines ungültigen Wertes für "crossorigin", "referrerPolicy", "blocking" oder "fetchpriority" wird eine InvalidArgumentException mit einer entsprechenden Nachricht geworfen.

Zum Zeitpunkt der Implementierung gültige Werte für die obigen Attribute

referrerpolicy: 'no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'
crossorigin: 'anonymous', 'use-credentials'
blocking: 'render'
fetchpriority: 'high', 'low', 'auto'

Beim abschließenden Hinzufügen des Script-Tags durch den Aufruf von add() muss für den Parameter "key" zwingend "scriptTags" übergeben werden, da der Script-Tag sonst nicht eingebunden wird. Der Parameter "objectKey" kann frei gewählt werden, sollte aber eindeutig sein und es wird empfohlen, dass dieser das Script-Tag beschreibt. Als Parameter "value" wird das entsprechende Model übergeben.

/**
 * Adds value with specific key ($objectKey) to an array in view data.
 *
 * @param string $key
 * @param string $objectKey
 * @param mixed $value
 *
 * @return bool
 * @throws \Exception
 * @since 2.1.0
 */
public function add($key, $objectKey, $value)
{
    // [...]
}

Beispiele gültiger Script-Tags

<script>alert("test")</script>
<script type="application/javascript">alert("test")</script>
<script blocking="render">alert("test")</script>

<script src="https://localhost/script.js" blocking="render"></script>
<script src="https://localhost/script.js" async></script>
<script src="https://localhost/script.js" defer></script>
<script src="https://localhost/script.js" async defer></script>
<script src="https://localhost/script.js" crossorigin="anonymous"></script>
<script src="https://localhost/script.js" integrity="7eec02a6d"></script>
<script src="https://localhost/script.js" referrerpolicy="origin"></script>
<script src="https://localhost/script.js" nomodule></script>
<script src="https://localhost/script.js" fetchpriority="high"></script>

<script type="module">somecode</script>
<script type="module" async>somecode</script>
<script type="module" blocking="render">somecode</script>

<script type="module" src="https://localhost/script.js"></script>
<script type="module" src="https://localhost/script.js" async></script>
<script type="module" src="https://localhost/script.js" blocking="render"></script>

<script type="importmap">somecode</script>
<script type="importmap" blocking="render">somecode</script>

<script type="text/x-game-map">........U.........e</script>
<script type="text/x-game-map" blocking="render">........U.........e</script>

Eigenschaften des Models

  • src
  • type
  • nomodule
  • async
  • defer
  • crossorigi
  • integrity
  • referrerpolicy
  • blocking
  • fetchpriority
  • inline

Dokumentation für ilch 2 | Content-Management-System | Copyright © 2004-2024 by ilch.de

Wiki für ilch-2

Benutzer

  • Inhaltsverzeichnis
    Hier findet man u.a. die Installationsanleitung, sowie Fehler- und Problem-behebungen

Entwickler

  • Inhaltsverzeichnis
    Hier findet man Informationen zum Script, Konzept und dem Programmierstil

Designer

  • Inhaltsverzeichnis
    Hier findet man Informationen über den Aufbau und Anpassung von Layouts und Modulen

Video-Tutorials


Clone this wiki locally