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

2.6 KiB

+++ weight = 34 +++

Slide

Use this shortcode when you need to customize slide attributes like id, class, background color and transition.


{{< slide class="hello" >}}

Slide

Add the shortcode above the slide's content, below the ---.

---

{{</* slide class="hello" */>}}

## Hello, world!

---

{{< slide transition="zoom" transition-speed="fast" >}}

Custom slide 1

Did you notice? This slide has a fast zoom transition.

---

{{</* slide transition="zoom" transition-speed="fast" */>}}

## Custom slide 1

---

{{< slide background="#FF4081" >}}

Custom slide 2

This slide has a different background color.

---

{{</* slide background="#FF4081" */>}}

## 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.

---

{{</* slide id="custom-slide" */>}}

## Custom slide

---

[Try the link](#custom-slide)

[Try the link](#custom-slide)

Slide attribute possibilities from the Reveal.js docs:

  • 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.


navigate down to learn more
🔽

Create templates in config.toml, _index.md or the current page's front matter. Put them under the templates key with a meaningful name:

[reveal_hugo.templates.hotpink]
class = "hotpink"
background = "#FF4081"

{{< slide template="hotpink" >}}

Apply the template using the template attribute of the slide shortcode:

{{</* 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 %}}

{{< slide content="home.reusable" >}}

{{% /section %}}