由于 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
感觉默认的模板不符合新意?可以支持自定义模板,查看theme.moon

自定义后的模板路径在markdown的设置里填写:

title: 这是演讲的题目
speaker: 演讲者名字
url: 可以设置链接
transition: 转场效果,例如:zoomin/cards/slide
files: /css/theme.moon.css

另外有:colors-moon-blue-dark-green-light 共六套自带皮肤可供选择

theme: moon

or url?theme=moon

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

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

1
2
3
4
5
6
<script src="./js/zoom.js"></script>
<link rel="stylesheet" href="./css/theme.your_theme.css">
<link rel="stylesheet" href="./css/theme.moon.css">
<!--placeholder-->
</body>
</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 中图像的相对路径问题。

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

留言

2015-07-29
次访问