Processwire - Themes / Templates: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 7: Zeile 7:
  
 
== Template Strategien ==
 
== Template Strategien ==
 +
https://processwire.com/docs/tutorials/how-to-structure-your-template-files/
 +
 
Es gibt in ProcessWire im Wesentlichen drei grundlegende Stragegien um HTML Inhalte auszugeben:
 
Es gibt in ProcessWire im Wesentlichen drei grundlegende Stragegien um HTML Inhalte auszugeben:
 
* Direct Output
 
* Direct Output
Zeile 14: Zeile 16:
 
=== Direct Output ===
 
=== Direct Output ===
 
Die Inhalte im Template werden direkt als Markup ausgegeben.
 
Die Inhalte im Template werden direkt als Markup ausgegeben.
 +
<pre>
 +
<html>
 +
  <head>
 +
    <title><?php echo $page->title; ?></title>
 +
  </head>
 +
  <body>
 +
    <h1><?php echo $page->title; ?></h1>
 +
    <?php echo $page->body; ?>
 +
  </body>
 +
</html>
 +
</pre>
 +
==== Direct Output mit Includes ====
 +
Teile die man oft benötigt kann man in andere Dateien verlagern.
 +
<pre>
 +
<?php
 +
include("./head.inc");
 +
echo $page->body;
 +
include("./foot.inc");
 +
</pre>
 +
 +
==== Direct Output mit automatic inclusion ====
 +
==== Automatic Inclusion ====
 +
Über die ProcessWire Konfiguration prependTemplateFile und appendTemplateFile kann man automatisch bestimmte Templates einbinden .
 +
In der config.php definiert man:
 +
$config->prependTemplateFile = 'head.inc';
 +
$config->appendTemplateFile = 'foot.inc';
 +
Dann kann man im Template einfach schreiben:
 +
echo $page->body;
 +
head.inc und foot.inc werden automatisch hinzugefügt.
 +
 
=== Delayed Output ===
 
=== Delayed Output ===
−
Inhalte werden in Variablen zwischengespeichert. Eine _main.php Datei bildet ein Rahmengerüst. Am Ende wenn alle Teilbereiche gerendert sind werden die Inhalte zusammengefügt (delayed)
+
Mit Delayed Output meint man, dass beim Rendering Teile des Inhalts zunächst in Variablen gespeichert werden. Am Ende wenn alle Teilbereiche gerendert sind werden die Inhalte zusammengefügt (delayed)
 +
 
 +
basic-page.php
 +
<pre>
 +
<?php
 +
$headline = $page->get("headline|title");
 +
$bodycopy = $page->body;
 +
$sidebar = $page->sidebar;
 +
include("./main.inc");
 +
</pre>
 +
In main.inc werden die Variablen dann verwendet
 +
<pre>
 +
<html>
 +
  <head>
 +
    <title><?php echo $headline; ?></title>
 +
  </head>
 +
  <body>
 +
    <div id='bodycopy'>
 +
      <h1><?php echo $headline; ?></h1>
 +
      <?php echo $bodycopy; ?>
 +
    </div>
 +
    <div id='sidebar'>
 +
      <?php echo $sidebar; ?>
 +
    </div>
 +
  </body>
 +
</html>
 +
</pre>
 +
 
 +
==== Delayed Output mit automatic inclusions ====
 +
Oft (aber nicht immer) bietet sich auch an Teile automatisch zu inkludieren.
 +
 
 +
TODO
 +
 
 +
 
 +
 
 
=== Markup Regions ===
 
=== Markup Regions ===
 
Kombiniert die Vorteile der vorigen Strategien. Werden per Include (oder über die Funktionen für das Delayed Output) Template Dateien verknüpft, werden die Inhalte gleichnamiger id Container ersetzt oder mit Hilfe von pw- Klassen kombiniert bzw. bearbeitet.
 
Kombiniert die Vorteile der vorigen Strategien. Werden per Include (oder über die Funktionen für das Delayed Output) Template Dateien verknüpft, werden die Inhalte gleichnamiger id Container ersetzt oder mit Hilfe von pw- Klassen kombiniert bzw. bearbeitet.

Version vom 7. Februar 2019, 14:53 Uhr

Links

Siehe auch

Template Strategien

https://processwire.com/docs/tutorials/how-to-structure-your-template-files/

Es gibt in ProcessWire im Wesentlichen drei grundlegende Stragegien um HTML Inhalte auszugeben:

Direct Output

Die Inhalte im Template werden direkt als Markup ausgegeben. 

<html>
  <head>
    <title><?php echo $page->title; ?></title>
  </head>
  <body>
    <h1><?php echo $page->title; ?></h1>
    <?php echo $page->body; ?>
  </body>
</html>

Direct Output mit Includes

Teile die man oft benötigt kann man in andere Dateien verlagern. 

<?php
include("./head.inc");
echo $page->body;
include("./foot.inc");

Direct Output mit automatic inclusion

Automatic Inclusion

Über die ProcessWire Konfiguration prependTemplateFile und appendTemplateFile kann man automatisch bestimmte Templates einbinden . In der config.php definiert man: 

$config->prependTemplateFile = 'head.inc';
$config->appendTemplateFile = 'foot.inc';

Dann kann man im Template einfach schreiben: 

echo $page->body;

head.inc und foot.inc werden automatisch hinzugefügt.

Delayed Output

Mit Delayed Output meint man, dass beim Rendering Teile des Inhalts zunächst in Variablen gespeichert werden. Am Ende wenn alle Teilbereiche gerendert sind werden die Inhalte zusammengefügt (delayed)

