× Startseite
Mit PHP dynamische Funktionen im statischen Webseiten Generator Hugo ermöglichen.

PHP in Hugo benutzen

Use PHP in Hugo

Es gibt Grenzen beim Einsatz des statischen Webseiten Generators Hugo. Mit PHP kann eine serverseitige Dynamik eingebaut werden. In diesem Beitrag wird anhand von Beispielen die Konfiguration und verschiedene Arten der PHP-Aufrufe in Hugo erläutert.

Diese Anleitung basiert auf dem Know How von Christoph Lieck (totoff) - Hugo Forum - How to include a PHP form in HUGO - vielen Dank dafür.

Das Erkennen von PHP in Hugo konfigurieren

Hugo kennt kein PHP in der Standardkonfiguration. Der Media Typ und das Output Format muss in der config.toml wie folgt konfiguriert werden:

[mediaTypes]
  [mediaTypes."application/x-php"]
  suffixes = ["php"]

[outputFormats]
  [outputFormats.PHP]
    mediaType = "application/x-php"
    isPlainText = true
    baseName = "index"

mediaTypes

Über die mediaTypes wird der Typ und Suffix der Dateinamen bekannt gegeben.

outputFormats

In der Doku von Hugo - Configure Output Formats - steht für isPlainText = true: “isPlainText use Go’s plain text templates parser for the templates.” Das bedeutet wohl, dass Hugo alles mit PHP gekennzeichnete einfach durch den Generator als Text durchschleust. Man sollte also wirklich wissen was man macht.

baseName = "index" nun wird es schon komplizierter. Ich gehe davon aus, dass ein Leaf Bundle mit einer index.md bei dieser Konfiguration erwartet wird. Leaf Bundle siehe - Page Bundles - in der Hugo Dokumentation. Bei mehrsprachigen Webseiten wird die primäre Sprache in der Datei index.md und eine weitere Sprache in zum Beispiel index.en.md gespeichert. Die mehrsprachigen Webseiten werden von Hugo durch den baseName berücksichtigt.

Das Output Format in Front Matter übergeben

Die Struktur für die Markdown Dateien sieht wie folgt aus:

content
|__ php-test
    |__ index.md
    |__ index.en.md

Die Datei index.md:

---
title: "PHP Test"
date: 2021-05-25T20:50:28+02:00
lastupdate: ""
draft: false
slug:  
translationKey: phptest
description: "PHP Konfiguration in Hugo testen"
author: "Frank Kunert"
outputs: PHP
---

Deutsche Version von PHP Test.  

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
  

Und die englische Version index.en.md

---
title: "Test PHP"
date: 2021-05-25T20:50:28+02:00
lastupdate: ""
draft: false
slug: test-php
translationKey: phptest
description: "Test PHP configuration in Hugo"
author: "Frank Kunert"
outputs: PHP
---

English version of PHP test.  

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
  

Templates für PHP erstellen

Wenn Sie jetzt die oben genannten Dinge speichern und im Browser aufrufen, erhalten Sie eine “Not Found” Fehlerseite. Für PHP müssen erst die entsprechenden Templates erstellt werden.

Mein Theme hat für den grundsätzlichen Seitenaufbau eine baseof.html. Mit dem Template wird der Head, Header, Menüzeile, Content block und Footer definiert. Aus dem Content block heraus wird das single.html Template eingebunden. Für das Funktionieren von PHP in Hugo müssen diese beiden Templates kopiert und als *.php Dateien im gleichen Verzeichnis umbenannt werden. Die baseof.php wird danach nicht verändert. In der single.php wird es weiter unten Änderungen geben.

Die Struktur des layouts Verzeichnis sieht danach wie folgt aus:

layouts
|__default
   |__baseof.html
   |__baseof.php
   |__list.html
   |__single.html
   |__single.php

Wenn Sie jetzt bei einem laufenden Hugo Generator im Browser localhost:1313/php-test aufrufen, erhalten Sie eine weiße, leere Webseite. Aber das ist ok, denn Hugo stellt keinen PHP Server zur Verfügung.

