Jupyter Notebook 用户界面组件完全指南Dashboard、Notebook Editor、File Editor 与编辑/命令模式【免费下载链接】notebookJupyter Interactive Notebook项目地址: https://gitcode.com/GitHub_Trending/no/notebookJupyter Notebook本项目仓库即 Jupyter Notebook 7.x 的前端应用入口与页面路由实现位于 notebook/app.py是一个基于浏览器的交互式计算环境。本文以官方文档 docs/source/ui_components.md 为核心骨架系统讲解 Notebook 各界面组件的标准名称、导航关系与两种核心交互模式并结合本仓库源码与示例 notebook 深入说明其底层实现。读完本文你将能准确说出 Notebook 中每一个 UI 区域的正式名称无论是自己排查问题还是在 GitHub Issue 或邮件列表中求助他人时都能被快速理解并能理解 Dashboard、Notebook Editor、File Editor 三个页面之间的路由关系以及编辑/命令模式的判定机制。为什么需要认识 UI 组件的名称在向 Jupyter 项目提交 bug 报告、或者向邮件列表发送求助邮件时准确说出界面组件的名称至关重要。原文档明确指出当打开 bug 报告或给 Jupyter 邮件列表发送邮件时了解不同 UI 组件的名称非常有用这样其他开发者和用户能更容易地帮助你诊断问题。例如与其说页面右上角那个小图标有问题不如说Cell Mode Indicator 在编辑模式下没有显示铅笔图标。本章节用于熟悉 Notebook 中 UI 元素的名称以及 Notebook 的不同模式。Jupyter Notebook 主要包含三个核心页面组件其路由均由 notebook/app.py 中的initialize_handlers()注册页面组件路由前缀对应 Handler渲染模板Notebook Dashboard仪表盘/treeTreeHandlertree.htmlNotebook Editor笔记本编辑器/notebooksNotebookHandlernotebooks.htmlFile Editor文件编辑器/editFileHandleredit.htmlConsole / Terminal 页面/consoles、/terminalsConsoleHandler、TerminalHandlerconsoles.html、terminals.html应用默认首页指向/tree见 notebook/app.py 中default_url Unicode(/tree, ...)因此jupyter notebook启动后首先看到的就是 Dashboard。Notebook Dashboard仪表盘当你执行jupyter notebook命令启动服务器时浏览器打开的第一个页面就是Notebook Dashboard。它充当整个 notebook 服务器的家目录核心用途是展示当前目录下的 notebooks 与文件。从源码角度Dashboard 由TreeHandler提供notebook/app.py它根据请求路径判断目标是目录还是文件——若是目录则渲染tree.html模板若是 notebook 文件则重定向到/notebooks/path若是其他文件则重定向到/files/path返回原始内容隐藏目录且未开启allow_hidden时返回 404。渲染所用模板为 app/templates/tree_template.html其中通过page_config_full.update(notebookPagetree)写入哨兵值供前端路由判断当前处于 tree 页面。参考官方示例 Notebook Basics.ipynb 中 The Notebook dashboard 一节Dashboard 的主要功能点包括面包屑导航breadcrumbsnotebook 列表顶部显示当前目录的可点击面包屑路径点击面包屑或列表中的子目录即可在文件系统中导航。New 按钮新建文件点击列表顶部的 New 按钮从下拉菜单中选取一个 kernel 来新建 notebook。下拉菜单中列出的 kernel 取决于服务器上实际安装的内核——不同环境中该列表可能不同。上传文件将 notebook 文件拖拽到列表区域或点击列表上方的 click here 文字即可上传。运行状态标识正在运行的 notebook 旁会显示绿色的 Running 文字与绿色 notebook 图标。注意notebook 会一直保持运行直到你显式地将其 shutdown仅仅关闭 notebook 页面并不够。批量操作勾选 notebook 前的复选框后列表顶部会出现一组操作按钮Duplicate 复制、Rename 重命名、Shutdown 关闭内核、Delete 删除、New 新建、Refresh 刷新同样适用于目录和文件。Running 标签页点击 Running 标签页可查看所有正在运行的 notebook 及其所在目录方便在长期运行的 notebook 服务器中跟踪你所启动的 notebook。Notebook Editor笔记本编辑器当你从 Dashboard 中选择一个 notebook 并打开后notebook 会在Notebook Editor笔记本编辑器中打开。这是用户编写代码、书写 Markdown 文档并执行代码的核心界面。其页面渲染由NotebookHandler完成notebook/app.py若请求路径是目录则重定向回/tree否则渲染 app/templates/notebooks_template.html 模板。该模板通过data-notebooknotebooks与notebookPagenotebooks标识页面类型其标题为{{page_config[appName] | e}} - Notebook。Notebook Editor 的核心布局详见 docs/source/notebook.md 中 Notebook user interface 一节自上而下包括Notebook 名称显示在页面顶部 Jupyter logo 旁边对应.ipynb文件名。点击名称会弹出重命名对话框例如在浏览器中将 Untitled0 重命名为 My first notebook 会同时把磁盘上的Untitled0.ipynb文件改名。菜单栏Menu bar提供操作 notebook 的各种菜单项File、Edit、View、Run、Kernel、Help 等。菜单项的组成可以通过 packages/application-extension/schema/menus.json 这样的插件 schema 配置例如其中的jp-mainmenu-file、jp-mainmenu-run、jp-runmenu-change-cell-type子菜单定义。工具栏Toolbar以图标方式提供最常用操作的快捷入口例如运行当前 cell 的 Play 按钮、Cell 类型下拉框等。代码单元Code cell默认类型的 cell是 Notebook 中多行文本输入的基本单位。在 Notebook Editor 内部文档由一系列cell组成执行一个 cell 使用Shift-Enter或点击工具栏 Play 按钮、菜单栏Cell → Run。cell 共有三种类型code cells代码单元带语法高亮与 Tab 补全、markdown cells富文本支持 LaTeX 数学公式$...$内联公式、$$...$$独立公式由 MathJax 渲染、raw cells原始输出不参与求值经 nbconvert 转换时原样保留。所有 cell 初始都是 code cell可通过工具栏下拉框或键盘快捷键切换类型。交互式用户界面导览User Interface Tour如果想更深入地了解 Notebook Editor 中的具体元素可以通过交互式 UI 导览User Interface Tour来学习在菜单栏选择Help然后选择User Interface Tour。系统会以高亮引导的方式逐一介绍菜单栏、工具栏、cell 区域等各个组件的名称与用途。这个功能在示例 Notebook Basics.ipynb 中也有提及Notebook UI 主要由 Menu菜单、Toolbar工具栏、Notebook area and cellsNotebook 区域与单元三大部分组成导览入口即 Help:User Interface Tour。编辑模式与命令模式Modal Editor从 IPython 2.0 开始Jupyter Notebook 采用模态用户界面modal user interface即键盘行为取决于 Notebook 当前所处的模式。这有两种模式编辑模式Edit mode与命令模式Command mode。Cell Mode Indicator单元模式指示器当 cell 处于编辑模式时Cell Mode Indicator单元模式指示器会改变以反映 cell 的状态界面右上角会出现一个小的铅笔图标pencil icon。当 cell 处于命令模式时该位置没有任何图标。这是快速判断当前 cell 所处模式的最直接视觉线索。编辑模式Edit mode编辑模式下你可以像使用普通文本编辑器一样向 cell 中输入内容。视觉特征cell 边框为绿色且编辑器区域显示输入提示符prompt。如何进入按Enter键或用鼠标点击 cell 的编辑器区域。命令模式Command mode命令模式下你不能向单个 cell 输入文字但可以把 notebook 作为一个整体进行操作。此时键盘被映射为一组快捷键可高效执行 notebook 与 cell 级操作——例如在命令模式下按c即可复制当前 cell无需任何修饰键。视觉特征cell 边框为灰色左侧边缘为蓝色。如何进入按Esc键或用鼠标点击 cell 编辑器区域之外的地方例如 prompt 或输出区域。注意事项不要在命令模式下尝试向 cell 输入文字否则会发生意想不到的事情。键盘导航要点模态界面的设计目标是高效键盘操作编辑模式下大部分按键用于输入文字、快捷键较少命令模式下整个键盘都可用于快捷键因此快捷键更多。完整快捷键列表可通过Help → Keyboard Shortcuts对话框查看。官方示例 Notebook Basics.ipynb 建议按以下顺序学习命令模式快捷键基础导航enter进入编辑模式、shift-enter运行当前 cell 并跳转/新建下一个、up/k、down/j上下移动选中保存 notebooks切换 cell 类型y代码、mMarkdown、1-6各级标题、t原始文本新建 cella上方、b下方编辑 cellx剪切、c复制、v粘贴、d删除、z撤销内核操作i按下两次中断内核、0按下两次重启内核此外鼠标导航遵循两个核心原则点击 cell 即可选中它选中的 cell 依据模式显示灰色或绿色边框点击编辑器内部进入编辑模式点击 prompt 或输出区域进入命令模式cell 操作通常作用于当前选中的 cell如运行、复制等。Markdown cell 还有一个渲染/未渲染状态通过工具栏运行按钮或Cell → Run渲染双击 cell 则可取消渲染查看原始文本。File Editor文件编辑器假设你在 Notebook Dashboard 中打开的不是notebook 文件而是一个 Markdown 文件等其他普通文件那么该文件会在File Editor文件编辑器中打开。File Editor 由FileHandler提供服务notebook/app.py渲染模板为 app/templates/edit_template.html。模板标题为{{page_config[appName] | e}} - Editbody 以data-notebookedit标识并使用与 tree 页面相同的page_config_full注入机制notebookPageedit向前端传递页面类型。该编辑器面向非 notebook 的纯文本文件如 Markdown、Python 源码等提供基本的编辑能力。面向排障与协作的实战建议综合原文档与本仓库源码在使用中可遵循以下实践用标准名称描述界面报告问题时尽量使用本文介绍的正式术语Notebook Dashboard、Notebook Editor、File Editor、Menu bar、Toolbar、Code cell、Cell Mode Indicator、Command mode、Edit mode 等而不是模糊的上面那个栏那个小图标。善用内置导览不确定某个元素叫什么时打开Help → User Interface Tour让系统直接告诉你。留意模式状态键盘操作异常时先通过右上角是否显示铅笔图标判断当前处于编辑模式还是命令模式——大量快捷键不生效的问题都源于模式误判。理解页面跳转逻辑Dashboard 会根据目标文件类型自动分流到 Notebook Editor 或 File Editor见 TreeHandler 的目录/notebook/普通文件三分支判断掌握这一点有助于理解 URL 中/tree、/notebooks、/edit的含义。内核生命周期管理Dashboard 的 Running 标签页与绿色 Running 标识可以帮助你追踪未关闭的内核记得显式 Shutdown 而不是只关闭浏览器标签页。以上内容均可在本仓库中进一步验证与探索页面路由与 Handler 实现见 notebook/app.py三个页面模板位于 app/templates/官方配套的交互式示例见 Notebook Basics.ipynb更完整的用户文档见 docs/source/notebook.md。【免费下载链接】notebookJupyter Interactive Notebook项目地址: https://gitcode.com/GitHub_Trending/no/notebook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/15 18:21:51 · 阅读 1.2k Jupyter Notebook 用户界面组件完全指南：Dashboard、Notebook Editor、File Editor 与编辑/命令模式
Jupyter Notebook 用户界面组件完全指南Dashboard、Notebook Editor、File Editor 与编辑/命令模式【免费下载链接】notebookJupyter Interactive Notebook项目地址: https://gitcode.com/GitHub_Trending/no/notebookJupyter Notebook本项目仓库即 Jupyter Notebook 7.x 的前端应用入口与页面路由实现位于 notebook/app.py是一个基于浏览器的交互式计算环境。本文以官方文档 docs/source/ui_components.md 为核心骨架系统讲解 Notebook 各界面组件的标准名称、导航关系与两种核心交互模式并结合本仓库源码与示例 notebook 深入说明其底层实现。读完本文你将能准确说出 Notebook 中每一个 UI 区域的正式名称无论是自己排查问题还是在 GitHub Issue 或邮件列表中求助他人时都能被快速理解并能理解 Dashboard、Notebook Editor、File Editor 三个页面之间的路由关系以及编辑/命令模式的判定机制。为什么需要认识 UI 组件的名称在向 Jupyter 项目提交 bug 报告、或者向邮件列表发送求助邮件时准确说出界面组件的名称至关重要。原文档明确指出当打开 bug 报告或给 Jupyter 邮件列表发送邮件时了解不同 UI 组件的名称非常有用这样其他开发者和用户能更容易地帮助你诊断问题。例如与其说页面右上角那个小图标有问题不如说Cell Mode Indicator 在编辑模式下没有显示铅笔图标。本章节用于熟悉 Notebook 中 UI 元素的名称以及 Notebook 的不同模式。Jupyter Notebook 主要包含三个核心页面组件其路由均由 notebook/app.py 中的initialize_handlers()注册页面组件路由前缀对应 Handler渲染模板Notebook Dashboard仪表盘/treeTreeHandlertree.htmlNotebook Editor笔记本编辑器/notebooksNotebookHandlernotebooks.htmlFile Editor文件编辑器/editFileHandleredit.htmlConsole / Terminal 页面/consoles、/terminalsConsoleHandler、TerminalHandlerconsoles.html、terminals.html应用默认首页指向/tree见 notebook/app.py 中default_url Unicode(/tree, ...)因此jupyter notebook启动后首先看到的就是 Dashboard。Notebook Dashboard仪表盘当你执行jupyter notebook命令启动服务器时浏览器打开的第一个页面就是Notebook Dashboard。它充当整个 notebook 服务器的家目录核心用途是展示当前目录下的 notebooks 与文件。从源码角度Dashboard 由TreeHandler提供notebook/app.py它根据请求路径判断目标是目录还是文件——若是目录则渲染tree.html模板若是 notebook 文件则重定向到/notebooks/path若是其他文件则重定向到/files/path返回原始内容隐藏目录且未开启allow_hidden时返回 404。渲染所用模板为 app/templates/tree_template.html其中通过page_config_full.update(notebookPagetree)写入哨兵值供前端路由判断当前处于 tree 页面。参考官方示例 Notebook Basics.ipynb 中 The Notebook dashboard 一节Dashboard 的主要功能点包括面包屑导航breadcrumbsnotebook 列表顶部显示当前目录的可点击面包屑路径点击面包屑或列表中的子目录即可在文件系统中导航。New 按钮新建文件点击列表顶部的 New 按钮从下拉菜单中选取一个 kernel 来新建 notebook。下拉菜单中列出的 kernel 取决于服务器上实际安装的内核——不同环境中该列表可能不同。上传文件将 notebook 文件拖拽到列表区域或点击列表上方的 click here 文字即可上传。运行状态标识正在运行的 notebook 旁会显示绿色的 Running 文字与绿色 notebook 图标。注意notebook 会一直保持运行直到你显式地将其 shutdown仅仅关闭 notebook 页面并不够。批量操作勾选 notebook 前的复选框后列表顶部会出现一组操作按钮Duplicate 复制、Rename 重命名、Shutdown 关闭内核、Delete 删除、New 新建、Refresh 刷新同样适用于目录和文件。Running 标签页点击 Running 标签页可查看所有正在运行的 notebook 及其所在目录方便在长期运行的 notebook 服务器中跟踪你所启动的 notebook。Notebook Editor笔记本编辑器当你从 Dashboard 中选择一个 notebook 并打开后notebook 会在Notebook Editor笔记本编辑器中打开。这是用户编写代码、书写 Markdown 文档并执行代码的核心界面。其页面渲染由NotebookHandler完成notebook/app.py若请求路径是目录则重定向回/tree否则渲染 app/templates/notebooks_template.html 模板。该模板通过data-notebooknotebooks与notebookPagenotebooks标识页面类型其标题为{{page_config[appName] | e}} - Notebook。Notebook Editor 的核心布局详见 docs/source/notebook.md 中 Notebook user interface 一节自上而下包括Notebook 名称显示在页面顶部 Jupyter logo 旁边对应.ipynb文件名。点击名称会弹出重命名对话框例如在浏览器中将 Untitled0 重命名为 My first notebook 会同时把磁盘上的Untitled0.ipynb文件改名。菜单栏Menu bar提供操作 notebook 的各种菜单项File、Edit、View、Run、Kernel、Help 等。菜单项的组成可以通过 packages/application-extension/schema/menus.json 这样的插件 schema 配置例如其中的jp-mainmenu-file、jp-mainmenu-run、jp-runmenu-change-cell-type子菜单定义。工具栏Toolbar以图标方式提供最常用操作的快捷入口例如运行当前 cell 的 Play 按钮、Cell 类型下拉框等。代码单元Code cell默认类型的 cell是 Notebook 中多行文本输入的基本单位。在 Notebook Editor 内部文档由一系列cell组成执行一个 cell 使用Shift-Enter或点击工具栏 Play 按钮、菜单栏Cell → Run。cell 共有三种类型code cells代码单元带语法高亮与 Tab 补全、markdown cells富文本支持 LaTeX 数学公式$...$内联公式、$$...$$独立公式由 MathJax 渲染、raw cells原始输出不参与求值经 nbconvert 转换时原样保留。所有 cell 初始都是 code cell可通过工具栏下拉框或键盘快捷键切换类型。交互式用户界面导览User Interface Tour如果想更深入地了解 Notebook Editor 中的具体元素可以通过交互式 UI 导览User Interface Tour来学习在菜单栏选择Help然后选择User Interface Tour。系统会以高亮引导的方式逐一介绍菜单栏、工具栏、cell 区域等各个组件的名称与用途。这个功能在示例 Notebook Basics.ipynb 中也有提及Notebook UI 主要由 Menu菜单、Toolbar工具栏、Notebook area and cellsNotebook 区域与单元三大部分组成导览入口即 Help:User Interface Tour。编辑模式与命令模式Modal Editor从 IPython 2.0 开始Jupyter Notebook 采用模态用户界面modal user interface即键盘行为取决于 Notebook 当前所处的模式。这有两种模式编辑模式Edit mode与命令模式Command mode。Cell Mode Indicator单元模式指示器当 cell 处于编辑模式时Cell Mode Indicator单元模式指示器会改变以反映 cell 的状态界面右上角会出现一个小的铅笔图标pencil icon。当 cell 处于命令模式时该位置没有任何图标。这是快速判断当前 cell 所处模式的最直接视觉线索。编辑模式Edit mode编辑模式下你可以像使用普通文本编辑器一样向 cell 中输入内容。视觉特征cell 边框为绿色且编辑器区域显示输入提示符prompt。如何进入按Enter键或用鼠标点击 cell 的编辑器区域。命令模式Command mode命令模式下你不能向单个 cell 输入文字但可以把 notebook 作为一个整体进行操作。此时键盘被映射为一组快捷键可高效执行 notebook 与 cell 级操作——例如在命令模式下按c即可复制当前 cell无需任何修饰键。视觉特征cell 边框为灰色左侧边缘为蓝色。如何进入按Esc键或用鼠标点击 cell 编辑器区域之外的地方例如 prompt 或输出区域。注意事项不要在命令模式下尝试向 cell 输入文字否则会发生意想不到的事情。键盘导航要点模态界面的设计目标是高效键盘操作编辑模式下大部分按键用于输入文字、快捷键较少命令模式下整个键盘都可用于快捷键因此快捷键更多。完整快捷键列表可通过Help → Keyboard Shortcuts对话框查看。官方示例 Notebook Basics.ipynb 建议按以下顺序学习命令模式快捷键基础导航enter进入编辑模式、shift-enter运行当前 cell 并跳转/新建下一个、up/k、down/j上下移动选中保存 notebooks切换 cell 类型y代码、mMarkdown、1-6各级标题、t原始文本新建 cella上方、b下方编辑 cellx剪切、c复制、v粘贴、d删除、z撤销内核操作i按下两次中断内核、0按下两次重启内核此外鼠标导航遵循两个核心原则点击 cell 即可选中它选中的 cell 依据模式显示灰色或绿色边框点击编辑器内部进入编辑模式点击 prompt 或输出区域进入命令模式cell 操作通常作用于当前选中的 cell如运行、复制等。Markdown cell 还有一个渲染/未渲染状态通过工具栏运行按钮或Cell → Run渲染双击 cell 则可取消渲染查看原始文本。File Editor文件编辑器假设你在 Notebook Dashboard 中打开的不是notebook 文件而是一个 Markdown 文件等其他普通文件那么该文件会在File Editor文件编辑器中打开。File Editor 由FileHandler提供服务notebook/app.py渲染模板为 app/templates/edit_template.html。模板标题为{{page_config[appName] | e}} - Editbody 以data-notebookedit标识并使用与 tree 页面相同的page_config_full注入机制notebookPageedit向前端传递页面类型。该编辑器面向非 notebook 的纯文本文件如 Markdown、Python 源码等提供基本的编辑能力。面向排障与协作的实战建议综合原文档与本仓库源码在使用中可遵循以下实践用标准名称描述界面报告问题时尽量使用本文介绍的正式术语Notebook Dashboard、Notebook Editor、File Editor、Menu bar、Toolbar、Code cell、Cell Mode Indicator、Command mode、Edit mode 等而不是模糊的上面那个栏那个小图标。善用内置导览不确定某个元素叫什么时打开Help → User Interface Tour让系统直接告诉你。留意模式状态键盘操作异常时先通过右上角是否显示铅笔图标判断当前处于编辑模式还是命令模式——大量快捷键不生效的问题都源于模式误判。理解页面跳转逻辑Dashboard 会根据目标文件类型自动分流到 Notebook Editor 或 File Editor见 TreeHandler 的目录/notebook/普通文件三分支判断掌握这一点有助于理解 URL 中/tree、/notebooks、/edit的含义。内核生命周期管理Dashboard 的 Running 标签页与绿色 Running 标识可以帮助你追踪未关闭的内核记得显式 Shutdown 而不是只关闭浏览器标签页。以上内容均可在本仓库中进一步验证与探索页面路由与 Handler 实现见 notebook/app.py三个页面模板位于 app/templates/官方配套的交互式示例见 Notebook Basics.ipynb更完整的用户文档见 docs/source/notebook.md。【免费下载链接】notebookJupyter Interactive Notebook项目地址: https://gitcode.com/GitHub_Trending/no/notebook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考