nodeppt

这可能是迄今为止最好的网页版演示库

Github

Install 安装


npm install -g nodeppt

Commands 命令


# create a new slide with an official template
# 使用官方模板创建新幻灯片
$ nodeppt new slide.md

# create a new slide straight from a github template
# 直接从 github 模板创建新幻灯片
$ nodeppt new slide.md -t username/repo

# start local sever show slide
# 启动本地服务器显示幻灯片
$ nodeppt serve slide.md

# to build a slide
# 制作幻灯片
$ nodeppt build slide.md

Demo Contents 演示内容


  • Keyboard Shortcuts 键盘快捷键
  • CSS Syntax CSS 语法
  • Background 背景
  • Animation 动画
  • Content Position 内容定位
  • Quotes 引用
  • Plugins 插件: echarts/mermaid/ketax
  • Others 其它: Button/Table..
  • Speaker mode 演讲者模式..

Keyboard Shortcuts 键盘快捷键


  • Page 翻页: ↑/↓/←/→ Space Home End
  • Fullscreen 全屏: F
  • Overview 大纲: -/+
  • Speaker Note 演讲者笔记: N
  • Grid Background 网格背景: Enter

Note here

CSS Syntax

WebSlides is so easy to understand and love. Baseline: 8. {.text-intro}
WebSlides 非常容易理解和喜爱。

  • Typography 版式: .text-landing, .text-subtitle, .text-data, .text-intro...
  • BG Colors 背景颜色: .bg-primary, .bg-blue,.bg-apple...
  • BG Images 背景图片: .background, .background-center-bottom...
  • Sizes 大小: .size-50, .size-40...
  • Component 组件: card, flexblock, gallery...
  • Animation 动画: autoplay, animate.css...

Text Classes

Landings

.text-landing

Landings

Create a simple web presence.
创建一个简单的网络形象。

.text-intro

POWERED BY #WEBSLIDES .text-subtitle
#WEBSLIDES .text-subtitle 提供支持

Landings

Create a simple web presence.
创建一个简单的网络形象。

.text-intro

Landings

.text-shadow

4,235,678

.text-data

Why WebSlides? .text-context

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.
WebSlides 非常简单且用途广泛。制作 HTML 演示文稿的最简单方法。

.text-cols (2 columns)

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <slide> in the #webslides element is an individual slide.

为什么选择 WebSlides? 有很多优秀的演示工具。 WebSlides 旨在共享内容、基本功能和简洁的标记。 #webslides 元素中的每个父级 <slide> 都是一张单独的幻灯片。

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

WebSlides 帮助您建立创新和卓越的文化。当您真正热爱自己的工作时,您就可以改变世界。如何管理设计驱动型组织?领导力体现在有用性、开放性、同理心和良好品味。

  • Call us at 555.345.6789

  • @username

  • Send us an email

Backgrounds 背景

Gradients 渐变

  • Horizontal 水平渐变 .bg-gradient-h
  • Radial 径向渐变 .bg-gradient-r
  • Vertical 垂直渐变 .bg-gradient-v

Vertical Gradient 垂直渐变

.bg-gradient-v

Radial Gradient 径向渐变

.bg-gradient-r

.background-video

WebSlides is the easiest way to make HTML presentations. Inspire and engage.
WebSlides 是制作 HTML 演示文稿的最简单方法。启发和参与。

BG Video with Overlay 背景覆盖视频

<slide class="bg-blue aligncenter" video="https://webslides.tv/static/videos/working.mp4 poster='https://webslides.tv/static/images/working.jpg' .dark"> or .light

Youtube Background 油管背景

<slide youtube=".dark id='_m67JbGjWnc' autoplay loop">

.background-(position)

  • Ultra-Fast WiFi 超快速 Wifi

    Simple and secure file sharing.
    简单安全的文件共享。

  • All day battery life 全天电池寿命

    Your battery worries may be over.
    您对电池的担忧可能已经结束。

  • All day battery life 全天电池寿命

    We'll fix it or if we can't, we'll replace it.
    我们将修复它,或者如果不能,我们将替换。