In meinem Beitrag - MAMP Webserver lokal mit Hugo benutzen - habe ich beschrieben wie Sie einen lokalen Webserver, der PHP zur Verfügung stellt, installieren und mit Hugo verbinden können. Bei laufendem MAMP Server können Sie im Browser die neue Webseite mit localhost:8888/php-test aufrufen. Der Webserver ändert die URL Zeile bei der Anzeige in localhost:8888/php-test/index.php um.

Bis jetzt wurde noch keine Zeile PHP geschrieben. Das wird sich gleich ändern.

PHP in das single.php Template einfügen

Mein layouts/_default/single.php Template sieht zurzeit so aus:

{{ define "main" }}
<section class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</section>
{{end}}

Im {{ .Content }} wird der “Lorem ipsum ..” Text aus der index.md ausgegeben. Unterhalb davon wird jetzt PHP hinzugefügt:

{{ define "main" }}
<section class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}

  <?php
  echo 'Your browser: <br>' . $_SERVER['HTTP_USER_AGENT'];
  echo '<br>Author: ' . '{{ .Params.author }}';
  ?>

</section>
{{end}}

Wenn Sie jetzt die Seite noch einmal aufrufen, wird unterhalb des “Lorem ipsum ..” Textes der User Agent Ihres Browsers angezeigt. Aufruf in einem anderen Browser erzeugt auch einen anderen User Agent. Die Dynamik während der Laufzeit ist jetzt durch PHP vorhanden.

Außerdem kann man und das ist wirklich bemerkenswert, auf die Front Matter Variablen der index.md zugreifen. Im obigen Beispiel auf author und dies innerhalb von PHP. Danke für den Hinweis - frjo - sehr hilfreich.

PHP-Datei im single.php Template aufrufen

Übersichtlicher ist es wenn der PHP Code in eine Datei ausgelagert wird. Allerdings kann dann nicht mehr auf die Front Matter Variablen von Hugo zugegriffen werden. Das single.php Template sieht dann so aus:

{{ define "main" }}
<section class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}

  {{ readFile "static/php/php-test.php" | safeHTML }}

</section>
{{end}}

Der ausgelagerte PHP Code ist jetzt in der Datei php-test.php. Der Verzeichnispfad ist dann bei mir:

tekki-tipps
|__content
|__static
   |__php
      |__php-test.php

Nachfolgend der PHP Code von php-test.php:

<?php
  echo 'Your browser: <br>' . $_SERVER['HTTP_USER_AGENT'];
?>

PHP innerhalb eines Shortcodes aufrufen

Shortcodes in Hugo ermöglichen die Ausführung von Code in einer Markdown Datei. Dies kann auch für PHP genutzt werden. In der single.php wird der readFile Aufruf entfernt.

{{ define "main" }}
<section class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}
</section>
{{end}}

Der Shortcode hat den Dateinamen php.html und ist sehr übersichtlich:

<div>
  {{ .Inner | safeHTML }}
</div>

Innerhalb der Content Datei index.md benutze ich den Shortcode wie folgt:

Hugo PHP Shortcode
Die geänderte index.md mit Shortcode.

Habe für die Darstellung keine andere Möglichkeit als ein Bild gefunden. Ein highlight Shortcode und darin ein php Shortcode funktioniert in der Markdown Datei nicht.

Fazit

Wenn man erst einmal weiß wie der grundsätzliche Aufbau für PHP innerhalb von Hugo erfolgen muss, ist der Rest relativ einfach. Ein großer Vorteil von Hugo ist die Sicherheit einer statischen Webseite. Durch das Aufbohren mit PHP gibt es eine potentielle Sicherheitslücke mehr. Aus diesem Grund werde ich PHP in Hugo nur benutzen, wenn es absolut nicht anders geht.

Linkliste zu diesem Beitrag

Das könnte Sie auch interessieren

|
6 Minuten Lesezeit
0
Dieser Beitrag wurde mit der Hugo-Version 0.87.0 erstellt.

Kommentare werden bei deutscher Spracheinstellung nicht in der englischen Variante der Webseite angezeigt und umgekehrt.

© 2021 - Frank Kunert  -  Ich über mich
Ein Service von webdienste-kunert.de