Update exampleSite to show slide shortcode content attribute

This commit is contained in:
dzello 2018-07-21 10:55:03 +02:00
parent 836c449d0c
commit e0c548e404
6 changed files with 64 additions and 11 deletions

View file

@ -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)

View file

@ -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 */>}}

View file

@ -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>
&lt;section data-noprocess&gt;
&lt;h1&gt;Hello world!&lt;/h1&gt;

View file

@ -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>
🔽
---

View file

@ -40,3 +40,10 @@ Customize individual slide parameters like background color and transition.
{{% /slide %}}
---
{{% section %}}
{{< slide content="home.example" >}}
{{% /section %}}

View file

@ -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.
'''