用mdx-deck和Now打造酷炫的在線幻燈片

時間 2019-12-10

標籤 mdx deck 打造在線幻燈片简体版

原文原文鏈接

TL;DR 本文介紹了使用mdx-deck包製做幻燈片式的網頁，並利用Now v2進行部署的方法（示例代碼）html

背景介紹

MDX: GitHub

在介紹mdx-deck以前，首先要介紹一下它的基礎MDX。MDX的理念是Markdown+JSX。相信不管是對於Markdown，仍是對於JSX，你們應該都已經很是熟悉了。不知道你們有沒有設想過：若是能在Markdown裏用上JSX組件，會是一種怎樣的體驗？node

mdx-deck: GitHub

不知道你們有沒有用過一款叫作Marp的軟件，使用它能夠將Markdown文件轉換成幻燈片，第一次看到它的時候我還着實被驚豔了一下。react

mdx-deck想要作的事情是相似的，只不過，站在MDX這個巨人的肩膀上，mdx-deck能夠作得更多。話很少說，先看看下面幾個示例吧：git

mdx-deck提供的其餘功能

做爲一個幻燈片演示工具，mdx-deck還提供了其餘方便的演示功能。github

演示者模式

使用Option+P組合鍵能夠進入演示者模式，並擁有演講者計時和顯示當前時間的功能。再次使用該組合鍵可退出演示者模式。 docker

總覽模式

使用Option+O組合鍵能夠進入總覽模式，能夠瀏覽所有的幻燈片。再次使用該組合鍵可退出總覽模式。 npm

Now

Now提供了面向全球的快速部署服務。在1.0版本，Now提供了static、node、docker三種部署方式，分別用於部署靜態站點、node項目和docker項目。而在最近更新的2.0版本中，Now全面轉向了Serverless，口號也已經變動爲「Global Serverless Deployments」。Now v2提出的一個很重要的新概念叫作「builder」，藉助builder，咱們能夠很方便地把代碼轉變爲Serverless的雲函數。而今天咱們要用到的正是其中的一個builder：@now/mdx-deck。它集成了mdx-deck所需的各類配置，這使得咱們能夠在幾分鐘的時間裏完成一個mdx-deck項目的部署，而徹底不須要考慮各類配置問題。json

Now的優點不少，包括自動https配置，自動CDN配置，全球DNS等等，本文難以所有涵蓋，有機會的話，能夠在之後的文章中進行更加詳盡的介紹。數組

準備工做

Now

咱們首先須要註冊一個Now的帳號，這裏可使用郵箱，或者使用GitHub帳號登錄。建議選擇Github方式。markdown

註冊以後，咱們須要在本地安裝一下Now的命令行工具（CLI）

# 使用NPM
npm i -g now

# 或者使用yarn
yarn global add now
複製代碼

固然，也能夠從Now的官網上下載桌面客戶端，裏面包含了CLI，還支持自動更新，也是很是方便的。

安裝完畢後，咱們須要在CLI或者桌面客戶端登錄一下咱們的帳號。其中，CLI登錄的方法爲：

now login
複製代碼

Step01 發佈咱們的第一個mdx-deck幻燈片

這裏咱們參考Now提供的教程來發布咱們的第一個mdx-deck幻燈片。

1.1 建立項目

首先建立項目目錄：

mkdir my-mdx-deck
cd my-mdx-deck
複製代碼

在新建的目錄中，咱們一共須要新建兩個文件。index.mdx是咱們幻燈片的正文，now.json用於進行Now的配置。

index.mdx

