将 Netlify CMS 与 Hugo 结合使用 - 通过图库创建帖子

2024-02-06

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

我已经成功构建并部署了一个带有画廊的网站,使用Hugo https://hugodocs.info/, the Galleria https://galleria.io/插件,并部署到Netlify https://www.netlify.com/这一切都奏效了。但是,我想尝试使用网络内容管理系统 https://www.netlifycms.org/,并且正在努力将其设置为处理画廊功能(它对于仅编写文本帖子来说效果很好)

我不确定这是否是 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 <.imgSrc>: can't evaluate field imgSrc in type interface {}

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


把它放在这里以防其他人陷入困境。

经过询问,并感谢 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 创建的帖子已正确创建,出现在存储库的正确文件夹中,但出现 404 。 。 。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 Netlify CMS 与 Hugo 结合使用 - 通过图库创建帖子 的相关文章

随机推荐

  • 在 GitHub for Windows 中恢复此提交和回滚此提交是什么意思?

    Windows 版 Github 具有这两个命令 描述如下 revert this commit 创建一个新的提交来恢复此提交的更改 rollback this commit 回滚此提交 将在此提交和以后提交中所做的所有更改保留在工作目录中
  • 确定事件之外的鼠标位置(使用 jQuery)?

    我需要使用 最好是 jQuery 来获取绝对鼠标位置 坐标 X 和 Y 如本教程 http docs jquery com Tutorials Mouse Position但在任何 JavaScript 事件之外 谢谢 不可能 但是 您可以
  • 重复的元素具有相同的展开变量

    你好 我有一些来自 vuetify 的代码 https vuetifyjs com en components cards custom actions https vuetifyjs com en components cards cus
  • C 运算符优先级,a++ && b++ || 中的逻辑运算符与一元运算符++c

    在下面的代码中 int a 1 b 2 c 3 d d a b c printf d n c 输出将为 3 我得到它或评估第一个条件 将其视为 1 然后不关心其他条件 但在 c 中 一元运算符比逻辑运算符具有更高的优先级 就像在数学中一样
  • Matplotlib 图未因数据更改而更新

    我正在使用实现图像查看器matplotlib 这个想法是对图像所做的更改 例如过滤器应用程序 将自动更新 我创建了一个图来显示初始图像 并使用添加了一个按钮pyQt更新数据 数据does改变 我检查过 但图没有 However 如果在我按下
  • Express 路由器 CRUD API。无法删除

    嗯 我正在阅读 MEAN Machine 一书并遵循其中的示例 我试图找出我的代码有什么问题 这样它就不会发出任何删除请求 GET PUT 和 POST 正常工作 我的 server js 上有这段代码 app all function r
  • 使用随机生成的数字创建临时表名称

    到目前为止我有这个代码 declare random int upper int lower int rndtb varchar 20 set lower 1 set upper 999 select random ROUND upper
  • 如何在 Silverlight 中将图像环绕圆柱体

    我正在尝试用 silverlight 将图像包裹在圆柱体周围 我在谷歌上查了很多 但没有找到任何东西 据我所知 这可以通过像素着色器来完成 但不知道如何实现 是否可以 Thanks 它不是完全包裹在圆柱体上 但您将得到一个起始想法 示例 代
  • 在.net core中对mongodb存储引用关系进行建模

    我是 mongo 的新手 在处理引用关系并在 net core 中对其进行建模时 我正在寻找一些有关最佳实践的指导 是的 这就是通常的 加入 mongodb 问题 但我还没有找到一个好的答案 为了简单起见 假设我有一个简单的 API 正在使
  • Laravel 5.3 db:seed 命令根本不起作用

    我所做的一切都是按书本进行的 安装了新的 Laravel 5 3 9 应用程序 我所有的非新应用程序都会产生相同的错误 run php artisan make auth 为新表创建迁移 php artisan make migration
  • 这是否是一个错过的优化机会

    我已经发布this https stackoverflow com a 59290242 10147399回答 代码 include
  • 如何使用反应钩子动态添加“refs”?

    所以我有一个数据数组 并且我正在使用该数据生成一个组件列表 我想在每个生成的元素上有一个引用来计算高度 我知道如何使用 Class 组件来做到这一点 但我想使用 React Hooks 来做到这一点 这是一个解释我想要做什么的示例 impo
  • 我们如何获取数据绑定以使用保存的实例状态?

    TL DR 如果与数据绑定一起使用的布局具有EditText 并且有一个绑定表达式android text 绑定表达式会覆盖保存的实例状态值 即使我们没有显式触发绑定评估 用户在配置更改之前输入的内容将被删除 我们如何解决这个问题 以便在配
  • 禁用根记录器的输出

    我在名为 logger py 的文件中有以下代码 import logging format asctime s name 30s levelname 8s message s logging basicConfig level loggi
  • Python底图:使用shadedrelief、bluemarble或etopo时出错(错误的经度格式?)

    我想绘制一张以太平洋为中心的南半球地图 并使用 python matplotlib 底图在其上绘制一些内容 一切工作正常 除非我尝试使用底图例程阴影浮雕 bluemarble 或 etopo 绘制背景图像 代码 没有我想在地图上绘制的内容
  • Visual Studio ALT 代码符号

    我正在寻找 Visual Studio 2010 中的 ALT 代码符号列表 具体来说 我正在寻找 PI 符号 我查了一下 发现应该是ALT 227或者ALT 960 我在 VS 中尝试过 但提供的符号不同 因此我在这里问这个问题 非常感谢
  • Java add() 方法约定

    所以 我通常是一名 ruby 程序员 所以我对 Java 约定的掌握充其量是不稳定的 如果我有一个类 A 并且想要定义一个方法来添加该类的两个实例 那么行为和返回类型的约定是什么 public class A public NotSureW
  • jQuery DataTables 搜索列是一个复选框

    我在用jQuery DataTables 单独列搜索 https datatables net examples api multi filter select html 在我的一张表和我的一列上包含复选框 HTML table class
  • 如何在 Identity Server 4 中配置“密钥材料”以使用 SQL、KeyVault 或任何其他系统?

    ID4 的源代码要求我们 配置密钥材料 以在生产中使用 我使用以下 Powershell 脚本创建适合 Identity Server 4 的密钥 not necessary for this question but others may
  • 将 Netlify CMS 与 Hugo 结合使用 - 通过图库创建帖子

    我对 Hugo 和 Netlify 都很陌生 所以我可能只是做错了 我已经成功构建并部署了一个带有画廊的网站 使用Hugo https hugodocs info the Galleria https galleria io 插件 并部署到