如何在 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 所在的同一目录中即可。

改变字体（记住'.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>

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 文件会自动加载。