写轮眼(sharingan)奇淫技巧

本片文章直接拷贝于部门wiki,作者还有renwanfeng、duyalei

写轮眼是谢益辉开发的,利用 markdown 语法完成的 slides 的工具, 排版非常考究,书写速度极快。非常适合工程师序列的工作人员。

不过因为 GFW 的存在,sharingan 调用的 js 和 font 不能加载,会导致 slides 不能被顺利渲染。 这里提供一些常用参数设置,通过本地编译,sharingan 能够提供 self-contained 文件,不依赖于网络环境。

1. 全局配置

1.1. slides的title 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
title: "少儿英语启蒙路线产品"
subtitle: ""
author: "刘思喆"
date: '`r Sys.Date()`'
output:
xaringan::moon_reader:
css: [default, rutgers, zh-CN.css, extra.css]
lib_dir: libs
chakra: remark.min.js
self_contained: true
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
  • css 中增加一个自定义 extra.css,这里可以同时声明字体路径
  • lib_dir: 本地 libs 的目录
  • chakra 使用本地 js
  • self_contained 变更为 true

所有本地依赖文件的打包地址

1.2. 字体设置

css 部分指向了本地的 woff 字体地址:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@font-face {
font-family: 'Yanone Kaffeesatz';
font-style: normal;
font-weight: 400;
src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'),
url('woff/yanone-kaffeesatz.woff') format('woff');
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif'),
url('woff/droid-serif.woff') format('woff');
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'),
url('woff/source-code-pro.woff') format('woff');
}

当然也可以使用本地字体,我现在比较喜欢的字体搭配是:

1
2
3
4
5
body { font-family: 'Baskerville', 'Noto Sans SC Light', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Songti SC', serif; }
h1, h2, h3 {
font-family: 'Rockwell', 'Noto Sans SC', 'Palatino Linotype', 'Book Antiqua', Palatino, 'STHeiti', 'SimHei', 'Microsoft YaHei';
font-weight: normal;
}

当然也可以随意看心情搭配。

2. 其他实用技巧

2.1. 演示相关

2.1.1. 实时预览

  • 利用 xaringan 的 infinite moon reader 插件实现实时预览(在Viewer中所见即所得),在 R console 中输入即可

    1
    xaringan:::inf_mr("your_file.Rmd")

2.1.2. 演讲者模式

演讲时候经常需要使用演讲者模式,这样可以自己看到上下页面演讲内容,同时也可以看到备注和相应的时间提示:

  • 首先在编译出来的 html 文件中按 C 键复制到新窗口,新窗口可以给观众看
  • 其次在本地的这个 html 演示文稿中点击 p 进入到演示模式即可

这样就实现了本地滑动演示的时候,新窗口同步滚动

2.1.3. 自动播放幻灯片

有时候你可能对时间把控不是很准确的时候,可以锻炼自己每页 ppt 1 分钟演讲时间,这时候,可以设置一个幻灯片倒计时60s:

1
2
3
4
output:
xaringan::moon_reader:
nature:
countdown: 60000

或者如果你的演讲精彩到忘记用鼠标,那么可以用自动播放的功能,比如30s换一页?

1
2
3
4
output:
xaringan::moon_reader:
nature:
autoplay: 30000

2.2. slides内容编辑

2.2.1. 页面风格控制

写轮眼利用remark.js采取class的方式来定义整页幻灯片的风格,需要注意的是这个是父级的,直接控制整个页面,而如果页面需要单独对每个版块进行单独控制的,最好不要直接在用全页面的class属性,比如我们经常在演讲的时候用到的衔接页面,跟其他的页面背景色可以采取不一样的,这样让观众知道我们要讲下一个part了,这时可以采取如下的页面设置:

1
2
3
class:inverse,middle,center

# 这是一个过渡页面

以上展现效果是黑色背景页,白字居页面正中。

也可以使用 title-slide-section-grey 过渡效果,我个人比较喜欢这种。

1
class: title-slide-section-grey, middle, center

2.2.2. 设计节选的主标题

演讲的时候一个slides可能分为几部分,而其中的一部分有一个主标题,比如谈"追求理解的教学设计",那么针对这个大标题有三个小标题,这种情况在开始这一part的时候可以设定一个layout:true,只要没有遇到layout:false之前的所有页面节标标题都是跟这个设置页面一样,比如以下的某一页面设置了节标题:

1
2
3
4
---
layout:true

# 这是一个节标题

2.2.3. 图片编辑

图片不建议使用 base64 内嵌,会导致加载速度很慢。参见这里,但如果量小也是可以的,使用方法如下

1
background-image: url(`r knitr::image_uri('incomeHeatmap.png')`)

图片分为背景图、左右悬浮图或者页面标记(比如51talk公司logo),不同的场景可以用不同实践方法

  • 对于背景图全覆盖可以采用 background-size: contain,不设定位置;对于 logo 标志可以采用如下 code;这种设定适合长宽一样的情况下设定

    1
    2
    3
    background-image: url('figure/51talklogo.png')
    background-size: 100px
    background-position: 90% 5%
  • 对于左右悬浮图可以采用自定义的 CSS, 定义图片宽和高占页面大小的百分比以及悬浮方式在左边还是右边

    1
    2
    3
    4
    5
    6
    7
    8
    # 在zh-CN.css中添加如下自定义css
    .img-right{
    width: 50%;
    height: 50%;
    float: right;
    }
    #在Rmd中使用
    .img-right[![](figure/example.jpg)]
  • 对于一些特殊的比例控制也可以采用自定义的 css,我一般放在 extra.css 中做特殊设定,比如宽度 90%,高度 50% 的图片:

    1
    2
    3
    4
    5
    6
    7
    # css start
    .image-9050 img {
    height: 50%;
    width: 90%;
    }
    ## css end
    .image-9050[![](figure-html/jiandan.gif)] # 自定义大小,在css中定义`.image-9050`

2.2.4. 公式编辑

  • 公式

    1
    $$x=1$$

2.3. 页面辅助功能

  • 添加脚注:比如有的参考文献或者相关补充提示

    1
    2
    3
    # Rmd中添加上在相应的位置加上<sup>*</sup>

    .footnote[[*] 这是一个脚注]
  • 添加备注:每一页像 ppt 一样增加演讲的备注,??? 以下的代表备注,图片也可以加

    1
    2
    ???
    this is a test note
  • 自增式 slides 演示:通过鼠标点击出现下一个内容,类似 ppt 的滑动效果,采用--来控制效果,注意标识符后空一行否则滑动未生效;区分三横杠---、二横杠---,分别代表幻灯片分割,自增和列表的语法

    1
    2
    3
    --

    上面是一个空行