增量幻灯片不适用于两列布局 [英] Incremental slides do not work with a two-column layout

问题描述

我正在为 r 使用 xaringan 软件包进行演示：

I am using the xaringan package for r for a presentation:

https://cran.r-project.org /web/packages/xaringan/index.html

，它基于 remark.js 库。

我想使用两列布局，即原始 remark.js 预告片中的类似内容：

I would like to use a two column layout, i.e. something like this from the original remark.js teaser presentation:

https://remarkjs.com/

其中，原始 css 规则（嵌入在演示文稿的源代码中）通过以下方式指定布局：

where the original css rules (which are embedded in the source of the presentation) specifies the layout via:

/* 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;
}

问题在于，当您使用-在其中一列中，它没有按预期方式工作-应该触发增量滑动...

The problem is that when you use -- in one of the columns, it does not work as expected - it should trigger an incremental slide...

这确实有效，项目符号点是

This does work, bullet points are displayed incrementally:

# Slide 1
- hello
--
- again

---
# Slide 2
- and one
--
- more

但在某列中不起作用：

.left-column[
# Column 1
- hello
--
- again]

.right-column[
# Column 2
- and one
--
- more]

下一步，在原始的 remark.js css 规范中，右列除以

Next to that, in the original remark.js css specification, the right column is additionally divided by

.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 软件包中。

And again, the -- does not work anymore, neither with incremental steps within the .pull-right/.pull-left classes nor "between" them, i.e. to display the .pull-left part first, than the .pull-right part. These problems do arise within the original remark.js and therefore also in the xaringan package.

毕竟，在右侧栏中至少包含递增的幻灯片会很棒。有谁知道如何解决这个问题？我该如何修改CSS来完成此操作？

After all, it would be great to have at least incremental slides within the right column. Does anyone have any idea how to fix this? How can I modify the css to accomplish this?

<$ c $内的整个标记c> xaringan ，即在Rstudio中用 rmarkdown 编写，然后编织为：

The whole markup within xaringan, i.e. as written in rmarkdown in Rstudio and then "knitted" is:

---
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 左右列类别无其他，将它们复制为f从 https://remarkjs.com/

Within the file custom.css there is only the left and right column classes nothing else, and these are copied from the teaser presentation from https://remarkjs.com/

推荐答案

虽然有点hack，但是您可以将remarkjs的模板功能与-结合使用。

It is a bit of a hack but you could use the template feature of remarkjs coupled with --.

-告诉remarkjs使用上一张幻灯片作为模板。在模板中，您可以使用 {{content}} 来指示下一个内容的放置位置。如果不这样做，它会附加在模板末尾。这就是为什么-用于增量幻灯片的原因。

-- tells remarkjs to use the previous slide as a template. In a template you could use {{content}} to tell where to put the next content. If you don't, it is append at the end of the template. it is why -- is used for incremental slide.

如其他答案所述，您不能在 .class内使用-。 ] 调用，因为它不是模板。但是，您可以在 .class [] 中使用 {{content}} ，以便使用 -之后，会将下一个文本放入您之前的 .class [] 中。

As explained in other answer, you cannot use -- inside a .class[] call as it isn't a template then. However, you can use {{content}} inside .class[] so that using -- after will put the next text inside your previous .class[].

有点麻烦，因为我认为它不能用于复杂的增量逻辑。

It is a bit of a hack because I don't think it will work with complicated incremental logic.

---
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

在上一个示例中，右列的文本递增显示。

in the previous exemple, the right column has text appearing incrementally.

这篇关于增量幻灯片不适用于两列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！