Update exampleSite to show slide shortcode content attribute
This commit is contained in:
parent
836c449d0c
commit
e0c548e404
6 changed files with 64 additions and 11 deletions
|
@ -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)
|
||||||
|
|
|
@ -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 */>}}
|
||||||
|
|
|
@ -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>
|
||||||
<section data-noprocess>
|
<section data-noprocess>
|
||||||
<h1>Hello world!</h1>
|
<h1>Hello world!</h1>
|
||||||
|
|
|
@ -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>
|
||||||
|
🔽
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -40,3 +40,10 @@ Customize individual slide parameters like background color and transition.
|
||||||
|
|
||||||
{{% /slide %}}
|
{{% /slide %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
{{< slide content="home.example" >}}
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
37
exampleSite/data/home.toml
Normal file
37
exampleSite/data/home.toml
Normal 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.
|
||||||
|
|
||||||
|
'''
|
Loading…
Reference in a new issue