zur Startseite

Druckausgabe von https://privat.albicker.org
Iveco Daily 4x4, Hunde und multithematisches Blog - Bernhard Albicker

Hugo und PHP?

veröffentlicht am 04.02.2017 mit 826 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. Was aber, wenn dann doch so ein “kleines Bißchen Dynamik” reinkommen soll, wie z. B. ein Kontaktformular?

Gängige Lösung - und Alternativen

externer Anbieter

Üblicherweise wird bei statischen Webseiten die Einbindung von externen Diensten als Lösung angegeben. Im Zeitalter der globalen Datenkraken will das aber nicht jeder den Nutzern seiner Webseite zumuten. Es muß also anders gehen.

Alternative: Lokales Script zur Formularverarbeitung im Hintergrund

Wenn der eigene Webserver Scriptsprachen wie PHP oder Perl ausführt, dann kann eine solche Formularverarbeitung auch unter eigener Regie durchgeführt werden.
Die ins Formular eingegebenen Daten werden an das Script übergeben, das dann die Weiterverarbeitung, z. B. den Versand einer mail, übernimmt. Das kann im Hintergrund geschehen.

So wirklich schön ist das aber auch nicht:

Also hab ich mir überlegt, wie ich PHP-Code in eine Hugo-generierte Webseite “einschleusen” kann.

Auf dem eigenen Server laufendes Script in statische Seite integrieren

Ziele

Es soll folgendes möglich sein:

Voraussetzungen

Hier soll eine Lösung in der Scriptsprache PHP beschrieben werden

  1. der Webserver muß also PHP verstehen
  2. 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)
  3. nach dem Übertragen auf den Server muß das Script auch ausgeführt werden können

Einbetten von PHP in ein Markdown-Dokument

Hugo übersetzt beim Rendern (Exportieren) einer Webseite den in Markdown geschriebenen Inhalt in HTML. Aber: bereits in HTML vorliegende Teile werden unverändert übernommen. Dabei ist zu beachten:

  1. reines Markdown wird übersetzt
  2. HTML wird “durchgereicht”
  3. HTML innerhalb Markdown: Das Markdown wird übersetzt, das darin eingebettete HTML wird übernommen
  4. 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 div-Container:

+++
title 		= "Kontaktformular"
date 		= "2015-12-28T22:25:17+01:00"
categories 	= ["Webseiten"]
tags 		= ["Hugo", "Tutorial"]

+++
<div>
 
 <?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();
  }
?>

<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>

</div> 

Die fertige Datei wird als Markdown-Dokument im contentVerzeichnis abgelegt, z. B. als kontakt.md.

Erstellen der Seite

Führt man Hugo jetzt aus, dann wird diese Seite genauso wie jede andere Inhaltsseite in ein Template eingebettet und als HTML-Datei in den public-Ordner exportiert, es entsteht also die Datei kontakt.html.

Seite fit machen für den Server

Damit der PHP-Inhalt dieser Seite jetzt auf dem Webserver ausgeführt werden kann, muß

Die zweite Variante ist sehr einach zu bewerkstelligen, denn Hugo kennt die Seitenvariable .Url. Damit läßt sich im Seitenkopf (Frontmatter) einer Seite deren Pfad und Name “überschreiben” mittels einer zusätzlichen Zeile mit der Angabe url = "{Pfad/Dateiname}".

+++
title       = "Ein Blog mit Hugo erstellen - Teil 2"
date        = "2015-12-28T22:25:17+01:00"
url         = "/kontakt/formular.php"
categories  = ["Webseiten"]
tags        = ["Hugo", "Tutorial"]

+++

>>>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.

Zusammenfassung

Um auf einer durch einen statischen Webseitengenerator, hier: Hugo, erstellten Webseite wenige interaktive Einzelseiten unterzubringen, bietet sich folgende Behelfslösung an: