Hugo und PHP? (Teil 2)
veröffentlicht am 14.03.2019 mit 798 Worten - Lesezeit: 4 Minute(n)
Eine Crux mit statischen Webseiten ist … sie sind statisch. Und genau daraus ergeben sich ja auch die entscheidenden Vorteile dieses Webseitentyps.
So hatte ich den ersten Artikel zum Thema PHP in Hugo begonnen.
Die eingebaute Lösung in Hugo
PHP-Quelltext im Hauptteil der Seite
Wie im ersten Artikel möchte ich auch hier zunächst von der einfachen Variante einer Verarbeitung von Nutzereingaben in ein Webformular ausgehen: - Benutzereingaben in ein Webformular - Prüfung auf dem Webserver auf - Vollständigkeit - korrekte Eingaben - Rückmeldung an den Benutzer bei Fehlern, dabei Speicherung der bereits korrekten Eingaben - Rückmeldung an den Benutzer bei erfolgreichem Abschluß der Aktion - das Ganze optisch eingebettet in das Design der Webseite - wartungsarm, d. h. Template-Änderungen (Design, Navigationselemente) sollen automatisch auch auf die interaktiven Seiten übernommen werden.
Voraussetzungen
- der PHP-Code sowie das Formular muß in ein normales Markdown-Dokument eingetragen werden, das im
content-Verzeichnis liegt. Dadurch wird es von Hugo in ein Template übernommen (also optisch und strukturell in die Webseite eingebettet) - nach dem Übertragen auf den Server muß das Script auch ausgeführt werden können
Lösung unter Zuhilfenahme von ‘Shortcodes’
Hugo übersetzt beim Rendern (Exportieren) einer Webseite den in Markdown geschriebenen Inhalt in HTML:
- reines Markdown wird übersetzt
- HTML wird “durchgereicht”
- HTML innerhalb Markdown: Das Markdown wird übersetzt, das darin eingebettete HTML wird übernommen
- ABER: Markdown (oder etwas beliebig anderes) innerhalb HTML: wird “durchgereicht”
Ein normales Seitendokument sieht so aus:
+++
title = "Ein Blog mit Hugo erstellen - Teil 2"
date = "2015-12-28T22:25:17+01:00"
categories = ["Webseiten"]
tags = ["Hugo", "Tutorial"]
+++
und hier steht dann der Inhalt der Seite
Würde man jetzt im Seiteninhalt einfach Programmcode notieren, dann bestünde die Gefahr, daß Hugo versucht, daraus HTML zu erstellen und damit den Code zu verstümmeln.
Deshalb setzte ich den kompletten Seiteninhalt in einen Container, aber im Gegensatz zu der im ersten Artikel beschriebenen Methode, die quasi einen “Dreckeffekt” nutzt, sieht die offizielle Lösung so aus:
+++
title = "Kontaktformular"
date = "2015-12-28T22:25:17+01:00"
+++
{{< php >}}
<?php
require_once("../php/phpmailer/class.phpmailer.php");
require_once("../php/phpmailer/class.smtp.php");
//Programmablauf
if ($_POST['Submit'])
{
// Formularverarbeitung
*** einiger Programmcode ***
//mail-Übermittlung
// Rückgabe auf den Benutzerbildschirm
formDisp();
formMail();
}
?>
{{< /php >}}
<form action="<?php echo $PHP_SELF; ?>" method="POST" accept-charset="UTF-8">
<fieldset><i>Ansprechpartner/-in</i><br>
<label>Name:</label> <input name="Name" value="" size="25" maxlength="80" type="Text"><br>
<label>e-mail:</label> <input name="eMail" value="" size="25" maxlength="80" type="Text"><br>
</fieldset>
<p>Ihre Mitteilungen oder Wünsche:</p>
<textarea name="Mitteilung" cols="35" rows="5" wrap="virtual"></textarea>
<input name="Submit" value="Abschicken" type="Submit">
</form>
Der Container wird hier aus den Elementen {{< php >}} und {{< /php >}} gebildet. Damit Hugo nun weiß, was damit zu tun ist, muß der ‘Shortcode’, also eine Art ‘Code-Abkürzung’ im Template-Verzeichnis definiert werden.
Dazu wird im Theme-Ordner eine Datei layouts/shortcodes/php.html angelegt. Deren Inhalt besteht aus
{{ .Inner | safeHTML }}
was bewirkt, daß alles innerhalb der obigen Container-Begrenzungen unverändert “durchgereicht” wird.
Korrekte Verlinkung der Datei
Die fertige Datei wird als Markdown-Dokument im contentVerzeichnis abgelegt, z. B. als kontakt.md.
Diese Datei wird mit Hilfe der Seitenvariable .Url im Kopf der Markdown-Datei (Frontmatter) als php-Datei mit Pfad und Name definiert mittels einer zusätzlichen Zeile mit der Angabe url = "{Pfad/Dateiname}".
+++
title = "Kontaktformular"
date = "2015-12-28T22:25:17+01:00"
url = "/kontakt/formular.php"
+++
>>>Seiteninhalt<<<
So läßt sich die Datei kontakt.md zum Beispiel als http://www.domain.tld/kontakt/formular.php ausgeben. Alle internen Links in den von Hugo erstellten Menüs verweisen dann automatisch auf das richtige Ziel.
PHP-Code im Header einer Seite
Manchmal ist es nötig, PHP-Code in den Header einer HTML-Seite so einzubauen, daß er ausgeführt wird, bevor irgendetwas von der restlichen Seite ausgegeben oder ausgeführt wird. Wenn dieser PHP-Code auf allen Seiten gleich sein soll/darf, dann könnte das so aussehen im Template des gewählten Themes:
{{ "<?php echo \"Quelltext vor dem Doctype html\" ?>" | safeHTML }}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Wenn dieser PHP-Code aber nur auf wenigen Seiten gebraucht wird oder auch noch auf manchen Seiten unterschiedlich sein soll, dann ist ein anderes Vorgehen nötig:
Hierfür lege ich im Ordner static den Unterordner php an. Den benötigten Code trage ich dann dort in eine Datei filename.php ein.
Im Markdownfile trage ich im Header die zusätzliche Seitenvariable phpfile ein:
+++
phpfile = "/static/php/filename.php"
title = "Kontaktformular"
date = "2015-12-28T22:25:17+01:00"
url = "/kontakt/formular.php"
+++
>>>Seiteninhalt<<<
Wichtig ist hier der komplette Pfad im lokalen Verzeichnis, d. h. /static muß enthalten sein.
Im Template des Themes werden dann an der benötigten Stelle die folgenden ersten drei Codezeilen platziert:
{{ with .Params.phpfile }}
{{- . | readFile | safeHTML -}}
{{ end }}
<!doctype html>
(...)
Das with in der ersten Zeile bewirkt, daß der Codeblock nur dann ausgeführt wird, wenn im Markdown-File der jeweiligen Seite im Dateikopf tatsächlich ein Eintrag namens phpfile vorhanden ist.
Zusammenfassung
Um auf einer durch einen statischen Webseitengenerator, hier: Hugo, erstellten Webseite wenige interaktive Einzelseiten unterzubringen, bieten sich verschiedene kombinierbare Lösungsansätze an, je nachdem, ob der PHP-Quelltext seiner Natur nach im head oder body der fertigen Seite erscheinen soll.