主页关于链接归档相册

基于 Next.js 的新博客

代码

断断续续搓起来的，全靠复制粘贴。

nextjs-blog1

框架

其实 Hexo 用着是很舒服的。完全静态，主题模板修改起来很简单，很容易就能达到想要的效果。只是一些功能比如 Services Worker 和 LazyLoad 都只能用比较粗暴的方法实现，不美观，而且难维护。
早眼馋别人的各种 Gatsby 和 Next.js 开发的博客了，可自定义强、现代、自带各种优化。Next.js 的官网还有一套简单的教程可以直接上手，跟着教程做完后直接就获得了一个现成的博客系统，或者说是 Markdown 解析器？
总之我们可以从这上面下手。

样式

既然都上了新技术了，那 CSS 也可以脱离传统一点，用上了这几年很火的 Tailwind CSS。
只能说刚上手确实有点不知所措，搓了几天后开始上手了确实感觉很方便。而且最后得到的 CSS 文件也是比自己手写要小很多，理论上是页面样式越复杂复用的样式越多，文件缩小的幅度越明显。还有一套现成的 Markdown 排版样式，也不需要再额外去研究排版的问题，直接引入插件就行了。
不过我这个极简到简陋的风格好像不是很有必要上 Tailwind CSS。或许直接写样式会更好？
现在走的风格多少有点性冷淡了。主要二次元主题看得有点腻。
参考了卜卜口的妹Blog的大字体设计，减少了颜色的使用，因为我完全不懂色彩搭配。现在这样感觉纯文字阅读还不错。

减法

从 hexo-theme-Hezelitta 就可以看出我其实对功能的丰富性没什么兴趣，一直在反向走。
这次主要去除了：

  • 分页
  • 首页的文章
  • 标签（或者是分类？）
  • 代码高亮

个人感觉分页，尤其是文章内分页没什么用。简单设想一下，要找一篇文章，是一页页翻？还是直接搜索或者归档页找更快？很明显是后者。（但是为什么会有人给归档页加分页）。
首页我觉得像每篇文章都显示然后分页也是效率比较低的做法，我自己的习惯是最多看到页脚，想继续看会直接去归档页，而不是在首页点下一页。
于是只在首页显示最新的文章，剩下的放个链接跳转到归档页。然后首页变得巨空无比，想办法找了个东西填，虽然还是很怪。这部分之后应该会改。
标签这东西我一直认为和分类有冲突，本来是想直接两个一起删掉的，还是留着个分类吧。（其实只是我不会分类和分标签）。
代码高亮找不到适合我这个画风的，直接去掉吧，毕竟我不是什么技术博客，代码量还是很少的。

评论……本来是想去掉，总之还是先加上，而且本地不好调试我还不知道到底有没有效果。依然是 DisqusJS。

加法

做完减法该加法了，话是这么说，其实也就只加了个主题切换，而且还不完善。
因为技术力低下，只做出来两种模式，本来是想做 跟随系统 / 总是浅色 / 总是深色 三种模式的。
目前的细节是：初次加载记录用户偏好 prefers-color-scheme 并记入缓存，后总是设置为该颜色。这样貌似对有的人设置系统白天浅色模式，夜晚深色模式的不太友好，但是技术力低下嘛，就这样吧。
开关的展开菜单还是纯 CSS 的，意外地挺好实现，用 Tailwind CSS 则还能更简单点。

<div className='group cursor-pointer' tabIndex='0'>
  灯
  <ul className='hidden group-focus:flex flex-col absolute bottom-4 z-50'>
    <li>开</li>
    <li>关</li>
  </ul>
</div>

不过因为只有两种模式，所以做成一个按钮切换而不是展开菜单可能更好？
然后真的改成单按钮切换了。

杂项

最近 CloudFlare 被安排了，和 JSdelivr 有异曲同工之妙。毕竟百度搜一下 CloudFlare Workers 全是反代上 Google 的教程。
之前 DisqusJS 用的反代 API 是挂在 Workers 上的，已经打不开了。现在切成了 Vercel 反代，希望能够活久点。
代码来自 0wQ/disqus-proxy-vercel ，直接在 Vercel 导入仓库后部署就能用了。

RSS 暂时不知道怎么实现，没什么现成的插件能用。因为我自己也不用 RSS，直接阉割了吧。
然后就做出来了，footer 已经加上了 RSS 的地址。

最后

说了这么多，其实博客现在还是 Beta 版本，不可预见的 BUG 太多太多了。先用着，之后慢慢修。
旧博客放到了 old.csd.pub 保存。
不打算开源啥的，因为完全是各种复制粘贴缝合起来的，源码很乱，放出来太丢人了。

目前发现的各种奇奇怪怪的 BUG：

  • Text content does not match server-rendered HTML. 貌似直接解析到 Vercel 的没有这个报错，国内线路套了又拍云就会跳这个。（解决了，又拍云配置问题。开启“页面压缩”导致了 HTML 变化）
  • 手机端 Chrome 文章页没有排版样式，换了个浏览器又有了。跑 PageSpeed Insights 的时候也是有排版样式的。应该是我手机 Chrome 的问题。（后面发现是 typography 插件用的 CSS 选择器不支持，更新到新版 Chrome 就好了）

the end.

↑