如何在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. 改变其他内容

这是我失败的地方：

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

- John Smith

---

你在哪里添加第二个提到的脚本（改变转换效果）？ - rusty

你将它粘贴到一个单元格中，并将其设为“Raw NBConvert”类型。但对我来说，第二步在新的Jupyter版本4.2.1中无法执行。 - Valentas

在2022年，1和2将不再起作用（而且很难找到现代的答案，所以我在这里发布这个注释--这个答案仍然在搜索中排名靠前）。相反，您可能想要使用SlidesExporter.reveal_transition和SlidesExporter.reveal_theme设置。例如：要删除默认的淡入淡出效果，请编辑~/.jupyter/jupyter_lab_config.py文件并添加以下行：c.SlidesExporter.reveal_transition = 'none'。 - kgr

Answer 1

也许有点晚了：

虽然其中一些方法不起作用，但我在上述博客中找到了另一篇名为“自定义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>

- Benny Chin

---

那个链接不再可用了。你能找到其他链接吗？还是有打字错误？ - falsePockets

Answer 2

你可以更改幻灯片的主题或过渡效果。

基本思路是创建一个配置文件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文件会自动加载。

- Lukas

---

您所引用的博客非常古老。现在它使用命令Jupyter nbconvert slideshow.ipynb --to slides --post serve 进行转换。但我仍然不知道如何在每张幻灯片上放置徽标。 - rusty

事实上，博客中提供的解决方案已经不再适用了，而且很难找到另一个解决方案来更改演示文稿的默认参数。 - meduz