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

Question

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

[params.company]
name = "My Company"

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

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

我试过，但它实际上是打印上面的而不是插入变量。

Answer 1

1.前置方式

据我所知，不可能*放置变量 内 markdown 文件的内容，因为 MD 解析器会删除它们，但可以使用 front matter 上的自定义变量来实现。每个.md内容文件。 Hugo 引擎可以针对您在前台设置的任何字段。 Front Matter 字段也可以是唯一的。

在您的情况下，被调用以显示呈现的 .MD 文件的模板可以访问前端参数，您可以更改模板的行为(例如添加额外的类 <div> )，甚至可以直接从参数中提取内容。

例如，在我的 .md 上我有文件:

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

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

在模板中，我点击自定义参数 nointro这边走:

显示您的 Markdown 文件的父模板，该文件具有前端参数:

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

注意我不能在 {{ .Content }} 内放置变量，但我可以在它之外。

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

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

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.使用config.(toml/yaml/json)

现在，看看您的示例，“此站点由”运营几乎可以保证在更全局位置的自定义字段，例如， hugo/config.toml .如果我想添加一个 companyname进入我的 config ，我会这样做:
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必须来自静态文件夹中的一个地方，因为我想查看图像并且经常在火车上离线工作。

为了解决这个问题，我在所有模板(包括 Markdown 内容)中使用了两个自定义变量: _%%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 是最好的时代开始。

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

沿着这条路线，你应该添加多层捕获网，从简单的 Gulp/Grunt/npm 脚本步骤搜索你的占位符模式到通过 Husky 运行的预提交钩子(Hook)。在 npm 脚本上阻止提交任何具有特定模式的代码(例如， %%_ )。例如，在非常基本的级别，您会指示 Husky在允许以这种方式提交之前搜索任何内容:
package.json你的 repo :

"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。我在生产中使用了类似(更高级)的设置，没有任何问题。在正确的设置中，您应该创造性地查找任何输入错误的内容，包括: %_ , _% , %__ , __%等等。