10  reveal幻灯片

10.1 简介

  • quarto项目架构：_quarto.yml参数设置

  • 实现html幻灯片与网站的整合：self-contain、pic文件的路径关系

  • 实现多种格式转换：html转pdf，以及pdf转pptx

  • 幻灯片样式与控制：header、footer

  • 幻灯片制作的实时预览：live preview

10.2 reveal.js

我的第一个quarto Reveal 幻灯片项目可以参看D:/github/master-pannel。

10.2.1 参数设定

直接对单个.qmd文件进行幻灯片输出设定：

---
title: "Test"
author: "Kevin Hu"
format: revealjs
---

图片调用关系：文件夹images必须与slide-test.qmd文件在同一目录下！

10.2.2 pdf转换与导出

方式1：手动转换pdf：需要借助chrome浏览器，然后CTRL+P，选择“无边距”，另存为pdf。

方式2：可以通过命令行方式，借助dacktape（参看github仓库https://github.com/astefanutti/decktape）进行pdf转换。根据dacktape介绍，它支持多种html slide格式的pdf导出。

方式3：使用R包函数进行转换renderthis::to_pdf("quarto_render.html")（参看github仓库）。

方式4：使用R包函数进行转换pagedown::chrome_print()

参考资料：

10.2.3 幻灯片区隔

幻灯片区隔：可以直接使用heading符号#（title slide）或##（section slide）进行区隔，或者使用水平规则符---进行区隔。当然，如果两种区隔符号规则进行混用，则会有不同的组合效应（初步测试来看，水平符号规则是要优先于标题符号规则）。pandoc对其中的具体规则--slide-level进行了说明（可参看）。

简单地说，quarto会根据slide的heading层级，自动判定slide-level的数量。默认情况情形下yaml参数为slide-level: 2，此时一级标题#将区分节（section），然后下面会紧跟着二级标题##（也即幻灯片标题），然后下面会紧跟幻灯片内容（content，如果此时有三级标题###，则也仅仅只是在本页幻灯片下显示的三级标题，而不会新建幻灯片）。

10.2.4 slide header

官方的支持比较简单，具体为：

---
format:
  revealjs:
    logo: logo.png
    footer: "Footer text"
---

github 项目（可关注参看）提供了一个extension以处理幻灯片header显示风格。当然，里面会涉及到lua语法、pandoc规则、css技术、甚至JavaScript语法等。

上述extension的使用方式：quarto add shafayetShafee/reveal-header。

A very simple Quarto filter extension for revealjs output format that provides

  • Support for adding header text like footer on slides, level1 (h1) and level2 (h2) slide titles on slide header,

  • Another YAML option to add a logo on top-left side of each slides. So by using this filter, it is possible to use two logos for each slides (One by using the default logo option which adds the logo on bottom-right corner and another one by using header-logo option provided by this filter.)

View the Demos of using this filter,

参考资源：

  • Adding a logo at top-left corner for all slides in quarto presentation (参看队长问答)

10.2.5 插件模板

官方文档 Creating Extensions https://quarto.org/docs/extensions/creating.html

10.3 学习资源

  • Customizing slides and documents using Quarto extensions 参看