Processwire - Template from Scratch - Versionsgeschichte

84.157.23.32: /* Seitentemplates - delayed output */

2019-10-23T08:29:44Z

Seitentemplates - delayed output

37.49.32.84 am 22. März 2017 um 16:18 Uhr

2017-03-22T16:18:21Z

37.49.32.84: /* Seitentemplates - delayed output */

2017-02-14T17:45:57Z

Seitentemplates - delayed output

37.49.32.84: /* Extras */

2017-02-14T17:42:50Z

Extras

37.49.32.84: /* AJAX über jQuery */

2017-02-14T16:54:07Z

AJAX über jQuery

37.49.32.84: /* AJAX über jQuery */

2017-02-14T16:44:12Z

AJAX über jQuery

37.49.32.84: /* AJAX Loading */

2017-02-14T16:40:04Z

AJAX Loading

37.49.32.84: /* Template / Theme erstellen */

2017-02-14T16:30:34Z

Template / Theme erstellen

37.49.32.84: /* Template / Theme erstellen */

2017-02-14T16:26:35Z

Template / Theme erstellen

37.49.32.84 am 14. Februar 2017 um 16:16 Uhr

2017-02-14T16:16:30Z

@@ Zeile 136: / Zeile 136: @@
 </syntaxhighlight>
 _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 ===

@@ Zeile 2: / Zeile 2: @@
 == Links ==
 * Module: http://modules.processwire.com/
 * Cheatsheet für Variablen: http://www.processwire.com/api/cheatsheet

@@ Zeile 63: / Zeile 63: @@
   _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:

@@ Zeile 244: / Zeile 244: @@
 <syntaxhighlight lang="javascript">
 </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.

@@ Zeile 161: / Zeile 161: @@
 === AJAX über jQuery ===
-Um das AJAX Loading der Inhalte zu realisieren nutzen wir '''jQuery'''. Dies notwendigen Funktionen binden wir über die ''main.js'' ein und laden das ganze in der ''foot.inc'' ein.
+Um das AJAX Loading der Inhalte zu realisieren nutzen wir '''jQuery'''. Dies notwendigen Funktionen binden wir über die ''main.js'' ein und laden das ganze in der ''foot.inc'' .
 foot.inc
@@ Zeile 240: / Zeile 240: @@
 * 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.

← Nächstältere Version		Version vom 14. Februar 2017, 16:40 Uhr
Zeile 160:		Zeile 160:
	</syntaxhighlight>		</syntaxhighlight>

		+	=== 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
		+	<syntaxhighlight lang="javascript">
		+	$(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()
		+	});
		+	</syntaxhighlight>
		+
		+	==== 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.		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.

← Nächstältere Version		Version vom 14. Februar 2017, 16:30 Uhr
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.

@@ Zeile 60: / Zeile 60: @@
 Hinweis: Processwire kann alle möglichen Seiten ausgeben, also auch JSON oder XML
 === Seitentemplates - delayed output ===
-Hierbei werden die Templateinhalte in Einzelschritten geladen:
+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
@@ Zeile 109: / Zeile 109: @@
 ?>
 </syntaxhighlight>