basic-page.php 

<?php
$headline = $page->get("headline|title");
$bodycopy = $page->body;
$sidebar = $page->sidebar;
include("./main.inc");

In main.inc werden die Variablen dann verwendet 

<html>
  <head>
    <title><?php echo $headline; ?></title>
  </head>
  <body>
    <div id='bodycopy'>
      <h1><?php echo $headline; ?></h1>
      <?php echo $bodycopy; ?>
    </div>
    <div id='sidebar'>
      <?php echo $sidebar; ?>
    </div>
  </body>
</html>

Delayed Output mit automatic inclusions

Oft (aber nicht immer) bietet sich auch an Teile automatisch zu inkludieren.

TODO


Markup Regions

Kombiniert die Vorteile der vorigen Strategien. Werden per Include (oder über die Funktionen für das Delayed Output) Template Dateien verknüpft, werden die Inhalte gleichnamiger id Container ersetzt oder mit Hilfe von pw- Klassen kombiniert bzw. bearbeitet.

Allgemeine Tipps

Es gibt verschiedene Orte wo man Teilrenderings vornehmen kann. Wenn man sich keine Strategie zurechtlegt kann man schnell die Übersicht verlieren. Hier ein paar Vorschläge:

  • Partials im partials Ordner sind für einfache Dinge geeignet und gerade beim Entwurf sehr schnell. Hier lege ich Codeblöcke an die direkt (per echo oder direkt als HTMl) ausgegeben werden. Es gibt keine Rückgaben über return. Partials sind Views. Also auf Funktionen weitgehend verzichten. Ausnahmen sind z.B. foreach Schleifen auf Felder (zumindest solange ohne Template Engine gearbeitet wird).
  • Partials Dateien enden auf .inc
  • In Komplexeren Projekten sollte auf sauberer Model View Controller Trennung geachtet werden.
  • Layoutblöcke für Redakteure kommen z.B. in den Field Bereich. Hier kann man die Renderreihenfolge von PW ausnutzen.

Datei Strategien

Wo legt man am Besten Dateien und Ordner an.

Basic Theme

templates/
  _func.inc (wenn benötigt)
  home.php
  basic_page.php
templates/partials
  foot.inc
  head.inc

Layout Blocks (BEST PRACTICE)

Dies ist meine (Steffs) selbstentwickelte Strategie um vielfältige Inhalte auch einem nicht Programmierer im Backend zu ermöglichen und sie dann im Frontend auszugeben.) Anstatt den Templates fest definierte Seitenbereiche zuzuordnen und für jedes Layout ein Template zu erzeugen, kann es sinnvoll sein in Layout-Blöcken zu denken. also einzelne Gestaltungsbausteine, die der User auswählen kann und aus denen sich die Seite aufbaut.

Um dies umzusetzen bietet sich der Feldtyp RepeaterMatrix an, der beim den ProField Modul mit dabei ist. Als Alternative würde vielleicht 

ProcessWire - Layout Blöcke mit RepeaterMatrix
Processwire - Flexible Content Type

Rendering Strategien

Beispiele

http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/

Render Funktionen

https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/#theres-also-page-gt-rendervalue 

// New Functions in 3.x 
render()
renderValue()

// Functions for 2.x or for easy snippet inclusion (also possible with render
wireRenderFile() // mostly used for delayed output
wireIncludeFile() // for direct output
// i.e.
// returns the output of snippets/contactform.php
// the second argument is optional and will be passed to 
// the called file as multiple variables with the name of the key
// also all api varables are available by default

wireRenderFile("snippets/contactform", array("stuff" => $something ));

Delayed Output and Advanced Templates

Ordnerstruktur 

templates/
  _func.inc
  _init.inc
  _main.inc
templates/partials
  foot.inc
  head.inc

config.php 

<?php
...
$config->debug = false;
$config->sessionFingerprint = true;
$config->prependTemplateFile = '_init.php';
$config->appendTemplateFile = '_main.php';
$config->imageSizerOptions = array(
	'upscaling' => true, // upscale if necessary to reach target size?
	'cropping' => true, // crop if necessary to reach target size?
	'autoRotation' => true, // automatically correct orientation?
	'sharpening' => 'soft', // sharpening: none | soft | medium | strong
	'quality' => 90, // quality: 1-100 where higher is better but bigger
	);

AJAX Driven Theme

config.php 

// if ajax request set
$ajax = $input->post->ajax;


Markup Regions

Seit Version 3.0 die neueste Rendering Strategie. Hier werden Divs mit ids automatisch zu editierbaren Bereichen, die mit passenden Feldern im Backend befüllt werden.

Processwire - Markup Regions

Syntax und Konventionen

Module

Processwire - Writing Modules

Recommended Modules

FormBuilder (kostenpflichtig) - FormBuilder
ProFields (kostenpflichtig) - https://processwire.com/talk/store/product/10-profields/
Hanna Code (wie bei Wordpress) 	- TextformatterHannaCode
Map Marker (google Maps) - FieldtypeMapMarker
Simple Navigation - MarkupSimpleNavigation
AIOM - All In One Minify - AllInOneMinify

Grundausstattung

Siehe Processwire - Templates Grundausstattung

Tipps und Tricks

Templates in Backend-Auswahl verstecken

Manche Templates tauchen in der Auswahl der Redakteure auf obwohl es eigentlich nur Teiltemplates sind. Z.B. für eine Matrix. Benennt man sie mit einem Underscore am Anfang _NameDesTemplates tauchen sie nicht mehr in der Auswahlliste auf.

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Processwire_-_Themes_/_Templates&oldid=23588“