Processwire - Template from Scratch
Wir erstellt man in Processwire ein Template ? So gehts.
Links
- Module: http://modules.processwire.com/
- Cheatsheet für Variablen: http://www.processwire.com/api/cheatsheet
- Variablen erklärt: http://processwire.com/api/variables/
Tipp: Module lassen sich unter Module > Neu direkt importieren wenn man den Modulklassennamen angibt.
Processwire installieren
- Install
- Installer laufen lassen, als Option Blank Template wählen.
- Backend Template
- Reno Modul installieren (ist schon drin, muss nur aktiviert werden)
- Language Support
- Language Support Module installieren
- Language in Setup anlegen (German)
- Language Pack für Core hochladen
Wichtige Module installieren
- Markup Simple Navigation Modul installieren (Klassenname: MarkupSimpleNavigation)
Template / Theme erstellen
Basisstruktur im Templateordner
Diese ist schon angelegt, wenn man das blank Template am Anfang auswählt.
/scripts /styles /errors home.php basic-page.php admin.php
Seitentemplates anlegen - einfache Variante
Ein Template kann z.b. so aussehen:
basic-page.php
<?php include('./head.inc'); // include header markup ?>
<h1><?php echo $page->title; ?></h1>
<?php include('./foot.inc'); // include footer markup ?>
head.inc
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page->title; ?></title>
</head>
<body>
foot.inc
</body>
</html>
Im Backend kann man unter Setup > Templates neue Templates anlegen, die man dann wiederum Seiten zuweisen kann. Processwire sucht dann im Templatesverzeichnis nach dem passenden Dateinamen.
Hinweis: Processwire kann alle möglichen Seiten ausgeben, also auch JSON oder XML
Seitentemplates - delayed output
Dies ist die Default vorgehensweise in Processwire für komplexere Seiten. Hierbei werden die Templateinhalte in Einzelschritten geladen:
_init.php -> myTemplate.php -> _main.php
myTemplate.php enthält den spezifischen Seiteninhalt, speichert diesen in Variablen und übergibt das Ganze an _main.php
Beispiel:
basic-page.php:
<?php
$content = $page->body . $page->video;
?>
_main.php:
<?php
include("./head.inc");
?>
<div id="page">
<header class="">
<a id="logo" href="<?php echo $pages->get('/')->url; ?>">
<h1>
<?php echo $pages->get('/')->title; ?>
</h1>
</a>
</header>
<aside>
<nav>
<?php
// echo nav links
$children = $pages->get('/')->children;
foreach($children as $child){
echo '<a name="'.$child->title.'" class="ajax-link'.$class.'" href="'. $child->url .'">'. $child->title .'</a>';
}
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php
// add content to page from template file
echo $content;
?>
</div>
</div>
<?php
include("./foot.inc");
?>
_main.php enthält also die generelle Struktur und die Seitentemplates die spezifischen Inhalte. Man kann das allerdings auch besser aufbauen als oben.
AJAX Loading
Mit der delayed Technik kann man jetzt auch nur Teile der Seite laden. So hat man niemals eine weiße Seite. So wollen wir vorgehen:
- Wir laden die neuen Inhalte in einen HTML Container
- Neue Inhalte werden gelanden und an vorhandenen Inhalte angehängt
- Dann machen wir einen animierten Seitenübergang und löschen die alten Inhalte
Hinweis: Im Beispiel laden wir direkt HTML Inhalte, man könnte aber auch JSON laden (z.b. mit Mustache JS: https://mustache.github.io/#demo ) um die Ladezeiten weiter zu verkürzen.
