Next-Generation Tech Blog/Presentation/Slider Framework
zh
下一代技术
博客/展示/幻灯片框架
简介: EchoesWorks —— 打造下一代技术Blog/Presentation 框架
Demo: http://demo.echoesworks.com/
- 支持 Markdown
- Github代码显示
- 全屏背景图片
- 左/右侧图片支持
- 进度条
- 自动播放
- 字幕
- 分屏控制
git clone [email protected]:echoesworks/echoesworks-demo.git yourslide
1.Install
bower install echoesworks
2.Data
Create example.md:
<section>
#EchoesWorks
##Phodal Huang
</section>
<section>
#Design for Developer
##EchoesWorks?
##What is different?
##What we need?
</section>
Create data.json:
[
{
"time": "00:01.00",
"code": "https://raw.githubusercontent.com/phodal/echoesworks/master/bower.json",
"word": "hello, world"
},
{
"time": "00:05.00",
"word": [
{
"word": "Привет"
},
{
"word": "Bonjour"
},
{
"word": "こんにちは"
},
{
"word": "你好"
},
{
"word": "Ciao"
},
{
"word": "Hello, World"
}
]
},
{
"time": "00:12.51",
"code": false,
"word": "hello, world, 2"
}]
- Markdown Slide
- Data for code & Time Control
3.Code
var EW = new EchoesWorks({
element: 'slide'
});
Example with slide
EchoesWorks.get('data/example.md', function(data){
document.querySelector('slide').innerHTML = EchoesWorks.md.parse(data);
EchoesWorks.imageHandler();
new EchoesWorks({
element: 'slide'
});
})
##Setup Development##
1.Install devDependencies
npm install
2.Development
3.Run Test
npm test
4.Push Code & Waiting CI
-
Slide
-
Markdown
-
Time
-
Process Bar
© 2015 Phodal Huang. This code is distributed under the MIT license. See LICENSE.txt in this directory.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent