jk's notes
  • 高级应用

高级应用

主要介绍:

  • Jupyter 扩展
  • Widget 控件
  • Magic 命令
  • Nbconvert

主要是对 Jupyter Notebook 的深度定制.

5.1 Jupyter 扩展

Jupyter Notebook 提供了一个很好的交互式环境, 同时还支持各类插件扩展.

5.1.1 安装 jnb 扩展包

Jupyter 提供了很好的扩展性. 首先是 jupyter_contrib_nbextensions, 它是 jnb 主要的扩展包之一. 是非官方的, 社区贡献的扩展功能合集. 提供了大量实用的功能.

文档地址, 里面有详细的安装说明与实用方法.

安装需要三个步骤:

  1. 安装其 pip 包
  2. 安装其 js 与 css 文件
  3. 启用该扩展

注意先激活对应环境

pip install jupyter_contrib_nbextensions
jupyter contrib nbextension install --user
  • 第一段命令是安装包
  • 第二段命令是将扩展包中的 js 与 css 文件复制到本机的 nootbook 服务器的目录下, 并修改相关配置

建议使用 conda 来安装 conda install -c conda-forge jupyter_contrib_nbextensions.

最后在启动 jupyter notebook. 然后就可以看到 Nbextensions 的选项卡.

image-20251020143533885

取消复选框, 然后就可以选择扩展了, 选中即启用.

5.1.2 常用的扩展功能

主要介绍几个常用的扩展.

1. Collapsible Headings

该扩展会根据页面中 Markdown 标题级别对文档内容进行折叠, 便于查看.

2. Codfolding

该扩展提供代码折叠的功能.

3. Freeze

目的是将单元格设置为释放, 只读, 冻结, 三种状态. 利用工具栏上的按钮来控制.

只读模式下, 不允许编辑, 但可以运行. 冻结模式下不可编辑也不可运行.

4. Hide Header

使用 Ctrl + H 来隐藏页面上方的横幅, 菜单, 工具栏.

如果是 Chrome, 快捷键可能会有冲突, 可以在设置中修改.

5. Hightlight selected word

实现选中一个变量名后, 其余该变量名的位置自动高亮.

6. Hinterland

代码自动补全

7. nbTranslate

将内容进行翻译成另一种语言. 开启后, 选中一个 Cell, 可以执行翻译, 会生成一个翻译后的 Cell.

8. Scratchpad

提供一个草稿面板, 临时运行 python 代码进行必要的测试.

9. Table of Content

基于 Markdown 生成目录.

5.1.3 理解 Jupyter Notebook 扩展

Jupyter 提供了很好的扩展性, 我们可以从下面几个方面来扩展它.

  1. 内核. 默认 Jupyter 使用 IPython 内核, 来运行 Python 代码. 可以安装其他内核来运行其他语言.
  2. IPython 内核扩展. 默认 IPython 内核, 可以安装 Python 模块来修改交互环境与功能.
  3. Notebook 服务器扩展. 主要是修改 Notebook 服务器的配置与行为.
  4. Notebook 扩展. 改善与增强 Notebook 的功能, 上一节就是对 Notebook 的扩展.

从前面安装的 nbextension 来看, 在 notebook 的选项卡中提供了新的选项卡, 这就是对 Notebook 服务器的扩展, 而其中提供的扩展项就是对 notebook 的扩展.

服务器扩展又被称为 配置器. 上面的扩展可以称为 Jupyter Nbextensions Configurator.

另外扩展包会安装在 site-packages 目录下, 并且每一个扩展都由几个固定的文件构成:

image-20251020162133006

其中:

  • JS 文件用于实现扩展功能.
  • Yaml 文件为服务器扩展提供相关信息.
  • CSS 文件由 JS 加载, 渲染页面.
  • README.md 文件为扩展的说明.

启用某个扩展除了在页面中进行操作, 还可以在命令行中操作:

jupyter nbextension enable <nbextension require path>
jupyter nbextension disable <nbextension require path>

例如:

jupyter nbextension enable condefolding/main

要关闭 Nbextension 可以在 web 页面中取消选中 Nbextensions dashboard tab. 要重新启用可以执行:

jupyter nbextensions_configurator enable --user

在 GitHub 上还有其他扩展包: https://github.com/topics/nbextension. 要安装某个包, 可以使用下面的语法, 以 expand-cell-fullscreen 为例:

git clone https://github.com/scottlittle/expand-cell-fullscreen.git
jupyter nbextension install expand-cell-fullscreen
jupyter nbextension enable expand-cell-fullscreen/main

卸载该扩展使用

jupyter nbextension uninstall expand-cell-fullscreen

5.2 Widget 控件

Widget 控件是在 Jupyter Notebook 中用于交互的小控件, 如按钮等.

5.2.1 认识 Widget

1. 安装与实用 Widget

安装 Anaconda 时会自动安装 Widget.

不知道 Miniconda 会不会自动安装. 可以使用 pip showipywidgets 来测试查看.

如果需要单独安装, 使用下面命令:

pip install ipywidgets
jupyter nbextension enable --py widgetsnbextension

