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

2.3 KiB

+++ weight = 34 +++

Slide

Customize individual slide attributes like id, class, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.


{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}}

Custom slide 1

{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}}

## Custom slide 1

{{%/* /slide */%}}

{{% /slide %}}


{{% slide id="custom-2" background="#FF4081" %}}

Custom slide 2

{{%/* slide id="custom-2" background="#FF4081" */%}}

## Custom slide 2

{{%/* /slide */%}}

{{% /slide %}}


💡 Tip: Setting a slide's id attribute makes it easy to link to from other parts of the presentation.


```markdown Go to [custom slide 1](#custom-1) ``` Go to [custom slide 1](#custom-1)

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!

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

{{% slide content="home.example" /%}}

{{% /section %}}