ProcessWire - Markup Regions

Siehe Auch[Bearbeiten]

Links[Bearbeiten]

https://processwire.com/talk/topic/16589-markup-region-should-be-visible-in-docs/
http://processwire.com/blog/posts/processwire-3.0.49-introduces-a-new-template-file-strategy/
http://processwire.com/blog/posts/processwire-3.0.50-core-updates/
http://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/

Basics[Bearbeiten]

Die Einfachheit einer Seite mit direkter Ausgabe im Template soll mit der Mächtigkeit des delayed Output kombiniert werden.
Wie bei Delayed Output muß das Basis-Template (_main) der Seite nicht in Header + Content + Footer Dateien aufgeteilt werden.
Wie beim direkten Output kann man Ausgabebereiche einfacher an die Stelle packen an der man Sie haben möchte (aber ohne Includes)
Templates können wir reines HTML genutzt werden. Man muß keine Variablen verketten, zwischenspeichern und includen.

Quickstart[Bearbeiten]

Aktivieren[Bearbeiten]

Im Config File

$config->useMarkupRegions = true; // soll später default werden

Einführung[Bearbeiten]

$config->appendTemplateFile = '_main.php';

im Init File ist nicht notwendig, da wir nicht wie beim delayed Output Variablen manuell einfügen müssen die dann später ausgegeben werden. Wir nutzten es in diesem Beispiel trotzdem, da wir schon vertraut damit sind.

Angenommen unser Standard _main Template sieht so aus:

_main.php

<!DOCTYPE html>
<html>
  <head>
    <title><?=$page->title?></title>
  </head>
  <body>
    <div id='content'>
      <h1 id='headline'><?=$page->title?></h1>
      <div id='bodycopy'>
        <?=$page->body?>
      </div>
    </div>
    <aside id='sidebar'>
      <p>Welcome!</p>
    </aside>
    <footer id='footer'>
      <p>Copyright 2017</p>
    </footer>
  </body>
</html>

Contentblöcke Überschreiben[Bearbeiten]

Hier werden verschiedene Standardinhalte ausgegeben. Wenn wie nun im Backend ein Template auswählen können die Inhalte aus dem Standardtemplate manipuliert werden.

home.php

<h1 id='headline'><?=$page->intro?></h1>
<aside id='sidebar'>
  <img src='<?=$page->image->url?>'>
</aside>

ProcessWire untersucht die Ids des Templates und ersetzt die entsprechenden Inhalte in _main.php. So wird das Feld intro statt des felds title in der Überschrift sowie ein Bild statt des Textes in der Sidebar angezeigt.

Mithilfe von pw- Prefix Klassen hat man noch weitere Möglichkeiten mit Inhalten zu arbeiten...

Inhalte in Containern anhängen oder voranstellen (pw-append, pw-prepend)[Bearbeiten]

Anstatt zu ersetzten kann ProcessWire auch Inhalte hinzufügen:

pw-append

<aside id='sidebar' class='pw-append'>
  <img src='<?=$page->image->url?>'>
</aside>

Hier wird das Bild in der Sidebar angehängt statt den Text zu ersetzen. Es gibt auch eine Kurzform, die geeignet ist wenn es nur um kleine Codestücke geht:

<img class='pw-append-sidebar' src='<=$page->image->url?>'>
<img class='pw-prepend-bodycopy' src='/img/hero.png'>

Auch im Header kann das praktisch sein. So lassen sich z.B. CSS Dateien nur bei Bedarf einbinden:

<head id="html-head" class="pw-append">
  <link rel="stylesheet" type="text/css" href="/path/to/file.css">
  <link rel="stylesheet" type="text/css" href="/another/file.css">
</head>

Verwendet man prepend statt append werden Elemente vorangestellt.

Inhalte nach oder vor Containern (pw-before-[id],pw-after-[id])[Bearbeiten]

In den vorigen Beispielen wurden Inhalte innerhalb des Containers ergänzt. Man kann aber auch komplett neue Inhalte vor oder nach dem Container platzieren:

<h2 class='pw-after-headline'><?=$page->subhead?></h2>

<div class='twitter pw-before-footer'>
  <?=$modules->get('MarkupTwitterFeed')->render();?>
</div>

Elemente entfernen (pw-remove)[Bearbeiten]

Dieses Beispiel entfernt die Sidebar und fügt die Klasse no-sidebar zum Inhalt hinzu.

<aside id='sidebar' class='pw-remove'></aside>

Attribute hinzufügen[Bearbeiten]

<aside id='sidebar' title='Hello world' class='uk-card pw-append'>

Bereits vorhandene Attribute bleiben erhalten.

Verschachtelte Dateien über include statt über einsetzen[Bearbeiten]

In den Beispielen haben wir ein _main.php File über

$config->appendTemplateFile

als Hauptdatei genutzt. Man kann aber auch einfach übergeordnete Dateien per include nutzen. Z.B. aus der home.php heraus:

include("./markup.inc")

Man kann auch über mehrere Ebenen verschachteln.

Markup Regions definieren[Bearbeiten]

Statt Markup-Container über das id Attribut zu definieren, kann man auch das data-pw-id oder das pw-id Attribut nutzen.

...

Hinweis statt einem div ist auch jeder andere HTML Tag möglich.

Möchte man das umgebende Tag nicht mit ausgeben, kann man einfach ein <region> Tag oder <pw-region> Tag nutzen. Diese werden am Ende entfernt und übrig bleibt nur der innere code.

<region id="something">...</region>
<pw-region id="something-else">...</pw-region>

Debugging[Bearbeiten]

Mit einem speziellen Kommentar kann man Debugging Infos ausgeben.

An dieser Stelle gibt PW einige Infos über die vorgenommenen Ersetzungen und die benötigte Zeit aus.

mehr zu den pw- Klassen[Bearbeiten]

pw- Klassen werden am Ende entfernt und sind im Markup nicht mehr zu sehen.
statt einer id kann man auch "pw-id" or "data-pw-id" Attribute verwenden:
<pw-region> nutzt man wenn der Umgebende Container nicht benötigt wird.

Kurzreferenz[Bearbeiten]

Replacing and removing elements

<div id=yo>Replaces #yo and merges attributes</div>
<div id=yo class=pw-replace>Same as above</div>
<div id=yo class=pw-remove>Removes #yo</div>

Prepending and appending elements

<div id=yo class=pw-prepend><p>Prepends #yo with this</p></div>
<div id=yo class='pw-prepend bar'>Prepends #yo, adds bar class</div>
<div id=yo class=pw-append><p>Appends #yo with this p tag</p></div>
<div id=yo class='pw-append foo'>Appends #yo, adds foo class</div>
<div id=yo class=pw-append title=hello>Appends #yo, adds title attr</div>
<div id=yo class='pw-append -baz'>Appends #yo, removes baz class</div>

Inserting new elements

<h2 class=pw-before-yo>Adds H2 headline with this text before #yo</h2>
<footer class=pw-after-yo>Adds this footer after #yo</p></footer>
<div class='pw-append-yo foo'>Appends this div.foo to #yo</div>
<div class='pw-prepend-yo bar'>Prepends this div.bar to #yo</div>

Zusammenfassung der class Attribute

pw-replace replaces element (default assumption)
pw-prepend prepends markup to element
pw-append appends markup to element
pw-before places markup before element
pw-after places markup after element
pw-before-id places this tag and markup before element with "id"
pw-after-id places this tag and markup after element with "id"
pw-remove removes element from document completely
foo adds class "foo" to element (can be any class name)
-bar removes class "bar" from element (can be any class name)