From 804b2d1f6f80ccf7a831076a360fad991c22e492 Mon Sep 17 00:00:00 2001 From: Sherman K Date: Wed, 17 Oct 2018 11:33:53 -0400 Subject: [PATCH 1/3] Add section about custom Reveal.js themes --- README.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e99da58..3fd7494 100644 --- a/README.md +++ b/README.md @@ -293,7 +293,7 @@ You can use all the additional slide shortcode attributes. They will be applied Customize the Reveal.js presentation by setting these values in `config.toml` or the front matter of any presentation's `_index.md` file. - `reveal_hugo.theme`: The Reveal.js theme used; defaults to "black" -- `reveal_hugo.custom_theme`: The path to a locally hosted Reveal.js theme +- `reveal_hugo.custom_theme`: The path to a locally hosted Reveal.js theme in the static folder - `reveal_hugo.highlight_theme`: The [highlight.js](https://highlightjs.org/) theme used; defaults to "default" - `reveal_hugo.reveal_cdn`: The location to load Reveal.js files from; defaults to the `reveal-js` folder in the static directory to support offline development. To load from a CDN instead, set this value to `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0` or whatever CDN you prefer. - `reveal_hugo.highlight_cdn`: The location to load highlight.js files from; defaults to `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0`. For local development, change this to point to a file in the static directory. @@ -326,6 +326,23 @@ transition = "zoom" See the [extensive list of Reveal.js configuration options](https://github.com/hakimel/reveal.js/#configuration) here. +### Custom Reveal.js Themes + +If you have a custom reveal theme to use (in .css form), place it somewhere in your static folder. For example, if you have: + +``` +- static + - assets + - custom-theme.css +``` + +Then you will need to have this line in `config.toml` + +```toml +[params.reveal_hugo] +reveal_hugo.custom_theme = "assets/custom-theme.css" +``` + ## Adding HTML to the layout If you need to add something to the HTML layout, you can create partials that live at specific locations, depending on which presentation you want to customize and where you want the HTML inserted into the page. @@ -400,4 +417,3 @@ or simply... ```shell npm start ``` - From f3355351bb9b0ead20c1a6bde142388bc737fd77 Mon Sep 17 00:00:00 2001 From: Sherman K Date: Wed, 17 Oct 2018 11:40:02 -0400 Subject: [PATCH 2/3] Add section about partials in Hugo --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 3fd7494..fcd82f2 100644 --- a/README.md +++ b/README.md @@ -355,6 +355,16 @@ If you need to add something to the HTML layout, you can create partials that li This is the recommended way to add custom CSS and JavaScript to each presentation. +> 💡 Tip: In Hugo, partials live in the `layouts` folder: +> +> For example, if you have HTML that is to be placed before every presentation, this would be the structure: +> ``` +> - layouts +> - partials +> - reveal-hugo +> - head.html +> - body.html + ## Recipes ### Add a Reveal.js presentation to an existing Hugo site From 300609571456ae0edc5631ee72c22a379538d923 Mon Sep 17 00:00:00 2001 From: Sherman K Date: Wed, 17 Oct 2018 11:42:31 -0400 Subject: [PATCH 3/3] Add use of `end.html` partial for custom HTML --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index fcd82f2..2303e26 100644 --- a/README.md +++ b/README.md @@ -347,11 +347,11 @@ reveal_hugo.custom_theme = "assets/custom-theme.css" If you need to add something to the HTML layout, you can create partials that live at specific locations, depending on which presentation you want to customize and where you want the HTML inserted into the page. -| 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 | +| Presentation | Before </head> | Before </body> | Before closing </div> of `div.reveal` | +|--------------|---------------------------------|---------------------------------|---------------------------------------------| +| All | reveal-hugo/head.html | reveal-hugo/body.html | reveal-hugo/end.html | +| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html | home/reveal-hugo/end.html | +| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html | {section}/reveal-hugo/end.html | This is the recommended way to add custom CSS and JavaScript to each presentation. @@ -364,6 +364,7 @@ This is the recommended way to add custom CSS and JavaScript to each presentatio > - reveal-hugo > - head.html > - body.html +> - end.html ## Recipes