Reveal should be an outputFormat
Now any Hugo section can be configured to generate a presentation without altering its type, and the theme is more easily copied into existing sites without conflicting with any preexisting layouts.
This commit is contained in:
parent
4a59fa2a58
commit
4e0d34413b
82 changed files with 78 additions and 28 deletions
60
README.md
60
README.md
|
@ -31,16 +31,14 @@ The only requirement is to demarcate slides with `---` surrounded by newlines.
|
||||||
|
|
||||||
Visit [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/) to see an presentation created with this theme that shows more ways to use it. You can also check out this repository [running on Netlify](https://reveal-hugo.netlify.com/).
|
Visit [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/) to see an presentation created with this theme that shows more ways to use it. You can also check out this repository [running on Netlify](https://reveal-hugo.netlify.com/).
|
||||||
|
|
||||||
# Usage
|
# Step-by-step guide to create a presentation
|
||||||
|
|
||||||
[Install Hugo](https://gohugo.io/) and create a new Hugo site.
|
[Install Hugo](https://gohugo.io/) and create a new Hugo site:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ hugo new site my-presentation
|
$ hugo new site my-presentation
|
||||||
```
|
```
|
||||||
|
|
||||||
*Note: if you wish to add a Reveal.js presentation to an existing Hugo site without changing its theme, you can see [an example here](https://github.com/dzello/dzello-dot-com).*
|
|
||||||
|
|
||||||
Change into the directory of the new site:
|
Change into the directory of the new site:
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
|
@ -53,11 +51,21 @@ Clone this repository into the themes directory:
|
||||||
$ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
|
$ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Open `config.toml` and add a new output format called `Reveal`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
```
|
||||||
|
|
||||||
Create a file in `content/_index.md` with this contents:
|
Create a file in `content/_index.md` with this contents:
|
||||||
|
|
||||||
```
|
```markdown
|
||||||
+++
|
+++
|
||||||
title = "My presentation"
|
title = "My presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
+++
|
+++
|
||||||
|
|
||||||
# Hello world!
|
# Hello world!
|
||||||
|
@ -75,7 +83,7 @@ Navigate to [http://localhost:1313/](http://localhost:1313/) and you should see
|
||||||
|
|
||||||
![New site with reveal-hugo](/images/reveal-hugo-hello-world.png)
|
![New site with reveal-hugo](/images/reveal-hugo-hello-world.png)
|
||||||
|
|
||||||
To add more slides, just add content to `_index.md`. Remember to separate each slide separated by `---` surrounded by newlines.
|
To add more slides, you can add content to `_index.md` or create new markdown files in `content/home`. Remember to separate each slide separated by `---` surrounded by newlines.
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
|
|
||||||
|
@ -102,17 +110,48 @@ weight = 20
|
||||||
|
|
||||||
### Section presentations
|
### Section presentations
|
||||||
|
|
||||||
To create more presentations in the same repository, place the content into sections. Section presentations will include content from each file in that section including an `_index.md` file if it exists. Again, use the `weight` param to order the sections (`_index.md` will always be first).
|
To create a presentation for the content of any section of your Hugo site, just add `Reveal` to its list of `outputFormats` in the front matter of `section/_index.md`:
|
||||||
|
|
||||||
Section presentations can use a different Reveal.js theme by specifying the `reveal_theme` parameter in the front matter of the section's `_index.md` file.
|
```toml
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
```
|
||||||
|
|
||||||
|
Section presentations will include content from each file in that section. Again, use the `weight` param to order the sections, knowing that any content in `_index.md` will come first.
|
||||||
|
|
||||||
|
Presentations can use a different Reveal.js theme by specifying the `reveal_theme` parameter in the front matter of the section's `_index.md` file.
|
||||||
|
|
||||||
```toml
|
```toml
|
||||||
reveal_theme = "moon"
|
reveal_theme = "moon"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Add a Reveal.js presentation to an existing Hugo site
|
||||||
|
|
||||||
|
If your Hugo site already has a theme but you'd like to create a presentation from some of its content, that's very easy. First, manually copy a few files out of this theme into a few of your site's directories:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
$ cd my-hugo-site
|
||||||
|
$ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
|
||||||
|
$ cp -r themes/reveal-hugo/static/reveal static/reveal
|
||||||
|
$ cp themes/reveal-hugo/layouts/_default/*.reveal.html layouts/_default
|
||||||
|
$ cp themes/reveal-hugo/layouts/shortcodes/* layouts/shortcodes
|
||||||
|
```
|
||||||
|
|
||||||
|
Next, add the Reveal output format to your site's `config.toml` file
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
```
|
||||||
|
|
||||||
|
Now you can add `outputs = ["Reveal"]` to the front matter of any section's `_index.md` file and that sections content will be combined into a presentation and saved to `index.html`. If you already have a normal `index.html` page for that section, just change the `baseName` above to `reveal` and the presentation will be placed in a `reveal.html` file instead.
|
||||||
|
|
||||||
|
Note: If you specify `outputs = ["Reveal"]` for a single content file, you can make sure nothing is generated for that file. This is handy if you other default layouts that would have created a regular HTML file from it. Only the list file is required for the presentation.
|
||||||
|
|
||||||
### Fragments
|
### Fragments
|
||||||
|
|
||||||
Fragments are a Reveal.js concept that lets you introduce content into each slide incrementally. Borrowing the concept from [hugo-theme-revealjs](https://github.com/RealOrangeOne/hugo-theme-revealjs), you can use a `fragment` shortcode to accomplish this in reveal-hugo in the same way.
|
Fragments are a Reveal.js concept that lets you introduce content into each slide incrementally. Borrowing the idea from [hugo-theme-revealjs](https://github.com/RealOrangeOne/hugo-theme-revealjs) (thanks!), you can use a `fragment` shortcode to accomplish this in reveal-hugo in the same way.
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
# Let's count to three...
|
# Let's count to three...
|
||||||
|
@ -121,7 +160,8 @@ Fragments are a Reveal.js concept that lets you introduce content into each slid
|
||||||
{{% fragment %}} Three {{% /fragment %}}
|
{{% fragment %}} Three {{% /fragment %}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
# Configuration
|
# Configuration
|
||||||
|
|
||||||
|
These settings go in `config.toml`:
|
||||||
|
|
||||||
- `params.reveal_theme`: The Reveal.js theme used, defaults to "black"
|
- `params.reveal_theme`: The Reveal.js theme used, defaults to "black"
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
baseURL = "https://reveal-hugo.netlify.com/"
|
baseURL = "https://reveal-hugo.netlify.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"]
|
||||||
|
|
||||||
[author]
|
[author]
|
||||||
name = "Josh Dzielak"
|
name = "Josh Dzielak"
|
||||||
|
@ -8,3 +9,8 @@ name = "Josh Dzielak"
|
||||||
[params]
|
[params]
|
||||||
description = "A description of this presentation"
|
description = "A description of this presentation"
|
||||||
reveal_theme = "solarized"
|
reveal_theme = "solarized"
|
||||||
|
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
+++
|
+++
|
||||||
title = "reveal-hugo example presentation"
|
title = "reveal-hugo example presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
+++
|
+++
|
||||||
|
|
||||||
# reveal-hugo
|
# reveal-hugo
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
+++
|
+++
|
||||||
title = "Example of a section presentation"
|
title = "Example of a section presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
reveal_theme = "moon"
|
reveal_theme = "moon"
|
||||||
+++
|
+++
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,11 @@ weight = 20
|
||||||
|
|
||||||
# reveal-hugo
|
# reveal-hugo
|
||||||
|
|
||||||
Create multiple presentations, one for each section in `content`.
|
Create a presentation for any section by adding this to its `_index.md`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -8,28 +8,27 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<link rel="stylesheet" href="{{ "css/reveal.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "reveal/css/reveal.css" | relURL }}">
|
||||||
{{ $theme := or .Page.Params.reveal_theme .Site.Params.reveal_theme "black" }}
|
{{ $theme := or .Page.Params.reveal_theme .Site.Params.reveal_theme "black" }}
|
||||||
<link rel="stylesheet" href="{{ printf "css/theme/%s.css" $theme | relURL }}" id="theme">
|
<link rel="stylesheet" href="{{ printf "reveal/css/theme/%s.css" $theme | relURL }}" id="theme">
|
||||||
<!-- Theme used for syntax highlighting of code -->
|
<!-- Theme used for syntax highlighting of code -->
|
||||||
<link rel="stylesheet" href="{{ "lib/css/zenburn.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "reveal/lib/css/zenburn.css" | relURL }}">
|
||||||
<!-- Printing and PDF exports -->
|
<!-- Printing and PDF exports -->
|
||||||
<script>
|
<script>
|
||||||
var link = document.createElement( 'link' );
|
var link = document.createElement( 'link' );
|
||||||
link.rel = 'stylesheet';
|
link.rel = 'stylesheet';
|
||||||
link.type = 'text/css';
|
link.type = 'text/css';
|
||||||
link.href = window.location.search.match( /print-pdf/gi ) ? '{{ "css/print/pdf.css" | relURL }}' : '{{ "css/print/paper.css" | relURL }}';
|
link.href = window.location.search.match( /print-pdf/gi ) ? '{{ "reveal/css/print/pdf.css" | relURL }}' : '{{ "reveal/css/print/paper.css" | relURL }}';
|
||||||
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
||||||
</script>
|
</script>
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="{{ "lib/js/html5shiv.js" | relURL }}"></script>
|
<script src="{{ "reveal/lib/js/html5shiv.js" | relURL }}"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{ block "main" . }}
|
{{ block "main" . }}{{ end }}
|
||||||
{{ end }}
|
<script src="{{ "reveal/lib/js/head.min.js" | relURL }}"></script>
|
||||||
<script src="{{ "lib/js/head.min.js" | relURL }}"></script>
|
<script src="{{ "reveal/js/reveal.js" | relURL }}"></script>
|
||||||
<script src="{{ "js/reveal.js" | relURL }}"></script>
|
|
||||||
<script>
|
<script>
|
||||||
// More info https://github.com/hakimel/reveal.js#configuration
|
// More info https://github.com/hakimel/reveal.js#configuration
|
||||||
Reveal.initialize({
|
Reveal.initialize({
|
||||||
|
@ -40,13 +39,13 @@
|
||||||
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||||
// More info https://github.com/hakimel/reveal.js#dependencies
|
// More info https://github.com/hakimel/reveal.js#dependencies
|
||||||
dependencies: [
|
dependencies: [
|
||||||
{ src: '{{ "lib/js/classList.js" | relURL }}', condition: function() { return !document.body.classList; } },
|
{ src: '{{ "reveal/lib/js/classList.js" | relURL }}', condition: function() { return !document.body.classList; } },
|
||||||
{ src: '{{ "plugin/markdown/marked.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
{ src: '{{ "reveal/plugin/markdown/marked.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||||
{ src: '{{ "plugin/markdown/markdown.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
{ src: '{{ "reveal/plugin/markdown/markdown.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||||
{ src: '{{ "plugin/highlight/highlight.js" | relURL }}', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
{ src: '{{ "reveal/plugin/highlight/highlight.js" | relURL }}', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||||
{ src: '{{ "plugin/search/search.js" | relURL }}', async: true },
|
{ src: '{{ "reveal/plugin/search/search.js" | relURL }}', async: true },
|
||||||
{ src: '{{ "plugin/zoom-js/zoom.js" | relURL }}', async: true },
|
{ src: '{{ "reveal/plugin/zoom-js/zoom.js" | relURL }}', async: true },
|
||||||
{ src: '{{ "plugin/notes/notes.js" | relURL }}', async: true }
|
{ src: '{{ "reveal/plugin/notes/notes.js" | relURL }}', async: true }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
0
layouts/_default/single.reveal.html
Normal file
0
layouts/_default/single.reveal.html
Normal file
|
@ -1 +0,0 @@
|
||||||
<script>document.location.href = "/";</script>
|
|
Loading…
Reference in a new issue