经过最近几天的改造, 本博客正式加入了Slide模块和Notebook模块. 这两个模块已经添加到博客的头部菜单栏, 分别点击Slides和Notebook就可以进入相应的界面
点击Slides后就进入了Slides模块:
目录也是以slide的模式组织的. 通过方向键就可以切换slide.
点击NoteBook后进入NoteBook模块:
这里的目录还是按照普通的博客文章的样式构成的. 点击相应的连接就可以进入相应的NoteBook.
技术分析
Slide采用Reveal-md技术构建, 而Reveal-md的本质是Reveal.js的Markdown版本, 因此Reveal-md具有几乎所有Reveal.js的特性.
Reveal-md支持动态预览和编译项目为HTML, 所以只需要将相应的Markdown文件编译为HTML文件, 在将这些文件放置到指定的文件夹中, 就可以从博客访问这些slide
NoteBook是指Jupyter NoteBook, Jupyter本身的功能已经非常完善, 并且提供了将NoteBook编译为HTML的指令. 所以只需要将相应的NoteBook编译为HTML, 并放置到指定的文件夹中, 就可以从博客访问这些NoteBook.
项目结构
最初的hexo的source目录结构如下
1 | _drafts/ |
其中_drafts/
存放文章草稿, _posts/
存放文章源文件, about/
存在博客头部菜单栏About选项用到的文件, images/
存放博客中的图片, others/
存放其他文件.
按照Hexo的规则, 所有以_
开头的目录内的内容都不会直接出现在输出目录中, 而其他的目录中的文件, 即使无法被渲染(例如非文本文件)也会被复制到最后的输出目录中.
结合这一特性, 加入slide模块和notebook模块后目录结果如下
1 | _drafts/ |
其中_notebook/
和_slides/
存放源代码, 即.ipynb
文件和.md
文件. 对应地, notebook/
和slides/
存放编译为HTML之后的文件. 经过hexo渲染以后, 访问博客的/slides
和/notebook
路径就可以查看相应的文件.
博客页面设置
本博客采用了MiHo主题, 在相应的配置文件中, 有如下的一段内容
1 | # Menu setting | 菜单设置 |
因此只要在menu下加入两个新的项, 就可以在博客的头部菜单栏添加两个新的选项, 具体内容如下
1 | menu: |
在博客的页面上点击选项, 就能跳转到url指定的地址上, 只有在对应的位置加入index.html文件, 就完成了模块的添加.
Reveal-md新建
Reveal-md和hexo的博客文章一样, 需要使用一些头部的信息, 所以可以考虑创建一个文章模板, 使用hexo指令创建新的文章, 然后将创建的文件复制到Reveal-md的源文件目录中. 这样一方面不需要添加额外的文件新建机制, 又充分使用了hexo的特性.
首先在hexo的scaffolds
目录下新建一个slide.md
文件, 内容如下
1 | --- |
这里指定了主题和切换方式的默认值, 并且利用hexo的特性, 自动获得了文件名和创建时间.
每当需要创建新的slide时, 可以执行如下的指令
1 | read FILENAME |
使用hexo, 指定使用slide目标创建新文件, 然后将此文件移动到存放slide的目录. 当然这一段指令可以写成脚本, 下次使用的时候, 双击就能使用.
Reveal-md编译
Reveal-md编译脚本如下所示:
1 | @echo off |
所有的参数含义都可以在Reveal-md的官网上获得.这里要注意的是指令末尾的& pause
. reveal-md命令执行完毕会自动结束进程, 进而导致后续的指令无法执行, 所以一定要使用&符号组合pause指令才能实现暂停效果.
Reveal-md实时预览
Reveal-md提供了一个实时预览功能, 本地做出的修改可以实时的展示到页面之上. 指令如下
1 | @echo off |
其中-w
指令表示监控本地目录的变化. 但Reveal-md存在一个bug, 当文件名为中文是, 无法在实时预览模式下访问相应的文件. 联想到Hexo的草稿发布模式, 我额外编写了一个小脚本, 代码如下
1 | import os |
这个脚本实现了两个功能, 分别是新建和发布. 当创建一个新的slide时, 此脚本将slide的真实名称保存起来, 然后将slide重命名为current.md, 从而在实时预览模式下也可以正常查看. 当slide创建完毕以后, 执行发布指令, 此脚本恢复slide原本的文件名.
考虑到一个slide的编写过程中, 可能有创建新的slide的需求, 此脚本也支持连续多次执行新建和发布执行, 创建的文件按照栈结构保存..
NoteBook编译
NoteBook提供了编译的指令, 但是使用BAT执行时, 会产生原因不明的死循环, 且每次只能编译一个文件. 针对这一情况, 我编写了一个python文件来实现NoteBook相关的指令, 代码如下
1 | import os |
将此文件和NoteBook源文件放置在同一个目录下, 就可以实现启动Jupyter Notebook以及将所有的NoteBook编译为HTML的功能.
脚本中做了更新检测, 通过对比HTML和源文件之间的修改时间来确定是否需要重新编译源文件.
忽略编译结果
由于Hexo会自动渲染所有位于source下的文件, 因此经过Reveal-md编译后的html文件会被Hexo再次渲染, 进而导致slide样式出现问题.
Hexo的配置文件中提供了一个跳过渲染的选项, 按照如下的方式, 则可以忽略slides目录和others目录下的所有目录和文件, 以及notebook文件夹下所有的HTML文件.
1 | skip_render: |
创建index文件
使用Reveal-md编译一个文件夹时, 会自动为这个文件夹产生一个index.html文件, 不过这个文件只是简单的展示了全部的文件, 因此使用不够友好.
由于在slide源文件中创建的index.md文件也会编译成index.html文件, 所以只需要在源文件目录中创建一个index.md文件, 并且手动维护这个文件, 就可以为整个Slide系统提供一个目录.
在NoteBook系统中, 显然并不存在默认生成的index文件, 同时也不适合使用NoteBook格式创建一个目录. 所以还是可以创建index.md文件, 并且手动维护这个文件中的链接.
与Reveal-md不同的是, NoteBook系统并不自己编译这个md文件, 而是由hexo负责渲染, 所以在配置文件中只忽略了HTML文件, 而md文件还是照常渲染.
1 | skip_render: |
经过这样的设置以后, NoteBook的index页面就和普通的博客文章页面具有同样的页面结构了.
Notebook添加目录
安装NoteBook插件, 执行如下指令
1 | pip install jupyter_contrib_nbextensions |
安装完成以后, 在Jupyter主界面上, 可以看到多了一个标签页, 名称为Nbextensions
. 在其中开启插件Table of Contents(2)
即可为NoteBook添加目录.
更多关于Jupyter插件的内容, 可以参考以下文章
Notebook修改字体和背景
1 | jt -f fira -t onedork -fs 13 -cellw 90% -ofs 11 -dfs 11 -T -N |
如果希望还原设置, 可以执行
1 | jt -r |
最后更新: 2024年03月28日 23:43
版权声明:本文为原创文章,转载请注明出处