背景
日常工作匯報(bào)蝴韭、演講經(jīng)常需要制作PPT衙傀，一般使用這些標(biāo)準(zhǔn)工具 Microsoft PowerPoint勇皇、Apple Keynote 或 Google Slides 佛呻。但這些工具對我來說過于繁瑣嗡靡，我希望有一個(gè)簡單且支持 markdown 的工具跺撼，很幸運(yùn)我找到了RevealJS，它是一個(gè)開源的 HTML 幻燈片框架讨彼，制作出精美的PPT歉井，對于web開發(fā)人員來說更是首選。
入門
reveal.js 使用 nodejs 構(gòu)建哈误，需要提前安裝好 nodejs哩至。下載啟動(dòng)訪問http://localhost:8000 就可以看到一個(gè)演示PPT。
git clone git@github.com:hakimel/reveal.js.git
mv reveal.js slides-demo
cd slides-demo
npm install
npm start
使用 Vscode 打開 index.html 制作蜜自，一個(gè) section 就是一頁幻燈片菩貌。
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
每張幻燈片是從左到右線性切換，如果需要在同一頁垂直過渡切換重荠，可以嵌套section 箭阶。
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>
<p>這里有一些內(nèi)容</p>
<section>1</section>
<section>2</section>
<section>2</section>
</section>
</div>
</div>
添加 data-background 可以給幻燈片添加一個(gè)背景。
<section data-background="https://blogs-on.oss-cn-beijing.aliyuncs.com/imgs/202206201857325.jpeg">
<h2>來吧戈鲁！展示</h2>
</section>
添加 fragment 設(shè)置內(nèi)容動(dòng)畫仇参，每次展示一個(gè)內(nèi)容。比如以此呈現(xiàn)列表婆殿，只需添加 class="fragment".
<section>
<h2>片段順序</h2>
<ul>
<li class="fragment">第一個(gè)</li>
<li class="fragment">第二個(gè)</li>
<li class="fragment">最后一個(gè)</li>
</ul>
</section>
添加圖片诈乒，在項(xiàng)目里創(chuàng)建 assets 目錄存放圖片，然后引入婆芦。
<section>
<h2>插入</h2>
<img src="assets/img.png" alt="img">
</section>
Reveal-md
直接編輯 Html 比較麻煩怕磨，我還是習(xí)慣在 markdown 里編輯內(nèi)容。使用reveal-md 可以將 markdown 轉(zhuǎn)換成 Html消约，或?qū)С鯬DF肠鲫。
安裝
npm install -g reveal-md
npm 6.x 版本安裝會(huì)出現(xiàn)權(quán)限錯(cuò)誤，需要添加 --unsafe-perm=true
sudo npm install -g reveal-md --unsafe-perm=true
--unsafe-perm=true：“false if running as root, true otherwise”荆陆，大體意思是 npm 的安全限制滩届，root身份運(yùn)行時(shí)不會(huì)查詢 root 的上下文，所以 sudo 運(yùn)行時(shí)還需要指定 --unsafe-perm=true 來忽略這種限制。
相關(guān)命令
# 啟動(dòng)
reveal-md slides.md -w
# 生成 Html 默認(rèn)目錄_static
reveal-md slides.md --static
# 生成 Html 默認(rèn)目錄_static帜消，指定圖片目錄 assets
reveal-md slides.md --static --static-dirs=assets
# 導(dǎo)出PDF
reveal-md slides.md --print slides.pdf
reveal-md slides.md --print slides.pdf --print-size 1024x768
reveal-md slides.md --print slides.pdf --print-size A4
幻燈片主題
默認(rèn)主題
| 名稱 | 效果 |
|---|---|
| black | 黑色背景棠枉，白色文本，藍(lán)色鏈接（默認(rèn)） |
| white | 白色背景泡挺，黑色文本辈讶，藍(lán)色鏈接 |
| league | 灰色背景，白色文字娄猫，藍(lán)色鏈接 |
| beige | 米色背景贱除，深色文字，棕色鏈接 |
| sky | 藍(lán)色背景媳溺，細(xì)暗文本月幌，藍(lán)色鏈接 |
| night | 黑色背景，厚白色文字悬蔽，橙色鏈接 |
| serif | 卡布奇諾背景扯躺，灰色文本，棕色鏈接 |
| simple | 白色背景蝎困，黑色文本录语，藍(lán)色鏈接 |
| solarized | 高分辨率照片 |
| blood | 深色背景，厚白文字禾乘，紅色鏈接 |
| moon | 高分辨率照片 |
自定義主題
- 下載 reveal
git clone git@github.com:hakimel/reveal.js.git澎埠； - 在 /css/theme/coder.scss 中復(fù)制一個(gè)文件；
- 運(yùn)行
npm run build -- css-themes生成css dist/coder.css始藕； - 運(yùn)行指定主題
reveal-md slides.md -w --theme theme/coder.css蒲稳。
切換時(shí)動(dòng)畫
| 名稱 | 效果 |
|---|---|
| none | 瞬間切換背景 |
| fade | 交叉淡入淡出 - 背景轉(zhuǎn)換的默認(rèn)值 |
| slide | 在背景之間滑動(dòng) — 幻燈片過渡的默認(rèn)設(shè)置 |
| convex | 以凸角滑動(dòng) |
| concave | 以凹角滑動(dòng) |
| zoom | 向上縮放傳入的幻燈片，使其從屏幕中心向內(nèi)擴(kuò)展 |
配置
我們可以在Markdown文件里通過 yaml 進(jìn)行配置
title: Slides # 幻燈片名稱
theme: solarized # 幻燈片主題
highlightTheme: github # 代碼高亮主題
revealOptions:
transition: 'convex' # 動(dòng)畫效果
reveal 其它配置項(xiàng)
{
// 顯示控制箭頭
controls: true,
// 循環(huán)播放
loop: false
// 更多參考 https://revealjs.com/config/
}
reveal-md 其它配置項(xiàng)
{
// 幻燈片橫行切割標(biāo)志
"separator": "^\n\n\n",
// 幻燈片垂直切割標(biāo)志
"verticalSeparator": "^\n\n"
}
用法
當(dāng)需要在 section 中添加屬性時(shí)鳄虱，Markdown 的寫法如下
<!-- .slide: 屬性=屬性值 -->
當(dāng)需要在其它元素插入屬性時(shí)弟塞，Markdown 的寫法如下
<!-- .element: 屬性=屬性值 -->
一些例子，設(shè)置背景色或背景圖
<!-- .slide: data-background="#fff" -->
<!-- .slide: data-background="./bg.png" -->
<!-- .slide: data-background-image="https://xxx.jpg" data-background-opacity=.1 data-background-repeat="no-repeat" -->
設(shè)置 fragment
- Item1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item2 <!-- .element: class="fragment fade-in-then-out" data-fragment-index="2" -->
指定代碼的高亮順序
```js [1-2|3|4|5]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
c(2);
```
地址跳轉(zhuǎn)
<!-- .slide: id=0 -->
[跳轉(zhuǎn)0](#/0)
部署到Netlify
我喜歡將一些靜態(tài)html托管到netlify拙已，它免費(fèi)比較好用决记。先在 Github 創(chuàng)建一個(gè)倉庫 coder_slides，然后創(chuàng)建如下目錄
├── README.md
└── content
├── assets
│ └── bg.jpeg
├── template
│ ├── listing.html
│ └── reveal.html
└── coder.md
- content 放MD文件集合倍踪；
- assets 本地圖片資源系宫；
- template 是渲染后的 HTML 模版，包含列表頁面和詳情頁面扩借，可以自行修改潮罪。
默認(rèn)的 listing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{pageTitle}}</title>
<link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
</head>
<body>
<ul>
{{#files}}
<li>
<a href="{{filePath}}" title="{{title}}">
{{#title}}{{.}} ({{filePath}}){{/title}}{{^title}}{{filePath}}{{/title}}
</a>
</li>
{{/files}}
</ul>
</body>
</html>
默認(rèn)的 reveal.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>{{{title}}}</title>
{{#absoluteUrl}}
<meta property="og:title" content="{{{title}}}" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{{absoluteUrl}}}/featured-slide.jpg" />
<meta property="og:url" content="{{{absoluteUrl}}}" />
{{/absoluteUrl}}
<link rel="shortcut icon" href="{{{base}}}/favicon.ico" />
<link rel="stylesheet" href="{{{base}}}/dist/reset.css" />
<link rel="stylesheet" href="{{{base}}}/dist/reveal.css" />
<link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
<link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />
{{#cssPaths}}
<link rel="stylesheet" href="{{{.}}}" />
{{/cssPaths}}
{{#watch}}
<script>
document.write(
'<script src="http://' +
(location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' +
'script>'
);
</script>
{{/watch}}
</head>
<body>
<div class="reveal">
<div class="slides">{{{slides}}}</div>
</div>
<script src="{{{base}}}/dist/reveal.js"></script>
<script src="{{{base}}}/plugin/markdown/markdown.js"></script>
<script src="{{{base}}}/plugin/highlight/highlight.js"></script>
<script src="{{{base}}}/plugin/zoom/zoom.js"></script>
<script src="{{{base}}}/plugin/notes/notes.js"></script>
<script src="{{{base}}}/plugin/math/math.js"></script>
<script>
function extend() {
var target = {};
for (var i = 0; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (source.hasOwnProperty(key)) {
target[key] = source[key];
}
}
}
return target;
}
// default options to init reveal.js
var defaultOptions = {
controls: true,
progress: true,
history: true,
center: true,
transition: 'default', // none/fade/slide/convex/concave/zoom
plugins: [
RevealMarkdown,
RevealHighlight,
RevealZoom,
RevealNotes,
RevealMath
]
};
// options from URL query string
var queryOptions = Reveal().getQueryHash() || {};
var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
</script>
{{#scriptPaths}}
<script src="{{{.}}}"></script>
{{/scriptPaths}}
<script>
Reveal.initialize(options);
</script>
</body>
</html>
運(yùn)行本地調(diào)試
reveal-md content/ --template template/reveal.html --listing-template template/listing.html
如何部署部署到netlify？
注冊一個(gè)netlify盛撑，然后創(chuàng)建一個(gè)站點(diǎn)關(guān)聯(lián)上github倉庫钓株。
在配置/部署里面添加構(gòu)建命令
npm install -g reveal-md && reveal-md content/ --static --static-dirs=content/assets --template template/reveal.html --listing-template template/listing.html
然后在域名管理添加一個(gè)自己的域名
配置成功如下
參考
https://github.com/hakimel/reveal.js
