2022-04-09 中午发布1,006 次点击2 条评论需阅读3分钟

博客船新版本来啦!

之前一直觉得自己的博客太丑了, 在用 Next.js 重构了博客之后就没怎么管过了, 上次commit已经是三个月前了, 加上最近一直在捣鼓skcode, 所以就没什么心思去改这个样式, 清明假期没事的时候, 想着改一版博客, 就找了很多别人的博客网站, 学习他们如何去设计一个博客网站的. 在不断的借鉴之下, 就有了我这个博客的新样式, 我很喜欢卡片布局, 之前的布局也是卡片式布局, 新样式也是延续了这个风格.

配色

我的配色就是最简单的黑白搭配, 很少有其他鲜艳的色彩(除了 markdown 的code那里), 也没想做的多么花里胡哨, 最简单的最优雅.

功能

这一版的博客删除很多的功能(比如说snippet), 想着先把最简单的事情博客做好在做其他功能, 文章没有写几篇, 其他功能搞得再好也没有用, 博客最重要的还是要好好地写文章, 去输出自己学到的东西和自己的理解,

实现

All Hooks

这一版的博客, 不止样式船新, 代码也是使用All Hooks来实现的, 使用一个Hooks就可以实现请求 + 状态同步, 根本不需要其他的操作.

举个例子, 文章点赞的代码:

const ArticleFooter = ({ article }: ArticleFooterProps) => {
  const { isLike, mutation } = useLikeArticle(article.id);
  return (
    <div>
      <button
        isLike={isLike}
        onLike={() => {
          mutation.mutateAsync();
        }}
        liking={article.liking}
      />
    </div>
  );
};

scss -> tailwindcss

第一个点就是取名, 命名这个真是头疼.
其次就是主题、各种配置, 维护太难了, 特别是在没有一个具体的主题的时候, 你要找一套自己的配色系统时, 特别是像我这种没啥设计能力的, 有点难度.

从 Scss -> tailwindcss 并不代表完全放弃 Scss, 我现在还有一些文件是 Scss, 有一些还没来得及迁移,一些感觉用 Scss 的话更加清晰一些, 其实我最终的话可能会回到Css + tailwindcss, tailwindcss 这里有一些坑, 会改变一些写 css 的习惯(后面补上一篇文章).

移除 api route

我之前的网络请求写的比较复杂, 是借鉴的commerce这个库的网络请求方式(这个仓库推荐大家看看, 代码质量挺高的), 简单点来说就是:

使用一个Hook -> api route 拦截验证 -> api route发送真正的网络请求 -> 返回给api route -> api route返回结果给前端

我其实有一点搞不懂 api route 的作用(或许我用错了), 写的很复杂, 所以后面觉得太冗余了就删除了, 而是使用最简单axios + react-query来实现网络请求以及 Hook 的封装, 所以现在的流程就变成了:

使用一个Hook -> 发送网络请求 -> 返回结果

深色模式

深色模式的话, 有点作弊, 我是装了一个谷歌插件dark reader打开深色模式, 发现在纯白的博客上, 深色模式效果竟然还挺不错, 所以就把深色模式的 css 应用到了博客上, 不过这里的代码还有待优化吧, 看了下别人的代码, 感觉我好像实现深色模式的思路出了点问题, 后面在好好优化下这部分代码.

最后

一个清明假期+一个周末完成了这次大更新, 感觉还是不错的, 终于把之前丑的不要不要的样式更新到自己喜欢的样子了, 挺有成就感, 即使只是改了几个页面(页面仔), 给自己列一个 TODO:

好好写作
优化深色模式代码
添加一些彩蛋
更新掉归档、关于(这两个页面还没搞完)
还有很多...