如何利用 revealjs 快速寫出漂亮的 PPT

程式設計碼農發表於2022-06-23
原文網址 : https://segmentfault.com/a/1190000042014461
JS

背景

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

入門

reveal.js 使用 nodejs 構建，需要提前安裝好 nodejs。下載啟動訪問http://localhost:8000 就可以看到一個演示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 製作，一個 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>這裡有一些內容</p>
                        <section>1</section>
                        <section>2</section>
                        <section>2</section>
                </section>
            </div>
        </div>

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

<section data-background="https://blogs-on.oss-cn-beijing.aliyuncs.com/imgs/202206201857325.jpeg">
  <h2>來吧！展示</h2>
</section>

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

<section>
  <h2>片段順序</h2>
  <ul>
    <li class="fragment">第一個</li>
    <li class="fragment">第二個</li>
    <li class="fragment">最後一個</li>
  </ul>
</section>

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

<section>
  <h2>插入</h2>
  <img src="assets/img.png" alt="img">
</section>

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 git@github.com: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 的寫法如下

<!-- .slide: 屬性=屬性值 -->

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

<!-- .element: 屬性=屬性值 -->

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

<!-- .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" -->

設定 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);
```

地址跳轉

<!-- .slide: id=0 -->
[跳轉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

<!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>

預設的 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>

執行本地除錯

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

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

image-20220621143050693

配置成功如下

https://slides.onlythinking.com

參考

https://github.com/hakimel/re...

https://github.com/webpro/rev...

https://revealjs.com/

https://app.netlify.com/

相關文章