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

Qualy-org/qualy-presenter: A boilerplate to create presentations using Reveal.JS ...

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

开源软件名称(OpenSource Name):

Qualy-org/qualy-presenter

开源软件地址(OpenSource Url):

https://github.com/Qualy-org/qualy-presenter

开源编程语言(OpenSource Language):

CSS 94.5%

开源软件介绍(OpenSource Introduction):

Qualy Presenter

This is a boilerplate to use Reveal.JS easily with Gulp, Pug and Stylus.

To know more about Reveal.js and how to use, read the docs here.

Getting Started

Demo

You can see the demo here

Installation

First of all, install the dependencies to run this boilerplate.

# Clone this repository
$ git clone [email protected]:Qualy-org/qualy-presenter.git new_project
$ cd new_project

# install dependencies
$ npm install
# run tasks and serve
$ npm start

With the commands above, you have everything to start.

├── Readme.md
├── build
│   ├── css
│   │   └── main.css
│   │   └── theme.css
│   ├── img
│   ├── index.html
│   └── js
│       ├── main.js
│       └── vendor
├── gulp
│   ├── index.js
│   ├── paths.js
│   └── tasks
├── gulpfile.js
├── package.json
└── src
    ├── img
    ├── js
    │   ├── main.js
    │   └── vendor
    ├── slides
    ├── styl
    │   ├── highlight-themes
    │   ├── reveal-themes
    │   ├── vendor
    │   ├── main.styl
    │   └── theme.styl
    └── templates
        ├── inc
        │   ├── head.pug
        │   └── scripts.pug
        └── index.pug

How to Use

  • Write your slides in src/slides folder in separated files using the pug syntax and add them on templates/index.pug.

  • If you want to add another scripts and css use the templates/inc/ folder and call them in the templates/index.pug.

  • Look for different themes on src/styl/reveal-themes and call them on src/styl/theme.styl.

  • For highlight themes you can see on src/styl/highlight-themes.

How to use Speaker Notes

Speaker Notes

Just add data-notes to the section of the slide, like the code bellow:

- var notes = 'You can enter anything you want here. Just add data-notes to the section.'

section(data-notes=notes)
  img(src="img/qualy-presenter.png", alt="")
  p
    a(href="https://github.com/Qualy-org/qualy-presenter") Look the code on Github <3

How to use with git and deploy to Github Pages

When you clone this repo, every git information will be downloaded to. So, you have to remove all my git stuff to create yours.

# Inside of your project runs to remove git folder.
rm -Rf .git

Next, initialize your git repository:

# init the repo
git init

Commit all files:

# add all files to commit
git add .
# create a commit
git commit -m "Initial commit"

The first deploy needs to be manual:

# creates a gh-pages branch
git checkout -b gh-pages

# push and track the gh-pages branch
git push --set-upstream origin gh-pages

To do next deploys, you just have to run with gulp:

# will create a .publish folder with build content
# and push to gh-pages branch.
npm run deploy

Tasks

  • gulp: Initialize watch for changes and a server(localhost:3000)
  • gulp js: execute js files
  • gulp notes: copy speaker notes
  • gulp stylus: compile stylus files
  • gulp imagemin:compress image files
  • gulp watch: call for watch files
  • gulp pug: compile pug files
  • gulp deploy-pages: deploy compiled files at build to github on branch gh-pages.

Examples

Some presentations using the boilerplate:

License

This boilerplate is free and open source software, distributed under the The MIT License. So feel free to use this to create your site without linking back to me or using a disclaimer.

If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.




鲜花

握手

雷人

路过

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

请发表评论

全部评论

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

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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