Processwire - Template from Scratch: Unterschied zwischen den Versionen
| Zeile 117: | Zeile 117: | ||
* Dann machen wir einen animierten Seitenübergang und löschen die alten Inhalte | * 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): | ||
| + | <syntaxhighlight lang="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 | ||
| + | ?> | ||
| + | </syntaxhighlight> | ||
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. | 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. | ||
Version vom 14. Februar 2017, 17:30 Uhr
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
?>
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.
