如何在ipython / jupyter笔记本中修改reveal.js幻灯片设置

Question

我正在使用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。改变其他事情

这是我失败的地方：

如何设置片段的行为或特定幻灯片的背景？

Answer 1

也许这有点晚了：

虽然其中一些不起作用，但我在上面提到的同一个博客中发现了另一篇帖子：Customizing your IPython slides，可能就是你要求的。

custom.css仍适用于我（使用Jupyter 4和Revealjs 3.0.0）。只需将custom.css文件放在.html所在的目录中。

更改字体（请记住＆＃39; .reveal＆＃39;）：

.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>

希望这有帮助〜

Answer 2

您可以根据此博文更改常规主题或转换：http://www.damian.oquanta.info/posts/change-the-ipython-slides-defaults-with-an-ipython-config-file.html

基本思路是在某处创建配置文件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文件。