重写博客
因为工作的原因鸽子,很久没有再写博客,半个月前终于决定写一篇,但是突然发现博客无法正常工作了。修了老久也没修好,以此为契机就决定把博客重写一遍啦。
§网站
不管是之前的博客还是现在的博客,本质上都是静态网页,不包含任何服务器交互。
上一个博客其实是个单页应用,所有的页面数据是直接编译成了json
字符串保存在了我的代码仓库中,切换到哪个页面就去请求哪个页面的数据。这样做的好处是整个交互可以做的很好看,页面切换可以做很多酷炫的效果,但是这样有个缺点,当时是用vue
做的,每个页面加载都需要完整的加载所有库和包,累积起来是个比较大的数量,对于以文字为主的博客来说,这点等待的时间,我觉得不是很好。
这次重写,完全回归了古老的网站结构,整个网站是多页面的,每个页面都有自己的html
文件,这样做的话,每个页面的结构我可以更加灵活更加精确的加以控制。
§页面
新的博客彻底去掉了那些动态效果和五颜六色的大色块,主色调选择了黑白,配合少量浅色色块
。
UI 上还是以卡片式设计为主,不过去掉了旧博客很多小卡片排列的风格,页面只有几个大卡片,然后用浅黑色直线切割成不同区域。
博客还是以文字阅读为主,所以花了很长时间在调整文字排版的效果上。所有标题均为衬线字体,正文为黑体。因为是中文阅读,我还是坚持每个段落首行缩进。有关斜体的问题,我个人不太喜欢斜体中文,中文没有写斜体的习惯,这纯粹只是西文的习惯,所以在网站中,斜体采用下划线,中英混排时只有西文是斜体,中文不变,例如:中英文混排 Mixed Chinese and English。在下划线方面,由于浏览器自带下划线和文本之间没有间隔,英文问题不大,中文就显得很难看,所以这里采用背景渐变的方式重新做了下划线。
§工程
编译方面之前本来打算模仿webpack
的流程,就是提供标准的调度器和内部接口,然后不同的资源用不同的加载器来进行加载,调度器对依赖资源的变更而自动进行最小子图的重载。当时这么考虑主要是因为编译太慢了,所以必须要在用户资源更新的时候用最小的代价去构建,这样的话就要求有标准接口,这东西写起来实在是费劲得很。
现在的博客的编译没有这样复杂的流程,每次资源变更都全部重新编译,之所以现在可以这么任性,主要是因为换了esbuild
,速度真的太快了,在这里向各位推荐一下这个打包工具。
文章部分留出了多模板的接口,希望以后有时间针对不同的文章可以自动加载不同的模板。页面模板方面选用了React
,它的SSR
功能可以直接生成网页源码,我们将源码保存成文件就可以了。
与页面主要排版不相干的交互全部放到插件系统中,插件系统提供统一的调度和载入模块。现在是一起打包到所有页面中的,以后希望能做成按需打包。
§以后
这个新的博客还只是个架子,很多功能都还没有上,以后慢慢补文章的时候再完善吧。至于以前的旧文章,以后有空了再搬运吧。