IPython/Jupyter Notebook 3 - 默认隐藏标题

Question

在IPython notebook 3.0版本之前，可以通过将以下内容添加到“.ipython\profile_default\static\custom\custom.js”（在Windows上）来默认隐藏笔记本标题：

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    $('div#header').hide();
    $('div#maintoolbar').hide();
});

或者对于Jupyter，使用“~/.jupyter/custom/custom.js”，将IPython替换为Jupyter。 此问题也要参考 这似乎不再起作用了。它隐藏了标题，但也在页面的顶部和底部留下了一个大的空白区域。 我不熟悉javascript和css。有人找到解决方法了吗？

- Tobias Hotzenplotz

Answer 1

将以下内容添加到您的个人资料中的custom.css文件中（例如，对于我来说是~/.ipython/profile_default/static/custom/custom.css）：

div#site{
    height: 100% !important;
}

为了删除底部的任何难看的灰色空白。此外，我将以下内容添加到我的custom.js文件中（同一文件夹），以使用Ctrl-` 切换标题：

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    $('#header').hide();

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-`', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').toggle();
            return false;
        }
        return true;
    });
});

缺点是你可能会意外地将页眉部分滚动到页面上，但只有在你滚动它时才会发生这种情况，而且这并不是什么大问题，尤其是如果你希望它基本上保持隐藏。

- John_C

---

非常好，谢谢！只是需要注意的是：这样会完全隐藏标题。我之前使用的解决方案保留了菜单所在的行。现在你必须使用ctrl+`快捷键。不过，我甚至更喜欢这种方式。 - Tobias Hotzenplotz

除了利用全部高度外，您还可以通过在~/.ipython/profile_default/static/custom/custom.css中添加.container { width:100% !important; }来去除侧边的灰色空白。 - joelostblom

另外需要注意的是，如果您碰巧使用Jupyter笔记本，则需要执行jupyter migrate命令，以便相同的js和css文件可以在Jupyter中正常工作 - http://jupyter.readthedocs.org/en/latest/migrating.html - kampta

你可能还需要重新启动笔记本服务器，以使 CSS 更改生效。 - Brian Burns

这应该是一个扩展。 - bluss

Answer 2

在ipython 3中，#header指的是页面顶部的完整装配，而不仅仅是ipython 2中的图像横幅。

要永久隐藏工具栏和标题同时保留菜单，我添加了以下内容：

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    $('div#header-container').hide();
    $('div#maintoolbar').hide();
});

至于我的~/.ipython/profile_name/static/custom/custom.js文件

- cknd

Answer 3

结合@John_C和@cknd的答案，避免使用“-key”（这是我的荷兰键盘布局上的死键），我将以下内容添加到我的~/.ipython/profile_name/static/custom/custom.js文件中：

$([IPython.events]).on('notebook_loaded.Notebook', function(){
    $('#header').hide();
    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-;', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').toggle();
            return false;
        }
        return true;
    });

    IPython.keyboard_manager.command_shortcuts.add_shortcut('ctrl-.', function (event) {
        if (IPython.notebook.mode == 'command') {
            $('#header').show();
            $('#header-container').toggle();
            $('#maintoolbar').toggle();
            return false;
        }
        return true;
    });

});

- egpbos

Answer 4

我需要更新这个工作，以适应使用小型树莓派LCD的jupyter 4/5。

从jupyter 4.x开始，脚本现在需要放置在~/.jupyter/custom/custom.js中。

我使用了这个函数，它不仅可以正常隐藏选项卡，还可以将持久性条移到可滚动区域。我提到过这是在一个小LCD上吗？我们需要每个像素！

define(['base/js/events'], function(events) {
  events.on('app_initialized.NotebookApp', function () {
    $('#header-container').toggle();
    $('.header-bar').toggle();
    $('div#maintoolbar').toggle();
    $('#site').prepend($("#header").detach());
    events.trigger('resize-header.Page');
  });
});

还需要使用~/.jupyter/custom/custom.css文件来消除底部边框。

div#notebook{
  padding: 0;
}
div#site{
  height: 100% !important;
}

- bmidgley