Hugo集成reveal.js幻灯片

programming/web
目录

博客中嵌入幻灯片是一种不错的内容展现形式，本文介绍Hugo中集成reveal.js幻灯片的两种方式，同样也适用于其他幻灯片库。

总体思路

HTML版幻灯片是一个单独的网页，可以在页面中使用iframe加载网页。

如果幻灯片库支持内嵌，也可以不使用iframe，直接在文章中插入幻灯片内容。很遗憾，reveal.js的内嵌功能有问题，与内嵌相关的issue至今仍没有close。

集成在线幻灯片

如果幻灯片可以在线访问，就可以直接集成到文章中。

<iframe src="//slides.com/rocperilla/esmdiag/embed?style=dark" 
  width="576" height="420" scrolling="no" frameborder="0" 
  webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

效果如下面所示，注意slides.com可能需要科学上网。

生成幻灯片

如果不想使用在线服务，或者无法使用在线服务，也可以使用Hugo生成reveal.js网页。

我们需要为幻灯片单独指定一个content类型，并创建相关的模板文件。

Hugo的内容模板保存在layouts文件夹中，主题默认类型的内容模板保存在主题目录的_default文件夹，想要创建一种新类型的内容模板，需要在layouts下新建一个目录，例如创建slide目录，表示幻灯片类型，并在该目录下创建模板文件。

需要两种模板：

  • baseof.html：基本框架
  • single.html：单页内容模板

baseof.html中可以引用reveal.js的css和js文件。

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/reveal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/css/theme/moon.css">
</head>
<body class="body">
{{ block "main" . }}
	{{ with .Content }}
		{{ . }}
	{{ end }}
{{ end }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.8.0/js/reveal.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
	Reveal.initialize()
});
</script>
</body>
</html>

single.html中显示实际的幻灯片

{{ define "main" }}
<div class="reveal">
	{{ .Content }}
</div>
{{ end }}

在content中新建一个目录，例如slide，保存幻灯片类型的文档。创建文档时，需要在 front matter 中显式指定type和layout。

---
draft: true
type: slide
layout: single
---

<div class="slides">
	<section>
		<h1>2019 Q1总结</h1>
		<h3>perillaroc</h3>
	</section>
</div>

Hugo会自动将文档编译成HTML的幻灯片，可以使用iframe将幻灯片嵌入到文章中，例如

<iframe src="/slide/2019-04-26-2019-q1-summary/" width="800" height="600"></iframe>

显示效果如下面所示

集成slide.com创建的幻灯片

在slide.com中创建的幻灯片可以导出为HTML文件，Hugo同样支持HTML格式的内容文章，只需在HTML文件头加上 front matter。

---
title: "ESMDIAG"
type: slide
layout: single
---

集成显示效果如下所示