将Netlify CMS与Hugo结合使用-创建带有画廊的帖子

问题描述

我是Hugo和Netlify的新手，所以有可能我只是在做错此事.

I'm new to both Hugo and Netlify, so it's possible I'm simply doing this wrong.

我已经使用 Hugo ( Galleria 插件，然后部署到 Netlify 全部成功.但是，我想尝试使用 Netlify CMS ，并且正在努力设置它以处理画廊功能. (只写文字帖子就可以了)

I've successfully built and deployed a site with galleries, using Hugo, the Galleria plugin, and deploying to Netlify This has all worked. However, I want to try using the Netlify CMS, and am struggling to set it up to handle the gallery feature (it's doing fine for just writing a text post)

我不确定这是否是Netlify CMS的限制，或者我是否以不适合静态网站的方式来制作图库.

I'm not sure if this is a limitation of Netlify CMS, or if I'm doing galleries in a way that isn't suited to static sites.

要在Hugo中实现画廊，我在每篇文章的开头做以下事情:

To implement the gallery in Hugo, I am doing the following in the front matter of each post:

+++
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设置中，我尝试添加一个对象小部件:

The on the Netlify CMS setup I tried adding an Object widget:

 -  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)该对象显示出来，但是当然只有一次.我将如何设置它以允许我输入想要的尽可能多的图像?

(i) The object shows up, but of course only once. How would I set it up to allow me to enter as many images as I want?

(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 {}

(ii) On build, I'm getting an error: 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 {}

因此，即使试图将一张图像(及相关数据)放入帖子中，我似乎还是在做错事.

So it seems I'm doing something wrong even trying to get one image (and associated data) in to a post.

推荐答案

将其放在此处，以防其他人陷入困境.

Putting this here in case other people get stuck on this.

询问后，并感谢Netlify Gitter频道中可爱的人们:

After asking around, and thanks to the lovely people in the Netlify Gitter channel:

我应该使用列表窗口小部件，而不是对象.现在，YAML如下所示:

I should have used a list widget, rather than an object. The YAML now looks like this:

-  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编辑器中为我提供了一个小部件，可以在其中添加任意数量的图像.

This has removed the build error, and provides me a widget in the CMS editor where I can add as many (or few) images as I wish.

我现在遇到了一个后续问题，其中正确创建了使用CMS创建的帖子，这些帖子显示在存储库的右侧文件夹中，但显示为404. .

I have now hit a follow up problem, where posts created with the CMS are created correctly, appear in the right folders in the repo, but 404 . . .

这篇关于将Netlify CMS与Hugo结合使用-创建带有画廊的帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！