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
Processwire stellt eine $ajax Variable zur Verfügung die wir nutzen können um zu prüfen, ob ein AJAX Request vorliegt. Wenn nicht können wir die komplette Seite austauschen.
So könnte das aussehen (_main.php):
<?php
// include page structure if not an ajax request
if(!$ajax):
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
// nav content here
?>
</nav>
</aside>
<div class="content-container cf">
<div class="content current-content">
<?php endif; // end if ajax ?>
<?php
// if ajax then only return $content
echo $content;
?>
<?php if(!$ajax): ?>
</div>
</div>
<?php
include("./foot.inc");
endif; // end if ajax
?>
AJAX über jQuery
Um das AJAX Loading der Inhalte zu realisieren nutzen wir jQuery. Dies notwendigen Funktionen binden wir über die foot.inc ein.
main.js
$(function() {
var href;
var title;
$('body').on('click','a.ajax-link',function(e) { // nav link clicked
href = $(this).attr("href");
title = $(this).attr("name");
// load content via AJAX
loadContent(href);
// prevent click and reload
e.preventDefault();
});
function loadContent(url){ // Load content
// variable for page data
$pageData = '';
// send Ajax request
$.ajax({
type: "POST",
url: url,
data: { ajax: true },
success: function(data,status){
$pageData = data;
}
}).done(function(){ // when finished and successful
// construct new content
$pageData = '<div class="content no-opacity ajax">' + $pageData + '</div>';
// add content to page
$('.content-container').append($pageData);
// remove old content
$('.content.current-content').remove();
// show new content and clean up classes
$(this).removeClass('no-opacity').removeClass('ajax').addClass('current-content');
}); // end of ajax().done()
} // end of loadContent()
});
Extras
Außerdem möchten wir ein paar nützliche Sachen einbinden:
- Animierter Seitenübergang
- Reinitialisieren der Skripte nach dem Seitenübergang (Lightboxen, Slideshows etc..)
- Already Loaded Check - wenn ein User geklickt hat soll ein erneuter Klick nicht den Ladevorgang neu starten.
- Browser History - wir nutzen html5 history um die richtigen Inhalte zu laden wenn der User den Backbutton nutzt. Sonst würde die letzte komplette Seite geladen, statt nur der letzen ausgetauschten 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.
