重新开始：新博客的设计

本人的所有编程知识均为兴趣使然而学，似乎也没有特别系统性的进行学习。而我对这个博客的所有设计灵感则更多来自于别人的样式和我自己的理解，仅作分享。

字体

那我们就先从字体讲起吧。之前我认为字体是很无聊的东西，纯粹使我的博客加载速度变得更加的慢（因为加载的文件更多了）。但后来我发现字体在某种程度上也可以体现出博客的内容和设计方案。原先的默认字体在各个平台的显示差异会很大，不同的用户也就会有不同的显示体验。

好的，我们选择一个字体。在设计此网站的前些时段，我准备使用的是 Noto Serif SC。这是一款简体中文的 Serif 字体，很符合我一开始对网站的构思。感谢 Vercel 保存了我所有的 Deployments，这是当时的字体：

但是后来发现它的英文展示效果不是特别的好，或是说我不太喜欢：

所以后来我更换英文字体为 Montserrat，中文字体为 Noto Sans SC。

长这样：

首页

刚刚的两张截图中，除了字体的差异，还有就是首页的设计。

一开始我把一个标题和一段文字放置在页面中心，其它位置留空。这个样式自从我开始搭建博客就有用到（来自 hexo-theme-fluid，后来在自己的个人主页 yfun.top 上也加上了）。有人向我反馈过，在没往下滑动之前，他以为首页就这么多内容，这或许是一个小问题，再想到我其实没有使用它的必要，就将其改为了与我设计的 hexo-theme-miracle 基本相同的样式。

在 Banner 的下方就是博客的文章列表，这里我先只显示 6 篇（原先是 5 篇），以使首页看起来更加简约，更多的文章我会选择放到专门的一个「归档」页。这样似乎也可以将页面的功能分类的更清楚。

文章

我将文章内容的最大宽度设置为了 800px，没有了之前类似 Miracle 主题的卡片设计，我更希望是将他平铺开来，主打一个扁平。我使用了一些简单的线条将页面的部分分开来。Markdown 的样式我直接采用 Textretty 库，显示的效果很好，但是不是完全适配网站的深色模式，于是我又改了改，覆盖了其中一些元素的代码。

颜色

我使用 TailwindCSS，这是一个非常强大的库。它不像 Material UI，Bootstrap 一样限制了样式，它是一个工具，可以帮助你少写 CSS 代码，复制参数的工具。比如在颜色方面，TailwindCSS 已经帮我配好并按暗至亮划分（比如 text-red-100, text-red-200）。深色模式的适配也很简单，在 Class 里面加上 dark:（比如 dark:text-gray-200，我标题的深色模式颜色）就会自动应用于深色模式的情况。

在暗色模式下，比起直接使用黑色或白色，我更倾向于使用「灰色」，这会使对比度稍微低一点。在颜色设计上，我觉得一个重要的观点就是按照颜色的深浅突出页面的重要内容（这点懒的人可以直接用 opacity 去设置）。

内容分离 & 页面统计

我把内容和文章的内容进行了一个简单的分离，用 lang（语言）这个参数。只要你的浏览器语言清单里有中文，我就会先帮你转向 lang=zh 的页面。

页面统计方面现在主要使用 Umami.is，有的页面会用 Google Analytics。部分页面的统计目前还需要针对 CCPA 法规进行些许的调整。

内容存储

我一开始将文件放在一个 Private 的 GitHub 仓库，用 GitHub Action 将文章生成一堆索引文件。本质上还是「静态博客」，后来我发现似乎可以用 GitHub Discussion 存储页面的评论和文章，还更方便，所以现在的博客已经成为了「动态博客」，每次页面访问都会向 https://api.github.com/graphql 发送数据请求。

但是这对于 api.github.com 访问受阻的用户不太友好。目前我还在想解决方法，其中一个可以选择在无法访问的页面直接刷新，这会使用 Nuxt 的 SSR（即数据在服务端已经获取并渲染好了），只要能访问我部署 Nuxt 的地址就可以。或许我可以针对 Mainland 建立一个对于 api.github.com 的反代。

同时因为文章的内容存储缘故，我使用 Nuxt 的 API 来生成 Feed 和 Sitemap，也就是为什么会有 /api 在路径的前面。

部署

我的博客部署在 Serverless 平台，以前是 Vercel（但后来好像出现了点问题一直 500 错误），然后换到了 Deno Deploy。得益于 Deno Deploy 在全球的 30+ 节点，目前感觉还不错。

暂时说到这。希望你喜欢这个博客的样式。