107 lines
2.3 KiB
Markdown
107 lines
2.3 KiB
Markdown
|
+++
|
||
|
|
weight = 21
|
||
|
|
+++
|
||
|
|
|
||
|
|
# 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)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Extending the layout
|
||
|
|
|
||
|
|
Use partials to add HTML to the page at the closing of the head and the body tags, either for all presentations or just a specific one.
|
||
|
|
|
||
|
|
This is the recommended way to add script and style tags to customize your presentations.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Here is where partials go for different presentations and places on the page.
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
| Presentation | Before </head> | Before </body> |
|
||
|
|
|--------------|---------------------------------|---------------------------------|
|
||
|
|
| All | reveal-hugo/head.html | reveal-hugo/body.html |
|
||
|
|
| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html |
|
||
|
|
| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Example customization
|
||
|
|
|
||
|
|
In `home/reveal-hugo/head.html`:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<style>
|
||
|
|
.reveal section h1 {
|
||
|
|
color: blue;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
In `home/reveal-hugo/body.html`:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script type="text/javascript">
|
||
|
|
Reveal.addEventListener('slidechanged', function(event) {
|
||
|
|
console.log("🎞️ Slide is now " + event.indexh);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
```
|