export .ipynb as html with toc

[slsongge]

@ JiaxiangBU

问题

我现在有一个ipynb的文件，因为内容比较多，所以希望导出的时候带有目录，就像nbextensions插件生成的目录似的。如下图：

期望的结果

最好是像bookdown似的，左边是目录右侧是正文。

[JiaxiangBU]

最好是像bookdown似的，左边是目录右侧是正文。

如果你偏爱 bookdown 做出的 gitbook 的板式，有一个曲线救国的方法。

1. 先通过 jupyter nbconvert 导出 md
2. 利用 bookdown 将 md 创建出 gitbook 风格的 HTML

这个你可以可行的话，我可以举个例子给你，基本上用一个 make 命令可以一行代码自动化了。 @slsongge

[slsongge]

to_ljx.zip 上面是.ipynb的压缩文件哈。@JiaxiangBU

[JiaxiangBU]

nb 相关参考 https://jiaxiangbu.github.io/learn_nbdev/learning_notes.html

$ cd jinxiaosong/nb2gitbook/
$ jupyter nbconvert --to markdown --output-dir . --NbConvertApp.output_files_dir=libs nb_with_toc.ipynb
[NbConvertApp] Converting notebook nb_with_toc.ipynb to markdown
[NbConvertApp] Writing 17799 bytes to .\nb_with_toc.md

rmarkdown::render("jinxiaosong/nb2gitbook/bookdown.Rmd")

这里需要将 nbconvert 和 rmarkdown 通过 make 结合

file.edit("jinxiaosong/nb2gitbook/build.R")

构建 RMarkdown 的脚本。

rstudioapi::viewer("jinxiaosong/nb2gitbook/bookdown.html")

查看构建效果，或者访问 https://jiaxiangbu.github.io/tutoring2/jinxiaosong/nb2gitbook/bookdown.html

查看下最后的构建结构

dir_tree("jinxiaosong/nb2gitbook", recurse = F)

## jinxiaosong/nb2gitbook
## +-- bookdown.html
## +-- bookdown.Rmd
## +-- build.R
## +-- libs
## +-- Makefile
## +-- nb_with_toc.ipynb
## \-- nb_with_toc.md

Makefile 文件

all:

    jupyter nbconvert --to markdown --output-dir . --NbConvertApp.output_files_dir=libs nb_with_toc.ipynb
    RScript build.R

@slsongge

[slsongge]

@JiaxiangBU 有以下几个问题哈：

下面的都是在rstudio运行是吗？

rmarkdown::render("jinxiaosong/nb2gitbook/bookdown.Rmd")
file.edit("jinxiaosong/nb2gitbook/build.R")
rstudioapi::viewer("jinxiaosong/nb2gitbook/bookdown.html")

你返回的链接中没有图片？

[JiaxiangBU]

@slsongge

(???) 有以下几个问题哈：

Git bash 解决。只跑$

下面的都是在rstudio运行是吗？

rmarkdown::render("jinxiaosong/nb2gitbook/bookdown.Rmd")
file.edit("jinxiaosong/nb2gitbook/build.R")
rstudioapi::viewer("jinxiaosong/nb2gitbook/bookdown.html")

是的。

你返回的链接中没有图片？

是 notebook 的问题，这个图片在 notebook 本身没有显示出来。

knitr::include_graphics("figure/20200401122247.png")

[slsongge]

@JiaxiangBU 家翔哥，我重新写了一个ipynb，上传到了https://github.com/JiaxiangBU/tutoring2/tree/master/jinxiaosong/nb2gitbook 但是我打开之后就没有图片了，这个很尴尬，在我本地是有图片的。

[JiaxiangBU]

我测试了

$ jupyter nbconvert --to html_toc jinxiaosong/nb2gitbook/test_02.ipynb
[NbConvertApp] Converting notebook jinxiaosong/nb2gitbook/test_02.ipynb to html_toc
[NbConvertApp] Writing 331112 bytes to jinxiaosong/nb2gitbook\test_02.html

是失效的。

导出了你新上传的jinxiaosong/nb2gitbook/test_02.ipynb产生的jinxiaosong/nb2gitbook/test_02.md进行 gitbook，也是失败的。 原因是 md 让 rendered notebook 的图像失效了。

但是jinxiaosong/nb2gitbook/test_02.html 图像在远程也是可以显示的。

另外可以参考 https://jupyter-contrib-nbextensions.readthedocs.io/en/latest/nbextensions/toc2/README.html

因此我打算 ipynb to gitbook 找解决方案，不通过 markdown 了。 但是我查看了，大部分都是要通过 markdown 进行的，见 https://github.com/search?q=jupyter+nbconvert+gitbook&type=Code

我找到一个和jupyter nbconvert的替代品，你可以尝试下

@slsongge

[JiaxiangBU]

@slsongge

