• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

web-slide: NodeJs网页幻灯片制作工具

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

web-slide

开源软件地址:

https://gitee.com/wings-j/web-slide

开源软件介绍:


web-slide

用于生成网页幻灯片的 Node 程序,由多个输入文件(html、css、js、json),最终输出为一个 HTML 文件。

安装

npm install --global @wings-j/web-slide

示例

Demo

右下角的按钮可翻页。

示例源文件可见demo

使用方法

  1. 在工作目录下新建input文件夹,在这个文件夹中编写幻灯片内容(html、css、json)。
  2. 在工作目录下运行web-slide
web-slide

运行成功后在工作目录下会index.html文件。

观察模式:

web-slide --watch

输入

所有输入(配置、幻灯片、资源)放置在 input 文件中。

配置

配置文件类型为 JSON,默认名称为 $config.json

配置项可见:./src/config/runtime.js

全局脚本

全局脚本会在 DOMContentLoad 后执行,默认名称为 $config.js

模块可使用 CommonJs 和 ES 模块方式引入。

全局样式

全局样式会应用到所有幻灯片中,默认名称为 $config.css 。在$config.css 中设置#Slide的属性可以配置全局样式。

内置的 id 和 class 使用大坨峰和连字符命名,自定义的 id 和 class 建议使用小拓峰和连字符命名。

幻灯片

幻灯片以 HTML 文件组织,一个 HTML 文件代表一张幻灯片。

幻灯片以 HTML 的名称排序。

模板

<body></body><style></style><script></script>

body、style、script 的内容会被提取并添加到页面中。

API

Broadcast(广播,详见:./src/web/core/broadcast/index.js),会触发事件:

  • render:渲染

样式

详见 ./src/web/style


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap