基于 Next.js 的新博客

2023-05-29 14:02:29 浏览数 (2)

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

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 则还能更简单点。

代码语言:javascript复制
<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 就好了)

0 人点赞