用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>
复制代码

部署后的页面效果以下图所示：

能够看到，幻灯片的首页变成了反色，而最后一页变成了左右双栏的布局模式。

Step03 基于mdx-deck的二次开发

将在之后的文章中进行介绍。

mdx-deck的不足

mdx-deck仍是一个刚刚起步不久的项目（MDX本身出来也尚未多长时间），因此如今功能上还有不少须要完善的地方。其中对我本身来讲影响比较大的几点包括：

不可以同时使用多种Layout（好比说Split+Invert，不过能够经过自定义Layout的方式来实现本身想要的布局）。
目前不支持MathJax公式渲染。

mdx-deck的做者很是欢迎你们贡献本身的PR，因此若是对某个功能有迫切的需求，不妨本身来撸一个PR吧！

总结

在这篇文章中，咱们介绍了利用mdx-deck和Now v2制做在线幻灯片的基本流程和方法，以及mdx-deck中自带组件的使用方法。在之后的文章中，我将会继续给你们介绍与MDX，mdx-deck，以及Now有关的更多内容，敬请期待。

附录

项目代码

示例项目分步骤的所有代码能够在这个GitHub仓库获取到。