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

时间:2017-02-03 11:52:54

标签: hugo

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

[params.company]
name = "My Company"

我可以在帖子的内容中做这样的事吗?

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

我已经尝试了,但它实际上是打印上面而不是内插变量。

3 个答案:

答案 0 :(得分:5)

1。前面的方式

据我所知,将变量置于标记文件的内容中是不可能的,因为MD解析器会剥离它们,但它&# 39;可以使用每个.md内容文件的front matter上的自定义变量来执行此操作。 Hugo引擎可以定位您在前面设置的任何字段。前面的事物领域也可以是独一无二的。

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

例如,在我的.md个文件中:

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

nointro: true会使我的第一段变为正常大小。否则,如果密钥不存在或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。使用config。(toml / yaml / json)

现在,看看你的例子,&#34;这个网站由&#34;几乎可以在更全球的位置保证自定义字段,例如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)DevProd网址来自两个地方:CDN和我的服务器。 Dev必须来自静态文件夹中的一个位置,因为我想看到图像并且经常在火车上离线工作。

为了解决这个问题,我在所有模板中使用了两个自定义变量(包括降价内容):_%%WWWPATH%%__%%CDNPATH%%_。顺便提一下,我想出了这种独特的图案,随意适应它。然后,我也把它放在hugo/config.toml上:

hugo/config.toml

BaseURL = "_%%WWWPATH%%_"

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

grunt文件:

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

答案 1 :(得分:3)

还有一个简码参数:{{< param "companyName" >}}https://gohugo.io/content-management/shortcodes/#param

答案 2 :(得分:0)

降价文件不支持Normal Go模板,但是shortcodes是:

{{< param "company.name" >}}

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

例如,您需要网站的baseUrl,因此将其另存为layouts/shortcodes/base_url.html

{{ .Site.BaseURL }}

并将其写入您的markdown文件中:

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

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