ProcessWire - Markup Regions: Unterschied zwischen den Versionen

Version vom 30. Juli 2018, 13:23 Uhr

Siehe Auch

Processwire - Themes / Templates

Links

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

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

Aktivieren

Im Config File

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

Einführung

$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

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)

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]

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

<?=$page->subhead?>

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

Elemente entfernen (pw-remove)

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

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

Bereits vorhandene Attribute bleiben erhalten.

Markup Regions über include einsetzen

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")

mehr zu den pw- Klassen

pw- Klassen werden am Ende entfernt und sind im Markup nicht mehr zu sehen.

Kurzreferenz

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>

Summary of class attributes

    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)