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 背景
Corporate Backgrounds 规定背景
General Colors 常规背景
Colorful 多彩的
Transparent 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.
设计师,营销人员和记者现在可以专注于内容。只需选择一个演示,然后在几分钟内对其进行自定义。
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
人们爱的企业5Purpose 目的
Businesses that people love6
人们爱的企业5Purpose 目的
Businesses that people love7
人们爱的企业5Purpose 目的
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
- fadeIn
- swing
- flash
- pulse
- shake
- bounceIn
- wobble
- fadeInLeft
- flipInX
- tada
- slideInUp
- jello
- heartBeat
- fadeInUp
- 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">
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
{b}: {c} ({d}%)"},"legend":{"orient":"vertical","x":"left","data":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其他"]},"series":[{"name":"访问来源","type":"pie","selectedMode":"single","radius":[0,"30%"],"label":{"normal":{"position":"inner"}},"labelLine":{"normal":{"show":false}},"data":[{"value":335,"name":"直达","selected":true},{"value":679,"name":"营销广告"},{"value":1548,"name":"搜索引擎"}]},{"name":"访问来源","type":"pie","radius":["40%","55%"],"label":{"normal":{"formatter":"{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ","backgroundColor":"#eee","borderColor":"#aaa","borderWidth":1,"borderRadius":4,"rich":{"a":{"color":"#999","lineHeight":22,"align":"center"},"hr":{"borderColor":"#aaa","width":"100%","borderWidth":0.5,"height":0},"b":{"fontSize":16,"lineHeight":33},"per":{"color":"#eee","backgroundColor":"#334455","padding":[2,4],"borderRadius":2}}}},"data":[{"value":335,"name":"直达"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"},{"value":135,"name":"视频广告"},{"value":1048,"name":"百度"},{"value":251,"name":"谷歌"},{"value":147,"name":"必应"},{"value":102,"name":"其他"}]}]}
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
equation | description |
---|---|
∇⋅B⃗=0 | divergence of B⃗ is zero |
∇×E⃗+c1∂t∂B⃗=0⃗ | curl of E⃗ is proportional to the rate of change of B⃗ |
∇×B⃗−c1∂t∂E⃗=c4πj⃗∇⋅E⃗=4πρ | wha? |
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 status | git status | git status |
git diff | git diff | git diff |
git status | git status | git status |
Speaker Mode 演讲者模式
Click Url + ?mode=speaker to show Speaker Mode.
View More Demos? 查看更多案例?
* * *