This repository has been archived on 2024-06-06. You can view files and clone it, but cannot push or open issues or pull requests.
vitrine/content/home/configuration.md
2022-01-05 23:28:57 +01:00

3.5 KiB

+++ weight = 21 +++

Configuration

Place configuration values in config.toml or a presentation's front matter (_index.md).


Reveal.js themes

Themes control the look and feel of your presentation. Set the theme param to any valid Reveal.js theme.

[params.reveal_hugo]
theme = "moon"

Use a custom theme

To use a custom Reveal.js theme, place the CSS file in the static directory and set the custom_theme param.

[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"

Use a custom theme (advanced)

To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the assets directory and set the custom_theme_compile param.

[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/custom-theme.scss"
custom_theme_compile = true

💡 See the custom theme example presentation for more details.


Bundled themes

reveal-hugo comes with 2 extra Reveal.js themes:


They live in the static/reveal-hugo/themes folder and also on Github.


Reveal.js params

Set snakecase versions of Reveal.js params, which will be camelized and passed to Reveal.initialize.

[params.reveal_hugo]
history = true
slide_number = true
transition = 'zoom'
transition_speed = 'fast'

Full list of params


highlight.js themes

To change the syntax highlighting theme, set the highlight_theme to a valid highlight.js theme name.

[params.reveal_hugo]
highlight_theme = "zenburn"

Extending the layout

Use partials to add HTML to the page for one or all presentations at a time.

💡 This is the recommended way to add script and style tags to customize your presentations.

Here is where to put partials for different presentations and places in the DOM.

Presentation Before </head> Before </body>
All reveal-hugo/head.html reveal-hugo/body.html
Root home/reveal-hugo/head.html home/reveal-hugo/body.html
Section {section}/reveal-hugo/head.html {section}/reveal-hugo/body.html

 

💡 You can also create an end.html to put content before the end of the .reveal div tag.


Custom CSS Example

In home/reveal-hugo/head.html:

<style>
.reveal section h1 {
  color: blue;
}
</style>

Custom JS Example

In home/reveal-hugo/body.html:

<script type="text/javascript">
Reveal.addEventListener('slidechanged', function(event) {
  console.log("🎞️ Slide is now " + event.indexh);
});
</script>

Extending the layout

(alternative)

You can declare a custom CSS or javascript in your configuration.

[reveal_hugo]
custom_css = "css/custom.css"
custom_js = "js/custom.js"

These files can be located in static/css, static/js folder

💡 See the extending layout example for more details.