如何在hugo的页面内容中使用模板参数

Posted 2023-03-07

【中文标题】如何在hugo的页面内容中使用模板参数

【英文标题】：How to use template parameters in page content in hugo

【发布时间】：2017-06-20 19:00:12

【问题描述】：

是否可以在使用 Hugo 的帖子内容中使用模板参数？例如。如果我有以下参数：

[params.company]
name = "My Company"

然后我可以在帖子的内容中做这样的事情吗？

This site,  .Site.BaseURL  is operated by  params.company.name 

我试过了，但它实际上是在打印上面的内容，而不是对变量进行插值。

【问题讨论】：

在普通的 go 模板中，你会写 .Params.company.name 并且你不会将变量本身命名为参数。我已经编辑了这个问题，以免让下一个读者感到困惑。

正如编辑审阅者正确指出的那样，只有您可以修复错误，因为我建议的编辑会更改您帖子的内容；我的意思是您应该将params.company 更改为company - 否则您将定义一个名为params 的参数，必须将其寻址为.Params.params.company.name。请注意第二个错误，引用应以.Params 开头，而不仅仅是params - 它不区分大小写，但习惯是使用大写P。

【参考方案1】：

1。前事方式

据我所知，不可能*将变量放在 markdown 文件的内容中，因为 MD 解析器会剥离它们，但可以使用 @987654321 上的自定义变量来做到这一点每个.md 内容文件的@。 Hugo 引擎可以针对你在前面设置的任何字段。前端字段也可以是唯一的。

在您的情况下，被调用以显示渲染的 .MD 文件的模板可以访问前端参数，您可以更改模板的行为（例如添加额外的 <div> 的类）甚至直接从参数。

例如，在我的.md 文件中：

---
title: "Post about the front matter"
<more key pairs>
nointro: false
---

nointro: true 键将使我的第一段成为正常大小。否则，如果 key 不存在或false，第一段将以更大的字体显示。从技术上讲，它在<div> 上添加了一个自定义类。

在模板中，我这样点击自定义参数nointro：

显示你的降价文件的父模板，它有前端参数：

<div class="article-body  if .Params.nointro  no_intro  end ">
 .Content 
</div><!-- .article-body -->

请注意，我不能将变量放在 .Content 中，但我可以在它之外。

对于后代，这是来自文件hugo/themes/highlighter/layouts/partials/blog-single-content.html 的内容的一部分，它是单个帖子内容的一部分。您可以按照自己喜欢的方式安排您的部分。

显然，这是布尔参数标志，但同样可以是您可以直接使用的内容：

MD 文件顶部：

---
title: "One of our clients"
<more key pairs>
companyname: "Code and Send Ltd"
---

Text content is put here.

然后，像这样引用它（使用IF 对空白值进行额外保险）：

Hugo 模板文件中的任何地方：

 if .Params.companyname  .Params.companyname  end 

---

2。使用配置。(toml/yaml/json)

现在，看看您的示例，“此站点由以下机构运营”几乎可以保证在更全球的位置使用自定义字段，例如 hugo/config.toml。如果我想在我的config 中添加一个companyname，我会这样做：

hugo/config.toml:

BaseURL = "_%%WWWPATH%%_"
languageCode = "en-uk"
title = "Code and Send"
pygmentsUseClasses = true
author = "Roy Reveltas"
theme = "Highlighter"
[params]
  companyname = ""

然后我会通过 .Site.Params.headercommentblock 在任何地方使用它。

我想如果您希望您的客户页面是static pages，那么单一位置可能不是最好的，您可能希望利用前端。否则，如果它是网站的页脚，这种方式会更好。或者，您甚至可以将这些数据放在 data files 上。

---

3。使用自定义占位符并通过 Gulp/npm 脚本替换

我说不可能*，但这是可能的，虽然非常规且风险更大。

当我的网站需要两个版本时，我进行了这样的设置：1) Prod 和 2) Dev。 Prod URL 来自两个地方：CDN 和我的服务器。 Dev 必须来自静态文件夹中的一个位置，因为我想查看图像并且经常在火车上离线工作。

为了解决这个问题，我在所有模板（包括降价内容）中使用了两个自定义变量：_%%WWWPATH%%_ 和 _%%CDNPATH%%_。顺便说一句，我自己想出了这个独特的模式，随意适应它。然后，我也把它放在hugo/config.toml 上：

hugo/config.toml：

BaseURL = "_%%WWWPATH%%_"

在 Hugo 用这些占位符愉快地生成网站后，我使用 Grunt 任务完成了 HTML：

咕噜声文件：

replace: 
  dev: 
    options: 
      patterns: [
        match: /_%%CDNPATH%%_+/g,
        replacement: function () 
          return 'http://127.0.0.1:1313/'
        
      , 
        match: /_%%WWWPATH%%_+/g,
        replacement: function () 
          return 'http://127.0.0.1:1313/'
        
      ...

对于后代，我推荐 Gulp 和/或 npm 脚本，我会避免使用 Grunt。这是我上面的旧代码示例，当时 Grunt 是最好的。

如果你走这条路，它比 Hugo params 风险更大，因为当你的占位符值丢失或发生任何其他错误并且占位符可能会溢出到生产代码中时，Hugo 不会出错。

走这条路，您应该添加多层捕获网，从简单的 Gulp/Grunt/npm 脚本步骤（搜索占位符模式）到通过 Husky 在 npm 脚本上运行的预提交钩子，以防止提交任何具有特定模式的代码（例如，%%_）。例如，在一个非常基本的级别上，您会指示 Husky 在允许以这种方式提交之前搜索任何内容：

package.json 你的仓库：

"scripts": 
  "no-spilled-placeholders": "echo \"\n\\033[0;93m* Checking for spilled placeholders:\\033[0m\"; grep -q -r \"%%_\" dist/ && echo \"Placeholders found! Stopping.\n\" && exit 1 || echo \"All OK.\n\"",
  "precommit": "npm run no-spilled-placeholders"
,

基本上，grep 用于模式 %%_ 并在找到时以错误代码退出。不要忘记转义代码，因为它是 JSON。我在生产中使用类似（更高级）的设置，没有任何问题。在正确的设置中，您应该创造性地查找任何错误输入的内容，包括：%_、_%、%__、__% 等等。

【讨论】：

嗯好吧，我想我可以添加一个令牌并在生成后用 sed 替换它。可惜这是我唯一的选择。还是谢谢。

此答案的第 1 点和第 2 点描述了在模板中使用变量，但不直接在帖子或页面的内容中。如果您可以使用 param 短代码，选项 3 会起作用，但完全是矫枉过正。

【参考方案2】：

markdown文件中不支持普通的Go模板，但shortcodes是：

< param "company.name" >

要访问任意其他 Go 模板值，请为其创建一个 custom shortcode 并从您的降价文件中调用它。

对于您的示例，您需要网站的 baseUrl，因此将其保存为 layouts/shortcodes/base_url.html：

 .Site.BaseURL 

并将其写入您的降价文件中：

+++
[company]
name = "My Company"
+++

This site, < base_url > is operated by < param "company.name" >

【讨论】：

请注意，Hugo 的文档暗示您应该能够使用$.Param 方法来处理access page fields in front matter content，但它似乎不起作用。

【参考方案3】：

还有短代码参数：< param "companyName" >：https://gohugo.io/content-management/shortcodes/#param