问题描述
我目前正在为 R 建模研讨会准备 html 幻灯片,为此我使用了用于 R 的很棒的 xaringan 包。它基于 remark.js。与 ioslides 和 slidy 相比,它确实更符合我的期望。我非常兴奋!我错过的一项功能是可滚动的“长幻灯片”。在这里,我当然将“幻灯片”范式留给了幻灯片和普通网页之间的混合,但我发现这对于解释复杂的内容和代码在教学上很有吸引力。这种样式与 slidy 配合得很好,我还发现了一些关于如何在 xaringan 中启用可滚动代码的提示。
这里我使用以下 CSS(在 related post at SO 中找到):
.scrollable {
height: 80%;
overflow-y: auto;
}
然后在 RMarkdown 代码块中,例如:
.scrollable[
```{r}
foo <- function() {
cat("nothing\n")
}
foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
## some comments ...
# ...
foo()
```
]
长幻灯片
这里我指的是可以向下滚动但仍嵌入幻灯片的网页。
代码示例
- 代码:https://github.com/dynamic-R/hacking-limnology/blob/main/docs/test.Rmd
- 演示:https://dynamic-r.github.io/hacking-limnology/test.html#3
它部分有效,但我还没有完全满意:
- 我更喜欢真正的“长幻灯片”而不是可滚动的文本。
- 与其用
.scrollable[]
封闭部分,我更喜欢完整幻灯片的类 - 它仅适用于 Chrome、Edge(以及 RStudio 的 Infinite Moon Reader),但不适用于 Firefox。 编辑:绝对
heigt
适用于 Firefox(感谢@Waldi 的评论)
CSS 方法取自 a related post at SO,其中还包含指向其他方法的链接(部分使用额外的 JavaScript),但我无法让它们运行。
问题
任何想法,如何:
其中“具有可滚动内容的幻灯片类”或“长幻灯片”类可以定义为:
---
class: scrollable-slide
类似于:
---
layout: false
class: inverse,middle,center
在 https://github.com/yihui/xaringan/wiki/Slide-layouts 中找到
解决方法
remark.js
没有考虑到可滚动的幻灯片,这意味着如果不向 remark.js
添加主要功能或破坏某些 remark.js
功能,就不可能实现滚动。>
如果您愿意破坏某些功能,我能想到的在可滚动幻灯片中进行破解的最简单方法是更改 y-overflow
类的 .remark-slide-scaler
。我们所要做的就是添加以下 CSS:
.remark-slide-scaler {
overflow-y: auto;
}
要包含此 CSS,您可以将其写入文件,例如 scrollable.css
,并将其包含在 xaringan
配置块中,如下所示:
title: "Scrollable slides"
output:
xaringan::moon_reader:
css: ["default","scrollable.css"]
此 CSS 将为所有内容比幻灯片本身长的幻灯片添加滚动条。
破坏的东西
滚动幻灯片
默认情况下,remark.js
允许您从一张幻灯片滚动到下一张或上一张。但是,当我们在幻灯片上有滚动条时,我们希望禁用此行为。
解决此问题的正确方法是在 remark.js
中编写实现一些功能,在适当的时间禁用和启用默认滚动行为。
一个简单的方法是简单地禁用滚动幻灯片。我们可以通过将 scroll: false
添加到 navigation
配置的 nature
块中的 xaringan
块来实现:
title: "Scrollable slides"
output:
xaringan::moon_reader:
css: ["default","scrollable.css"]
nature:
navigation:
# Disable scrolling through slides to
# allow scrolling in slides
scroll: false
页码
页码位于幻灯片框架的底部,但贴在幻灯片内容的底部。这意味着当您向下滚动可滚动幻灯片时,页码也会向上滚动。
要正确解决此问题,我们必须更改 remark.js
呈现内容的方式。一个常见的解决方案是像 this 这样的东西,它涉及将主要内容放在与页脚不同的容器中。此页脚将包含页码。
一个简单的解决方案是隐藏页码。我们可以通过在 scrollable.css
中添加以下内容来实现:
.remark-slide-number {
display: none;
}
克隆
remark.js
有一个称为“克隆”的功能,它可以让您打开多个幻灯片实例,但都同步到同一页面。因此,当一个实例转到下一张幻灯片时,所有其他幻灯片也会这样做。不幸的是,对于我们的滚动幻灯片,这并不像预期的那样工作。 remark.js
无法记录页面向下滚动的距离,因此它无法将其传达给其克隆。这意味着在一个实例上,您可能一直向下滚动,但其他实例仍将停留在内容的顶部。一个简单的解决方案就是不使用此功能。
打印(未测试)
我还没有测试过这个,但我可以想象滚动幻灯片会打印出乱七八糟的东西。内容将被截断,或者长页面将按其整个长度打印,可能与页面上的其他内容重叠。一个简单的解决方案是不打印幻灯片。
可能有更多功能,例如打印,可能会或可能不会因滚动幻灯片中的黑客攻击而中断。
结论
总而言之,如果您能够忍受有限的功能,您可以通过首先创建一个文件 scrollable.css
来破解滚动幻灯片,其中包含:
.remark-slide-scaler {
overflow-y: auto;
}
.remark-slide-number {
display: none;
}
其次在您的 scrollable.css
配置中包含 scroll: false
和 xaringan
。我在下面包含了一个示例幻灯片来说明。
---
title: "Scrollable slides"
output:
xaringan::moon_reader:
css: ["default","scrollable.css"]
nature:
navigation:
# Disable scrolling through slides to
# allow scrolling in slides
scroll: false
---
class: center
# First a normal short slide
Some content here
---
class: scrollable-slide
# A
# long
# slide
# that
# requires
# scrolling
# on
# my
# system
---
# End slide
其他选项
如果您没有那么多需要很长的幻灯片,您可以选择制作讲义。如果你用 rmarkdown
来做这个,它会使讲义的源文件与幻灯片的源文件非常相似,允许导出为不同的格式(如 html),并允许你使用所有 { {1}} 的功能。
另一种选择,如果您真的需要这个并且可以很好地说明为什么这对其他人也有用,那么您可以在 remark.js
{{3 }} 用于可滚动幻灯片。