如何手搓一个博客?

如何手搓一个博客?

2020 年暑假在 Github 闲逛,对 diaspora 主题一见钟情,加上时用的动态博客维护较为麻烦,便萌生了把博客搬迁到 Hexo 的想法。

在一切之前…

最后选择了 Hexo + Diaspora 的方案。

数学公式渲染 · 26/10/2020

使用 marked 或 kramed,都会导致数学公式中的 _ 被误识别为斜体

  • 解决方案:fork 了个 kramed,然后改了改斜体的语法。
  • 代码:source.zip

webfont · 1/11/2020

本站的文章标题使用的是 方正宋黑简体。为了减少字体加载时间,使用 font-spider 仅将使用到的字打包进来。

效果对比(点击切换)
  • 吐槽:font-spider 自带的爬虫极其垃圾,轻雨酱最后自己写了个爬虫来爬的,给孩子整自闭了。
  • 夸夸:压缩后的字体文件就 100+kb,还没一张图片大。

Tips · 2/11/2020

注意到本站页面不被 push state 方法刷新时,会简单加载动画和显示一条简短的 tips,供你消磨这几秒钟的加载时间(如果你没看清的话,点我)。轻雨酱自认为这样能解决了本站静态资源较多带来的用户体验问题。

  • 灵感:鸽游有没有打过啊?鸽游!
  • 内容:瞎侃 + 喜欢的歌词 + 个人碎碎念
  • 题外话:如果在 Devtools 把所有的 tips 连起来看,感觉还蛮怪的(

文章头图 · 8/16/2021

如果你在电脑或 Pad 上打开博文,会看到内容作为一张纸浮在背景图上,而 原主题 是没有这设计的。

  • 技术细节:在 .container 外面套了层 .shadow-container,其 :before:after 分别被设置为一条阴影。

友情链接 · 9/20/2021

点击 主页 按钮,菜单中就会显示友情链接。如果内容太多,还可以滚动。某人一直催轻雨酱,催了一年了轻雨酱终于加上了。(真好)

  • 数据迁移:都是从原 Typecho 博客拉过来的,删了几个博客挂了的。
  • 技术细节:如果内容过多,截断部分会有个过渡效果,是通过叠加了一层透明到背景色的渐变实现的。
  • AD time:想换友链可以在 about 页面留言。

summary 截断问题 · 9/21/2021

在文章聚合页面,你需要为每篇文章生成一段 summary。Hexo 自带的库函数有一堆过,最后自己手写了一个: diaspora/scripts/strip_post.js

  • 特性 1:支持同时用 <!--more--> 和长度限制两种方式截断;
  • 特性 2:保证不会截断 LaTeX 公式;
  • 特性 3:中文字符按 2 个英文字符统计,LaTeX 公式内的有效字符按 1.5 个英文字符统计。
  • 吐槽:这玩意儿写的我梦回去年写集训队作业一堆表达式解析题的日子

增强 Markdown 语法 · 9/23/2021

为了在 Markdown 文档中实现各种各样的样式效果,不得已常在 Markdown 文档中插入一些 HTML 和 CSS。为简化语法,便整了个 Markdown 增强渲染插件,可在 diaspora/scripts/markdown_enhanced.js 查看完整实现。

最后决定支持直接把这玩意儿写 HTML Tag 里,比如上面这段就长这样:

1
2
3
4
5
6
为了在 Markdown 文档中实现<span .gradient .text-clip #text-gradient font-weight:bold>各种各样的样式效果</span>,不得已常在 Markdown 文档中插入一些 HTML 和 CSS。为简化语法,便整了个 Markdown 增强渲染插件,可在 [<!--icon(github)--> hexo-theme-diaspora/markdown_enhanced.js](https://github.com/memset0/hexo-theme-diaspora/blob/master/scripts/markdown_enhanced.js) 查看完整实现。
<style>
.text-clip{-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.gradient{animation:gradient 4s;background-image:linear-gradient(to right,red 30%,blue 70%,red 100%);background-size:200% 100%;animation-iteration-count:infinite}
@keyframes gradient{0%{background-image:background-position:0 0} 50%{background-position:100% 0} 100%{background-position:200% 0}}
</style>
  • 特性 1:可用 .class 为节点添加类,#id 为节点添加 id,key:value 为节点添加样式。
  • 特性 2:支持全文生效的宏定义,可以方便的调用:<!--func(arg1,arg2,...)-->

链接重定向 · 9/24/2021

随着本博客使用性质的转换,原来的 pathname 命名方式也必须有所改变。如原本「UR #8」宿命多项式 一题的 pathname 为 /uoj120,现已移到 /problem/uoj120。为了确保原外链能够使用,必须再做一层跳转。因为本站是静态博客,所以是用 window.location.replace 方法实现的。

  • 咕咕:下一步应支持导出为 nginx 配置文件,在主站部署时直接 nginx 接管返回 302 跳转。
  • 铺垫:Giscus 对文章修改 pathname 的兼容性也是换用其的主要原因之一。

Giscus 评论 · 9/24/2021

原生的博客系统是 Gitalk,看 mcfx 的博客种草了 Giscus。算是个 Discussion 版本的 Gitalk,但各方面比 Gitalk 好用许多。于是就趁着放假迁移了过来。

  • 数据迁移:Issue 可以直接转换成 Discussion,虽然本站一共只有 6 条评论,根本没人看。
  • 适配 Ajax:要和主题的 ajax 适配,最后选择 fork 了下 giscus.js,然后 瞎改改

在一切之后…

这篇文章的大部分内容本是作为类 commit log 状物记载在纯文本文档里的,近日翻出来凑凑博文数量。

如果之后博客有什么改动的话,也会在这篇文章内更新。

参考资料