然后在 Notebook 的浏览器中, 在 cell 中即可运行命令, 来使用 Widget.

import ipywidgets as widgets # 导入包
widgets.IntSlider() # 创建整型滑动条的示例
widgets.ColorPicker() # 创建颜色选择器的实例
widgets.DatePicker() # 创建日期选择器的实例

实际上上述的代码都创建了对应控件的实例, 并在后台维护着该实例. 与操作 DOM 一样, 可以对齐进行引用, 属性设置, 事件设置, 来与用户交互, 完成必要的显示控制.

2. Widget 基本概念

作者利用一个具体的例子来描述基本的概念.

import ipwidgets as widgets
from IPython.display import display
w = widgets.IniSlider()
display(w)

上述代码会显示一个整型的滑动条. 并且可以多次调用 display(w) 或直接执行 w (会自动打印), 就会显示多个滑动条. 但需要注意的是, 他们是同一个实例的引用.

3. Widget 的属性

每一个 Widget 可以想象成一个 DOM 对象, 每一个对象都有诸多属性与方法. 例如:

  • discription 描述前置文字, 标题.
  • orientation 控制方向.

属性的设置可以使用构造函数时设置, 也可以使用 实例.属性 的方式设置.

使用 Python 的 dir() 方法, 可以查看对象的所有属性与方法.

使用 Widget 的 keys 属性, 可以查看所有同步的, 有状态的属性.

对与 IntSlider, 常用属性包括: value, description, 以及 orientation. 除此之外还有 min, max, 和 step (用于设置步长).

注意: 使用 r'' 格式, description 可以使用 LATEX 语法.

Widget 有一个 Layout() 方法, 可以创建样式, 可以给实例的 layout 属性设置.

w.layout = widgets.Layout(width='60%', height='80px', border='solid')

5.2.2 常用 Widget 简介

常用控件, 对标 HTML

1. IntSlider 与 FloatSlider

整型滑块与浮点型滑块. 常用属性: value, min, max, step, description, orientation, readout_format (FloatSlider 的属性, 取值可以是: '.2f')

2. IntRangeSlider 和 FloatRangeSlider

整型范围滑块与浮点型范围滑块, 外形与上一个类似, 但是支持两端数据选取, 获得的值是一个元组.

3. IntProgress 和 FloatProgress

进度条. 常用属性与滑块类似, 补充属性有 bar_style 取值为: 'success', 'info', 'warning', 'danger', 用于展示不同的颜色.

4. IntText, FloatText, BoundedIntText, BoundedFloatText

用于输入数字的文本框. 对标 HTML 的 input. 带有 Bounded 的控件在右侧有步进按钮. 常用属性有: value, description. 带有 Bounded 的控件属性还包含: min, max, step.

5. Checkbox, ToggleButton 和 Valid

逻辑上与 HTML 也一一对应, 常用属性: value (取值为 True 和 False), description, 与 button_style (ToggleButton 的属性).

其中 Valid 控件只做显示用, 无交互.

6. Dropdown, RadioButtons, Select 与 SelectMultiple

对标下拉框, 单选按钮组, 列表, 以及多选列表控件. 常用属性: options, 取值为列表, 用于渲染选项, value, 以及 description.

7. Text, Textarea, Label 及 HTML

专门用于显示文本. 常用属性 description 用于显示前置提示文本, value 文本框中的内容.

Text 是单行文本, Textarea 是多行文本, Label 用于显示只读文本. 而 HTML 直接显示 HTML 的内容.

8. Image

用于显示图片. 常用属性有: format 控制显示图片格式 (后缀名), width, value 设置图片引用.

图片可以使用 open('...', 'rb').read() 来从本地读取.

9. Button

按钮, 注意没有 value 属性. 按钮上的文字使用 description 属性来描述. 细节在 5.2.4 中介绍.

10. Box, HBox, VBox, 以及 GridBox

容器控件, 用于组合子控件. 构造函数使用列表作为参数, 里面是其他子控件.

布局逻辑与 WPF 类似. 布局控件还有 Tab, Accordion.

5.2.3 在 Widget 之间建立联系

逻辑上类似于数据绑定. 就是两个控件的某个属性, 一个属性的值发生变化, 另一个控件的属性也跟随变化.

1. Widget 连接

两个方法:

  • widgets.link((控件1, '属性'), (控件2, '属性')) 构造双向绑定.
  • widgets.dlink((主动控件, '属性'), (被动控件, '属性')) 构造单向绑定.

2. 客户端与服务端关联

对应两个方法为:

  • widgets.jslink()
  • widgets.jsdlink()

不同的是 带有 js 的关联方法不会与后端的服务器中的实例关联, 所以将服务器停掉后, 只要浏览器不关闭, 它依旧可以实现关联的效果. 相对于内核繁忙的情况下, 带有 js 的关联方法性能更好.

至于后端数据是否存在同步问题, 暂且未知, 作者也未解释.

3. 断开连接

所有的连接方法都会返回一个连接的实例, 使用该实例的 unlink() 方法可以断开连接.

5.2.4 Widget 事件

Last Updated: 10/21/25, 6:11 PM
Contributors: jk