Preface

其实在考完试¹的时候就打算开始重构博客了，但是画出原型图之后又一直不满意，期间也没有设计灵感奇迹迸发出来，一直拖延到上个月。直到最近才掂量了下拖延症的后果，痛定思痛，决定跳过原形直接开始写实现。在迭代了许多版本之后总算有了一个大致让自己满意的设计，并在占位符这一天终于完工了。

早期设计

博客的设计说是多个网站的缝合体也不为过。我参考了非常多其他博客、类似网站的设计方案，甚至还有一些来自游戏联赛、视频的动效设计最终成为博客体验必不可少的一部分。

方案调研

上一台用来托管博客的服务器在去年年中到期了，而我并不打算续期，而是打算用无服务器的方案部署。我首先就看上了 Cloudflare 和 Vercel，两者都支持通过 Edge Runtime 运行 Nextjs，但是 Cloudflare 还有额外的免费数据库（D1），于是我就和 Cloudflare 对上了眼。
我敲定用 Nextjs 写页面，用 D1 做评论以及文章的 Reactions 的存储。

不过很可惜，从这里开始，我就走上了错误的道路。Nextjs 最近新推出了 App Router，它相比之前的 Pages Router 有许多优点，和一个微不足道的缺点——资料少，这对于前端了解甚少的我来说是致命的。我早期设想中的页面加载时的动画就这样被留在了梦里。
除此之外，由于 Edge Runtime 不提供 fs 模块，所以无法使用本地的 mdx 文件，只好改成静态生成（SSG）。

设计

博客的功能性和文章页面很大程度参考了MTU Ninja。和他一样，我去掉了 Tag，毕竟点开 Tags 页面十几个字体大小不一的 Tag 满天飞，谁看了不迷糊。

Nextjs 使用了 unist 作为 mdx 的渲染引擎。unist 渲染基本分为两个步骤，remark 和 rehype，前者处理 Markdown 语言，后者处理 HTML，中间使用 remark-rehype 插件将 Markdown AST 转化为 HTML AST，并且两部分都可以使用插件进行扩展，这就为我带来了极大的便利。为了将脚注放在引用旁边，rehype-sidenote 插件诞生，用于复制脚注内容。文章目录同样由 rehype 插件提取。

CJK 文字的标点挤压和换行位置是另一个比较头疼的问题，尽管现在已经有诸如赫蹏、Han 等自动排版工具，但它们都是在浏览器上处理文章。我希望这类重复性工作能够在页面生成时就完成（节能减排人人有责），于是 rehype-mojikumi 应运而生，在渲染 Markdown 时便能够自动挤压标点和处理换行的情况。不过这样做依然会有处理不周的情况出现，例如位于行首的左括号会有一个左边距，看起来像全角一样，暂时还没有想到很好的解决办法。

我纠结了很久文章的封面该如何设计。我想使文章封面的背景装饰效果大于功能性，在一次偶然的网上冲浪过程中，我看到了《京吹学报》这篇文章，作者使用了词云作为装饰性的背景，并且也很符合我目前的设计风格，于是我就借鉴剽窃了过来。
令人头疼的问题是中文分词和词云的生成方案。两者基本都需要 Python 的辅助，但在 CI 构建时额外安装 Python 和相关依赖是一个非常麻烦且耗时的工作，更不用说分词需要 GPU 的帮助，所以寻找云端 API 势在必行。以《为什么历史选择了久石奏》这篇 800 字左右的文章为例，jieba 将「北宇治」拆成了北、宇、治三个单词（宇治为地名），HanLP 将「黄前部长」拆成了黄、前、部长三个单词（黄前为人名）。不过在打开粗分选项后，以上问题 HanLP 没有再出现，并且综合效果是最好的，于是最终选择了 HanLP 作为中文分词器。

尽管 HanLP 提供云端 API 调用，但是在开发过程中调用速度太快导致经常被 429 Too Many Requests，于是自动分词计划被暂时搁置，打算在文章写完之后再手动生成，后面有时间再对其加上缓存。

词云的生成目前选择了使用 QuickChart 的 API。

动效

博客设计到这里，已经和很多主流网站不太一样，我想使用衬线体、非圆角的设计来展现一些独特的质感，在这条路上走的越远，能参考的东西就越少。现代的大多数网站设计选择了圆角和衬线体，以留以大量空白而呈现简约的感觉。不过好在前几个月因为某些原因需要做一个关于 Stable Diffusion 原理的介绍幻灯片，我偷偷回看了回形针 Paperclip的所有视频，偷学了非常多这方面的经验。

由于科普性质，回形针整体喜欢采用衬线体作为主要字体，但由于大量使用了（扁平化设计不提倡的）渐变颜色、阴影、文字的不规则排版，并在空白处填充了许多装饰性的内容，与现代设计提倡的简约背道而驰，使得其风格又偏向了传统风格。另外，在主要文字的呈现上，回形针不使用或很少使用动画，使得观众的注意力更多集中在内容本身身上。而在辅助图形、图表、场景切换等不需要注意力的内容上则大量使用了动画。

首先动画不能冗长，冗长与不必要的动画与网站的质感相违背²。
其次能不使用动画就尽量避免，不过为了夹带私货，我还是给一些元素加上了动画效果（例如首页的文章卡片）。

另一个影响动效设计的则是守望先锋联赛（哀悼）（以下简称 OWL）。OWL 的动效采用了 2D 而非其他游戏联赛更偏好的 3D，以“横向滑动”为基础，设计了非常多的转场和元素登场动画，配合有节奏感的音乐，给不少观众留下了深刻印象。你可以参考这篇文章来了解 OWL 的动效设计。

