不會做ppt怎麼辦（為什麼感覺做ppt好難）

背景

日常工作彙報、演講經常需要製作PPT，一般使用這些標準工具 Microsoft PowerPoint、Apple Keynote 或 Google Slides 。但這些工具對我來說過於繁瑣，我希望有一個簡單且支援 markdown 的工具，很幸運我找到了RevealJS，它是一個開源的 HTML 幻燈片框架，製作出精美的PPT，對於web開發人員來說更是首選。

入門

reveal.js 使用 nodejs 構建，需要提前安裝好 nodejs。下載啟動訪問http://localhost:8000 就可以看到一個演示PPT。

git clone [email protected]:hakimel/reveal.js.git mv reveal.js slides-demo cd slides-demo npm install npm start

使用 Vscode 開啟 index.html 製作，一個 section 就是一頁幻燈片。

Slide 1Slide 2

每張幻燈片是從左到右線性切換，如果需要在同一頁垂直過渡切換，可以巢狀section 。

        Slide 1這裡有一些內容122

新增 data-background 可以給幻燈片新增一個背景。

來吧！展示

新增 fragment 設定內容動畫，每次展示一個內容。比如以此呈現列表，只需新增一個 class="fragment".

片段順序第一個第二個最後一個

新增圖片，在專案裡建立 assets 目錄存放圖片，然後引入。

插入

Reveal-md

直接編輯 Html 比較麻煩，我還是習慣在 markdown 裡編輯內容。使用reveal-md 可以將 markdown 轉換成 Html，或匯出PDF。

安裝

npm install -g reveal-md

npm 6.x 版本安裝會出現許可權錯誤，需要新增 --unsafe-perm=true

sudo npm install -g reveal-md --unsafe-perm=true

--unsafe-perm=true：“false if running as root, true otherwise”，大體意思是 npm 的安全限制，root身份執行時不會查詢 root 的上下文，所以 sudo 執行時還需要指定 --unsafe-perm=true 忽略這種限制。

相關命令

# 啟動 reveal-md slides.md -w  # 生成 Html 預設目錄_static reveal-md slides.md --static # 生成 Html 預設目錄_static，指定圖片目錄 assets reveal-md slides.md --static --static-dirs=assets # 匯出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

幻燈片主題

預設主題

名稱

效果

black

黑色背景，白色文字，藍色連結（預設）

white

白色背景，黑色文字，藍色連結

league

灰色背景，白色文字，藍色連結

beige

米色背景，深色文字，棕色連結

sky

藍色背景，細暗文字，藍色連結

night

黑色背景，厚白色文字，橙色連結

serif

卡布奇諾背景，灰色文字，棕色連結

simple

白色背景，黑色文字，藍色連結

solarized

高解析度照片

blood

深色背景，厚白文字，紅色連結

moon

高解析度照片

自定義主題

  1. 下載 reveal git clone [email protected]:hakimel/reveal.js.git ；
  2. 在 /css/theme/coder.scss 中複製一個檔案；
  3. 執行 npm run build -- css-themes 生成css dist/coder.css；
  4. 執行指定主題 reveal-md slides.md -w --theme theme/coder.css。

切換時動畫

名稱

效果

none

瞬間切換背景

fade

交叉淡入淡出 - 背景轉換的預設值

slide

在背景之間滑動 — 幻燈片過渡的預設設定

convex

以凸角滑動

concave

以凹角滑動

zoom

向上縮放傳入的幻燈片，使其從螢幕中心向內擴充套件

配置

我們可以在Markdown檔案裡通過 yaml 進行配置

title: Slides # 幻燈片名稱 theme: solarized # 幻燈片主題 highlightTheme: github # 程式碼高亮主題 revealOptions:    transition: 'convex' # 動畫效果

reveal 其它配置項

{   // 顯示控制箭頭   controls: true,   // 迴圈播放   loop: false   // 更多參考 https://revealjs.com/config/ }

reveal-md 其它配置項

{   // 幻燈片橫行切割標誌   "separator": "^/n/n/n",   // 幻燈片垂直切割標誌   "verticalSeparator": "^/n/n" }

用法

當需要在 section 中新增屬性時，Markdown 的寫法如下


當需要在其它元素插入屬性時，Markdown 的寫法如下


一些例子，設定背景色或背景圖




設定 fragment

- Item1  - Item2

指定程式碼的高亮順序

```js [1-2|3|4|5] let a = 1; let b = 2; let c = x => 1   2   x; c(3); c(2); ```

地址跳轉

[跳轉0](#/0)

部署到Netlify

我喜歡將一些靜態html託管到netlify，它免費比較好用。先在 Github 建立一個倉庫 coder_slides，然後建立如下目錄

├── README.md └── content     ├── assets     │   └── bg.jpeg     ├── template     │   ├── listing.html     │   └── reveal.html     └── coder.md

  • content 放MD檔案集合；
  • assets 本地圖片資源；
  • template 是渲染後的 HTML 模版，包含列表頁面和詳情頁面，可以自行修改。

預設的 listing.html

{{pageTitle}}{{#files}}           {{#title}}{{.}} ({{filePath}}){{/title}}{{^title}}{{filePath}}{{/title}}               {{/files}}

預設的 reveal.html

{{{title}}}{{#absoluteUrl}}{{/absoluteUrl}}{{#cssPaths}}{{/cssPaths}}     {{#watch}}document.write(         ''       );{{/watch}}{{{slides}}}function extend() {         var target = {};         for (var i = 0; i {{#scriptPaths}}{{/scriptPaths}}Reveal.initialize(options);

執行本地除錯

reveal-md content/ --template template/reveal.html --listing-template template/listing.html

   

list

如何部署部署到netlify？

註冊一個netlify，然後建立一個站點關聯上github倉庫。

在配置/部署裡面新增構建命令

npm install -g reveal-md && reveal-md content/ --static --static-dirs=content/assets --template template/reveal.html --listing-template template/listing.html

然後在域名管理新增一個自己的域名

   

domain

配置成功如下

https://slides.onlythinking.com