genofire/themen-hugo-35c3-reveal
genofire/themen-hugo-35c3-reveal
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #10 from shrmnk/documentation-custom-theme

Browse source 
[Documentation] Custom theme and end.html partial
This commit is contained in:
Josh Dzielak 2018-10-18 19:50:56 +02:00 committed by GitHub
commit bfda99ad0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
README.md
View file

@ -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,18 +326,46 @@ 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.
| 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.
> 💡 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
> - end.html
## Recipes
### Add a Reveal.js presentation to an existing Hugo site
@ -400,4 +428,3 @@ or simply...
```shell
npm start
```