界面自定义#

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

布局#

JupyterLab 布局有两种模式：简单模式（或单文档模式）和默认模式（或多文档模式）。在这两种模式下，小部件都附加在四个区域之一：left 或 right 侧边栏，main 停靠面板区域或 down 区域。

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

以下是可用的小部件类型及其默认区域列表

类型	多个	单个
控制台	main	main
CSVTable	main	main
TSVTable	main	main
编辑器	main	main
HTML 查看器	main	main
图像	main	main
图像（文本）	main	main
JSON	main	main
Markdown 预览	main	main
笔记本	main	main
克隆输出	main	down
链接控制台	main	down
检查器	main	down
PDF	main	main
终端	main	main
VDOM	main	main
Vega-Lite4	main	main
Vega5	main	main
设置	main	main
高级设置	main	main
许可证	main	main
调试器	right	right
调试器变量	main	main
调试器源代码	main	main
属性检查器	right	right
扩展管理器	left	left
文件浏览器	left	left
会话和选项卡	left	left
目录	left	left
日志控制台	down	down

"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 — (更改前) “多个”（默认）模式下的默认终端位置#

(After Change) Customized terminal position in "multiple" (default) mode — (更改后) “多个”（默认）模式下的自定义终端位置#

工具栏#

许多工具栏都是可自定义的。以下是可自定义工具栏及其关联设置的映射。

单元格：单元格工具栏 -> toolbar
CSV 查看器：CSV 查看器 -> toolbar
文件浏览器：文件浏览器小部件 -> toolbar
HTML 查看器：HTML 查看器 -> toolbar
笔记本面板：笔记本面板 -> toolbar
文本编辑器：文本编辑器 -> toolbar
TSV 查看器：TSV 查看器 -> toolbar

这些设置可以通过交互式设置编辑器访问。但您可能觉得使用高级设置编辑器更方便（可以通过点击设置编辑器右上角的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"
  }
]

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

Customized notebook toolbar — 自定义笔记本工具栏#

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

注意

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

菜单栏#

可以通过高级设置编辑器自定义顶部菜单栏定义。您可以通过从设置菜单打开设置编辑器，然后单击右上角的JSON 设置编辑器来访问它。

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

可以将新条目添加到现有菜单中，也可以创建新菜单。

"menus": [
  {
    // Disable the Run menu
    "id": "jp-mainmenu-run",
    "disabled": true
  },
  {
    // Move the Tabs menu to the end by changing its rank
    "id": "jp-mainmenu-tabs",
    "rank": 1100,
    "items": [
        // Add a new entry in the Tabs menu
        {
            "command": "launcher:create",
            "rank": 0
        }
    ]
  },
  {
    // Disable the Open from Path entry in the File menu
    "id": "jp-mainmenu-file",
    "items": [
      {
        "command": "filebrowser:open-path",
        "disabled": true
      }
    ]
  }
]

上面的示例将导致以下更改

菜单由以下 ID 标识

文件菜单：jp-mainmenu-file
- 新建文件子菜单：jp-mainmenu-file-new
编辑菜单：jp-mainmenu-edit
视图菜单：jp-mainmenu-view
- 外观子菜单：jp-mainmenu-view-appearance
运行菜单：jp-mainmenu-run
内核菜单：jp-mainmenu-kernel
选项卡菜单：jp-mainmenu-tabs
设置菜单：jp-mainmenu-settings
帮助菜单：jp-mainmenu-help

条目可以是任何有效的可用命令；请参阅命令列表。条目按其等级排序。

注意

如果您想要更高级的自定义（例如更改分隔符或子菜单），请参阅主菜单设置定义.

上下文菜单#

可以通过高级设置编辑器自定义上下文菜单定义。您可以通过从设置菜单打开设置编辑器，然后单击右上角的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"
    }
  }
]

上面的示例将导致以下更改

条目可以是任何有效的可用命令；请参阅命令列表。以及一个 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;
}

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;
}