diff --git a/README.md b/README.md index 2003c09..7c10b20 100644 --- a/README.md +++ b/README.md @@ -158,10 +158,10 @@ Like fragment but more terse - content is placed inline in a self-closing shortc #### slide shortcode -The slide shortcode lets you set custom Reveal.js attributes for each slide - things like transition, background color and [much more](https://github.com/hakimel/reveal.js/#slide-attributes). +The slide shortcode lets you set custom Reveal.js attributes for each slide - things like id, transition, background and [much more](https://github.com/hakimel/reveal.js/#slide-attributes). ```markdown -{{% slide background="#FFF" transition="zoom" transition-speed="fast" %}} +{{% slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" %}} # Hello, world! diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md index dc63834..21458fa 100644 --- a/exampleSite/content/home/shortcodes/slide.md +++ b/exampleSite/content/home/shortcodes/slide.md @@ -4,18 +4,18 @@ weight = 34 ## Slide -Customize individual slide parameters like background color and transition. +Customize individual slide attributes like id, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix. -[See all slide params](https://github.com/hakimel/reveal.js#slide-backgrounds) +[See more attributes](https://github.com/hakimel/reveal.js#slide-attributes) --- -{{% slide transition="zoom" transition-speed="fast" %}} +{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}} ## Custom slide 1 ``` -{{%/* slide transition="zoom" transition-speed="fast" */%}} +{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}} ## Custom slide 1 @@ -26,12 +26,12 @@ Customize individual slide parameters like background color and transition. --- -{{% slide background-color="#FF4081" %}} +{{% slide id="custom-2" background="#FF4081" %}} ## Custom slide 2 ``` -{{%/* slide background-color="#FF4081" */%}} +{{%/* slide id="custom-2" background="#FF4081" */%}} ## Custom slide 2 @@ -42,6 +42,19 @@ Customize individual slide parameters like background color and transition. --- +💡 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) + + +--- + {{% section %}} {{% slide content="home.example" /%}} diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html index 61596de..81e960b 100644 --- a/layouts/shortcodes/slide.html +++ b/layouts/shortcodes/slide.html @@ -12,12 +12,16 @@ {{- $scratch.Add "slides" . -}} {{- end -}} {{- end -}} -{{- $attributes := slice "background-color" "background-image" "background-size" "background-position" "background-repeat" "transition" "transition-speed" "background-iframe" "background-interactive" "background-video" "background-video-loop" "background-video-muted" -}} {{- $params := . -}} +{{- $noPrefix := slice "id" -}} +{{- $noOutput := slice "content" -}} {{- range .Scratch.Get "slides" }}
{{ . | safeHTML }}