Improve the example presentation
This commit is contained in:
parent
9159d3c598
commit
dcbeba670d
11 changed files with 195 additions and 115 deletions
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
A Hugo theme for [Reveal.js](https://revealjs.com/) that allows you to have multiple slides per markdown file. With it, you can turn any of your Hugo content into a presentation by adding `Reveal` to its output formats.
|
A Hugo theme for [Reveal.js](https://revealjs.com/) that allows you to have multiple slides per markdown file. With it, you can turn any of your Hugo content into a presentation by adding `Reveal` to its output formats.
|
||||||
|
|
||||||
![screenshot of reveal-hugo](/images/reveal-hugo.png)
|
![screenshot of reveal-hugo](/images/screenshot.png)
|
||||||
|
|
||||||
The motivation behind creating this theme is pretty simple - I didn't want to have to manage one markdown file for every slide, which would add the overhead of coming up with a file name, setting a `weight` param in the front matter to keep it in order, etc, all for just a few lines of text. Instead, I like to organize groups of slides into a smaller number of markdown files, each representing a section of the presentation.
|
The motivation behind creating this theme is pretty simple - I didn't want to have to manage one markdown file for every slide, which would add the overhead of coming up with a file name, setting a `weight` param in the front matter to keep it in order, etc, all for just a few lines of text. Instead, I like to organize groups of slides into a smaller number of markdown files, each representing a section of the presentation.
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
baseURL = "https://reveal-hugo.netlify.com/"
|
baseURL = "https://example.com/"
|
||||||
languageCode = "en-us"
|
languageCode = "en-us"
|
||||||
title = "A Hugo theme for creating Reveal.js presentations"
|
title = "A Hugo theme for creating Reveal.js presentations"
|
||||||
disableKinds = ["sitemap", "RSS"]
|
disableKinds = ["sitemap", "RSS"]
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
+++
|
+++
|
||||||
title = "reveal-hugo example presentation"
|
title = "Welcome to reveal-hugo!"
|
||||||
outputs = ["Reveal"]
|
outputs = ["Reveal"]
|
||||||
+++
|
+++
|
||||||
|
|
||||||
# reveal-hugo
|
# reveal-hugo
|
||||||
|
|
||||||
A Hugo theme for creating Reveal.js presentations.
|
A Hugo theme for creating Reveal.js presentations.
|
||||||
|
|
||||||
|
~ made by [@dzello](https://dzello.com/) ~
|
|
@ -1,38 +0,0 @@
|
||||||
+++
|
|
||||||
weight = 20
|
|
||||||
+++
|
|
||||||
|
|
||||||
Content for the root presentation lives in `content/_index.md` and `content/home`.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Content files are ordered by `weight` when added to the presentation.
|
|
||||||
|
|
||||||
```toml
|
|
||||||
+++
|
|
||||||
weight = 20
|
|
||||||
+++
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Create a presentation for any section of your site by adding this to its `_index.md`:
|
|
||||||
|
|
||||||
```toml
|
|
||||||
outputs = ["Reveal"]
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**The `fragment` shortcode** makes content appear incrementally.
|
|
||||||
|
|
||||||
|
|
||||||
```
|
|
||||||
{{%/* fragment */%}} One {{%/* /fragment */%}}
|
|
||||||
{{%/* fragment */%}} Two {{%/* /fragment */%}}
|
|
||||||
{{%/* fragment */%}} Three {{%/* /fragment */%}}
|
|
||||||
```
|
|
||||||
|
|
||||||
{{% fragment %}} One {{% /fragment %}}
|
|
||||||
{{% fragment %}} Two {{% /fragment %}}
|
|
||||||
{{% fragment %}} Three {{% /fragment %}}
|
|
|
@ -1,17 +1,26 @@
|
||||||
+++
|
+++
|
||||||
weight = 30
|
weight = 40
|
||||||
+++
|
+++
|
||||||
|
|
||||||
# reveal-hugo
|
|
||||||
|
|
||||||
If you want your markdown files to contain more than one slide each...
|
|
||||||
|
|
||||||
🤔
|
|
||||||
|
|
||||||
...this theme is for you!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Learn more
|
### Learn more
|
||||||
|
|
||||||
[https://github.com/dzello/reveal-hugo](https://github.com/dzello/reveal-hugo)
|
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
|
||||||
|
- [Code for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
|
- [Reveal.js](https://revealjs.org)
|
||||||
|
- [Hugo output formats](https://gohugo.io/templates/output-formats/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Ready to use
|
||||||
|
|
||||||
|
- Deploy to [Netlify](https://netlify.com/)
|
||||||
|
- Edit with [Forestry](https://forestry.io/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Thanks!
|
||||||
|
|
17
exampleSite/content/home/features.md
Normal file
17
exampleSite/content/home/features.md
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
+++
|
||||||
|
weight = 10
|
||||||
|
+++
|
||||||
|
|
||||||
|
## What's included?
|
||||||
|
|
||||||
|
- All Reveal.js HTML, CSS and JS (v3.6.0)
|
||||||
|
- All out-of-the-box Reveal.js themes
|
||||||
|
- A "Reveal" `outputFormat` that outputs a presentation for any Hugo section
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Markdown files are parsed into multiple slides
|
||||||
|
- Built-in shortcodes expose Reveal.js functionality
|
||||||
|
- Customize Reveal.js parameters including the theme
|
|
@ -1,26 +0,0 @@
|
||||||
+++
|
|
||||||
weight = 10
|
|
||||||
+++
|
|
||||||
|
|
||||||
### Multiple slides per markdown file.
|
|
||||||
|
|
||||||
Separate slides with `---`
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
# Slide 1
|
|
||||||
|
|
||||||
Body 1.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Slide 2
|
|
||||||
|
|
||||||
Body 2.
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Hello!
|
|
||||||
|
|
||||||
I'm a new slide from the same markdown file.
|
|
|
@ -1,35 +0,0 @@
|
||||||
+++
|
|
||||||
weight = 25
|
|
||||||
+++
|
|
||||||
|
|
||||||
{{% section %}}
|
|
||||||
|
|
||||||
**The `section` shortcode** creates a batch of vertical slides.
|
|
||||||
|
|
||||||
Scroll down.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
This is the code.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
{{%/* section */%}}
|
|
||||||
|
|
||||||
## Section slide 1
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Section slide 2
|
|
||||||
|
|
||||||
{{%/* /section */%}}
|
|
||||||
```
|
|
||||||
|
|
||||||
Keep scrolling down.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## End of section
|
|
||||||
|
|
||||||
Continue to the right.
|
|
||||||
|
|
||||||
{{% /section %}}
|
|
57
exampleSite/content/home/usage-shortcodes.md
Normal file
57
exampleSite/content/home/usage-shortcodes.md
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
+++
|
||||||
|
weight = 30
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Shortcodes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fragment shortcode
|
||||||
|
|
||||||
|
The `fragment` shortcode makes content appear incrementally.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{%/* fragment */%}} One {{%/* /fragment */%}}
|
||||||
|
{{%/* fragment */%}} Two {{%/* /fragment */%}}
|
||||||
|
{{%/* fragment */%}} Three {{%/* /fragment */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
{{% fragment %}} One {{% /fragment %}}
|
||||||
|
{{% fragment %}} Two {{% /fragment %}}
|
||||||
|
{{% fragment %}} Three {{% /fragment %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
### Section shortcode
|
||||||
|
|
||||||
|
The `section` shortcode groups slides into a vertical display.
|
||||||
|
|
||||||
|
**To continue, use the down arrow or swipe down.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Put the shortcode around the slides you want to group together.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{%/* section */%}}
|
||||||
|
|
||||||
|
## Section slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Section slide 2
|
||||||
|
|
||||||
|
{{%/* /section */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Keep scrolling down.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## That's it!
|
||||||
|
|
||||||
|
Use the right arrow or swipe right.
|
||||||
|
|
||||||
|
{{% /section %}}
|
94
exampleSite/content/home/usage.md
Normal file
94
exampleSite/content/home/usage.md
Normal file
|
@ -0,0 +1,94 @@
|
||||||
|
+++
|
||||||
|
weight = 20
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Multiple slides per markdown file
|
||||||
|
|
||||||
|
Separate slides with `---`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
Body 1.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 2
|
||||||
|
|
||||||
|
Body 2.
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
I'm a **new** slide from the **same** markdown file.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Make a presentation for `/`
|
||||||
|
|
||||||
|
In `content/_index.md`:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 2
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Put more slides in `content/home/*.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
weight = 20
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 3
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `weight` to specify the order
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Make a presentation for a Hugo section
|
||||||
|
|
||||||
|
In `content/{section}/_index.md`:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 2
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Put more slides in `content/{section}/*.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
weight = 20
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 3
|
||||||
|
```
|
||||||
|
|
||||||
|
Use `weight` to specify the order
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
Loading…
Reference in a new issue