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

Add hook to put content at end of head and body

Browse source 
All Reveal params to be configured at default, site and page levels
This commit is contained in:
dzello 2018-04-30 13:19:22 -07:00
parent 9ba8adc268
commit 13d0faf629
7 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -108,15 +108,15 @@ This is my second slide.
## Usage ## Usage
The Usage guide is contained in the example presentation that lives in this repository at `exampleSite`. You can access a live version at [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/). The Usage guide is contained in the example presentation that lives in this repository in the [exampleSite](./exampleSite) directory. You can access a live version at [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/).
## Configuration ## Configuration
Customize the Reveal.js presentation by setting these values in `config.toml` or the front matter of any presentation's `index.md`. 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.theme`: The Reveal.js theme used, defaults to "black"
Include any other attributes in `params.reveal_hugo` that you'd like to be fed as arguments to `Reveal.initialize`. See the [extensive list of options](https://github.com/hakimel/reveal.js/#configuration) here. Defaults used by this theme are located in `data/reveal_hugo.toml`. Include any other attributes in `params.reveal_hugo` that you'd like to be fed as arguments to `Reveal.initialize`. See the [extensive list of Reveal.js configuration options](https://github.com/hakimel/reveal.js/#configuration) here. The defaults used by this theme are located in `data/reveal_hugo.toml`.
If you're new to TOML, this is how it should look in your `config.toml`: If you're new to TOML, this is how it should look in your `config.toml`:
@ -132,9 +132,9 @@ Or in the front matter of an `_index.md` file:
theme = "moon" theme = "moon"
``` ```
## Injecting HTML ## Adding HTML to the page
If you need to add something to the HTML page, just override the empty partial that lives at `layouts/partials/reveal-hugo/body.html`. This partial is injected into the page just before the closing of the body tag. Common uses would be to add custom CSS or JS to the page. If you need to add something to the HTML page, just override one or both of the empty partials that live at `layouts/partials/reveal-hugo/body.html` and `layouts/partials/reveal-hugo/head.html`. These partial are injected into the page just before the closing of the body and head tags respectively. Common uses would be to add custom CSS or JavaScript to your presentation.
### Add a Reveal.js presentation to an existing Hugo site ### Add a Reveal.js presentation to an existing Hugo site

1
data/reveal_hugo.toml
View file

@ -1,4 +1,5 @@
[defaults] [defaults]
theme = 'black'
controls = true controls = true
progress = true progress = true
history = true history = true

1
exampleSite/content/example/_index.md
View file

@ -3,6 +3,7 @@ title = "Example of a section presentation"
outputs = ["Reveal"] outputs = ["Reveal"]
[reveal_hugo] [reveal_hugo]
theme = "moon" theme = "moon"
slideNumber = true
+++ +++
# Section Presentation # Section Presentation

8
layouts/_default/baseof.reveal.html
View file

@ -9,7 +9,7 @@
<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="{{ "reveal/css/reveal.css" | relURL }}"> <link rel="stylesheet" href="{{ "reveal/css/reveal.css" | relURL }}">
{{ $theme := or .Page.Params.reveal_hugo.theme .Site.Params.reveal_hugo.theme "black" }} {{ $theme := or .Page.Params.reveal_hugo.theme .Site.Params.reveal_hugo.theme .Site.Data.reveal_hugo.theme "black" }}
<link rel="stylesheet" href="{{ printf "reveal/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="{{ "reveal/lib/css/zenburn.css" | relURL }}"> <link rel="stylesheet" href="{{ "reveal/lib/css/zenburn.css" | relURL }}">
@ -24,13 +24,15 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="{{ "reveal/lib/js/html5shiv.js" | relURL }}"></script> <script src="{{ "reveal/lib/js/html5shiv.js" | relURL }}"></script>
<![endif]--> <![endif]-->
{{ partial "reveal-hugo/head" . }}
</head> </head>
<body> <body>
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
<script type="application/json" id="reveal-hugo-params">{{ jsonify .Site.Params.reveal_hugo | safeJS }}</script> <script type="application/json" id="reveal-hugo-page-params">{{ jsonify .Page.Params.reveal_hugo | safeJS }}</script>
<script type="application/json" id="reveal-hugo-site-params">{{ jsonify .Site.Params.reveal_hugo | safeJS }}</script>
<script type="application/json" id="reveal-hugo-defaults">{{ jsonify .Site.Data.reveal_hugo.defaults | safeJS }}</script> <script type="application/json" id="reveal-hugo-defaults">{{ jsonify .Site.Data.reveal_hugo.defaults | safeJS }}</script>
<script type="text/javascript"> <script type="text/javascript">
window.revealDependencies = { window.revealHugoDependencies = {
dependencies: [ dependencies: [
{ src: '{{ "reveal/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: '{{ "reveal/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]' ); } },

2
layouts/partials/reveal-hugo/body.html
View file

@ -1 +1 @@
<!-- override this partial to add content before the body closing --> <!-- override this partial to add content before the body tag closes -->

1
layouts/partials/reveal-hugo/head.html Normal file
View file

@ -0,0 +1 @@
<!-- override this partial to add content before the head tag closes -->

13
static/reveal-hugo/index.js
View file

@ -1,6 +1,11 @@
// pattern inspired by https://github.com/RealOrangeOne/hugo-theme-revealjs // pattern inspired by https://github.com/RealOrangeOne/hugo-theme-revealjs
var revealParams = JSON.parse(document.getElementById('reveal-hugo-params').innerHTML); var revealHugoPageParams = JSON.parse(document.getElementById('reveal-hugo-page-params').innerHTML);
var revealDefaults = JSON.parse(document.getElementById('reveal-hugo-defaults').innerHTML); var revealHugoSiteParams = JSON.parse(document.getElementById('reveal-hugo-site-params').innerHTML);
var revealHugoDefaults = JSON.parse(document.getElementById('reveal-hugo-defaults').innerHTML);
// More info https://github.com/hakimel/reveal.js#configuration // See all options - https://github.com/hakimel/reveal.js#configuration
Reveal.initialize(Object.assign(revealDefaults, revealParams, revealDependencies)); Reveal.initialize(Object.assign(
revealHugoDefaults,
revealHugoSiteParams,
revealHugoPageParams,
revealHugoDependencies));