web-dev-qa-db-ja.com

ipython / jupyterノートブックでreveal.jsスライド設定を変更する方法

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.他のものを変える

これは私が失敗するところです：

フラグメントの動作や特定のスライドの背景を設定するにはどうすればよいですか？

javascriptipythonipython-notebookreveal.jsjupyter
16
John Smith

多分これは少し遅れています：

それらのいくつかは機能しませんが、上記の同じブログから別の投稿を見つけました： IPythonスライドのカスタマイズ 、あなたが求めているものかもしれません。

custom.cssは引き続き機能します（Jupyter4およびRevealjs3.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>
6
Benny Chin

このブログ投稿に従って、一般的なテーマまたは遷移を変更できます： 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ファイルは自動的に読み込まれます。

1
Lukas