Cleaver快速制作网页PPT

简介: 原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/写在开始之前互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。

原文首发链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/

写在开始之前

互联网时代,以浏览器作为入口,已经有越来越多的桌面应用被web应用所取代。微软最赚钱的Office办公软件,也正在被免费的web应用所吞噬。如今即便薄学如我就已然知晓reveal.js impress.js等各种轮子来制作体验优良的网页PPT。今天就来尝试下这Node.js的轮子Cleaver来制作网页PPT。

Cleaver基于HTML5,用最短的时间做出超炫幻灯片。你还会坚持PowerPoint吗?

Cleaver介绍

如果你已经有了一个Markdown的文档,30秒就可以制作成幻灯片。Cleaver是为Hacker准备的工具。
Cleaver的官方发布页:http://jdan.github.io/cleaver/
参考文章:30秒制作幻灯片 Cleaver

Cleaver安装

系统环境(据悉:cleaver不支持win系统)
Linux: Ubuntu 12.04 LTS 64bit
node: v0.6.12
npm: 1.1.4
通过nodejs安装Cleaver

//局部安装Cleaver
~ mkdir nodejs-cleaver && cd nodejs-cleaver
~ sudo npm install cleaver

//全局安装Cleaver
~ sudo npm install cleaver -g

Cleaver基本使用

执行cleaver命令,解析一个markdown文件,会自动生成HTMl文档,欧耶,算是Pandoc的部分功能深入了;

用cleaver自带的例子:

//如是局部安装,运行下面一句就好
cleaver node_modules/cleaver/examples/basic.md

//如是全局安装,请跑起Like this:
cleaver  /usr/local/lib/node_modules/cleaver/examples/basic.md

Cleaver配置选项option

title: Basic Example  #HTML的标题名
author:               #作者信息,在最后一页显示
  name: Jordan Scales
  twitter: jdan
  url: http://jeffjade.com
output: basic.html

除此之外还有其他额外设置,譬如:

  • theme: 皮肤(theme: jdan/cleaver-retro)
  • style: css样式表(style: css/main.css)
  • output: 生成的HTML文件名(output: basic.html)
  • controls: 控制按钮(controls: true)
  • progress: 顶部显示进程条(progress: true)
  • agenda: 生成一个目录页(progress: false)
  • encoding: 文档的字符编码(encoding: utf-8)
  • template: 设置每张slide的模板(template: template/slide.mustache)
  • layout: 设置HTML模板(template: template/layout.mustache)

Cleaver的正文内容:

Cleaver仅支持Markdown语法的,通过Markdown构建网页内容,Markdown官方网站:http://daringfireball.net/projects/markdown/

需要注意的是,Cleaver以” — “(两个中横线)做为分页的标志,其他语法都遵循Markdown规则。

MS Office PowerPoint 正在被渐行渐远。。。

写在最后

相比于之下,impress.js, reveal.js以及Cleaver三者各有特色吧;在唯快不破的理论下,Cleaver自然占据了无与伦比的优势,只是像动画,样式等比于impress是一个短板。并且,在写此文的时候欲以Cleaver来呈现的,不过总是报出下面这样的问题(Mac OS X Yosemite):

!! Cannot read property 'compiled' of undefined
Please report this to https://github.com/chjj/marked.

花了些许时间来探究这个问题,只是现在网络上目测关于这个信息不是很多。逐一对比之下,文章的格式没什么问题。在即将放弃的时候,发现原来是标记代码的时候用了```shell,所造成的问题,去掉shell或者换成别的标记就没有问题了。额...。

这里是此文的PPT版本(Cleaver);当然,这个是需要在PC偏高些的浏览器上才能正常查看。

原文链接:http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/

倾城之链 | NICE LINKS DJI Mavic Air
目录
相关文章
|
移动开发 开发者 HTML5
制作一个表白网页|学习笔记
快速学习制作一个表白网页
111 0
制作一个表白网页|学习笔记
|
存储 JavaScript 前端开发
Slides - 在线制作效果精美的幻灯片(PPT)
  Slides 是可以在浏览器中使用的在线幻灯片编辑器。与传统的演示软件,比如 PowerPoint 相比,Slides 不需要下载任何东西。你所有的信息都是安全地存储在我们的服务器上,无论你在哪里。
1719 0
|
Web App开发 JavaScript 前端开发
使用 WordPress 主题制作的20个精美网页
  WordPress 是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用 PHP 语言和 MySQL 数据库开发的。用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客。
1078 0
|
iOS开发 前端开发
充实你的素材库!10款免费的 PSD 素材下载
  由于网页设计师没有时间来自己从零开始设计,所以在设计项目中使用网络上已有的设计素材是常见的方式。这就是为什么我们经常会到网上搜索可以免费下载的素材。   今天,我们这里有几套不同的免费的 PSD 素材分享给你,从 iPhone 样机到用户界面等等。
924 0
20套新鲜出炉的免费 PSD 格式的图标《免费下载》
  在网页设计中,设计师专注于每一个领域的设计,包括颜色选择、图标、创造力、混色等。正确的选择图标可以使他们的设计脱颖而出,看起来令人震惊。在 Web 设计领域,图标发挥非常重要的作用,因为美丽的和创造性的图标集可以很容易地使网页设计更有吸引力。
854 0
|
前端开发 iOS开发
设计宝库:22套精美的 PhotoShop 素材免费下载
  《设计宝库》系列给大家带来22套精美的 PSD 设计素材,你可以免费下载使用。设计师经常会去网上搜罗各种各样的素材,这些免费素材不仅能帮助他们节省大量的时间,而且能有很好的效果。非常感谢那些很有才华的设计师分享它们的劳动成果,让更多的人可以使用他们的创意设计。
873 0
|
iOS开发 前端开发 敏捷开发
『精品素材』20套免费的网页小图标素材下载
  在网页设计工作中,图标设计是最耗时的任务之一,但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用。下面这个列表收集了20套免费的网页小图标,记得分享和推荐啊。 您可能感兴趣的相关文章 10套华丽的Windows8 Metro风格图标 让人爱不释手的13套精美网...
1086 0