将Netlify CMS与Hugo一起使用 - 使用画廊创建帖子

时间:2017-05-31 07:26:27

标签: gallery hugo netlify netlify-cms

我对Hugo和Netlify都很陌生,所以我可能只是做错了。

我已成功构建和部署了包含图库的网站,使用HugoGalleria插件,并部署到Netlify这一切都有效。但是,我想尝试使用Netlify CMS,并且我正在努力设置它以处理图库功能(它只是写文本帖子很好)

我不确定这是否是Netlify CMS的限制,或者我是否以不适合静态网站的方式做画廊。

为了实现雨果的画廊,我在每篇文章的前面做了以下几点:

+++
date = "2017-02-13T23:17:09+01:00"
summary = "In which I fail to RTFM, visit a Lamasery, and eat a lot of fruit."
tags = []
title = "China 2017: Day 11"

[[galleria]]
imgSrc = "../images/china/11/Lama-Temple.JPG"
imgTitle = "Hall In The Lama Temple"
imgDesc = "One of the main halls of the Lama Temple."

[[galleria]]
imgSrc = "../images/china/11/Octagonal-Hall.JPG"
imgTitle = "Octagonal Hall"
imgDesc = "An octagonal building just inside the entrance of the Lama Temple"

.
.
.
+++

然后在布局页面中:

  {{ if isset .Params "galleria" }}
  <div class="galleria">
  {{ range .Params.galleria}}
  <img src="{{ .imgSrc }}" alt="{{ .imgTitle }}" data-title="{{ .imgTitle }}" data-description="{{ .imgDesc }}">
  {{ end }}
  </div>
  {{ end }}

在Netlify CMS设置中,我尝试添加一个Object小部件:

 -  name: "galleria"
         label: "Gallery" 
         widget: "object"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

我还有两个问题:

(i)对象出现,但当然只有一次。我如何设置它以允许我输入尽可能多的图像?

(ii)在构建时,我收到了错误:ERROR 2017/05/28 22:37:20 Error while rendering "page": template: _default/single.html:23:15: executing "_default/single.html" at <.imgSrc>: can't evaluate field imgSrc in type interface {}

因此,即使尝试将一个图像(及相关数据)放入帖子中,我似乎也做错了。

1 个答案:

答案 0 :(得分:7)

将此放在这里以防万一其他人陷入困境。

在询问后,感谢Netlify Gitter频道中的可爱人物:

我应该使用列表小部件,而不是对象。 YAML现在看起来像这样:

-  name: "galleria"
         label: "Gallery" 
         widget: "list"
         optional: true
         fields:
          - {label: "Title", name: "imgTitle", widget: "string"}
          - {label: "Gallery Image", name: "imgSrc", widget: "image"}
          - {label: "Description", name: "imgDesc", widget: "string"}

这已删除了构建错误,并在CMS编辑器中为我提供了一个窗口小部件,我可以根据需要添加任意数量(或很少)的图像。

我现在遇到了一个跟进问题,即使用CMS创建的帖子是正确创建的,显示在repo中的右侧文件夹中,但是404。 。