Рендеринг PHP-шаблона при сборке сайта в Eleventy

Первый вопрос, который может задать читатель:

А зачем это нужно?

Предположим, что Jamstack сайт хостится на обычном виртуальном хостинге с поддержкой PHP. В таком случае нет смысла обрабатывать форму обратной связи или какую-либо другую форму, размещённую на сайте, при помощи стороннего сервиса, вроде Basin или Getform. Сторонние сервисы требуют оплаты, а бесплатные тарифы, при их наличии, имеют жёсткие лимиты - 50 или, в лучшем случае, 100 сообщений в месяц.

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

А зачем рендерить PHP?

Можно обойтись и статическим PHP-кодом, который, в случае необходимости, сможет поправить только разработчик. Но мы же говорим о Jamstack сайтах, которые давно вышли за рамки статических. Почему бы не дать возможность заказчику сайта, в процессе его эксплуатации, самостоятельно настраивать Email-адреса получателей уведомлений при отправке формы, имя отправителя (название сайта/компании), Email-адрес отправителя (Email-адрес сайта/компании), заголовок сообщения и др.

Вот фрагмент шаблона PHP-кода с параметрами, получаемыми из настроек сайта:

// feedback.php
<?php
...
$from = "{{ site.email }}";
$reply = $_POST["email"];
$to = "{{ site.form.recipients }}";
...
$headers = [
  "From" => "{{ site.name }} <${from}>",
  "Reply-To" => $reply,
  "Content-type" => "text/html"
];
...
mail($to, $subject, $body, $headers);
...
?>

Как мы видим, некоторые параметры заданы в виде переменных шаблона в двойных фигурных скобках {{ ... }} и должны быть заменены на соответствующие значения из настроек сайта в процессе его сборки. Осталось только настроить Eleventy так, чтобы он рендерил шаблон PHP-файла вместе с другими шаблонами. А это именно то, ради чего мы здесь собрались.

Первым делом, в самом начале конфигурационного файла Eleventy, подключаем модуль Nunjuckjs, чтобы в дальнейшем можно было вызвать его метод renderString для рендеринга:

// .eleventy.js
const nunjucks = require("nunjucks");

Инсталлировать модуль в проект нет необходимости, т.к. он уже включён в Eleventy.

Далее, в теле module.exports конфигурационного файла Eleventy добавляем расширение .php для обработки PHP-файлов в процессе сборки и указываем как именно их обрабатывать:

// .eleventy.js
module.exports = (config) => {
  ...
  config.addExtension("php", {
    outputFileExtension: "php",
    compile: (input) => {
      return (data) => {
        return nunjucks.renderString(input, data);
      };
    }
  });
  ...
};

И последнее - добавляем расширение .php в массив разрешённых расширений шаблонов, наряду с другими используемыми форматами шаблонов, в объект, который возвращает module.exports в конфигурационном файле Eleventy:

// .eleventy.js
module.exports = (config) => {
  ...
  return {
    templateFormats: ["md", "njk", ... , "php"],
    ...
  }
};

При этом, не забываем, что в конфигурационном файле Eleventy может быть только один module.exports.

На этом настройка завершена и все файлы с расширением .php, расположенные в папке исходников проекта Eleventy, будут рендериться вместе с другими шаблонами.

В статье описан лишь один из возможных сценариев применения PHP в реализации функционала Jamstack сайта, реальные задачи и требования могут предложить и другие сценарии. Кроме того, аналогичным образом можно подключить нестандартный исходник любого формата в качестве шаблона для рендеринга.