Update exampleSite to show slide shortcode content attribute
This commit is contained in:
parent
836c449d0c
commit
e0c548e404
|
@ -6,7 +6,7 @@ weight = 42
|
|||
|
||||
---
|
||||
|
||||
## Get the code
|
||||
## Code and docs
|
||||
|
||||
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
|
||||
- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
|
||||
|
|
|
@ -6,21 +6,21 @@ weight = 36
|
|||
|
||||
## Markdown
|
||||
|
||||
Markdown is not processed by Hugo but passed directly through to Reveal.js.
|
||||
Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
|
||||
|
||||
```
|
||||
{{</* markdown */>}}
|
||||
|
||||
# Hello world!
|
||||
|
||||
{{</* /markdown */>}}
|
||||
```
|
||||
|
||||
[See the Reveal.js markdown docs](https://github.com/hakimel/reveal.js#markdown)
|
||||
|
||||
---
|
||||
|
||||
<!-- .slide: data-background="#FF4081" -->
|
||||
|
||||
Reveaj.js Markdown uses HTML comments to change slide properties, like background color.
|
||||
Reveal.js markdown uses HTML comments to change slide properties, like background color.
|
||||
|
||||
```
|
||||
{{</* markdown */>}}
|
||||
|
|
|
@ -4,23 +4,27 @@ weight = 38
|
|||
|
||||
## Note
|
||||
|
||||
Add speaker notes to your presentation.
|
||||
Add speaker notes to your presentation with the note shortcode.
|
||||
|
||||
```markdown
|
||||
{{%/* note */%}}
|
||||
|
||||
Type 's' to see this slide's speaker notes.
|
||||
|
||||
{{%/* /note */%}}
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
|
||||
You found the speaker notes!
|
||||
|
||||
{{% /note %}}
|
||||
|
||||
---
|
||||
|
||||
<section data-noprocess>
|
||||
<h2>Pure HTML Slide</h2>
|
||||
<p>Surround slides in a <code>section</code> tag with a <code>data-noprocess</code> attribute to write them in pure HTML.</p>
|
||||
<h2>Write slides in HTML</h2>
|
||||
<p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
|
||||
<pre>
|
||||
<section data-noprocess>
|
||||
<h1>Hello world!</h1>
|
||||
|
|
|
@ -1,14 +1,19 @@
|
|||
+++
|
||||
weight = 36
|
||||
weight = 33
|
||||
+++
|
||||
|
||||
{{% section %}}
|
||||
|
||||
## Section
|
||||
|
||||
The `section` shortcode groups slides into a vertical display.
|
||||
The `section` shortcode groups slides into a **vertical display**.
|
||||
|
||||
**To continue, use the down arrow or swipe down.**
|
||||
<br>
|
||||
<small>
|
||||
use the down arrow or swipe down to continue
|
||||
</small>
|
||||
<br>
|
||||
🔽
|
||||
|
||||
---
|
||||
|
||||
|
|
|
@ -40,3 +40,10 @@ Customize individual slide parameters like background color and transition.
|
|||
|
||||
{{% /slide %}}
|
||||
|
||||
---
|
||||
|
||||
{{% section %}}
|
||||
|
||||
{{< slide content="home.example" >}}
|
||||
|
||||
{{% /section %}}
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
example = '''
|
||||
|
||||
# Reusable slides
|
||||
|
||||
Store markdown in a [data template](https://gohugo.io/templates/data-templates/) and reuse it in multiple sections or presentations.
|
||||
|
||||
<br>
|
||||
<small>
|
||||
scroll down to learn more
|
||||
</small>
|
||||
<br>
|
||||
🔽
|
||||
|
||||
---
|
||||
|
||||
Add an `example` key to data/home.toml:
|
||||
|
||||
```
|
||||
example = "I'm a slide"
|
||||
```
|
||||
<br>
|
||||
|
||||
Set the `content` attribute to "home.example":
|
||||
|
||||
```
|
||||
{{< slide content="home.example" >}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
💡 Each data template entry can contain one or more slides, separated by `---` with newlines.
|
||||
|
||||
---
|
||||
|
||||
💡 All other slide shortcode attributes (background, transition, etc.) can be used and will be applied to each slide in the data template entry.
|
||||
|
||||
'''
|
Loading…
Reference in New Issue