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

我正在用jupyter/iPython笔记本写

reveal.js

幻灯片。我想改变一些默认设置是一个简单的方法。我已经管理的事情（以防对某人有所帮助）

1.改变主题 通过添加包含以下内容的原始单元格来更改主题

<link rel="stylesheet" href="reveal.js/css/theme/sky.css" id="theme">

3.改变其他事情 这就是我失败的地方：

---

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

您可以根据以下博文更改一般主题或过渡：

基本思想是在某处（即与幻灯片位于同一文件夹中）创建一个配置文件

slides\u config.py

：

然后，创建另一个模板文件

default\u 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 %}

{%-extends'slides\u-leaver.tpl'-%}
{%block body%}
{{super（）}}
显示。初始化({
//在右下角显示控件
//控制：对，
//显示演示文稿进度条
//进步：没错，
//将每个幻灯片更改推送到浏览器历史记录
//历史：错，
//启用用于导航的键盘快捷键
//键盘：没错，
//为导航启用触摸事件
//触摸：是的，
//启用幻灯片概览模式
//概述：没错，
//幻灯片的垂直居中
//中：是的，
//循环演示文稿
//循环：false，
//将演示方向更改为RTL
//rtl：错，
//自动执行到的间隔毫秒数
//下一张幻灯片，设置为0时禁用，可以覆盖此值
//通过在幻灯片上使用数据自动滑动属性
//自动滑动：0，
//通过鼠标滚轮启用幻灯片导航
//鼠标滚轮：错，
//过渡风格
过渡：“凹面”，//默认值/cube/page/凹面/zoom/linear/fade/none
//过渡速度
//转换速度：“默认值”，//默认值/快/慢
//全页背景的过渡样式
//backgroundTransition:'默认'，//默认/线性/无
//主题
主题：“天空”//可用主题位于/css/theme中
});
{%endblock body%}

此外，当您想要更改一些CSS细节时，您可以创建一个自定义CSS文件

custom.CSS

，并在其中添加所需的内容

---

自定义CSS文件将自动加载。

这可能有点晚了：

虽然其中有些不起作用，但我从上面提到的同一个博客中发现另一篇文章：，可能是你想要的

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

要更改字体（请记住“.discover”）：

要添加背景（但主题中的背景颜色将消失，可能需要更多css调整）：

要向特定幻灯片添加内容，我将使用自定义div，例如：

div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}

然后将其添加到jupyter单元格：

<div id="footer">...</div>

。。。

您引用的博客非常旧。现在它使用命令Jupyter nbconvert slideshow.ipynb转换为slides-post-serve我仍然不知道如何在每张幻灯片上添加徽标。事实上，博客中给出的解决方案不再有效，很难找到另一个解决方案来更改演示文稿的默认参数您在哪里添加脚本第二个提到的（这改变了转换）？你将它粘贴到一个单元格中，并将其设置为“Raw NBConvert”类型。但是第2步对我来说，新的Jupyter版本4.2.1不起作用。该链接不再起作用。你能找到其他链接吗？或者有打字错误吗？

.reveal p {
font-family: 'Raleway', sans-serif;
color: #2d28cc;
}

body {
  background: url(logo.png)
  no-repeat
  left center;
padding: 5px 0 5px 25px;
}

div.footer {
font-size:14pt;
font-style: italic;
color: #4aaeee;
text-align: center
}

<div id="footer">...</div>