使用静态网站生成器 Hugo 有一些限制。使用 PHP,您可以构建服务器端动态。本文通过示例来讲解Hugo中的配置和不同类型的PHP调用。
本教程基于[博客文章](https://tekki-tipps.de/en/use-php-in-hugo/“在 Hugo 中使用 PHP”)(在撰写本文时资源不可用)和Christoph Lik (totoff) 的专业知识 - Hugo 论坛 - 如何在中包含 PHP 表单HUGO - 非常感谢。
在 Hugo 中设置 PHP 识别
[!信息] Hugo 可以输出多种格式的内容,包括日历事件、电子书格式、Google AMP 和 JSON 搜索索引,以及任何自定义文本格式。您可以阅读有关使用媒体类型和输出格式设置网站的信息,以及在哪里为自定义输出创建模板的信息此处
Hugo 在默认配置下不支持 PHP。媒体类型和输出格式必须在 config.toml
中配置,如下所示:
[mediaTypes]
[mediaTypes."application/x-php"]
suffixes = ["php"]
[outputFormats]
[outputFormats.PHP]
mediaType = "application/x-php"
isPlainText = true
baseName = "index"
媒体类型
mediaTypes
识别文件名类型和后缀。
######输出格式
Hugo 文档 - [配置输出格式](https://gohugo.io/templates/output-formats/#configure-output-formats Configure Output Formats") - 说 isPlainText = true
:“ isPlainText 使用 Go 的纯文本模板解析器作为模板。”这可能意味着 Hugo 只是将所有用 PHP 标记的内容作为文本通过生成器传递。所以你真的应该知道你在做什么。
接下来是baseName = “index”
。显然,此配置需要一个带有 index.md
的叶包。 叶包 请参阅 - [页面包](https://gohugo.io/content-management/page -bundles/“页面包”) - 在 Hugo 文档中。对于多语言网页,主要语言存储在 index.md
中,其他语言存储在 index.en.md
中。 Hugo 通过 baseName
考虑多语言网页。
在 Front Matter
中设置输出格式
Front Matter
用于向您的内容添加元数据。
Markdown 文件结构如下所示:
content
|__ php-test
|__ index.md
|__ index.en.md
File index.md:
---
title: "PHP Test"
date: 2024-05-25T20:50:28+02:00
lastupdate: ""
draft: false
slug:
translationKey: phptest
description: "PHP Configuration 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 运行 localhost:1313/php-test
时在浏览器中调用 Hugo Generator,您将得到一个白色的空网页。不过没关系,因为 Hugo 不提供 PHP 服务器。
文章 “在 Hugo 本地使用 PHP Web 服务器” 描述了如何可以安装一个提供PHP的本地Web服务器并将其连接到Hugo。当 MAMP 服务器运行时,您可以在浏览器 localhost:8888/php-test
中访问新网站页面。 Web 服务器在显示到 localhost:8888/php-test/index.php
时更改 URL 字符串。
尚未编写任何 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 呈现。
另外,这真的很棒,您可以从 Markdown
内容文件 - index.md
访问变量 Front Matter
。在上面的示例中,PHP 代码使用 Front Matter 变量 - author
。感谢您的提示 - [frjo](https://discourse.gohugo.io/t/how-to-include-a-php-form-in-hugo/32942/2“如何在 HUGO 中包含 PHP 表单” ) - 非常有用。
在 single.php 模板中调用 PHP 文件
当 PHP 代码保存在文件中时,Hugo 的 Front Matter
变量将不再可用。 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
T以下是 php_test_01.php
的 PHP 代码:
<?php
echo 'Your browser: <br>' . $_SERVER['HTTP_USER_AGENT'];
?>
在 短代码 中调用 PHP
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 Configuration 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 >}}
使用短代码从 PHP 代码访问 Hugo 变量和参数
让我们创建两个辅助短代码。短代码 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 %}}
结论
一旦你知道了如何在 Hugo 中实现基本的 PHP 结构,剩下的就相对容易了。 Hugo 的一大优势是静态网站的安全性。深入研究 PHP 会引入另一个潜在的安全漏洞。因此,如果没有其他方法,您应该只在 Hugo 中使用 PHP。
[!NOTE] 将 PHP 与 Hugo 结合使用的示例可以在此处