使用靜態頁面的理由
本人在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插件生成的靜態頁面中沒有側邊欄目錄,只能從頭看到尾,效果如示例網頁。現在正在尋找為該頁面生成側邊欄導航目錄的方法,如果有高人指點,在此感激不盡!
2019年2月27日更新
原文章發表在自己搭建的博客程藝的個人博客里,當時還沒解決的側邊欄問題現在已經通過一個叫做docsify的工具解決了,現在閱讀體驗非常好,地址在此https://aopstudio.github.io/docs/#/