Echoesworks NPM

Logo

#EchoesWorks#

Next-Generation Tech Blog/Presentation/Slider Framework

下一代技术博客/展示/幻灯片框架

简介: EchoesWorks —— 打造下一代技术Blog/Presentation 框架

##Demo: http://demo.echoesworks.com/

##Feature

###Core

Markdown Presentation
Integrate Github Code/Gist Code
Full Screen Background Image
Left/Right side Images Support
Process Bar
Auto Play
Subtitles
Tab Control

支持 Markdown
Github代码显示
全屏背景图片
左/右侧图片支持
进度条
自动播放
字幕
分屏控制

##Usage##

###Clone Demo

git clone git@github.com:echoesworks/echoesworks-demo.git yourslide

###Setup

1.Install

bower install echoesworks

2.Data

Create example.md:

<section>
![background](app/background.jpg)

#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