OWL 的动效设计被我用在了首页的文章卡片里，尽管想实现从右滑入从左滑出的效果，但由于动画框架限制，在动画未结束时若用户鼠标离开区域，会呈现出非常丑陋的效果，于是还是选择了从右边滑出。

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"无人爱苦，亦无人寻之欲之，乃因其苦..."

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut nibh eget tellus ullamcorper viverra nec a lectus. Morbi accumsan pretium condimentum. Duis commodo rhoncus porta. Aliquam venenatis ante vel neque semper facilisis vitae et leo. Proin vitae porttitor ipsum. Vestibulum nec nulla augue. Etiam efficitur interdum sagittis. Fusce diam arcu, pulvinar ut sodales eu, condimentum a nulla. Phasellus elementum cursus aliquam. In tempus vel ipsum id scelerisque. Duis ornare, lectus sit amet volutpat hendrerit, nulla risus egestas erat, eu porttitor ante orci eget lacus. Duis quis enim eget dolor posuere facilisis et id libero³.

Cras nec velit aliquam, accumsan magna id, hendrerit justo. Phasellus mollis magna in dignissim dapibus. Aliquam lectus eros, auctor ac aliquet vel, molestie a lorem. Proin rhoncus lorem vel nisl consequat, vitae eleifend sem congue. Nullam placerat, nibh malesuada iaculis blandit, justo purus imperdiet velit, quis laoreet velit turpis ut arcu. Proin eu dolor vel sapien tristique condimentum. Morbi volutpat, velit at porttitor tincidunt, odio sem varius dui, sed convallis turpis sapien ut velit. Phasellus id maximus felis. Nam semper est sed felis venenatis euismod. Nulla et vulputate est. Sed efficitur, erat nec luctus interdum, mi nunc interdum turpis, eget volutpat risus ligula at velit. Maecenas scelerisque commodo lacus vel sodales. Integer ut mi et metus viverra maximus ac lacinia magna. Phasellus mauris nunc, dictum vitae orci sit amet, lacinia viverra lectus. Morbi porta sagittis commodo. Praesent ornare tincidunt ante, quis cursus arcu vestibulum ac.

dawdawdawdaw

Quisque volutpat massa sed egestas iaculis. Ut semper posuere molestie. Duis gravida, sapien nec varius molestie, turpis justo laoreet ante, non eleifend erat mi vitae sem. Aliquam erat volutpat. Donec bibendum vel dui sed cursus. Quisque cursus faucibus congue. Duis vel tristique urna. Morbi in dolor vitae libero rhoncus imperdiet vel facilisis turpis.

Donec eget elementum turpis. Etiam finibus ipsum vel nisl vestibulum vestibulum. In vehicula quis sem in blandit. Nullam consequat ex eget elit imperdiet, quis volutpat augue cursus. Aliquam porttitor, tellus sit amet dictum congue, mauris ante congue leo, a dignissim justo purus a nibh. Sed odio arcu, hendrerit vulputate velit et, posuere convallis risus. Integer in enim porta, suscipit nibh a, dapibus nunc. Morbi mollis a sapien eget efficitur. Vivamus sodales sollicitudin ligula, vel maximus nisi euismod tempor.

1. asdadad

2. o[ikrgopr

3. dakjgfj
   yes tyojdjadjj, ofsjf is a great tool that,
   jksdfjg

4. following

   • dada
   • dadaw

Table of Contents

Phasellus neque leo, vehicula id neque ac, gravida convallis nibh. Vivamus sed gravida nisl, non vehicula nisl. Integer ullamcorper auctor est, a gravida elit malesuada sed. Nam dolor felis, dapibus in eleifend non, tincidunt in lacus. Aenean consequat a est a malesuada. In id rutrum sapien. Curabitur id purus volutpat, faucibus tellus eu, ultricies dolor. Suspendisse finibus tincidunt leo, id laoreet augue fringilla vitae. Nunc auctor, purus in porttitor pellentesque, ante elit eleifend tortor, eu pulvinar felis est sed libero. Integer imperdiet lacus eget purus cursus fringilla. Sed mollis mi at purus accumsan, a pharetra mauris tempor. Cras libero lectus, gravida mollis lobortis ut, lacinia ut purus. Donec tristique, leo ut mattis mollis, risus dolor scelerisque felis, ac blandit odio libero eu nisl.

Title Heading 4

段落开始 dawdawdagdfhkjeril; ggooole.com⁴

段落开始 中文测试; ggooole.com⁵

3409573489573453 daww

Title Heading 5

Phasellus neque leo, vehicula id neque ac, gravida convallis nibh. Vivamus sed gravida nisl, non vehicula nisl. Integer ullamcorper auctor est, a gravida elit malesuada sed. Nam dolor felis, dapibus in eleifend non, tincidunt in lacus. Aenean consequat a est a malesuada. In id rutrum sapien. Curabitur id purus volutpat, faucibus tellus eu, ultricies dolor. Suspendisse finibus tincidunt leo, id laoreet augue fringilla vitae. Nunc auctor, purus in porttitor pellentesque, ante elit eleifend tortor, eu pulvinar felis est sed libero. Integer imperdiet lacus eget purus cursus fringilla. Sed mollis mi at purus accumsan, a pharetra mauris tempor. Cras libero lectus, gravida mollis lobortis ut, lacinia ut purus. Code Blocks Donec tristique, leo ut mattis mollis, risus dolor scelerisque felis, ac blandit odio libero eu nisl.

const a = () => {
  return b;
}

Section two

section two contents.

section two part one

part one content.

section two part two

part two content.

そして、次の曲がはじまるのです！