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.
|
||||
|
||||
![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.
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
baseURL = "https://reveal-hugo.netlify.com/"
|
||||
baseURL = "https://example.com/"
|
||||
languageCode = "en-us"
|
||||
title = "A Hugo theme for creating Reveal.js presentations"
|
||||
disableKinds = ["sitemap", "RSS"]
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
+++
|
||||
title = "reveal-hugo example presentation"
|
||||
title = "Welcome to reveal-hugo!"
|
||||
outputs = ["Reveal"]
|
||||
+++
|
||||
|
||||
# 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
|
||||
|
||||
[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