mirror of
https://github.com/Threnklyn/reveal-hugo.git
synced 2026-06-05 13:19:53 +02:00
Improve exampleSite presentation
Better flow and more information Plus... emoji!
This commit is contained in:
@@ -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) ·
|
||||
[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)
|
||||
|
||||
Reference in New Issue
Block a user