界面定制#

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

布局#

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

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

下面列出了可用的小部件类型及其默认区域

类型	多文档	单文档
控制台	主区域	主区域
CSV 表格	主区域	主区域
TSV 表格	主区域	主区域
编辑器	主区域	主区域
HTML 查看器	主区域	主区域
图像	主区域	主区域
图像（文本）	主区域	主区域
JSON	主区域	主区域
Markdown 预览	主区域	主区域
笔记本	主区域	主区域
克隆输出	主区域	下方区域
链接控制台	主区域	下方区域
检查器	主区域	下方区域
PDF	主区域	主区域
终端	主区域	主区域
VDOM	主区域	主区域
Vega-Lite4	主区域	主区域
Vega5	主区域	主区域
Settings	主区域	主区域
高级设置	主区域	主区域
许可证	主区域	主区域
调试器	右侧区域	右侧区域
调试器变量	主区域	主区域
调试器源	主区域	主区域
属性检查器	右侧区域	右侧区域
扩展管理器	左侧区域	左侧区域
文件浏览器	左侧区域	左侧区域
会话和选项卡	左侧区域	左侧区域
目录	左侧区域	左侧区域
日志控制台	下方区域	下方区域

"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 — （更改后）“多文档”（默认）模式下的自定义终端位置#

工具栏#

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

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

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

您的工具栏定制将与默认菜单栏定义合并（这与其他覆盖默认设置的设置行为不同）。因此，要删除默认项目，您需要禁用它。为此，您需要将工具栏项目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。如果该名称与特殊小部件（例如单元格类型工具栏选择器）关联，则将创建一个工具栏项目。否则，它将需要一个命令，当单击工具栏按钮时将触发该命令（请参阅可用的命令列表）。项目按其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 配置目录中，除非使用 --custom-css 标志（LabApp.custom_css 配置）初始化应用程序，否则不会加载 ~/.jupyter/custom/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;
}

界面定制#

布局#

工具栏#

菜单栏#

上下文菜单#

文件浏览器#

自定义 CSS#

应用自定义 CSS#

Jupyter 样式#

Markdown#

此页面