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

Presentations can add their own HTML to the layout

Browse source 
This will be the recommended way to add custom CSS and JS on a per-presentation basis. Global layout extensions remain the same.
This commit is contained in:
dzello 2018-08-13 17:41:06 +02:00
parent 1f99371394
commit 216135e004
3 changed files with 41 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
exampleSite/layouts/partials/home/reveal-hugo/body.html Normal file
View file

@ -0,0 +1,9 @@
<!-- This partial is included before the end of the body tag for only the 'example' presentation -->
<!-- A common use would be to add JavaScript to the page to customize interactions -->
<!-- The Reveal.js JavaScript API is located at https://github.com/hakimel/reveal.js/#api -->
<script type="text/javascript">
// Log the current slide to the console when it changes
Reveal.addEventListener('slidechanged', function(event) {
console.log("🎞️ Slide is now " + event.indexh);
});
</script>

18
exampleSite/layouts/partials/home/reveal-hugo/head.html Normal file
View file

@ -0,0 +1,18 @@
<!-- This partial is included before the end of the head tag for only the 'example' presentation -->
<!-- A common use would be to add CSS to the page to customize the theme -->
<style>
/* Add padding, margin and a hover effect on code samples */
.reveal section pre {
box-shadow: none;
margin-top: 25px;
margin-bottom: 25px;
border: 1px solid lightgrey;
}
.reveal section pre:hover {
border: 1px solid grey;
transition: border 0.3s ease;
}
.reveal section pre > code {
padding: 10px;
}
</style>

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

@ -30,17 +30,19 @@
link.href = window.location.search.match( /print-pdf/gi ) ? '{{ $reveal_cdn}}/css/print/pdf.css' : '{{ $reveal_cdn }}/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!-- To insert markup before the closing head tag, create layouts/partials/reveal-hugo/head.html -->
<!-- To insert markup before the closing head tag for all presentations,
create layouts/partials/reveal-hugo/head.html -->
{{- partial "reveal-hugo/head" . -}}
<!-- To insert markup at the end of the head tag for a specific presentation,
create layouts/partials/{section}/reveal-hugo/head.html -->
{{- $sectionHeadPartial := printf "%s/reveal-hugo/head" (.Page.Section | default "home") -}}
{{- if fileExists (printf "layouts/partials/%s.html" $sectionHeadPartial) -}}{{ partial $sectionHeadPartial . }}{{- end }}
</head>
<body>
{{- block "main" . -}}{{- end -}}
<script type="application/json" id="reveal-hugo-site-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="text/javascript">
window.revealHugoDependencies = {
dependencies: [
{ src: '{{ $reveal_cdn }}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
<script type="text/javascript"> window.revealHugoDependencies = { dependencies: [ { src: '{{ $reveal_cdn }}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '{{ $reveal_cdn }}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ $reveal_cdn }}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ $reveal_cdn }}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
@ -78,7 +80,12 @@
revealHugoDependencies);
Reveal.initialize(options);
</script>
<!-- To insert markup before the closing body tag, create layouts/partials/reveal-hugo/body.html -->
{{ partial "reveal-hugo/body" . }}
<!-- To insert markup before the closing body tag for all presentations,
create layouts/partials/reveal-hugo/body.html -->
{{- partial "reveal-hugo/body" . }}
<!-- To insert markup at the end of the head tag for a specific presentation,
create layouts/partials/{section}/reveal-hugo/body.html -->
{{- $sectionBodyPartial := printf "%s/reveal-hugo/body" (.Page.Section | default "home") -}}
{{- if fileExists (printf "layouts/partials/%s.html" $sectionBodyPartial) -}}{{ partial $sectionBodyPartial . }}{{- end }}
</body>
</html>