使用Gitalk实现静态页面评论的功能

2019-02-28

使用静态页面的理由

本人在Github上使用github.io部署了一个静态主页,地址是http://aopstudio.github.io,用于存放一些笔记文件。虽然静态页面功能少,自动化程度低,不过github.io的优点在于页面完全随自己设计,html,css和javascript全部随由自己安排,同时不需要自己的服务器资源。而且不少Github用户都会设置github.io作为自己的展示页面,也算是一个潮流。

更大的理由——Markdown Preview Enhanced插件太强大。。。

我使用的Markdown写作工具是VS code搭配其中的Markdown Preview Enhanced插件,功能相当强大,尤其是其中的脚本语言画图像的功能让我爱不释手。在该插件内可以使用脚本语言(比如DOT语言)画出矢量图,包含流程图、时序图、有向图、无向图等等,目前我还没有发现其他Markdown渲染工具可以达到相同的功能。Github中的Markdown语言据说是对原生Markdown进行了功能增强,但是连$\TeX$公式都不支持,和MPE插件比起来更是差了十万八千里(这里要夸一下Solo中的Markdown渲染器,是支持$\TeX$公式的)。但是过于强大也带来了兼容性的问题。在其他的Markdown渲染器中都无法实现在VS code中的近乎完美的预览效果(这同样也是我不使用Hexo的理由)。好在MPE插件实现了输出HTML文件的功能,输出的HTML文件的显示效果和在VS code中的预览效果没什么区别。我将输出的HTML部署到github.io,就可以在静态网页中实现和桌面端相同的渲染效果(主要是指矢量图的渲染)。

其他存在的问题和解决方案

“静态页面因为没有后台服务器,所以无法保存评论的内容,也就无法实现评论的功能。”一般人在不了解javascript强大功能的情况下,基本上会这么想。但是现在有个高人用JavaScript实现了静态页面评论的功能,也就是Gitalk项目。其实我一开始发现的是Gitment,原理和Gitalk相似,但是Gitment已经很久没有维护了,作者连自己主页的SSL证书过期了都不管,因此我选择了还在维护的Gitalk。Gitalk把评论放在Github仓库的issue中,访问静态页面时通过JavaScript与issue中的数据进行交互来完成评论的功能,这真是一个绝妙的想法。而且作者询问过Github官方,这种方式不属于滥用issue的范畴。

使用Gitalk的方法很简单,官方文档中已经说的很清楚了,在此就不再赘述了。

个人静态站点还未解决的其他问题

我的笔记内容篇幅比较长,当我发布在Solo中时,会自动生成侧边栏导航目录,但是MPE插件生成的静态页面中没有侧边栏目录,只能从头看到尾,效果如示例网页。现在正在寻找为该页面生成侧边栏导航目录的方法,如果有高人指点,在此感激不尽!