界面定制#

JupyterLab界面中的多个元素可以自定义，以显示新元素或隐藏默认元素。

布局#

JupyterLab布局有两种模式：简单模式（或单文档模式）和默认模式（或多文档模式）。在这两种模式中，小部件都附着在四个区域之一：左侧或右侧边栏、主停靠面板区域或下方区域。

小部件的默认位置可以通过设置根据小部件的类型进行覆盖。要修改的设置是JupyterLab Shell部分中的layout设置。

可用的部件类型及其默认区域如下所示

类型

多个

单个

控制台

主函数

主函数

CSV表格

主函数

主函数

TSV表格

主函数

主函数

编辑器

主函数

主函数

HTML 查看器

主函数

主函数

图片

主函数

主函数

图像（文本）

主函数

主函数

JSON

主函数

主函数

Markdown 预览

主函数

主函数

笔记本

主函数

主函数

克隆输出

主函数

向下

链接控制台

主函数

向下

检查员

主函数

向下

PDF

主函数

主函数

终端

主函数

主函数

虚拟DOM

主函数

主函数

Vega-Lite4

主函数

主函数

Vega5

主函数

主函数

设置

主函数

主函数

高级设置

主函数

主函数

许可证

主函数

主函数

调试器

正确

正确

调试器变量

主函数

主函数

调试器源

主函数

主函数

属性检查器

正确

正确

扩展管理器

左

左

文件浏览器

左

左

会话和标签页

左

左

目录

左

左

日志控制台

向下

向下

 
"layout": {
  "single": {
    "Linked Console": { "area": "down" },
    "Inspector": { "area": "down" },
    "Cloned Output": { "area": "down" },
    // Add new terminals in the down area in simple mode
    "Terminal": { "area": "down" }
  },
  "multiple": {
    // Add new terminals in the right sidebar in default mode
    "Terminal": { "area": "right" }
  }
}

上述示例将导致以下变化：

(Before Change) Default terminal position in "multiple" (default) mode

（更改前）在“multiple”（默认）模式下的默认终端位置#

(After Change) Customized terminal position in "multiple" (default) mode

（更改后）在“multiple”（默认）模式下自定义终端位置#

工具栏#

许多工具栏是可定制的。以下是可定制工具栏及其相关设置的映射。

  • 单元格：单元格工具栏 -> 工具栏

  • CSV 查看器: CSV 查看器 -> 工具栏

  • 文件浏览器：文件浏览器小部件 -> 工具栏

  • HTML 查看器: HTML 查看器 -> 工具栏

  • 笔记本面板: 笔记本面板 -> 工具栏

  • 文本编辑器: 文本编辑器 -> 工具栏

  • TSV 查看器：TSV 查看器 -> 工具栏

这些设置可以通过交互式的设置编辑器访问。但您可能会发现使用高级设置编辑器（通过点击设置编辑器右上角的JSON设置编辑器按钮访问）更为方便。

您的toolbar自定义将与默认菜单栏定义合并（这是与其他覆盖默认设置的设置不同的行为）。因此，要删除默认项，您需要禁用它。为此，您需要将工具栏项的disabled属性设置为true；一个项由其name属性唯一标识。

"toolbar": [
  // Disable the restart and run all button
  {
    "name": "restart-and-run",
    "disabled": true
  },
  // Add a new button to clear all cell outputs
  {
    "name": "clear-all-outputs",
    "command": "notebook:clear-all-cell-outputs"
  }
]

上述笔记本面板的示例将导致以下更改：

Default notebook toolbar

默认笔记本工具栏#

Customized notebook toolbar

自定义笔记本工具栏#

工具栏由一系列项目定义。每个项目必须有一个唯一的name。如果该名称与特定的小部件（例如单元格类型工具栏选择器）相关联，它将创建一个工具栏项目。否则，它将需要一个command，当点击工具栏按钮时将触发该命令（参见可用的命令列表）。项目按其rank排序。

注意

如果您想要更高级的自定义，请参考工具栏项目定义。

上下文菜单#

