nodePPT 自定义模版

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

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

• reveal.js — The HTML Presentation framework

• impress.js — presentation tool based on the power of CSS3

• deck.js — Modern HTML Presentations

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

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

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

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

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

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

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

因此，正确的方法应该是使用 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 将 theme.your_theme.css 转换成 css 文件，然后将其复制到 ppt 根目录中的 css 子目录。同样使用 theme: your_theme 来指定 PPT 模版，效果相同。

我的模版要求如下：

1. 首页和末页必须显示特定的背景图像，而内容页则使用另一张背景图像。

2. 首页和末页的背景图像的背景色不同。因此首页的文字主体色应为浅色，而内容页的文字主体色应为深色。

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

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

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

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

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

（全文完）

原文链接：http://outofmemory.cn/html/html5-css3-ppt-template