Here is an example template
<!DOCTYPE html>
<html>
<head>
{{if .Title -}}<title>{{- .Title -}}</title>{{- end}}
{{if .CSSPath -}}
<link href="{{ .CSSPath }}" rel="stylesheet" />
{{else -}}
<style>
body {
width: 100%;
height: 100%;
margin: 10%;
padding: 0;
font-size: calc(2em+1vw);
font-family: sans-serif;
}
ul {
list-style: disc;
text-indent: 0.25em;
}
nav {
position: absolute;
top: 0em;
margin:0;
padding:0.24em;
width: 100%;
height: 4em;
text-align: left;
font-size: 60%;
}
section {
width: 100%;
height: auto;
}
</style>
{{- end }}
</head>
<body>
<nav>
{{ if ne .CurNo .FirstNo -}}
<a id="start-slide" href="{{printf "%02d-%s.html" .FirstNo .FName}}">Home</a>
{{- end}}
{{ if gt .CurNo .FirstNo -}}
<a id="prev-slide" href="{{printf "%02d-%s.html" .PrevNo .FName}}">Prev</a>
{{- end}}
{{ if lt .CurNo .LastNo -}}
<a id="next-slide" href="{{printf "%02d-%s.html" .NextNo .FName}}">Next</a>
{{- end}}
</nav>
<section>{{ .Content }}</section>
{{with .JSPath}}<script src="{{.}}"></script>{{end}}
<script>
(function (document, window) {
'use strict';
var start = document.getElementById('start-slide'),
prev = document.getElementById('prev-slide'),
next = document.getElementById('next-slide');
document.onkeydown = function(e) {
switch (e.keyCode) {
/* case 32: */
case 37:
// Previous: left arrow
if (prev) {
prev.click();
}
break;
case 39:
// Next: right arrow
if (next) {
next.click();
}
break;
case 72:
case 83:
// Home/Start: h, s
if (start) {
start.click();
}
break;
}
};
}(document, window));
</script>
</body>
</html>