Components 组件

Shadowbox 盒阴影

:::shadowbox


  • We're web people. 我们是互联网人。

    There're excellent presentation tools out there. WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.
    那里有很棒的演示工具。 Webslides 是关于讲故事,并以美丽的方式分享它。超文本和清洁代码作为叙事元素。

  • Work better, faster. 更好,更快。

    Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.
    设计师,营销人员和记者现在可以专注于内容。只需选择一个演示,然后在几分钟内对其进行自定义。

Card 卡片

.card-50.bg-white

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great.
unsplash是一个非常酷的资源。它是创意共享零许可的照片的集合,这些照片真的很棒。

  • Role: Frontend
  • client: Acme
  • year: 2018

Bonsai 盆栽

Bonsai is a Japanese art form using trees grown in containers — .fullscreen > .card-50.
盆景是一种日本艺术形式,使用在容器中种植的树木。

Similar practices exist in other cultures, including the Chinese tradition of penjing from which the art originated, and the miniature living landscapes of Vietnamese hòn non bộ.
在其他文化中也存在类似的实践,包括艺术产生的中国人的传统,以及越南人的微型生活景观。

Flexible blocks 弹性块

:::flexblock = Flexible blocks with auto-fill and equal height. 具有自动填充和相等高度的弹性块。

Flexblock 弹性块

  • Purpose 目的

    Businesses that people love5
    人们爱的企业5

  • Purpose 目的

    Businesses that people love6
    人们爱的企业5

  • Purpose 目的

    Businesses that people love7
    人们爱的企业5

  • Purpose 目的

    Businesses that people love8
    人们爱的企业5


Flexblock 弹性块{.blink.border}

$40

Watch TV shows anytime, anywhere 随时观看电视节目

.frame.bg-red

Grid Columns 网格列

Design 设计

Design for growth. We've built a team of world-class designers, developers, and managers.
增长设计。我们建立了一个由世界一流的设计师,开发人员和经理组成的团队。

Videos 视频

We connect your audience needs, business goals, and brand values into a strategy.
我们将您的受众需求,业务目标和品牌价值连接到策略中。

Users 用户

We offer personalized services with deep expertise in design and technology.
我们提供具有设计和技术专业知识的个性化服务。

Teams 团队

We train teams to help organizations succeed in the digital age.
我们训练团队,以帮助组织在数字时代取得成功。

Animations 动画

Autoplay Animation 自动播放

.animated.lightSpeedIn.slow

animate.css + .build


  1. fadeIn
  2. swing
  3. flash
  4. pulse
  5. shake
  6. bounceIn
  7. wobble
  8. fadeInLeft
  9. flipInX
  10. tada
  11. slideInUp
  12. jello
  13. heartBeat
  14. fadeInUp
  15. lightSpeedIn

.background.anim

Content Position 内容定位

1/9 left top 左上

Put content wherever you want. Have less. Do more. Create beautiful solutions.
将内容放在您想要的任何地方。少。多做。创建美丽的解决方案。

.slide-top and .content-left

2/9 center top 中上

In a village of La Mancha, the name of which I have no desire to call to mind,
在一个 La Mancha 的村庄里,我不想想到它的名字,

.slide-top and .content-center

3/9 right top 右上

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.
不久之后,有一位绅士在长矛架,一个老桶,一个瘦弱的骇客和一个灰狗的绅士身上居住。

.slide-top and .content-right

4/9 left top 左上

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,
大多数夜晚的沙拉比羊肉要多的牛肉的牛肉,在星期六的碎屑,

.content-left

5/9 center top 中上

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.
星期五的小扁豆和周日的鸽子左右,他的收入中四分之三。

.content-center

6/9 right top 右上

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,
他的其余部分都穿着双打的布料,天鹅绒马裤和鞋子来搭配假期,

.content-right

7/9 left bottom 左下

while on week-days he made a brave figure in his best homespun.
在周日的时候,他在自己最好的本台人中勇敢地做了一个勇敢的数字。

.slide-bottom and .content-left

