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

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

[params.company]
name = "My Company"

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

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

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

最佳答案

1.前置方式

据我所知，不可能*将变量放在 Markdown 文件的内容中，因为 MD 解析器会删除它们，但可以使用 0x251812212314314314314314314314314331331433133133133133133131313131323132313231313232313131333133个自定义变量的自定义变量Hugo 引擎可以针对您在前台设置的任何字段。 Front Matter 字段也可以是唯一的。

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

例如，在我的 <div> 文件中，我有:

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

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

在模板中，我以这种方式进入自定义参数 <div>:

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

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

请注意，我不能将变量放在 nointro 内，但我可以在它之外。

对于后代，这是来自文件 {{ .Content }} 的一部分内容，它是单个帖子内容的一部分。您可以按您喜欢的任何方式排列您的分音。

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

MD文件的顶部:

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

Text content is put here.

然后，像这样引用它(使用 hugo/themes/highlighter/layouts/partials/blog-single-content.html 为空白值提供额外保险):

Hugo 模板文件中的任何位置:

{{ if .Params.companyname }}{{ .Params.companyname }}{{ end }}

2.使用config.(toml/yaml/json)

现在，看看您的示例，“此站点由”运营几乎可以保证在更全局位置的自定义字段，例如 IF 。如果我想将 hugo/config.toml 添加到我的 companyname 中，我会这样做:
config:

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

然后我会通过 hugo/config.toml 在任何地方使用它。

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

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

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

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

为了解决这个问题，我在所有模板(包括 Markdown 内容)中使用了两个自定义变量: Dev 和 _%%WWWPATH%%_ 。顺便说一下，这个独特的模式是我自己想出来的，你可以随意调整它。然后，我也把它放在 _%%CDNPATH%%_ 上:
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 hugo/config.toml 风险更大，因为当你的占位符值丢失或发生任何其他错误并且占位符可能会溢出到生产代码中时，Hugo 不会出错。

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

您的 repo 的 Husky:

"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"
},

基本上，模式 package.json 的 grep 并退出，如果找到错误代码。不要忘记对代码进行转义，因为它是 JSON。我在生产中使用了类似(更高级)的设置，没有任何问题。在正确的设置中，您应该创造性地寻找任何输入错误的内容，包括: %%_ 、 %_ 、 _% 、 %__ 等等

关于hugo - 如何在hugo中的页面内容中使用模板参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42023687/