【问题标题】:Using Netlify CMS with Hugo - creating posts with galleries将 Netlify CMS 与 Hugo 一起使用 - 创建带有画廊的帖子
【发布时间】:2017-10-31 21:03:24
【问题描述】:

我对 Hugo 和 Netlify 都是新手,所以我可能只是做错了。

我已经使用HugoGalleria 插件成功地构建和部署了一个带有画廊的站点,并部署到Netlify 这一切都奏效了。但是,我想尝试使用Netlify CMS,并且正在努力将其设置为处理图库功能(仅写一篇文章就可以了)

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

为了在 Hugo 中实现图库,我在每篇文章的开头都做了以下操作:

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

 -  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 &lt;.imgSrc&gt;: can't evaluate field imgSrc in type interface {}

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

【问题讨论】:

    标签: gallery hugo netlify netlify-cms


    【解决方案1】:

    把它放在这里以防其他人被卡住。

    四处打听后,感谢 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 。 . .

    【讨论】:

    • 您的第二个问题得到答案了吗?听起来这是由于您的 Hugo 主题未包含在子模块中造成的。如果未正确包含它,则 buildbot 将找不到它,并且不会构建页面。您可以通过从主题文件夹中删除 .git 文件夹来解决此问题,或者您可以include it using git-submodule。 (由于这是主要问题的次要问题,我只是链接到一些说明,而不是在此评论中写出来。)
    • 404 归结为开发人员错误 - 当站点 url 设置为我的正确域时,在 netlify 域上进行测试时,baseURL(显然)不起作用
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-30
    • 1970-01-01
    相关资源
    最近更新 更多