8/9 center bottom 中下

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,
他在家里有一个管家,过去四十,一个二十岁以下的侄女,还有一个田野和市场的小伙子,

.slide-bottom and .content-center

9/9 right bottom 右下

who used to saddle the hack as well as handle the bill-hook.
他曾经骑马并处理比尔钩子。

.slide-bottom and .content-right

1,000,000

We're working to protect up to a million acres of sustainable forest.
我们正在努力保护多达一百万英亩的可持续森林。

Layout 布局

What is Stendhal Syndrome? 什么是 Stendhal 综合征?

Beauty overdose. 美食过量。.text-pull-right

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.
想象您在佛罗伦萨。如果您突然开始感到自己无法呼吸,那么您可能正在遇到 Stendhal 综合征。

Psychiatrists have long debated whether it really exists.
精神科医生长期以来一直在争论它是否真正存在。

The syndrome is not only associated with viewing a beautiful place, but also good art.
该综合征不仅与观看美丽的地方有关,而且还与美术相关。

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.
意大利艺术的美丽具有集中的完美和超越性感,令人上瘾。

Header 顶部(logo) .alignright

Simple CSS Alignments 简单的 CSS 对齐

Put content wherever you want. 将内容放在您想要的任何地方。

Prismjs for Code Highlight 代码突出显示的 Prismjs

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.
#webslides元素中的每个父级都是单独的幻灯片。

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides , by Jenn Schiffer ::)
代码整洁,可扩展且文献良好。它使用直观的标记与流行的命名约定。无需过度使用课程或嵌套。 基于 simpleslides,作者:jenn Schiffer ::)

<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container (width: 90%) with fadein</h2>
    </div>
  </section>
</article>

Vertical sliding? 垂直滑动? <article id="webslides" class="vertical">

Optional · 500+ icons

Font Awesome as SVG icons

:fa-flag:

Quote 引用

I have always appreciated designers who dare to reinterpret fabrics and proportions, so I follow the Japanese and Belgian designers.
我一直很欣赏敢于重新诠释面料和比例的设计师,所以我跟随日本和比利时的设计师。 Zaha Hadid

"There is something only a CEO uniquely can do, which is set that tone, which can then capture the soul of the collective."
“只有首席执行官独特地可以做的事情,这是一个基调,然后可以捕捉集体的灵魂。” Satya Nadella, CEO of Microsoft.

“WebSlides helped us build a culture of innovation and excellence.”
“ Webslides 帮助我们建立了一种创新和卓越的文化。” Leonardo da Vinci

Plugins 插件

echarts

Plugins:: mermaid

Basic sequence diagram 基本序列图

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?

Message to self in loop 向自我循环的消息

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

Gantt 甘特图

gantt
       dateFormat  YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

Flowchart support for fontawesome 流程图支持 Fontawesome

graph TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    B-->E(A fa:fa-camera-retro perhaps?);

Plugins:: KaTex

KaTex

equationdescription
B=0\nabla \cdot \vec{\mathbf{B}} = 0divergence of B\vec{\mathbf{B}} is zero
×E+1cBt=0\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}curl of E\vec{\mathbf{E}} is proportional to the rate of change of B\vec{\mathbf{B}}
×B1cEt=4πcjE=4πρ\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rhowha?

Others 其它

Avatar 头像

(80, 72, 64, 56, 48, and 40).

List 列表


  • Niubility!牛逼!
  • WebSlides
  • Webpack build in 基于 Webpack 构建
  • Markdown-it
  • Posthtml
  • Prismjs

Table 表格

Left-aligned 居左对齐Center-aligned 居中对齐Right-aligned 居右对齐
git statusgit statusgit status
git diffgit diffgit diff
git statusgit statusgit status

Speaker Mode 演讲者模式

Click Url + ?mode=speaker to show Speaker Mode.

View More Demos? 查看更多案例?

* * *

U work so hard, but 干不过 write PPTs
累死累活干不过做 PPT 的!

快使用 nodeppt 轻松搞定高大上 PPT
nodeppt 助力你的人生逆袭之路!

Github