R语言的xaringan包

---

<div>
<style type="text/css">.xaringan-extra-logo {
width: 110px;
height: 128px;
z-index: 0;
background-image: url(https://bkimg.cdn.bcebos.com/pic/962bd40735fae6cd8f6271e00fb30f2443a70f59?x-bce-process=image/format,f_auto);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top:1em;right:1em;
}
</style>
<script>(function () {
  let tries = 0
  function addLogo () {
    if (typeof slideshow === 'undefined') {
      tries += 1
      if (tries < 10) {
        setTimeout(addLogo, 100)
      }
    } else {
      document.querySelectorAll('.remark-slide-content:not(.title-slide):not(.inverse):not(.hide_logo)')
        .forEach(function (slide) {
          const logo = document.createElement('div')
          logo.classList = 'xaringan-extra-logo'
          logo.href = null
          slide.appendChild(logo)
        })
    }
  }
  document.addEventListener('DOMContentLoaded', addLogo)
})()</script>
</div>

#简介
###xaringan（中文名：幻灯忍者）是一款新的幻灯片神器。它基于 R Markdown 语法，幻灯片中能嵌入 R 代码动态生成输出结果，最后生成的是 HTML5 幻灯片，可以在网页浏览器里打开阅览，我们一起去看看吧。Go!Go!Go!

---
class:  center, middle

# 准备好了吗！

---
class:  center, middle

# 开始！

---
class: top, middle

### 首先，从 GitHub 上安装此包的开发版本（建议用 RStudio IDE），或者直接从 CRAN 安装也行。

--
请进行如下操作：

- 从菜单 `File -> New File -> R Markdown -> From Template -> Ninja Presentation (Simplified Chinese)` 创建一个新文档；
--

- 点击 `Knit`按钮编译文档；此时你会看见一个默认模版，改改就可以开张了！

---

class:animated slideInRight fadeOutLeft

background-image:url(https://pic3.zhimg.com/80/v2-4017206607437f327d22781a8f2fd222_1440w.jpg)
background-position: 50% 50%
class: center, top

--
background-image:url(https://pic4.zhimg.com/80/v2-bef5b02a0efd9a857ad8eabeda9127e7_1440w.jpg)
background-position: 50% 50%
class: center, top

--
background-image:url(https://pic2.zhimg.com/80/v2-efb044e93ff4e0357ca0791fa34839a9_1440w.jpg)
background-position: 50% 50%
class: center, top

--
background-image:url(https://pic3.zhimg.com/80/v2-22f3fc54413ddf8895e7410004e59d9e_1440w.jpg)
background-position: 50% 50%
class: center, top

---
background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-position: 50% 50%
class: center, bottom

### 洛阳亲友如相问，请你不要告诉他

（我是怎么做幻灯片的）

---
class: center, center

在此之前，你需要了解一些基本魔法：

##魔法一：Markdown基本语法

- 用**三个短横线**来开始一页新的幻灯片，可以用一个井号开始写标题（标题不是必须元素）

- 可以用**两个短横线**分割当前页面，两短横线下面的内容会被接续上面的内容生成在下一页上，比如你有一个三个项目的列表，中间用两短横线分割，最后出来的效果就是先显示第一项，翻下一页继续显示下一项；

- 可以用**三个问号**添加片子的注释，注释不会直接显示在幻灯片中，而是在演讲者模式中才会出现（键盘上按 p 键）；

- 若你不了解 Markdown 语法，可以用 RStudio 菜单 **Help -> Markdown Quick Reference **打开一个参考页面。

---

background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg)
background-size: cover
class: center, bottom

### 唔，remark.js，朕很满意！

---

##  魔法二：片子属性的设置

- 片子的最开头，你会看到有 key-value（键-值对）格式的写法，这就是片子的属性。

---
background-image: url(https://pic4.zhimg.com/80/v2-5738b1c3322c2ce82ac15fc551483833_1440w.jpg)
background-size: 60% 50%
class:  top, inverse

#### class类属性用来设置 CSS 类，可用来调整片子里面文字的位置这里介绍一下内置的几个参数

--
class:bottom

- center居中，left靠左，right靠右，top顶部，middle中间和bottom底部inverse颜色翻转，变成黑色

---

background-image: url(https://pic2.zhimg.com/v2-bb206e3f09e84ffbe189be34a276f70d_b.png)
background-size: 70% 30%
class:  bottom, inverse

### background-image最后再介绍一个比较吸引人的自定义背景功能。你可以选择自己喜欢的图片（本地图片或网络图片）。

- 更多属性设置参见：gnab/remark

---

# 魔法三：插入数学公式

数学公式用 LaTeX 语法写在一对美元符号中间，例如 &#36;\alpha+\beta$ 会生成 `$\alpha+\beta$`。若要将公式单独显示为一个段落，可以用一对双重美元符号：

```
$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$
```

`$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$`

--
局限性：

1. 公式的源代码只能写在一行上，不能换行；双重美元符号内的公式允许换行，但条件是起始标记 `$$` 必须在一行的最开头（前面不能有任何字符，后面必须跟一个不是空格的字符），结束标记 `$$` 必须在一行的最末尾（前面必须是一个非空格的字符，后面不能有任何字符）；

2. 起始美元符号后以及结束美元符号前不能有空格，否则不会被识别为公式

---

#魔法四：插入R代码及R图形

## R 代码

```r
# 一个无聊的回归模型
fit = lm(dist ~ 1 + speed, data = cars)
coef(summary(fit))
```

```
#               Estimate Std. Error   t value     Pr(>|t|)
# (Intercept) -17.579095  6.7584402 -2.601058 1.231882e-02
# speed         3.932409  0.4155128  9.463990 1.489836e-12
```

```r
dojutsu = c('地爆天星', '天照', '加具土命', '神威', '須佐能乎', '無限月読')
grep('天', dojutsu, value = TRUE)
```

```
# [1] "地爆天星" "天照"
```

---

## R 图形

```r
par(mar = c(4, 4, 1, .1))
plot(cars, pch = 19, col = 'darkgray', las = 1)
abline(fit, lwd = 2)
```

![](mine_files/figure-html/cars-1.svg)

---

- 在以上四种魔法的基础上，可以再吃两颗兵粮丸(设置幻灯片的各种行为)。

###丸子一：YAML(这也是一种标记语言，经常用来写一些配置)头文件设置整个幻灯片的选项

①定义输出格式：xaringan::moon_reader

②***CSS 样式***：如果你比较熟悉 CSS ，不妨在外部自定义一个 CSS 文件，以 css: ['extra.css'] 的形式引入。如果完全没听过css，请百度各种菜鸟教程，或者去了解一下W3C组织，同时恭喜你入坑。

③nature下面设置 autoplay 选项，片子每隔一段时间自动播放，单位毫秒

④如果不想让无限月读锁死 R 进程，请设置：

⑤累了还可以玩玩***yolo大法***
该选项默认的图片是 Karl Broman 的大头照。如果 yolo: 3 你的幻灯片中将随机出现 3 次他的大头照，如果 yolo: 0.3 你的幻灯片中将有 30% 的片子是他的大头照。当然你也可以把默认图片换掉。

⑥......

欲知所有可能的选项，请在console中输入 ?xaringan::moon_reader

---
background-image: url(https://pic1.zhimg.com/80/v2-c073d3f3197e01297771bf8f5063aabc_1440w.jpg)
background-size: 40%  40%
class: center, top

###丸子二：幻灯片的播放

①请按下**h键**一键查看帮助

②按下 **p 键**进入播放模式，此时你会看到计时器以及之前三个问号为你留下的注释，可谓演讲者的好工具！

???

可以直接按下h键查看

---

嗯，其实，有人想知道这个包是怎么来的嘛！如果你还有一颗好奇心，请坚持，它很宝贵。

###remark.js

remark.js 是一个用来做幻灯片的JavaScript库，好处是能随时随地在不同设备的浏览器里浏览，用的是简单的Markdown语法，如果你熟悉HTML，CSS还能把片子做的特酷炫，播放也是杠杠的……我们来创建一个片子。

参考：gnab/remark

不熟悉 HTML 和 CSS 基本语法的可能下去了解以下（这里用到的不难～）你会看到<head标签里裹了个<style>标签，它规定了你的HTML元素在浏览器里呈现的样式（比如字体，边距，颜色…），其实也就是 CSS样式表，这里还是帮大家写了几个例子，比如用类的方式定义颜色，字体粗细等等。在片子里使用的时候，直接用 .red[我红得像龙虾]。当然 CSS 可以以外部文件的形式引入。
- 好，下面来到关键的主体部分了。在这里，你需要用 Markdown 语法开始写你的片子，你的片子需要裹到一个文本区域里面：

---

background-image: url(https://pic3.zhimg.com/v2-a2717030840dff524eee79767f06ac42_b.png)
background-size: 85% 15%
class: center, bottom

---
background-image: url(https://pic1.zhimg.com/v2-c30ee4f71dbe4c112162fca00615a0e0_b.png)
background-size: 90% 10%
class: center, top

- 高高兴兴写完魔性的幻灯片，别忘了 remark.js 啊，建议你把压缩版的js文件下载到本地（这样可以不依赖于网络，随时随地看你的幻灯片了），然后乖乖引入(这里还是引的文件的网址，如果下载到本地了，请写好本地的路径)：

---

background-image: url(https://pic2.zhimg.com/v2-e0ea34ec66b5ef6913935cd150f71915_b.png)
background-size: 90% 10%
class: center, top

当然，还没完，你要用下面一句 js 代码渲染你的幻灯片;

---

觉得麻烦吗？觉得麻烦就对了，这就是 xaringan 包的价值所在：

####你不必管这些背后的 HTML/JavaScript 细节，只需要创建一个 R Markdown 文档，点一下无限月读插件（Addins -> Infinite Moon Reader），剩下的事情都交给 xaringan，你只需要敲你的幻灯片正文就够了，预览会自动显示在 RStudio 右栏中。

---

#thanks!