themen-hugo-35c3-reveal/exampleSite/content/home/shortcodes/slide.md

228 lines
3.3 KiB
Markdown
Raw Normal View History

+++
weight = 34
+++
## Slide
2018-08-03 09:07:12 -05:00
Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
---
{{< slide class="hello" >}}
2018-08-03 09:07:12 -05:00
## Slide
2018-08-03 09:07:12 -05:00
Add the shortcode above the slide's content, below the `---`.
```markdown
---
{{</* slide class="hello" */>}}
2018-08-03 09:07:12 -05:00
## Hello, world!
---
```
2018-08-03 09:07:12 -05:00
---
{{< slide transition="zoom" transition-speed="fast" >}}
## Custom slide 1
<small>Did you notice? This slide has a fast zoom transition.</small>
2018-08-03 09:07:12 -05:00
```markdown
---
{{</* slide transition="zoom" transition-speed="fast" */>}}
2018-08-03 09:07:12 -05:00
## Custom slide 1
---
2018-08-03 09:07:12 -05:00
```
---
{{< slide background="#FF4081" >}}
## Custom slide 2
2018-08-03 09:07:12 -05:00
<small>This slide has a different background color.</small>
2018-08-03 09:07:12 -05:00
```markdown
---
{{</* slide background="#FF4081" */>}}
2018-08-03 09:07:12 -05:00
## Custom slide 2
---
```
---
{{< slide id="custom-slide" >}}
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
2018-08-03 09:07:12 -05:00
<br><br>
```markdown
---
{{</* slide id="custom-slide" */>}}
## Custom slide
2018-08-03 09:07:12 -05:00
---
```
---
```markdown
[Try the link](#custom-slide)
```
<br>
[Try the link](#custom-slide)
---
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`
---
{{% section %}}
## 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]
class = "hotpink"
background = "#FF4081"
```
---
2018-08-03 09:07:12 -05:00
{{< slide template="hotpink" >}}
Apply the template using the **template** attribute of the slide shortcode:
```markdown
2018-08-03 09:07:12 -05:00
{{</* slide template="hotpink" */>}}
# I'm a hot pink 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-08-03 09:07:12 -05:00
{{< slide content="home.reusable" >}}
{{% /section %}}
2018-08-13 18:00:03 -05:00
---
{{% section %}}
## Slide-specific CSS
Add more variety to your presentation by applying slide-specific CSS.
<br>
<small>
navigate down to learn more
</small>
<br>
<a href="#" class="navigate-down">🔽</a>
---
First, use the `slide` shortcode to give the slide a class:
```markdown
---
{{</* slide class="side-by-side" */>}}
# 📈
# 📊
---
```
---
Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
```html
<style>
.reveal section.side-by-side h1 {
position: absolute;
}
.reveal section.side-by-side h1:first-of-type {
left: 25%;
}
.reveal section.side-by-side h1:nth-of-type(2) {
right: 25%;
}
</style>
```
---
{{< slide class="side-by-side" >}}
# 📈
# 📊
{{% /section %}}