nodePPT 自定义模版

2015-07-29 [2355] technology html5 javascript

由于 HTML5 和 CSS3 的表现力增强，在线简报系统（好吧，我们还是熟悉 PPT 这个词） 技术也逐渐成熟了， [Slides][1] 和 [SliderRocket][2] 这种在线服务现在已经得到了广泛应用。

对于爱折腾的程序员来说，希望得到表现力更强的工具，这样的东东也不少：

  • [reveal.js -- The HTML Presentation Framework][3]
  • [impress.js -- presentation tool based on the power of CSS3][4]
  • [deck.js -- Modern HTML Presentations][5]

仍嫌不过多的可参考这篇： [5 of the Best Free HTML5 Presentation Systems][6] 。

[nodePPT][7] 是个国人开发的类似系统，可以采用 GFM(Github Flavored Markdown) 来编写在线演示。

本文简单介绍如何实现 nodePPT 的自定义模版。

1. 关于模版

nodePPT 的文档中关于自定义模版的部分是这样写的：

 1感觉默认的模板不符合新意？可以支持自定义模板，查看theme.moon
 2
 3自定义后的模板路径在markdown的设置里填写：
 4
 5title: 这是演讲的题目
 6speaker: 演讲者名字
 7url: 可以设置链接
 8transition: 转场效果，例如：zoomin/cards/slide
 9files: /css/theme.moon.css
10
11另外有：colors-moon-blue-dark-green-light 共六套自带皮肤可供选择
12
13theme: moon
14
15or url?theme=moon

[theme.moon][9] 是一个 [Sass][10] 文件，我们可以使用 [compass][8] 将其转换成 css 文件，再使用文档中提到的 files: 标签将其引入。

但这种方式并不合适，因为在 nodePPT 生成的结果文档中，使用 files: 引入的文件会被安排在文档自带的 theme 文件之前，这就导致文档自带的 theme style 会覆盖引入的 css 定义。如下所示：

1<script src="./js/zoom.js"></script>
2<link rel="stylesheet" href="./css/theme.your_theme.css">
3<link rel="stylesheet" href="./css/theme.moon.css">
4<!--placeholder-->
5</body>
6</html>

因此，正确的方法应该是使用 theme: 标签指定模版名称。以模版名称为 theme.your_theme.css 为例，有两种方法：

方法一

直接将模版文件复制到 nodePPT 的安装目录中，在 Mac OSX 上的默认安装路径如下：

/usr/local/lib/node_modules/nodeppt/assets/scss

这样，就可以使用 theme: your_theme 来指定 PPT 的模版。此时的 theme.your_theme.css 就是一个 Sass 文件，在使用的时候 nodePPT 会自动帮我们转换成 css。

方法二

使用 [compass][8] 将 theme.your_theme.css 转换成 css 文件，然后将其复制到 ppt 根目录中的 css 子目录。同样使用 theme: your_theme 来指定 PPT 模版，效果相同。

2. 针对首页和末页的特殊处理

我的模版要求如下：

  1. 首页和末页必须显示特定的背景图像，而内容页则使用另一张背景图像。
  2. 首页和末页的背景图像的背景色不同。因此首页的文字主体色应为浅色，而内容页的文字主体色应为深色。

在 notePPT 中，所有的 [slide] 标签会被渲染成 <slide> html 标签，并包含在 id 为 container 的 <slides> 标签中。如下图所示：

![nodePPT slides][51]

同时，要注意最后一个 slide 并非就是最后一页。 最后一页其实是 nodePPT 自动生成了一个 id 为 tip 的 <div> 标签（上图中反色的部分）。

所以，要实现选择最后一页幻灯片，就不能使用 :last-child 选择符，而应该使用 :nth-last-child(2) 。

下面的 Sass 实现了针对首页和末页的特殊处理，其中 $font-color 是浅色，而 $title-color 是深色。同时，要注意 css 中图像的相对路径问题。

 1slides > slide{
 2    color: $font-color;
 3    letter-spacing: 2px;
 4	background-color: $bg-color;
 5	background-image: url(../img/content.png);
 6	background-repeat: no-repeat;
 7	background-size: 100% 100%;
 8	color: $font-color;
 9	&:first-child,
10	&:nth-last-child(2){
11		background-image: url(../img/title.png);
12		color: $title-color;
13	}
14	&:first-child h1, 
15	&:first-child h2,
16	&:first-child h3, 
17	&:nth-last-child(2) h1,
18	&:nth-last-child(2) h2,
19	&:nth-last-child(2) h3{
20		color: $title-color;
21	}
22	// more and more

效果可以看这里： [game-deploy][11]

（全文完） [1]: http://slides.com/ [2]: http://www.sliderrocket.com/ [3]: http://lab.hakim.se/reveal-js/ [4]: http://bartaz.github.io/impress.js/ [5]: http://imakewebthings.com/deck.js/ [6]: http://www.sitepoint.com/5-free-html5-presentation-systems/ [7]: https://github.com/ksky521/nodePPT [8]: https://blog.zengrong.net/post/2353.html [9]: https://github.com/ksky521/nodePPT/blob/master/assets/scss/theme.moon.scss [10]: http://sass-lang.com/ [11]: http://doc.zengrong.net/ppt/game-deploy/index.htm [51]: /uploads/2015/07/nodeppt-slides.png