[英]Set header and footer reveal.js presentation
I want to set a header and footer in my presentation. 我想在演示文稿中设置页眉和页脚。 I used the following issue as a starting point: https://github.com/hakimel/reveal.js/issues/806 and http://www.ciges.net/revealjs_demo/#/
我使用以下问题作为起点: https : //github.com/hakimel/reveal.js/issues/806和http://www.ciges.net/revealjs_demo/#/
My current implementation gives the following output: 我当前的实现提供了以下输出:
Now as far as I have understand reveal.js uses fixed size for the presentation by default with a width of 960px and height of 700px. 现在据我所知,reveal.js默认使用固定大小的表示 ,宽度为960px,高度为700px。 This size is completely fine to me.
这个尺寸对我来说完全没问题。 However, I want the headers and footer not to be fixed in this window.
但是,我希望不在此窗口中修复页眉和页脚。 They need to adapt to the actual screen size.
他们需要适应实际的屏幕尺寸。 That is to say, I want the left header to be aligned to the top left corner of the screen.
也就是说,我希望左标题与屏幕的左上角对齐。 Likewise for the other header and footers, see also the image.
同样对于其他页眉和页脚,另请参见图像。 How can I achieve this?
我怎样才能做到这一点? Currently it seems that my headers and footers are fixed within the default window (960x700).
目前看来我的页眉和页脚是固定在默认窗口(960x700)。
I use the following code (index.html) with reveal.js 3.2.0 我在reveal.js 3.2.0中使用以下代码(index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<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, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
.reveal div.header-left {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.header-right {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-left {
position: absolute;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-right {
position: absolute;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="hidden" style="display:none;">
<div id="header">
<div class="header-left">test header left</div>
<div class="header-right">test header right</div>
<div class="footer-left">test footer left</div>
<div class="footer-right">test footer right</div>
</div>
</div>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by $x^2$ <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
</p>
</section>
<section>
<h2>Hello There</h2>
<p>
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
</a>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: false,
progress: true,
slideNumber: true,
history: true,
center: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
math: {
mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/math/math.js', async: true }
]
});
</script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
$('.slides > section').prepend(header);
} else {
$('.slides').prepend(header);
}
</script>
</body>
</html>
Here is a slightly more complicated answer that also works with the pdf-export print version: 这是一个稍微复杂的答案 ,也适用于pdf-export打印版本:
Add the elements to the slide-background
<div> (instead of section
, slides
, or reveal
). 将元素添加到
slide-background
<div>(而不是section
, slides
或reveal
)。 This <div> is dynamically generated, so we must wait for the Reveal.js ready
event. 这个<div>是动态生成的,所以我们必须等待Reveal.js
ready
事件。 When printing there is a slight delay followed by unnecessary animation of the headers and footers moving into place, but all the headers/footers are rendered in the PDF as desired. 打印时会有轻微的延迟,接着是页眉和页脚移动到位的不必要的动画,但所有页眉/页脚都会根据需要在PDF中呈现。
Pseudo-code: 伪代码:
.slide-background
<div> .slide-background
<div>中 Code: this can be copy-pasted into the end of a reveal.js file (right before the end </body> tag): 代码:这可以复制粘贴到reveal.js文件的末尾(在结束</ body>标记之前):
<style type="text/css">
/* 1. Style header/footer <div> so they are positioned as desired. */
#header-left {
position: absolute;
top: 0%;
left: 0%;
}
#header-right {
position: absolute;
top: 0%;
right: 0%;
}
#footer-left {
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
<!-- 2. Create hidden header/footer <div> -->
<div id="hidden" style="display:none;">
<div id="header">
<div id="header-left">HEADER-LEFT</div>
<div id="header-right">HEADER-RIGHT</div>
<div id="footer-left">FOOTER-LEFT</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div>
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
Reveal.addEventListener( 'ready', function( event ) {
$('.slide-background').append(header);
});
}
else {
$('div.reveal').append(header);
}
</script>
Insert the header/footer elements into the div.reveal
element instead of the .slides
slides element. 将页眉/页脚元素插入
div.reveal
元素而不是.slides
slides元素。
The position within the DOM tree you where insert the header/footer elements affects which CSS is applied, which in turn affects their positioning. 插入页眉/页脚元素的DOM树中的位置会影响应用哪个CSS,这反过来会影响它们的定位。
$('.slides').prepend(header)
adds the elements inside the slides
<div>. $('.slides').prepend(header)
在slides
<div>中添加元素。 The elements will be fixed to the default (960x700) window because that is how the slides
<div> is sized. slides
<div>的大小。 $('div.reveal').append(header)
adds the elements inside the reveal
<div>. $('div.reveal').append(header)
在reveal
<div>中添加元素。 The elements will be fixed to the screen because the reveal
<div> is sized to take up the entire browser view port. reveal
<div>的大小可以占据整个浏览器视图端口。 Note this does not work for the print/pdf version... I'm still trying to figure that one out... 请注意,这不适用于print / pdf版本......我仍然试图找出那个......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.