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) - [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite) - [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)

View file

@ -6,21 +6,21 @@ weight = 36
## Markdown ## 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 */>}} {{</* markdown */>}}
# Hello world! # Hello world!
{{</* /markdown */>}} {{</* /markdown */>}}
``` ```
[See the Reveal.js markdown docs](https://github.com/hakimel/reveal.js#markdown)
--- ---
<!-- .slide: data-background="#FF4081" --> <!-- .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 */>}} {{</* markdown */>}}

View file

@ -4,23 +4,27 @@ weight = 38
## Note ## Note
Add speaker notes to your presentation. Add speaker notes to your presentation with the note shortcode.
```markdown ```markdown
{{%/* note */%}} {{%/* note */%}}
Type 's' to see this slide's speaker notes. Type 's' to see this slide's speaker notes.
{{%/* /note */%}} {{%/* /note */%}}
``` ```
{{% note %}} {{% note %}}
You found the speaker notes! You found the speaker notes!
{{% /note %}} {{% /note %}}
--- ---
<section data-noprocess> <section data-noprocess>
<h2>Pure HTML Slide</h2> <h2>Write slides in HTML</h2>
<p>Surround slides in a <code>section</code> tag with a <code>data-noprocess</code> attribute to write them in pure HTML.</p> <p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
<pre> <pre>
&lt;section data-noprocess&gt; &lt;section data-noprocess&gt;
&lt;h1&gt;Hello world!&lt;/h1&gt; &lt;h1&gt;Hello world!&lt;/h1&gt;

View file

@ -1,14 +1,19 @@
+++ +++
weight = 36 weight = 33
+++ +++
{{% section %}} {{% section %}}
## 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 %}} {{% /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.
'''