经过与小助手的几次对答,总算实现在md文件中加入视频。
1.首先根据小助手给的意见,在md文件中直接编写html标签<video>,但没有用处,网站上没有内容。
2.然后又根据建议,转换视频格式为mp4,因为苹果默认视频格式是mov,说是浏览器不太支持,仍然不行。
3.最后几个来回,终于看到gpt给出的一个可能原因,
Hugo安全策略(Goldmark Safe Mode)
Hugo 0.60版本之后,默认启用了 Goldmark Safe Mode,禁止了 Markdown 文件中某些 HTML 标签,比如 <script>、<iframe>、<video>。
解决办法:
用 Hugo 的 Shortcode(推荐)
可以自定义个 Hugo Shortcode,例如:
在你的 Hugo 项目的 layouts/shortcodes/ 目录下,创建一个 video.html 文件,内容:
<video src="{{ .Get "src" }}" controls style="max-width: 100%;" preload="metadata"></video>
然后在你的 .md 文件里这样写:
{{< video src="https://res.cloudinary.com/你的cloud_name/video/upload/f_auto,q_auto/你的public_id" >}}
这样更安全、统一、且支持 Hugo 各种主题。
学习资料:
问题:.md 文件里按下面写会显示无法加载视频界面,而不是我期望的示例代码?
{{< video src="https://res.cloudinary.com/你的cloud_name/video/upload/f_auto,q_auto/你的public_id" >}}
gpt:明白了!你只是想在 .md 文件里展示你写的代码示例,不是真正插入视频对吧?
而且你用的是 Markdown 的代码块标记(就是三个反引号),但是实际上 Hugo 把它当成真正的 Shortcode 执行了,所以它去加载了 <video>,结果又找不到视频,才出错。
为什么会这样?
因为 Hugo 默认 .md 文件里的{{<…>}}是Shortcode语法,即使你包在 Markdown 代码块里,它还是会解析执行,不会单纯地显示出来。
正确解决方法
要让 Hugo 只显示文字内容而不是执行 Shortcode,有两种做法:
方法一:用 {{< >}} 包裹
比如像上面写的一样
注意,加了/* */,Hugo 就不会执行里面的 shortcode,只是把它当普通文本显示。
方法二:使用 Hugo 的 HTML 实体编码(最通用)
将 { 替换为 {, < 替换为 <,> 替换为 >,} 替换为 },这样 Hugo 根本识别不了 shortcode。
比如这样写:
{{< video src=“https://res.cloudinary.com/你的cloud_name/video/upload/f_auto,q_auto/你的public_id” >}}
这是最安全、最兼容 Hugo 所有版本的做法。