@achingbrain/slides 中文文档教程

Question

Slides

当你坐下来写幻灯片时，你有没有经历过那种恐惧的感觉？ 类似于：

好吧，我不想使用 PowerPoint，但我也不想摆弄无穷无尽的不同 html 幻灯片生成器，我只想写一些笔记并继续使用它！

Slides 获取您的笔记和图像，并将它们转换为使用 Bespoke.js 构建的幻灯片平台

Features

• Keyboard Control
• Presenter notes
• Live-reload
• es6 to es5 translation
• Source maps
• Extension API

Controls

。笔记的键盘控件是：

Key	Action
→	Next slide
←	Previous slide
s	Open notes

其他命令可用。

Getting started

Your directory structure

让你的项目看起来像这样：

my-presentation
  ├ package.json
  ├ slides.pug
  ├ favicon.ico
  ├ audio
  |  └ foo.mp3
  ├ images
  |  └ foo.jpg
  ├ js
  |  ├ plugins.js
  |  └ deck.js
  ├ css
  |  └ main.styl
  └ video
     └ foo.mp4

除了 package.json 和 slides.pug 所有文件/文件夹都是可选的。

package.json

使您的 package.json 看起来像这样：

{
  "name": "my-presentation",
  "version": "1.0.0",
  "description": "A slideshow",
  "license": "ISC",
  "author": {
    "name": "Your name here",
    "email": "me@example.org"
  },
  "scripts": {
    "start": "slides present",
    "deploy": "slides publish"
  },
  "dependencies": {
    "@achingbrain/slides": "^1.0.0"
  },
  "slides": {
    // all properties are optional
    "title": "Will appear in the <title> tag",
    "author": "Your name",
    "description": "Will appear in a <meta> tag",
    "theme": "bespoke-theme-nebula",
    "bullets": ".delayed, .bullet" // selector for animated bullet points
  }
}

如果您指定不同的主题，请确保它是您项目的依赖项！

slides.pug

这是您的幻灯片所在的位置。

一些简单的规则：

1. The presentation will be generated from the article element
2. All slides should be in section nodes

否则，编写普通的 html：

article

  section
    h1 Nebula
    aside
      li Speaker notes go here

  section(data-bespoke-backdrop='orion')
    h2 A <a href="https://github.com/markdalgleish/bespoke.js">Bespoke.js</a> theme

  section
    h3 &mdash; Lovingly crafted by &mdash;
    h2 <a href="https://github.com/markdalgleish">Mark Dalgleish</a>

  section
    h2.single-words Try the &lsquo;single-words&rsquo; class

  section
    h2.bullet Enjoy <span class='bullet'>:)</span>

a(href='https://github.com/markdalgleish/bespoke-theme-nebula')
  img(style='position: absolute; z-index: 1; top: 0; right: 0; border: 0; width: 25vw; max-width: 149px;', src='http://aral.github.com/fork-me-on-github-retina-ribbons/right-grey@2x.png' alt='Fork me on GitHub')

Extension points

如果您需要自定义 Bespoke.js，这就是您的做法。

js/plugins.js

如果存在，将使用默认的 bespoke.js 插件列表调用 plugins.js 供您修改。 它应采用以下形式：

// plugins.js
module.exports = (plugins) => {
  // plugins is the default list of bespoke.js plugins
}

js/deck.js

如果存在，scripts/deck.js 将在创建幻灯片后调用。 它应该采用以下形式：

// deck.js
module.exports = (deck) => {
  // deck is the bespoke.js slide deck
}

Example talks

• Electricity: A Primer