blob: c5f2df6fa27b4988ac285c2615698381845f4dc9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
---
date: "2017-04-24T18:36:24+02:00"
description: ""
title: As a SlideDeck
weight: 90
---
A basic .md file can be rendered as a reveal.js presentation full screen.
{{% notice %}}
**A page rendered as a SlideDeck** is a page that use the full screen to display its markdown content as a [reveals.js presentation](http://lab.hakim.se/reveal-js/).
\
[{{%icon aspect_ratio%}} click here to view an example]({{%relref "myslide.md"%}})
{{%/notice%}}
To tell Hugo to consider a page as a slidedeck, just add a `type="slide"`in then frontmatter of your page.
```toml
+++
type="slide"
+++
```
{{%alert success%}}**Tip :** You can, also, **embed presentation in a page** as a small box, using the [revealjs]({{% relref "shortcodes/revealjs/_index.md"%}}) shortcode in your md file.{{%/alert%}}
## Formating your content
Use your common Markdown syntax you use in Hugo, don't forget, you can put html tags too.
{{%notice info %}} Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
{{%/notice%}}
Please read the [{{%icon book%}} doc from hakimel](https://github.com/hakimel/reveal.js/#instructions)
## Presentation options
In the frontmatter of your page file, set **type** and **revealOptions** params
Your content will be served as a fullscreen revealjs presentation and revealOptions will be used to ajust its behaviour.
```toml
+++
title = "Test slide"
type="slide"
theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= true
center= true
+++
```
[read more about reveal options here](https://github.com/hakimel/reveal.js/#configuration)
## Slide Delimiters
When creating the content for your slideshow presentation within content markdown file you need to be able to distinguish between one slide and the next. This is achieved very simply using a convention within Markdown that indicates the start of each new slide.
As both horizontal and vertical slides are supported by reveal.js each has it's own unique delimiter.
To denote the start of a horizontal slide simply add the following delimiter (dashes) in your Markdown:
```md
---
```
To denote the start of a vertical slide simply add the following delimiter (underscores) in your Markdown:
```md
___
```
By using a combination of horizontal and vertical slides you can customize the navigation within your slideshow presentation. Typically vertical slides are used to present information below a top-level horizontal slide.
For example, a very simple slideshow presentation can be created as follows
```md
+++
title = "test"
date = "2017-04-24T18:36:24+02:00"
type="slide"
theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= true
center= true
+++
# In the morning
___
## Getting up
- Turn off alarm
- Get out of bed
___
## Breakfast
- Eat eggs
- Drink coffee
---
# In the evening
___
## Dinner
- Eat spaghetti
- Drink wine
___
## Going to sleep
- Get in bed
- Count sheep
```
[{{%icon aspect_ratio%}} click here to view this page rendered]({{%relref "myslide.md"%}})
|
