在Hexo博文中嵌入Jupyter notebook

前提准备

安装hexo-jupyter-notebook和co两个npm包, 后者为前者的依赖

npm install hexo-jupyter-notebook --save
npm install co

像在Hexo博文中嵌入视频一文中的视频画面一样, 为了将嵌入帧尺寸做成响应式的, 修改node_modules/hexo-jupyter-notebook/main.py中的template变量, 加入auto-resizable-iframe容器

    template = """
<div class="auto-resizable-iframe"><div>
<iframe id='ipynb' marginheight="0" frameborder="0" srcdoc="%s"  style="scrolling:no;">
</iframe></div></div>

<script>

$("#ipynb").load( function() {
console.log($("#ipynb").contents().find("body").find("#notebook"));
document.getElementById('ipynb').height=$("#ipynb").contents().find("#notebook").height()+100;
})
</script>
    """ % restr.replace("\"", "'")

有这一部分后, 我就没有像参考链接里那样用jQuery来控制尺寸.

再准备好要嵌入的ipynb文件, 准备工作就做好了. 我这里用的是之前练习matplotlib时写的meshgrid_plot.ipynb

嵌入ipynb

做好上述准备后, 进行下面三步操作

1. 在_config.yml中打开post_asset_folder

   post_asset_folder: true

2. 在source/assets中新建codes文件夹, 将准备好的ipynb放入其中.

3. Markdown文本中, 在要嵌入ipynb的位置加入

   {% asset_jupyter /usr/local/bin/python3 ../../assets/codes/meshgrid_plot.ipynb %}

嵌入效果如图所示.

结论

成功利用hexo-jupyter-notebook包, 在Hexo博文中嵌入了Jupyter notebook. 然而自己对这个效果不是很满意, 主要是两个原因

1. 嵌入的ipynb代码有滚动条. 修改iframe的大小(试到3000px)或修改JS里+100为更大数值, 也不能解决.
2. 更关键的, hexo s渲染时间显著增加, 从600 ms左右增加到1.34 s. 且持续一段时间后系统明显卡顿, 调试变得更麻烦了.

遂最终放弃了嵌入ipynb的想法 _(xз」∠)_

参考

Blogging Jupyter Notebooks (.ipynb) with Hexo on GitHub - Medium