Использование PHP в Hugo

Как включить динамические функции в статическом генераторе веб-сайтов Hugo с помощью PHP.

Использование PHP в Hugo

Обновлено: 29 ноября 2024 г.
Автор: Администратор
6 минут на чтение
php, Хьюго, Настройки

Содержание:

Существуют ограничения на использование статического генератора веб-сайтов Hugo. С PHP можно встроить динамику на стороне сервера. В этой статье используются примеры для объяснения конфигурации и различных типов вызовов PHP в Hugo.
Это руководство основано на статье блога (ресурс на момент написания статьи недоступен) и на ноу-хау Кристофа Лика (totoff) - Форум Hugo - Как включить форму PHP в HUGO - большое спасибо за это.

Настройка распознавания PHP в Hugo

[!info] Hugo может выводить контент в различных форматах, включая события календаря, форматах электронных книг, Google AMP и поисковых индексов JSON, а также в любом пользовательском текстовом формате. О настройке вашего сайта с использованием типов носителей и форматов вывода, а также где создавать шаблоны для ваших пользовательских выводов вы можете прочитать здесь

Хьюго не работает с PHP в конфигурации по умолчанию. Тип носителя и выходной формат должны быть настроены в config.toml следующим образом:

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

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

Типы медиа

С помощью mediaTypes распознаются тип и суффикс имен файлов.

Форматы вывода

В документации Hugo - Настройка форматов вывода - говорится isPlainText = true: «isPlainText использует парсер шаблонов простого текста Go для шаблонов». Вероятно, это означает, что Hugo просто пропускает все, что помечено PHP, через генератор как текст. Так что вы действительно должны знать, что делаете.

Далее baseName = “index”. Очевидно, что Leaf Bundle с index.md ожидается с этой конфигурацией. Leaf Bundle см. - Page Bundles - в документации Hugo. Для многоязычных веб-страниц основной язык хранится в файле index.md, а другой язык - в, например, index.en.md. Многоязычные веб-страницы формируются Hugo с использованием baseName.

Настройка выходного формата в `Front Matter`

Front Matter используется для добавления метаданных к вашему контенту.
Структура файлов Markdown выглядит следующим образом:

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

Файл index.md:

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

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

И английская версия index.en.md:

---
title: "Test PHP"
date: 2024-05-25T20:50:28+02:00
lastupdate: ""
draft: false
slug: test-php
translationKey: phptest
description: "Test PHP configuration in Hugo"
author: "Administrator"
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.

[!info] Для отладки отображения страницы в среде разработки Hugo, вы можете временно заменить значение outputs: PHP на outputs: html, но при этом PHP код работать не будет и будут применяться шаблоны html. Далее в статье будут рассмотрено применение шаблонов PHP, поэтому следует вернуть outputs: PHP и для разработки рекомендуется установить локальный сервер PHP.

Создание шаблонов для PHP

Теперь, если вы сохраните вышеуказанные данные и получите к ним доступ в браузере, вы получите страницу с ошибкой «Не найдено». Для PHP сначала необходимо создать соответствующие шаблоны.

Наша тема Hugo имеет базовый шаблон baseof.html. Шаблон используется для определения заголовка, заголовка, строки меню, блока контента и нижнего колонтитула. Шаблон интегрирован с блоком контента single.html. Чтобы PHP работал в Hugo, эти два шаблона необходимо скопировать и переименовать как файлы *.php в одном каталоге. Впоследствии файл baseof.php не будет изменен, а в single.php ниже будут изменения.

Тогда структура каталога layouts будет выглядеть так:

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

Если вы теперь вызовете Hugo Generator в браузере во время работы Hugo localhost:1313/php-test, вы получите белую пустую веб-страницу. Но это нормально, потому что Hugo не предоставляет PHP-сервер.

В статье «Использование веб-сервера PHP локально c Hugo» описано, как можно установить локальный веб-сервер, предоставляющий PHP, и подключить его к Hugo. Когда сервер MAMP работает, вы можете получить доступ к новой странице веб-сайта в своем браузере localhost:8888/php-test. Веб-сервер меняет строку URL-адреса при отображении на localhost:8888/php-test/index.php.

Ни одна строка PHP еще не написана. Далее можно приступить к вставке PHP кода.

Вставка PHP в шаблон Single.php.

Шаблон layouts/_default/single.php на данный момент выглядит так:

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

В {{ .Content }} текст «Lorem ipsum..» выводится из index.md. PHP теперь добавлен ниже:

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

Если вы снова зайдете на страницу, пользовательский агент вашего браузера будет отображаться под текстом «Lorem ipsum ..». Вызов его в другом браузере также создает другой пользовательский агент. Динамика во время выполнения теперь присутствует через PHP.

Кроме того, и это действительно замечательно, вы можете получить доступ к переменным Front Matter из файла контента формата Markdown - index.md. В приведенном выше примере в коде PHP используется переменная вступительной части - author. Спасибо за совет - frjo - очень полезно.

Вызов файла PHP в шаблоне single.php

В случае когда PHP-код будет сохранен в файле, переменные Front Matter Hugo больше не будут доступны. Шаблон single.php тогда будет выглядеть так:

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

  {{ readFile "static/php/php_test_01.php" | safeHTML }}
  {{ .Content }}

</section>
{{end}}

Исполняемый PHP-код теперь находится в файле php_test_01.php. Путь к каталогу:

webpractica
|__content
|__static
   |__php
      |__php_test_01.php

Ниже представлен PHP-код php_test_01.php:

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

Вызов PHP в shortcode

Короткие коды в Hugo позволяют выполнять код в файле Markdown. Это также можно использовать для PHP. В single.php удаляем вызов readFile.

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

Короткий код с именем файла php.html:

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

Использование шорткода в файле контента index.ru.md:

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

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

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

Доступ к переменным и параметрам Hugo из кода PHP в шорткоде

Создадим два вспомогательных шорткода. Шорткод layouts/shortcodes/param_page.html для получения значения из Front Matter:

{{- with index .Page.Params (.Get 0 ) -}}
{{- . -}}
{{- end -}}

и шорткод layouts/shortcodes/param_site.html для получения значения из файла настроек hugo.toml:

{{- with index .Page.Site.Params (.Get 0 ) -}}
{{- . -}}
{{- end -}}

Теперь осталось создать шорткод, которому мы передадим непосредственно сам PHP код, layouts/shortcodes/php.html:

<div {{ if ( .Get "class" ) }} class='{{ .Get "class" }}' {{ end }} {{ if ( .Get "title" ) }} title='{{ .Get "title" }}' {{ end }}>
  {{ .Inner | safeHTML }}
</div>

Использование:

{{% php class="php" title="Demo PHP" %}}
<?php
$mem_php_title='{{% param_page "title" %}}';
echo 'Title: ' . '{{% param_page "title" %}}';
echo '<br>Authors: ' . '{{% param_page "author" %}}';
echo '<br>Copyright: ' . '{{% param_site "copyright" %}}';
?>
{{% /php %}}

Заключение

Как только вы узнаете, как базовая структура PHP должна быть реализована в Hugo, остальное будет относительно просто. Большим преимуществом Hugo является безопасность статического веб-сайта. При углублении в PHP появляется еще одна потенциальная дыра в безопасности. По этой причине, использовать PHP в Hugo следует только в том случае, если нет абсолютно никакого другого способа.

[!NOTE] С примерами использования PHP с Hugo можно ознакомиться здесь

Использование PHP в Hugo