开发工具前端【免费下载链接】jupyter_contrib_nbextensionsA collection of various notebook extensions for Jupyter项目地址https://gitcode.com/gh_mirrors/ju/jupyter_contrib_nbextensions点击查看免费下载导读Collapsible Headings 是 jupyter_contrib_nbextensions 提供的一款 Jupyter Notebook 扩展它让以 Markdown 标题#~######分隔的 notebook 内容变成可折叠的章节结构并将每个标题的折叠/展开状态持久化到单元格元数据中。读完本文你将掌握该扩展的全部配置项含快捷键、图标、Mathematica 风格括号等理解其底层对 Jupyter 方法的 patch 机制与事件绑定逻辑并能通过html_ch导出器把折叠功能完整嵌入导出的 HTML 文件。功能概述以 Markdown 标题为界的可折叠章节该扩展的核心逻辑非常简洁任何以 1~6 个#字符开头的 Markdown 单元格在渲染完成后都会变成一个可折叠的章节标题。折叠后该标题下方直到下一个同级或更高级别标题之前的所有单元格都会被隐藏从而把长篇 notebook 组织成清晰的分层大纲。折叠状态并非临时视觉效果而是被持久化存储cell.metadata.heading_collapsed true笔记本重新加载时扩展会读取该元数据并恢复所有标题的折叠状态见 collapsible_headings.yaml 与 main.js。在源码中状态的写入与清除由_set_collapsed完成折叠时设置heading_collapsed true展开时直接delete heading_collapsedmain.js而“某单元格是否被折叠标题隐藏”的判断则通过is_collapsed_heading组合标题判定与元数据判定实现main.js。界面效果可参考扩展目录内的官方截图 screenshot.png。全部配置项详解nbextensions 配置页扩展的所有选项都可以在nbextensions 配置页中开启、关闭或修改对应的参数定义完整保存在 collapsible_headings.yaml 中运行时会通过set_collapsible_headings_options以$.extend(true, params, options)的方式合并进默认参数main.js。下表按功能分组列出全部参数参数名默认值说明collapsible_headings.use_toggle_controlstrue在每个标题单元格的输入提示符input prompt区域添加折叠/展开切换控件collapsible_headings.toggle_color#aaaaaa切换控件图标的颜色颜色选择器collapsible_headings.toggle_closed_iconfa-caret-right标题处于折叠状态时切换控件使用的 Font Awesome 图标类collapsible_headings.toggle_open_iconfa-caret-down标题处于展开状态时切换控件使用的 Font Awesome 图标类collapsible_headings.make_toggle_controls_buttonsfalse是否把切换控件做成按钮为false时仅是一个可点击图标默认行为collapsible_headings.size_toggle_controls_by_leveltrue是否让切换控件的字号随标题级别h1~h6缩放collapsible_headings.indent_px8每级标题将折叠控件向左偏移的像素数使更高层更小级别号的标题控件更靠左collapsible_headings.show_section_bracketsfalse是否在 notebook 右侧显示 Mathematica 风格的章节分组括号collapsible_headings.section_bracket_width10分组括号的宽度像素可选范围min: 2~max: 100collapsible_headings.show_ellipsistrue是否在每个已折叠标题末尾显示灰色方括号省略号提示有隐藏内容collapsible_headings.use_shortcutstrue是否注册命令模式键盘快捷键collapsible_headings.shortcuts.collapseleft命令模式快捷键折叠选中的标题单元格collapsible_headings.shortcuts.uncollapseright命令模式快捷键展开选中的标题单元格collapsible_headings.shortcuts.collapse_allctrl-shift-left命令模式快捷键折叠所有标题collapsible_headings.shortcuts.uncollapse_allctrl-shift-right命令模式快捷键展开所有标题collapsible_headings.shortcuts.selectshift-right命令模式快捷键选中当前标题章节下的全部单元格collapsible_headings.shortcuts.insert_aboveshift-a命令模式快捷键在当前单元格上方插入一个标题单元格collapsible_headings.shortcuts.insert_belowshift-b命令模式快捷键在当前章节下方插入一个标题单元格collapsible_headings.add_buttonfalse是否添加工具栏按钮用于折叠距当前选中单元格最近的标题collapsible_headings.add_all_cells_buttonfalse是否添加工具栏按钮一键折叠/展开所有标题collapsible_headings.add_insert_header_buttonsfalse是否添加工具栏按钮在当前选中单元格的上方/下方插入标题collapsible_headings.select_revealstrue选中整个章节时是否同时展开该章节以露出其最后一个单元格设为false可关闭collapsible_headings.collapse_to_match_tocfalse当 ToC2 扩展折叠/展开目录中的章节时是否同步折叠/展开 notebook 中对应章节几点值得注意的实现细节快捷键行为除了折叠/展开快捷键还承担导航职责。默认绑定下left折叠当前标题章节right展开shift-right选中章节shift-a/shift-b在上下方插入标题ctrl-shift-left/ctrl-shift-right全局折叠/展开。所有绑定都可在配置页修改。图标字体折叠/展开图标基于 Font Awesome 类如fa-caret-right、fa-caret-down可替换为任何可用的 FA 图标类。ToC2 联动启用collapse_to_match_toc后扩展会监听collapse.Toc/uncollapse.Toc事件并调用toggle_heading且以trigger_event false避免反向再次触发 ToC2 造成死循环main.js反向联动请到 ToC2 自己的配置中开启。缩进 CSS 的生成indent_px非 0 时set_collapsible_headings_options会为 h1~h6 动态生成内联 CSS 规则.collapsible_headings_toggle .hN { margin-right: (6-N)*indent_px px; }并注入headmain.js。折叠控件的呈现形式输入提示符区域的切换控件默认开启的use_toggle_controls会在每个标题单元格的.input_prompt内插入.collapsible_headings_toggle元素。源码中该控件由update_heading_cell_status创建它是一个包含i classfa fa-fw图标的 div颜色取自toggle_color并依据折叠状态在toggle_closed_icon与toggle_open_icon之间切换图标类当make_toggle_controls_buttons为真时会追加btn btn-default按钮样式main.js。在实时 notebook 中点击控件调用toggle_heading(cell)在非实时导出的 HTML环境中则同时让标题本身可点击。Mathematica 风格分组括号启用show_section_brackets后每个章节的右侧会渲染一组可交互括号.chb容器内部按标题层级生成data-bracket-level标记的 div见 main.js单击括号选中该章节内的全部单元格按住shift单击可扩展已有选区双击括号切换章节的折叠/展开状态括号宽度由section_bracket_width控制默认 10pxnotebook 容器的右内边距会按同时打开的括号数动态调整源码中通过$(#notebook-container).css(padding-right, ...)与.chb { right: -(3dwidth)px; }实现main.js。括号的选中与折叠回调bracket_callback中还做了一些防误触处理单击后延迟 300ms 判定是否为双击避免“关闭章节时单元格被选中并重新展开”mouseenter/mouseleave会为当前章节高亮括号main.js。折叠标题的省略号提示默认开启的show_ellipsis会在折叠标题末尾追加灰色方括号省略号[\002026]。对应 CSS 在 main.css 中.collapsible_headings_ellipsis .rendered_html h1~h6预留padding-right: 2em配合.collapsible_headings_collapsed.collapsible_headings_ellipsis ... :after伪元素渲染省略号。只有同时处于折叠状态与省略号启用状态时才显示。自定义 CSS用collapsible_headings_collapsed类做样式扩展扩展会给每个已折叠的标题单元格添加 CSS 类collapsible_headings_collapsed。你可以利用它为折叠标题添加自定义样式例如给折叠标题加底部边框以增强视觉区分.collapsible_headings_collapsed { border-bottom: 2px solid #ccc; }另外切换控件图标在标题折叠/展开时会通过 CSStransition: transform 400ms旋转 360 度非 IE 浏览器生效相关规则见 main.css。如果不喜欢这个动画可在你的custom.css中加入.cell .collapsible_headings_toggle .fa { transition: transform 0s; }值得注意的是为了让右侧括号正确定位扩展依赖div.cell { position: relative; }规则该规则在 main.css 中全局生效。实现原理对 Jupyter 核心方法的 patch 与新增 action元数据模型折叠状态完全以单元格元数据为事实来源折叠时写入cell.metadata.heading_collapsed true展开时删除该键。在导出的非实时 HTML 中同样的状态改用 CSS 类collapsible_headings_collapsed表达main.js。patch 的 Jupyter 方法扩展启动时会依次 patch 以下方法main.jsTextCell.prototype.set_text文本变更后刷新该单元格的标题/折叠控件状态并更新受影响的可见性。这主要用于处理撤销删除undelete与复制粘贴单元格——这些操作不会触发 markdown 渲染事件Notebook.prototype.select选择某个单元格前自动展开任何“正在隐藏该单元格”的折叠标题reveal_cell_by_index会向上扫描同级别及更高级别的标题并展开折叠项。同时通过select_reveals标志防止“选中章节”这个动作自身触发展开Notebook.prototype.undelete与Notebook.prototype.delete_cells触发一次可见性更新确保删除/恢复单元格后哪些单元格应显示或隐藏被重新计算Tooltip._show仅 Notebook 4.x在 tooltip 显示期间临时把div.cell的position: relative改回static否则该规则会干扰 tooltip 的定位计算。源码中通过判断notebook_version主版本号5.x 及以上直接跳过此 patchmain.js。由于该方法以下划线开头、不属于公开 API未来版本可能失效但按注释所述它会“非灾难性退化”——最坏结果只是 tooltip 出现在文档顶部而非光标处。patch 的两个既有 action上下方向键扩展还替换了命令模式下上下方向键对应的两个 actionjupyter-notebook:select-previous-cell/jupyter-notebook:select-next-cell行为与原来一致但会跳过所有被隐藏的单元格无论隐藏是由折叠标题还是其他机制造成实现方式是遍历时检查cell.element.is(:visible)main.js。新注册的 action扩展注册了若干新 action供快捷键调用也可像其他 action 一样从命令行或菜单触发main.jscollapsible_headings:collapse_heading折叠当前选中的标题章节collapsible_headings:uncollapse_heading展开当前选中的标题章节collapsible_headings:collapse_all_headings/collapsible_headings:uncollapse_all_headings折叠/展开全部标题collapsible_headings:select_heading_section选中标题章节内全部单元格collapsible_headings:insert_heading_above/collapsible_headings:insert_heading_below在选中单元格上方/下方插入新标题插入后会直接进入编辑态并选中标题文本collapsible_headings:toggle_collapse_heading/collapsible_headings:toggle_collapse_all_headings对应两个工具栏按钮的切换逻辑。其中“插入标题”功能有专门的层级处理在上方插入时沿用当前单元格所属标题的级别在下方插入时会定位到当前章节的末尾之后main.js。事件绑定与加载优化bind_events绑定了create.Cell、delete.Cell、rendered.MarkdownCell三个事件用于维护折叠状态与括号。为了加速大 notebook 的加载扩展会在notebook_loading.Notebook时临时解绑这些事件避免每个新单元格都触发一次全量刷新等notebook_loaded.Notebook完成后再重新绑定并执行一次refresh_all_headingsmain.js。每次折叠/展开还会向全局事件对象触发collapse.CollapsibleHeading/uncollapse.CollapsibleHeading事件方便其他扩展监听。导出 HTML把折叠功能带出 notebook旧的 preprocessor 方案已被废弃取而代之的是exporter——它能把折叠功能的 CSS 与 JS 直接内联进导出的 HTML使非实时的静态页面也能折叠/展开章节。导出依赖ExporterInliner基类与inliner.tpl模板位于 src/jupyter_contrib_nbextensions/nbconvert_support/exporter_inliner.py 与 src/jupyter_contrib_nbextensions/templates/inliner.tplExporterInliner继承自HTMLExporter通过inliner_resources{css: [], js: []}收集要内联的资源并在from_notebook_node中把它们合并进模板可用的resources[inliner]inliner.tpl继承nbextensions.tpl在html_head区块遍历resources.inliner.css/resources.inliner.js分别包进style与script标签。针对折叠标题的具体导出器是ExporterCollapsibleHeadingssrc/jupyter_contrib_nbextensions/nbconvert_support/collapsible_headings.py它在其构造函数中追加 Font Awesome 4.7.0 的 CDN 导入规则基础模板没有本地 FA 字体文件读取并内联nbextensions/collapsible_headings/main.css与main.js的完整内容通过ConfigManager().get(notebook).get(collapsible_headings, {})读取当前配置生成一段$(document).ready脚本调用ch.set_collapsible_headings_options(...)与ch.refresh_all_headings()在页面加载后应用配置并刷新所有标题状态。同时针对非实时页面模板 collapsible_headings.tpl 会根据cell.metadata.heading_collapsed是否为真在导出时直接为标题单元格写入collapsible_headings_collapsed类main.js在非 live 模式下也通过requirejs的模块化降级分支define(nbextensions/collapsible_headings/main, ...)配合 jQuery 集合操作从而复用同一套逻辑main.js。使用html_ch导出器html_ch这一导出器名称在 setup.py 中注册html_ch jupyter_contrib_nbextensions.nbconvert_support.collapsible_headings:ExporterCollapsibleHeadings,因此只需一条命令即可完成导出jupyter nbconvert --to html_ch FILE.ipynb该流程有对应的测试验证test_html_collapsible_headings构造一个含多级标题与代码单元格的 notebook执行--to html_ch导出后断言输出字节流中包含collapsible_headings字样tests/test_exporters.py。你也可以在 Python 中直接实例化ExporterCollapsibleHeadings完成编程式导出或参考 nbconvert_support/init.py 中templates_directory()返回的模板路径自行组合其它模板。小结Collapsible Headings 通过“标题即章节”的极简模型配合持久化的元数据、可完全定制的交互控件、对 Jupyter 核心方法的稳健 patch以及html_ch导出器把折叠大纲能力从实时 notebook 完整延伸到静态 HTML。安装配置后建议在 nbextensions 配置页按需调整快捷键与括号宽度并把collapse_to_match_toc与 ToC2 搭配使用以获得目录与正文联动的折叠体验。赞分享开发工具前端【免费下载链接】jupyter_contrib_nbextensionsA collection of various notebook extensions for Jupyter项目地址https://gitcode.com/gh_mirrors/ju/jupyter_contrib_nbextensions点击查看免费下载相关推荐Sphinx 可折叠提示块collapsible admonition完全指南:collapsible: 选项的用法、原理与测试验证Sphinx 可折叠提示块collapsible admonition完全指南 :collapsible: 选项的用法、原理与测试验证 导读 本文围绕 S文档开发工具推荐项目React-Navigation-Collapsible - 优雅的可折叠导航解决方案推荐项目React Navigation Collapsible 优雅的可折叠导航解决方案 在React Native开发中构建一个美观、易用且功能丰富的导Ant Design Blazor Splitter 可折叠面板实战Collapsible 与 Min 参数完整指南Ant Design Blazor Splitter 可折叠面板实战Collapsible 与 Min 参数完整指南 Splitter分隔面板是 Ant前端UI组件设计系统上一篇wger后端日志配置设置健身平台日志的日志级别下一篇kglab实战用Morph-KGC把关系数据库一键映射为RDF知识图谱创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考