如何在 ipython/jupyter 笔记本中修改 reveal.js 幻灯片设置
How to modify reveal.js slide settings in a ipython/jupyter notebook
我正在使用 jupyter/iPython 笔记本编写 reveal.js 幻灯片。我想更改一些默认设置是一个简单的方法。我已经处理过的事情（以防对某人有帮助）
1。更改主题
通过添加包含
的原始单元格来更改主题
<link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">
2。更改 reveal.js 配置
nbconvert 的问题在于它在所有单元格语法之后加载 reveal.js，因此仅以相同的方式添加 <script>Reveal.configure(...)</script> 是行不通的（Reveal 仍然未知）。解决方案是确保代码在文档加载后执行：
<script type="text/javascript">
$(document).ready(function(){
Reveal.configure({
transition: 'convex' // none/fade/slide/convex/concave/zoom
})
});
</script>
3。改变其他东西
这是我失败的地方：
如何设置片段的行为或特定幻灯片的背景？
您可以更改一般主题或过渡。
基本思路是在某处创建配置文件 slides_config.py（即与幻灯片位于同一文件夹中）：
c = get_config()
c.Exporter.template_file = 'default_transition'
然后，您创建另一个模板文件default_transition.tpl:
{%- extends 'slides_reveal.tpl' -%}
{% block body %}
{{ super() }}
<script>
Reveal.initialize({
// Display controls in the bottom right corner
//controls: true,
// Display a presentation progress bar
//progress: true,
// Push each slide change to the browser history
//history: false,
// Enable keyboard shortcuts for navigation
//keyboard: true,
// Enable touch events for navigation
//touch: true,
// Enable the slide overview mode
//overview: true,
// Vertical centering of slides
//center: true,
// Loop the presentation
//loop: false,
// Change the presentation direction to be RTL
//rtl: false,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
//autoSlide: 0,
// Enable slide navigation via mouse wheel
//mouseWheel: false,
// Transition style
transition: 'concave', // default/cube/page/concave/zoom/linear/fade/none
// Transition speed
//transitionSpeed: 'default', // default/fast/slow
// Transition style for full page backgrounds
//backgroundTransition: 'default', // default/linear/none
// Theme
theme: 'sky' // available themes are in /css/theme
});
</script>
{% endblock body %}
此外，当您想要更改某些 CSS 详细信息时，您可以创建一个自定义 CSS 文件 custom.css 并在其中添加您想要的内容。
自定义 CSS 文件会自动加载。
也许这有点晚了：
虽然其中一些不起作用，但我从上面提到的同一博客中找到了另一个 post：“自定义您的 IPython 幻灯片”，可能正是您所要求的。
custom.css 仍然适用于我（使用 Jupyter 4 和 Revealjs 3.0.0）。只需将 custom.css 文件放在您的 .html 所在的目录中即可。
更改字体（记住“.reveal”）：
.reveal p {
font-family: 'Raleway', sans-serif;
color: #2d28cc;
}
添加背景（但主题背景颜色会消失，可能需要更多 css 调整）：
body {
background: url(logo.png)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
要向特定幻灯片添加内容，我会使用自定义 div，例如：
div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}
然后将其添加到 jupyter 单元格中：
<div id="footer">...</div>
我正在使用 jupyter/iPython 笔记本编写 reveal.js 幻灯片。我想更改一些默认设置是一个简单的方法。我已经处理过的事情（以防对某人有帮助）
1。更改主题
通过添加包含
的原始单元格来更改主题<link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">
2。更改 reveal.js 配置
nbconvert 的问题在于它在所有单元格语法之后加载 reveal.js，因此仅以相同的方式添加 <script>Reveal.configure(...)</script> 是行不通的（Reveal 仍然未知）。解决方案是确保代码在文档加载后执行：
<script type="text/javascript">
$(document).ready(function(){
Reveal.configure({
transition: 'convex' // none/fade/slide/convex/concave/zoom
})
});
</script>
3。改变其他东西
这是我失败的地方：
如何设置片段的行为或特定幻灯片的背景？
您可以更改一般主题或过渡。
基本思路是在某处创建配置文件 slides_config.py（即与幻灯片位于同一文件夹中）：
c = get_config()
c.Exporter.template_file = 'default_transition'
然后，您创建另一个模板文件default_transition.tpl:
{%- extends 'slides_reveal.tpl' -%}
{% block body %}
{{ super() }}
<script>
Reveal.initialize({
// Display controls in the bottom right corner
//controls: true,
// Display a presentation progress bar
//progress: true,
// Push each slide change to the browser history
//history: false,
// Enable keyboard shortcuts for navigation
//keyboard: true,
// Enable touch events for navigation
//touch: true,
// Enable the slide overview mode
//overview: true,
// Vertical centering of slides
//center: true,
// Loop the presentation
//loop: false,
// Change the presentation direction to be RTL
//rtl: false,
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
//autoSlide: 0,
// Enable slide navigation via mouse wheel
//mouseWheel: false,
// Transition style
transition: 'concave', // default/cube/page/concave/zoom/linear/fade/none
// Transition speed
//transitionSpeed: 'default', // default/fast/slow
// Transition style for full page backgrounds
//backgroundTransition: 'default', // default/linear/none
// Theme
theme: 'sky' // available themes are in /css/theme
});
</script>
{% endblock body %}
此外，当您想要更改某些 CSS 详细信息时，您可以创建一个自定义 CSS 文件 custom.css 并在其中添加您想要的内容。
自定义 CSS 文件会自动加载。
也许这有点晚了：
虽然其中一些不起作用，但我从上面提到的同一博客中找到了另一个 post：“自定义您的 IPython 幻灯片”，可能正是您所要求的。
custom.css 仍然适用于我（使用 Jupyter 4 和 Revealjs 3.0.0）。只需将 custom.css 文件放在您的 .html 所在的目录中即可。
更改字体（记住“.reveal”）：
.reveal p {
font-family: 'Raleway', sans-serif;
color: #2d28cc;
}
添加背景（但主题背景颜色会消失，可能需要更多 css 调整）：
body {
background: url(logo.png)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
要向特定幻灯片添加内容，我会使用自定义 div，例如：
div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}
然后将其添加到 jupyter 单元格中：
<div id="footer">...</div>