速查子站上线了

更新:由于自己对这种知识收集的方式不满意,文中所述的站点已关闭。目前以 Wiki.js 搭建的知识库替代:https://wiki.4ading.com/。顺便说一下,我仍然对知识的存储、发布方式觉得不满意,故前面仅为暂时的存放地址。

背景

学习 Python、PHP 等等的时候,我记了一些笔记。有些是用 Markdown 格式记录的,有些是在幕布上记录的。

幕布在整理思维方面确实挺不错的。但是,幕布并不适合在学习计算机语言时使用,因为它的附注会自动隐藏起来,而且文字不是等宽字体,阅读代码会很不方便。

幕布的附注不适合记代码

而用 Markdown 格式记下来的笔记,我倒是希望以类似于卡片的形式来展现,因为作为初学者,短的代码在文档里居多。如果不到 20 字的的代码都要占据一行的位置,那太浪费空间了。而如果将它们与解释写在一行,写多了又会黑压压的,影响观感。

使用Markdown格式记录的笔记的渲染效果(以简书为例)

实际上,在计算机语言学习中,经常见到一种叫做 cheat sheet 的东西,将一些函数、方法和简单的代码放在一起,尽量压缩为一页。我查它的中文含义时,发现它叫“备忘单”,但是就它的功能而言,叫“速查”更好一些吧,毕竟能够通过它,快速查找需要使用的方法。

如果有能够生成这种东西的工具,就好了。

主题

最近我翻看 Hexo 的主题的时候,偶然看到了一个应该适合我的主题:cheatsheet。我看了一下,正好符合我的要求,感觉还不错。

主题作者给的样例页面

于是,我将它下了下来,并初始化了一个 Hexo 工程,应用了这个主题。结果,随便写了一些东西进去之后,效果惨不忍睹。

最开始应用该主题的效果

翻看了一下作者给出的所有材料(甚至还有 Git 的提交记录),我发现,没什么能够参考的地方。看来我需要自己魔改这个主题,才能够用。

我魔改了一天,包括主题、配置文件什么的都动了不少,甚至另外用了插件 hexo-prism-plugin,才算改出来一些样子。

魔改之后的效果

(实际上,第二天我偶然发现,只要关闭 Hexo 内置的代码高亮插件,就可以正常显示了——当然,样式上还要改一些内容——不过比之前的少了许多了。我向原作者提交了 README 的修改并合并,以后也会在其他方面上进行修改并发布。)

(2020-04-12 更新:我提交了对于样式的修改,并得到了原作者的合并。)

排版

当我搞定主题之后,就将之前记录的部分一点一点复制粘贴到文档中。

但是,一个新的问题迎面而来:这个主题是响应式的,在较大的屏幕下将页面三等分。当每一个卡片的高度不一样时,需要很好地排布这些卡片实属不易。

虽然看上去像瀑布流的效果,但是同一行中,卡片是优先横向、向右排列的。如果遇到需要换行的情况,下一行会选择最接近于上面的那个空位继续。

这样一来,卡片的长度将直接影响排版的质量。如果不考虑卡片的长度,随便安放文字,最坏的情况下,会出现大量的空缺。

糟糕的伪瀑布流效果

于是,我需要精心调整各个卡片的位置(对于一篇文章来说是三级标题及其内容的相对位置),尽量让空白达到最少。与此同时,还要考虑各个卡片在语义上的联系,让卡片的位置的改变不那么突兀。

我一般是在一个章节(对应二级标题)完成后,对卡片位置进行调整的,总的加起来,排列卡片大概花了半个小时吧。

永久链接

由于我做的是速查页面,而不是博客,所以永久链接就显得尤为重要。

在不使用其他插件的前提下,永久链接的样式其实可以用 :category/:title/ 这样的形式的。但是这反倒成了一个问题。

由于我的风格,分类、标题和文件名都是以中文为基础的。但是,我又希望链接中的文字是英文的——中文会被编码为 ASCII 字符,这样一来在链接上就看不出来什么意思了。另外,标题、分类也有大写的情况,但在链接上,我希望能够全部小写,这样会美观一些。可以看一下下面的例子,就知道为什么我这么想了。

1
2
3
4
5
6
7
分类:Python
标题:os 库
文件名:Python-os库.md

http://example.com/Python/Python-os库/
http://example.com/Python/Python-os%E5%BA%93/
http://example.com/python/os/

这样就要自定义永久链接的样式了。但是,按照官方文档操作之后,我发现,如果用 hexo server 启动临时的服务器,这样的链接无法正常指向页面。但为了预览,我还是希望让永久链接在 hexo server 下正常工作的。

找了很多方法,最终还是用了 hexo-abbrlink 插件。不过,与之前依靠系统自动生成的 ID 不同,我自定义了每篇文章中 abbrlink 的值,如:

1
abbrlink: python/os

这样一来,不论是服务器还是生成的页面,都能够正常使用永久链接。

上线

在做了一些无关紧要的改动(主要是添加了页脚、让段落内的代码段样式更突出)之后,我发布了这个站点。

网址是:https://cheatsheet.4ading.com/。之前在 Let’s Encrypt 上申请了泛域名证书,这次也是派上了用场。

速查主页

目前的内容并不多,之后我还会增加一些内容,比如 PHP、Go 的知识点。

因为 Python 基础的内容太多,之后应该会进行一些移动和分割,所以各子页面的链接短期内并不会固定下来,建议大家收藏主页。

主站的侧边栏,我也留下了速查的链接。

主站中的速查链接