返回顶部

OutOfMemory.CN技术专栏-> html-> nodePPT 自定义模版

nodePPT 自定义模版

更多

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

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

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

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

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

1. 关于模版

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

感觉默认的模板不符合新意?可以支持自定义模板,查看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 是一个 Sass 文件,我们可以使用 compass 将其转换成 css 文件,再使用文档中提到的 files: 标签将其引入。

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

<script src="http://zengrong.net/post/js/zoom.js"></script>
<link rel="stylesheet" href="http://zengrong.net/post/css/theme.your_theme.css">
<link rel="stylesheet" href="http://zengrong.net/post/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 theme.your_theme.css 转换成 css 文件,然后将其复制到 ppt 根目录中的 css 子目录。同样使用 theme: your_theme 来指定 PPT 模版,效果相同。

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

我的模版要求如下:

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

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

nodePPT slides

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

所以,要实现选择最后一页幻灯片,就不能使用 :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

(全文完)

推荐阅读:
支持

0

反对

0

zrong:可能是一个程序员

您可以通过下面的社交媒体联系/了解作者的更多信息:

发表评论