使用 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(http://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.

这篇关于使用 slidify 将图像添加到标题幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！