需求：实现Voilà预览中点击链接在JupyterLab右侧分栏打开

需要实现功能：在Voilà预览界面点击指向笔记本的链接或按钮时，目标笔记本以Voilà预览模式在JupyterLab的右侧分栏（split-right模式）打开，而非默认的新浏览器标签页。本人是JupyterLab扩展开发新手，当前使用的代码会在新标签页打开Voilà预览，希望达到类似JupyterLab工具栏“用Voilà渲染”按钮的分栏效果。

当前示例代码 #

from IPython.display import display, HTML

# 创建可在Voilà预览中打开笔记本的HTML链接
html_link = """
<a href="untitled1.ipynb" >在Voilà中打开其他笔记本</a>
"""
display(HTML(html_link))

实现方案 #

要实现这个功能，核心是通过JavaScript拦截链接点击事件，调用JupyterLab内置命令来指定分栏模式打开Voilà预览，具体步骤如下：

1. 修改HTML链接并添加事件拦截脚本 #

给链接添加自定义类标识，同时嵌入脚本拦截点击行为，替换默认的新标签页打开逻辑：

from IPython.display import display, HTML

html_link = """
<a href="untitled1.ipynb" class="voila-split-link" >在Voilà中打开其他笔记本</a>
<script>
// 监听页面点击事件，识别自定义Voilà链接
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('voila-split-link')) {
    e.preventDefault(); // 阻止默认跳转行为
    const notebookPath = e.target.getAttribute('href');
    
    // 调用JupyterLab命令，在右侧分栏打开Voilà预览
    window.jupyterlab.commands.execute('voila:preview', {
      path: notebookPath,
      mode: 'split-right'
    });
  }
});
</script>
"""
display(HTML(html_link))

2. 环境前置检查 #

• 确保已安装Voilà及对应JupyterLab扩展：执行pip install voila && jupyter labextension install @voila-dashboards/jupyterlab-preview
• 上述代码依赖JupyterLab全局命令对象window.jupyterlab.commands，该对象在Voilà预览界面默认可访问

3. 持久化扩展实现（可选） #

如果希望所有Voilà预览界面都自动支持该功能，可开发简易JupyterLab扩展：

• 创建扩展项目，在index.ts中注册全局点击事件监听
• 识别带有voila-split-link类的元素，触发相同的命令调用逻辑
• 打包并安装扩展到JupyterLab环境中

内容的提问来源于stack exchange，提问作者sonata258