Processwire - Themes / Templates: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(22 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
== Links ==
 
== Links ==
 
Siehe auch  
 
Siehe auch  
 +
* [[Processwire - Templates Grundausstattung]] (Best Practice)
 +
* [[ProcessWire - Field Rendering]]
 +
* [[ProcessWire - Skeleton Template]]
 
* [[Processwire - Template from Scratch]]
 
* [[Processwire - Template from Scratch]]
 +
* https://processwire.com/blog/posts/pw-3.0.141/#processwire-system-urls-paths-now-more-customizable (Interessant für vo Backend wählbare Themes)
  
−
== Theme Strategien ==
+
== Template Strategien - Output Strategies ==
 +
https://processwire.com/docs/tutorials/how-to-structure-your-template-files/
 +
https://processwire.com/talk/topic/21893-wireframe/page/3/?tab=comments#comment-205320
 +
http://wireframe-framework.com
  
 +
Es gibt in ProcessWire im Wesentlichen mehrere grundlegende Strategien um HTML Inhalte auszugeben:
 +
* Direct Output
 +
* Delayed Output
 +
* Markup Regions ([[ProcessWire - Markup Regions]])
 +
Außerdem gibt es für MVC basierte Ansätze das Wireframe Framework. Über die Wireframe API lassen sich z.B. gut Komponentenbasierte Webseiten, JSON Endpoints... realisieren.
 +
 +
=== Direct Output ===
 +
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 ===
 +
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 ===
 +
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.
 +
 +
=== Wireframe API ===
 +
[[ProcessWire - Wireframe API]]
 +
 +
== 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 ===
 
=== Basic Theme ===
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
Zeile 19: Zeile 115:
 
</pre>
 
</pre>
  
 +
=== 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
 +
 +
<syntaxhighlight lang="php">
 +
// 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 ));
 +
</syntaxhighlight>
 
=== Delayed Output and Advanced Templates ===
 
=== Delayed Output and Advanced Templates ===
−
Über prependTemplateFile und appendTemplateFile verarbeitet man die Templates wenn alle Inhalte zusammengesetzt sind.
+
 
  
 
'''Ordnerstruktur'''
 
'''Ordnerstruktur'''
Zeile 49: Zeile 175:
 
);
 
);
 
</syntaxhighlight>
 
</syntaxhighlight>
−
 
  
 
=== AJAX Driven Theme ===
 
=== AJAX Driven Theme ===
Zeile 57: Zeile 182:
  
  
−
=== 3.x Strategie ===
+
=== 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 ==
 
== Syntax und Konventionen ==
Zeile 73: Zeile 200:
 
AIOM - All In One Minify - AllInOneMinify
 
AIOM - All In One Minify - AllInOneMinify
 
</pre>
 
</pre>
 +
 +
== 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.

Aktuelle Version vom 19. September 2020, 06:28 Uhr

Links[Bearbeiten]

Siehe auch

Template Strategien - Output Strategies[Bearbeiten]

https://processwire.com/docs/tutorials/how-to-structure-your-template-files/
https://processwire.com/talk/topic/21893-wireframe/page/3/?tab=comments#comment-205320
http://wireframe-framework.com

Es gibt in ProcessWire im Wesentlichen mehrere grundlegende Strategien um HTML Inhalte auszugeben:

Außerdem gibt es für MVC basierte Ansätze das Wireframe Framework. Über die Wireframe API lassen sich z.B. gut Komponentenbasierte Webseiten, JSON Endpoints... realisieren.

Direct Output[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

Automatic Inclusion[Bearbeiten]

Ü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[Bearbeiten]

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[Bearbeiten]

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

TODO


Markup Regions[Bearbeiten]

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.

Wireframe API[Bearbeiten]

ProcessWire - Wireframe API

Allgemeine Tipps[Bearbeiten]

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[Bearbeiten]

Wo legt man am Besten Dateien und Ordner an.

Basic Theme[Bearbeiten]

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

Layout Blocks (BEST PRACTICE)[Bearbeiten]

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[Bearbeiten]

Beispiele[Bearbeiten]

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

Render Funktionen[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

config.php 

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


Markup Regions[Bearbeiten]

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[Bearbeiten]

Module[Bearbeiten]

Processwire - Writing Modules

Recommended Modules[Bearbeiten]

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[Bearbeiten]

Siehe Processwire - Templates Grundausstattung

Tipps und Tricks[Bearbeiten]

Templates in Backend-Auswahl verstecken[Bearbeiten]

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=24793“