2018-05-01 03:47:20 +02:00
+++
weight = 34
+++
2018-07-19 16:49:24 +02:00
## Slide
2018-05-01 03:47:20 +02:00
2018-07-23 00:49:48 +02:00
Customize individual slide attributes like id, class, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
2018-05-01 03:47:20 +02:00
---
2018-07-22 18:25:48 +02:00
{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}}
2018-05-01 03:47:20 +02:00
2018-05-01 08:02:09 +02:00
## Custom slide 1
2018-05-01 03:47:20 +02:00
```
2018-07-22 18:25:48 +02:00
{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}}
2018-07-19 16:49:24 +02:00
2018-05-01 03:47:20 +02:00
## Custom slide 1
2018-07-19 16:49:24 +02:00
2018-05-01 03:47:20 +02:00
{{%/* /slide */%}}
```
{{% /slide %}}
---
2018-07-22 18:25:48 +02:00
{{% slide id="custom-2" background="#FF4081" %}}
2018-05-01 03:47:20 +02:00
## Custom slide 2
```
2018-07-22 18:25:48 +02:00
{{%/* slide id="custom-2" background="#FF4081" */%}}
2018-07-19 16:49:24 +02:00
2018-05-01 03:47:20 +02:00
## Custom slide 2
2018-07-19 16:49:24 +02:00
2018-05-01 03:47:20 +02:00
{{%/* /slide */%}}
```
{{% /slide %}}
2018-07-21 10:55:03 +02:00
---
2018-07-22 18:25:48 +02:00
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
< br >
```markdown
Go to [custom slide 1 ](#custom-1 )
```
< small >
Go to [custom slide 1 ](#custom-1 )
< / small >
---
2018-07-22 18:42:27 +02:00
Slide attribute possibilities from the [Reveal.js docs ](https://github.com/hakimel/reveal.js ):
- `autoslide`
- `state`
- `background`
- `background-color`
- `background-image`
- `background-size`
- `background-position`
- `background-repeat`
---
- `background-video`
- `background-video-loop`
- `background-video-muted`
- `background-interactive`
- `background-iframe`
- `background-transition`
- `transition` (can have different in and out transitions)
- `transition-speed`
- `notes` (can also use the note shortcode)
- `timing`
---
2018-07-21 10:55:03 +02:00
{{% section %}}
2018-07-23 00:44:05 +02:00
## Slide templates
Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
< br >
< small >
navigate down to learn more
< / small >
< br >
< a href = "#" class = "navigate-down" > 🔽< / a >
---
Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
```toml
[reveal_hugo.templates.hotpink]
2018-07-23 00:49:48 +02:00
class = "hotpink"
2018-07-23 00:44:05 +02:00
background = "#FF4081"
```
---
{{% slide template="hotpink" %}}
Apply the template using the **template** attribute of the slide shortcode:
```markdown
{{%/* slide template="hotpink" */%}}
# I'm a hot pink slide!
{{%/* /slide */%}}
```
{{% /slide %}}
---
If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is page, section (_index.md), site (config.toml).
{{% /section %}}
---
{{% section %}}
2018-07-22 11:50:50 +02:00
{{% slide content="home.example" /%}}
2018-07-21 10:55:03 +02:00
{{% /section %}}