使用 slidify 将图像添加到标题幻灯片

本文介绍了使用 slidify 将图像添加到标题幻灯片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用最新版本的 Rstudio(和 knitr)，并且我已经从 github 安装了 slidify 的开发版本.Slidify 可让您一键直接从 Rmarkdown 转到 html5slides.

I am using the latest version of Rstudio (and knitr) and I have installed the development version of slidify from github. Slidify allows you to go straight from Rmarkdown to html5slides with 1 click.

我的问题是我想将图像添加到标题幻灯片，但使用正常的 Rmarkdown 语法不起作用.我认为这是因为第一张幻灯片被指定为 YAML.

My issue is that I would like to add an image to the title slide, but using the normal Rmarkdown syntax does not work. I think this is because the first slide is specified as a YAML.

title : subtitle : author : job : framework : io2012 # {io2012, html5slides, shower, dzslides, ...} highlighter : highlight.js # {highlight.js, prettify, highlight} hitheme : tomorrow # widgets : [] # {mathjax, quiz, bootstrap} mode : selfcontained # {standalone, draft}

如果我在第一张幻灯片规范中添加任何内容，我会在解析 YAML 的函数 yaml.load() 中收到错误消息.有没有办法使用 YAML 指定背景图像?

If I add anything to this first slide specification, I get an error in the function yaml.load() which parses the YAML. Is there a way to specify a background image using YAML?

推荐答案

io2012 框架中的 title-slide 被标记为类 title-slide.因此，您可以使用 css 自定义幻灯片.比如要指定背景图片，需要添加如下css.

The title-slide in io2012 framework is marked with the class title-slide. So you can customize the slide using css. For example, if you want to specify a background image, you need to add the following css.

.title-slide { background-image: url(goo.gl/cF6W2); }

您可以通过用 <style></style> 标签将其括起来直接将其添加到您的 Rmd 文件中，或者添加到 assets/css 中的自定义 css 文件中>，当您运行 slidify 时会自动包含.

You can either add it directly to your Rmd file by enclosing it with <style></style> tags or to a custom css file in assets/css, which will automatically be included when you run slidify.

希望这有用.

编辑.如果你想进一步自定义标题幻灯片的外观，你可以调整 libraries/frameworks/io2012/layouts/deck.html.

EDIT. If you want to customize the appearance of the title slide further, you can tweak the lines in libraries/frameworks/io2012/layouts/deck.html.