# I am using mdx-deck!
---
# This is super fun!
---
# Wanna have a try? 
Follow [this](https://zeit.co/docs/v2/deployments/official-builders/mdx-deck-now-mdx-deck/)!
複製代碼

能夠看到，若是不使用JSX功能，寫MDX和寫普通的Markdown沒有太大區別，只不過，普通Markdown中的分隔符標記---在MDX中表示的是開始新的一頁幻燈片。這一點與Marp是同樣的。

now.json

{
  "name": "mdx-deck-example",
  "version": 2,
  "builds": [
    { "src": "index.mdx", "use": "@now/mdx-deck" }
  ]
}
複製代碼

簡單說明一下這個json文件中的幾個字段：

name字段對應的是部署時的域名前綴（Now部署項目的默認URL是<name>-<uuid>.now.sh），若是不設置name，則會默認用目錄名做爲name。
version字段表示咱們使用的是Now v2（Now目前是1.0和2.0兩個版本並存的狀態，而且至關長的一段時間內都會是如此）
builds字段是最爲關鍵的部分，它是一個數組，咱們能夠針對項目中的不一樣文件使用不一樣的builder。這裏，咱們針對index.mdx使用了@now/mdx-deck這個builder。每個builder都對應着一套編譯環境，@now/mdx-deck會幫助咱們把MDX文件轉換爲最終用於渲染的HTML和JavaScript。

1.2 部署項目

以後咱們就能夠部署這個項目了。在項目根目錄執行

now
複製代碼

是的，你沒有看錯，就這麼簡單！以後咱們會在命令行中看到部署的進度：

> Deploying .../my-mdx-deck-example under xxx
> Synced 2 files (283B) [1s]
> mdx-deck-example-prr0bcnpc.now.sh [v2] [in clipboard] [1s]
- index.mdx Building

構建完成後的提示爲：

┌ index.mdx Ready [51s]
├── index.html (4.9KB)
└── main.js (286.94KB)
> Success! Deployment ready [53s]

這時，咱們就能夠點擊連接來查看剛剛部署的幻燈片了。是否是感受so easy？

你可能會以爲Now自動生成的URL太醜陋了，不要緊，Now提供了alias功能，你能夠爲剛剛生成的URL設置一個別名。方法也很簡單：

now alias mdx-deck-example-step01
複製代碼

以後，就能夠在mdx-deck-example-step01.now.sh看到跟剛剛同樣的頁面了。

注：alias命令的標準使用方法爲now alias <原始URL> <新URL>，上面使用了簡略方法：

在剛剛完成一次Now部署的目錄中，會默認以上一次部署的URL做爲原始URL

新URL若是不寫成完整的域名形式，會默認發佈爲xxx.now.sh。若是對應的域名已經被佔用，就會發生錯誤。

Step02 使用mdx-deck自帶的工具

mdx-deck自己就爲咱們提供了很多工具，包括主題（Themes），組件（Components）和佈局（Layouts）等，這一步中，咱們將實際嘗試mdx-deck自帶的各類工具。

**注意！**當在代碼中混合使用JSX和Markdown語法時，須要在代碼交界處加一個空行，以保證編譯構建過程可以正常進行。

2.1 使用Head組件

Head組件的做用是設置HTML的<head>屬性。這裏咱們利用Head組件給咱們的幻燈片頁面起一個標題，並增長一個<meta>字段。

index.mdx

import { Head } from 'mdx-deck'

[comment]:省略部份內容

<Head>
  <title>Mdx-deck Examples</title>
  <meta name='twitter:title' content='Mdx-deck Examples' />
</Head>
複製代碼

修改完成後咱們使用now再次部署，打開頁面，咱們能夠看到它已經有了一個正確的標題；查看網頁源碼，能夠看到<meta>字段也已經成功添加了。

注：理論上來講，能夠添加在任何一張幻燈片的開頭或結尾（不能與Markdown內容混雜），可是在嘗試時，我遇到了幾回錯誤，最終像上面這樣把放置在最後一張幻燈片的結尾才順利構建。不清楚這個是否是@now/mdx-deck在我寫做本文時存在的一個bug。

2.2 使用Image組件

Image組件可用於建立一頁單張圖片的幻燈片。用法一樣很簡單，咱們在第二頁的後面新增一頁，放上一張圖片（這裏實際上我放了一張GIF動圖）。

index.mdx

import { Head, Image } from 'mdx-deck'

# I am using mdx-deck!
---
# This is super fun!
---
<Image src='https://s3.amazonaws.com/jxnblk/mdx-deck.gif' /> ---
# Wanna have a try? 
Follow [this](https://zeit.co/docs/v2/deployments/official-builders/mdx-deck-now-mdx-deck/)!

<Head>
  <title>Mdx-deck Examples</title>
  <meta name='twitter:title' content='Mdx-deck Examples' />
</Head>
複製代碼

再次部署後的頁面以下圖所示：

2.3 使用Appear組件

Appear組件用於實現同一頁面上子元素逐個出現的效果，對於列表的展現最爲適合。

index.mdx

import { Appear, Head, Image } from 'mdx-deck'

[comment]: 省略部份內容

[comment]: 這裏插入一張新幻燈片，使用Appear組件

# Make a list live!

Here comes the list.
<ul>
  <Appear>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
  </Appear>
</ul> ---
# Wanna have a try? 

[comment]: 省略部份內容
複製代碼

內部的元素會按照次序逐個出現。部署後的頁面效果以下圖所示：

2.4 使用Notes組件

Notes組件的做用是演講者筆記。這些筆記只有在演示者模式（Option+P）中才可見，對於幻燈片演講者來講有很大的幫助。Notes組件有兩種使用方法（Markdown語法和JSX語法），都很簡單，這裏以Markdown語法爲例進行介紹。

咱們在index.mdx文件中的第二張幻燈片里加上下面的內容：

```notes This sentence can only be seen in presenter mode. ```

部署後的頁面在演示者模式下的效果以下圖所示：

能夠看到第二張幻燈片下方的筆記。

2.5 使用mdx-deck自帶的Layouts

mdx-deck自帶的佈局有Invert（反色）、Split（左右二分，第一個元素出如今左邊）、SplitRight（左右二分，第一個元素出如今右邊）、FullScreenCode（全屏展現代碼塊）等。接下來，咱們就來實際體驗一下Invert和Split的效果吧。

index.mdx

import { Appear, Head, Image } from 'mdx-deck'

[comment]: 引入Invert和Split佈局

import { Invert, Split } from 'mdx-deck/layouts'

[comment]: 使用Invert佈局

export default Invert

# I am using mdx-deck!
---

[comment]: 省略部份內容

---

[comment]: 使用Split佈局

export default Split

# Wanna have a try? 
Follow [this](https://zeit.co/docs/v2/deployments/official-builders/mdx-deck-now-mdx-deck/)!

<Head>
  <title>Mdx-deck Examples</title>
  <meta name='twitter:title' content='Mdx-deck Examples' />
</Head>
複製代碼