• 将https://github.com/JiaxiangBU/替换为https://jiaxiangbu.github.io
• 去掉blob/master/

这个链接就可以访问了

这个是需要外部调用这个图的，HTML只是一个框架，如果单纯把框架下载出来，但是没有内容，肯定没有嘛。

[JiaxiangBU]

@slsongge

我觉得关键是你那个图其实是动态的， 所以 markdown 加载不了。 还有一种办法 我想到了 端到端的 Rmd 直接写 python 我可以试试

dir_tree("jinxiaosong/nb2gitbook", recurse = F)

## jinxiaosong/nb2gitbook
## +-- bookdown.html
## +-- bookdown.Rmd
## +-- build.R
## +-- libs
## +-- Makefile
## +-- nb_with_toc.ipynb
## +-- nb_with_toc.md
## +-- test_02.html
## +-- test_02.ipynb
## \-- test_02.Rmd

参考 https://github.com/aaren/notedown

$ notedown jinxiaosong/nb2gitbook/test_02.ipynb --to markdown --strip > jinxiaosong/nb2gitbook/test_02.md

file_move("jinxiaosong/nb2gitbook/test_02.md", "jinxiaosong/nb2gitbook/test_02.Rmd")

read_lines("jinxiaosong/nb2gitbook/test_02.Rmd") %>% 
    str_replace_all("```python","```{python}") %>% 
    write_lines("jinxiaosong/nb2gitbook/test_02.Rmd")

c(
    read_lines("jinxiaosong/nb2gitbook/bookdown.Rmd", n_max = 22),
    read_lines("jinxiaosong/nb2gitbook/test_02.Rmd")
) %>%
    write_lines("jinxiaosong/nb2gitbook/
                ")

p_all = liftchart(df_raw, xvars=['test_x'], yvar='y', uv=20, g=10)
p_all.render_notebook()
## <pyecharts.render.display.HTML object at 0x000000003730B978>

并且我使用了self_contained: TRUE也没用。

https://github.com/JiaxiangBU/tutoring2/blob/eb7272808ace5b66980f425b410c0bdbdafe99c5/jinxiaosong/nb2gitbook/test_02.Rmd#L10

[JiaxiangBU]

pyecharts 这个包我不熟悉，你看把p_all.render_notebook()这个图像的对象保存出来，再调用么？类似于在 R 里面会保存为一个 js 的对象，这样再调用。 @slsongge

[slsongge]

目前而言，我这边也是间接的解决了这个问题。

• 首先得有这个Anaconda3\share\jupyter\nbextensions\toc2，然后应该就可以导出html_with_toc

• 然后本地就可以看到有目录的网页了，不过发送给其他人（没有vpn）的时候，对方打开就不会显示目录

• 要想让对方也能显示目录，你得检查（F12）本地有目录的html，然后在Network-all里面找到几个文件（如下所示）下载到html所在的目录下。

• 最后选择html使用sublime（其他编辑器也可以，notepad++）打开，搜索上图的文件名，把前面的目录修改为相对路径就行，比如针对toc2.js，修改为下图的形式：

[JiaxiangBU]

• 要想让对方也能显示目录，你得检查（F12）本地有目录的html，然后在Network-all里面找到几个文件（如下所示）下载到html所在的目录下。

恩。我看到你上传了，我修改下看看目录。

https://github.com/JiaxiangBU/tutoring2/tree/master/jinxiaosong/nb2gitbook/toc_and_pyecharts

@slsongge

[JiaxiangBU]

@slsongge 我查看了，果然是要这些 js 才可以，我觉得你可以分享这个页面给老哥，然后把 js 这些文件的GitHub地址给他，我相信他应该后期会像Rmd一样在render 时，把这些 js 复制到本地，保证目录可以显示。 @slsongge

https://jiaxiangbu.github.io/tutoring2/jinxiaosong/nb2gitbook/toc_and_pyecharts/toc_and_pyecharts.html

[JiaxiangBU]

@slsongge 参考 https://github.com/jupyter/nbconvert/issues/1228#issuecomment-609409406 目前这个问题找到答案了，所以 issue 我 close 了

[JiaxiangBU]

@slsongge 目前可以有目录展示的

见 https://jiaxiangbu.github.io/tutoring2/jinxiaosong/nb2gitbook/toc_and_pyecharts/toc_and_pyecharts.html

[slsongge]

这是为啥呢？这个不是修改了css的那个吗？

[JiaxiangBU]

这是为啥呢？这个不是修改了css的那个吗？

@slsongge 你查看下链接打开后是不是也是有目录的？这个就好奇怪了。

见 https://jiaxiangbu.github.io/tutoring2/jinxiaosong/nb2gitbook/toc_and_pyecharts/toc_and_pyecharts.html

我先 reopen。

[JiaxiangBU]

先暂时close了。