增量幻灯片不适用于两列布局
Posted
技术标签:
【中文标题】增量幻灯片不适用于两列布局【英文标题】：Incremental slides do not work with a two-column layout 【发布时间】：2018-03-06 14:11:39 【问题描述】：我正在使用 xaringan 包为 r 进行演示：
https://cran.r-project.org/web/packages/xaringan/index.html
它建立在remark.js 库之上。
我想使用两列布局，即原始 remark.js 预告片中的类似内容：
https://remarkjs.com/
原始css 规则（嵌入在演示文稿的源代码中）通过以下方式指定布局：
/* Two-column layout */
.left-column
color: #777;
width: 20%;
height: 92%;
float: left;
.left-column h2:last-of-type, .left-column h3:last-child
color: #000;
.right-column
width: 75%;
float: right;
padding-top: 1em;
问题是当您在其中一列中使用-- 时，它无法按预期工作 - 它应该触发增量幻灯片...
这确实有效，项目符号会逐渐显示：
# Slide 1
- hello
--
- again
---
# Slide 2
- and one
--
- more
但在一列中它不起作用：
.left-column[
# Column 1
- hello
--
- again]
.right-column[
# Column 2
- and one
--
- more]
除此之外，在原来的remark.jscss规范中，右栏额外除以
.pull-left
float: left;
width: 47%;
.pull-right
float: right;
width: 47%;
.pull-right ~ p
clear: both;
再一次，-- 不再起作用，.pull-right/.pull-left 类中的增量步骤或它们之间的“之间”，即首先显示 .pull-left 部分，而不是 .pull-right部分。
这些问题确实出现在原始的remark.js 中，因此也出现在xaringan 包中。
毕竟，在右栏中至少有增量幻灯片会很棒。有谁知道如何解决这个问题？如何修改 css 来完成这个？
编辑：
xaringan 中的整个标记，即在 Rstudio 中用rmarkdown 编写，然后“编织”为：
---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
xaringan::moon_reader:
css: ["default", "custom.css"]
nature:
highlightStyle: dracula
highlightLines: true
countIncrementalSlides: false
---
```r setup, include=FALSE
options(htmltools.dir.version = FALSE)
```
.left-column[
## Left column title
]
.right-column[
A whole sentence
- one `Markdown` bullet point
--
- a second bullet point
]
在文件custom.css 中只有左右列类没有别的，这些是从https://remarkjs.com/ 的预告演示中复制的
【问题讨论】：
我们需要查看您的标记来说明 CSS 为何不起作用。 【参考方案1】：您不能使用两个破折号-- 逐步显示不完整的元素。当您使用-- 拆分段落或列表时，子集仍将是完整且有效的元素。例如，
- One
- Two
--
- Three
- One 和 - Two 项仍然构成完整且有效的列表。但是，当您拆分 .left-column[] 之类的列时：
.left-column[
One paragraph.
--
Another paragraph.
]
子集不再是有效的 Markdown：两者都不是
.left-column[
One paragraph.
也没有
Another paragraph.
]
是有效的 Markdown，因此它们不能被渲染。基本上，当您使用-- 构建增量幻灯片时，您必须问自己到目前为止是否所有文本都是有效的 Markdown。
在您的情况下，您必须手动重复某些元素来构建增量幻灯片，这当然效率不高，但这是唯一的方法。如果你研究https://remarkjs.com的来源，你会看到remark.js的作者正是这样做的，例如，
---
layout: false
.left-column[
## What is it?
]
.right-column[
A simple, in-browser, Markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:
- Markdown formatting, with smart extensions
....
]
---
.left-column[
## What is it?
## Why use it?
]
.right-column[
If your ideal slideshow creation workflow contains any of the following steps:
- Just write what's on your mind
....
]
---
.left-column[
## What is it?
## Why use it?
]
.right-column[
As the slideshow is expressed using Markdown, you may:
- Focus on the content, expressing yourself in next to plain text not worrying what flashy graphics and disturbing effects to put where
....
]
所以即使remark.js的作者在这种情况下也没有魔法，我想你的问题没有聪明的解决方案。
【讨论】：
【参考方案2】：这有点小技巧，但您可以使用 remarkjs 的模板功能和 --。
-- 告诉 remarkjs 使用上一张幻灯片作为模板。在模板中，您可以使用content 来告知将下一个内容放在哪里。如果你不这样做，它会附加在模板的末尾。这就是为什么-- 用于增量幻灯片。
正如其他答案中所解释的，您不能在 .class[] 调用中使用 --，因为它不是模板。但是，您可以在.class[] 中使用content，以便在使用-- 之后将下一个文本放入您之前的@987654330@ 中。
这有点小题大做，因为我认为它不适用于复杂的增量逻辑。
---
title: "Title"
author: "Myself"
date: "`r format(Sys.Date(), '%d.%m.%Y')`"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightStyle: dracula
highlightLines: true
countIncrementalSlides: false
---
```r setup, include=FALSE
options(htmltools.dir.version = FALSE)
```
.left-column[
## Left column title
]
.right-column[
A whole sentence
+ one `Markdown` bullet point
content
]
--
+ a second bullet point
content
--
+ a third bullet point
content
--
+ a sub level
在上一个示例中，右列的文本逐渐出现。
【讨论】：
谢谢，这是真正的进步！但我有一个问题：如何寻找第三个要点？我可以看到它适用于第二个，但是如何再去一个呢？ 您继续使用相同的机制。我用一个例子编辑了答案 不错。非常感谢。它不起作用我猜对于更复杂的事情，比如当你有后续的子弹点在右边更上一层时（这似乎不被尊重，所有点都保持在同一水平），但由于努力，我将其标记为已回答而且因为我认为不会有适用于所有情况的简单补丁......！ 它也可以与子级别一起使用，但在代码的末尾可能难以理解，因为您需要注意空格和换行符。我编辑了答案。顺便说一句，你接受了另一个答案而不是这个...... Uuups...改变了！ :-)以上是关于增量幻灯片不适用于两列布局的主要内容，如果未能解决你的问题，请参考以下文章