Improve exampleSite presentation

Better flow and more information

Plus... emoji!
This commit is contained in:
dzello
2018-07-19 16:49:24 +02:00
parent ad403c9682
commit faadedd499
11 changed files with 161 additions and 106 deletions
+93 -56
View File
@@ -8,7 +8,7 @@ weight = 20
## Prerequisite
Add this to your `config.toml`:
First, add this to your `config.toml`:
```toml
[outputFormats.Reveal]
@@ -19,53 +19,9 @@ isHTML = true
---
## Configure themes
### Presentation at site root
Optional. In `config.toml` or front matter of individual presentations.
```toml
[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"
```
[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) ·
[highlight.js themes](https://highlightjs.org/static/demo/)
---
## Custom Reveal.js theme
Point to a file in the `static` directory.
```toml
[params.reveal_hugo]
custom_theme = "themes/dzello.css"
```
---
## Configure Reveal.js
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
```toml
[params.reveal_hugo]
slide_number = true
transition_speed = 'fast'
```
[Reveal config params](https://github.com/hakimel/reveal.js/#configuration)
---
# Creating presentations
---
## Presentation at `/`
In `content/_index.md`:
Create `content/_index.md`:
```markdown
+++
@@ -74,14 +30,34 @@ outputs = ["Reveal"]
# Slide 1
---
# Slide 2
Hello world!
```
---
Put more slides in `content/home/*.md`
### Add slides in same file
Separate them by `---`:
```
# Slide 1
Hello world!
---
# Slide 2
Hello program!
```
---
### Add slides with other files
Add slides to `content/home/*.md`
```markdown
+++
@@ -95,12 +71,11 @@ weight = 10
# Slide 4
```
Use `weight` to specify the order relative to other files.
<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
---
## For any Hugo section
### Presentation at '/{section}/'
In `content/{section}/_index.md`:
@@ -119,7 +94,7 @@ outputs = ["Reveal"]
---
Put more slides in `content/{section}/*.md`
Add slides from other files in `content/{section}/*.md`
```markdown
+++
@@ -133,4 +108,66 @@ weight = 10
# Slide 4
```
Use `weight` to specify the order relative to other files.
<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
---
# Configuration
---
## Reveal.js themes
Put in `config.toml` or a presentation's front matter.
Use the `theme` key for themes that come with Reveal.js.
```toml
[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"
```
[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) &middot;
[highlight.js themes](https://highlightjs.org/static/demo/)
---
## Use a custom theme
Use the `custom_theme` key to point to a CSS file in the `static` directory.
```toml
[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
```
---
## Like this theme?
reveal-hugo comes with 2 extra Reveal.js themes:
- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
<br>
<small>
They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
</small>
---
## Reveal.js params
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
```toml
[params.reveal_hugo]
history = true
slide_number = true
transition = 'zoom'
transition_speed = 'fast'
```
[Full list of params](https://github.com/hakimel/reveal.js/#configuration)