上下文菜单的定义可以通过高级设置编辑器进行自定义。您可以通过从设置菜单中打开设置编辑器来访问它，然后点击右上角的JSON设置编辑器。

在高级设置编辑器中，您需要在左侧面板中选择应用程序上下文菜单部分。您的contextMenu自定义将与默认的上下文菜单定义合并（这与覆盖默认设置的其他设置行为不同）。因此，要删除默认条目，您需要禁用它。为此，您需要将菜单条目的disabled属性设置为true；条目由其command、selector和args属性唯一标识。

可以向现有菜单添加新条目。

"contextMenu": [
  // Disable New notebook entry
  {
    "command": "notebook:create-new",
    "selector": ".jp-DirListing-content",
    "args": {
      "isContextMenu": true
    },
    "disabled": true
  },
  // Add new entry on notebook file to export them as Markdown
  {
    "command": "notebook:export-to-format",
    "selector": ".jp-DirListing-item[data-file-type=\"notebook\"]",
    "rank": 3,
    // Command arguments
    "args": {
      "format": "markdown",
      "label": "Export as Markdown"
    }
  }
]

上面的例子将导致以下变化：

Default context menu

默认上下文菜单#

Customized context menu

自定义上下文菜单#

一个条目可以是任何可用的有效命令；请参阅命令列表。 以及一个CSS选择器，用于定义哪些元素将具有该上下文菜单条目。 并且条目按其等级排序。

注意

如果您想要更高级的定制（例如更改分隔符或子菜单），请参考上下文菜单设置定义。

文件浏览器#

用户可以通过在设置 -> 应用程序上下文菜单 -> contextMenu中添加以下内容来添加“在简单模式下打开”上下文菜单选项。

{
    "command": "filebrowser:open-browser-tab",
    "args": { "mode": "single-document" },
    "selector": ".jp-DirListing-item[data-isdir=\"false\"]",
    "rank": 1.6
}

自定义CSS#

应用自定义CSS#

要应用自定义CSS，您可以在jupyter的config目录中添加一个/custom/custom.css文件。您可以通过运行jupyter --paths找到该目录的路径，~/.jupyter。在那里，您可以创建一个名为custom的文件夹，并在该文件夹中创建一个custom.css文件。

默认情况下，自定义CSS不会被加载。在jupyter配置目录中，~/.jupyter/custom/custom.css文件不会加载，除非应用程序使用--custom-css标志初始化（LabApp.custom_css配置）。

Jupyter 样式#

您可以使用自定义的CSS文件来修改Jupyter的默认样式。

/* Modify Jupyter Styles */

.lm-BoxPanel-child,
.jp-FileBrowser-Panel,
.lm-StackedPanel-child,
.jp-FileBrowser-toolbar {
  background-color: #aecad4 !important;
}

#top-panel-wrapper,
#jp-top-bar {
  background-color: #aecad4 !important;
}

#menu-panel-wrapper,
#jp-MainMenu,
#menu-panel {
  background-color: #aecad4 !important;
}

.jp-NotebookPanel-toolbar {
  background-color: #aecad4 !important;
}

.lm-MenuBar-content {
  color: #02484d;
}

.lm-TabBar-content,
.jp-DirListing-content,
.lm-MenuBar-content {
  font-size: small;
}
a screenshot custom jupyter styling

Markdown#

自定义CSS的另一个潜在应用是样式化markdown。

/* Styling Markdown */

/* Headings */
h1,
h2 {
  font-family: Impact, Charcoal, sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
}

h1 {
  font-size: 22px;
  margin-bottom: 40px;
  color: #10929e;
  text-decoration: underline;
}

h2 {
  font-size: 48px;
  margin-bottom: 32px;
  color: #76b4be;
  text-transform: uppercase;
}

/* Block Quotes */
blockquote {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #19085c;
  border-left: 8px solid #effffc;
  background-color: #eafcff;
  padding: 20px;
}

/* Lists */
ul,
ol {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 24px;
}
a screenshot of custom markdown styling