0%

Hexo 第二次魔改记录

为了迎接即将来临的本博客成功活过一周内的大喜日子,我决定全面魔改博客以表示庆祝。这一次魔改博客主要的目标是提升浏览体验,切入点是链路质量和美化博客。

接入CDN

博客当前扔在白嫖来的腾讯云香港VPS上,不过这个博客都是用Docker打包好的,随时可以跑路。腾讯云香港的链路质量一言难尽,好的时候是真的好,烂的时候是真的烂,基本上和4G上网和4G回落2G上网的体验差不多。香港CN2应该早就被广大劳动人民玩坏了。另外比较坑的一点是有传言腾讯云会干扰SSL,本站顺手使用极为先进的HTTPS沦为极为卡顿的原因之一。所以找了一阵子免备案免信用卡按量计费的CDN,CloudFlare就不说了还不如不用,CloudCone的表现和不挂CDN差不多(主观感受),现在用的UDomain的China Routing CDN,在CN2卡得不能自理的时候,还可以提供不错的体验。

主题美化

之前用的主题是Terminal魔改版,说实话我挺喜欢这个主题的风格的,美中不足的就是缺功能,没有目录等常见功能。所以最后选择了完成度很高的烂大街的NexT.Gemini,为了避免博客主题Hash碰撞,不被一眼就看出来是什么大路货主题,决定魔改这个主题,并且继承Terminal的设计风格,复制粘贴CSS。另外还参考了这学期写作业用的Typora主题typora-markdown-resume

下面是一部分对该主题的调整内容

  • 强制文章标题使用h1标签
  • 添加utterances评论模块
  • 调整版权声明的颜色
  • 调整正文的字间距,粗细,大小,字体,颜色
  • 调整导航菜单的边距
  • 调整导航菜单字体粗细,大小,颜色
  • 调整导航栏的背景颜色
  • 调整标题字体的粗细
  • 修改h2标签的风格
  • 使用圆角矩形,添加阴影
  • 调整正文页的最大宽度,页边距
  • 调整圆角矩形间距
  • 调整页面和正文的背景颜色

最后,看起来很像Terminal主题和typora-markdown-resume主题的NexT.Gemini Remix主题就这么诞生了。

总结

这波操作给博客带来了一堆功能更新和界面优化(特别是移动端),包括但不限于

  • 加载进度条
  • 阅读进度条
  • 文章目录
  • 访问量统计
  • 版权声明
  • 图片缩放

以及速度优化

  • CDN
  • Lazyload
  • PJAX局部刷新
  • HTTP2 + HSTS

upload successful

upload successful

把CDN配置为全球网络优化Google PageSpeed的分数会更高一些(当前是只针对中国链路优化)


2020.5.22更新。CDN回源策略从HTTPS回源改成了HTTP回源,降低后端响应时间(虽然还是很长,毕竟CDN的回源时间还在)。

upload successful