A Hugo theme for Reveal.js that makes authoring and customization a breeze. With it, you can turn any properly-formatted Hugo content into a HTML presentation.
Using reveal-hugo, presentations with multiple slides can be created with just one markdown file, like so:
title = "How to say hello"
Just use --- to split content into different slides.
Visit https://dzello.com/reveal-hugo/ to see a presentation created with this theme and learn more about what you can do. Jump to the exampleSite folder in this repository to see the source code for that presentation.
You should be able to complete this section with no prior knowledge of Hugo or Reveal.js. At the end, you’ll have a working presentation with instant reloading.
Customize the Reveal.js presentation by setting these values in config.toml or the front matter of any presentation’s index.md file.
params.reveal_hugo.theme: The Reveal.js theme used, defaults to “black”
params.reveal_hugo.custom_theme: The path to a locally hosted Reveal.js theme
params.reveal_hugo.highlight_theme: The highlight.js theme used, defaults to “default”
Include any other attributes in params.reveal_hugo that you’d like to be fed as arguments to Reveal.initialize in snakecase. So slideNumber becomes slide_number. The reason is that Hugo lowercases all params and Reveal.js is case-sensitive. Params are converted from snakecase to camelcase before passing to Reveal.js.
If you’re new to TOML, this is how it should look in your config.toml:
theme = "moon"
Or in the front matter of an _index.md file:
theme = "moon"
Adding HTML to the page
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:
git clone email@example.com:dzello/reveal-hugo.git themes/reveal-hugo
cp -r data layouts static ../../
Files and directories are named such that they shouldn’t conflict with your existing content. Of course, you should double check before copying, especially the shortcodes which can’t be put under a directory.
Next, add the Reveal output format to your site’s config.toml file
Now you can add outputs = ["Reveal"] to the front matter of any section’s _index.md file and that section’s content will be combined into a presentation and written to index.html. If you already have a 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 prevent anything being 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.
Not directly related to reveal-hugo, but these are some of my favorite Reveal.js features and shortcuts.
’s’ - type ’s’ to enter speaker mode, which opens a separate window with a time and speaker notes
‘o’ - type ‘o’ to enter overview mode and scroll through slide thumbnails
‘f’ - type ‘f’ to go into full-screen mode
Contributions are very welcome. To run the example site in this repository locally, clone this repository and run:
hugo server -s exampleSite -d ../public --themesDir '../' --theme '.'