博客升级优化的一些笔记

其实我一直是很懒的写东西的，更别提更新网站了，但是自从上次改版到 Gatsby v3 后，这个项目的代码一直有很多细节上的问题，最近看到 Gatsby v4 发布，又忍不住升级了一下，然而开发环境经常出问题。反正就奇奇怪怪的问题，一怒之下，全部检查更新优化一下。

2022年01月

修复和优化

先来说说几个主要的提升部分。

修复页面代码块样式问题

修复 CodeBlock 总会超出小屏页面的宽度，手机上很明显。

起初一直以为是Markdown的样式问题，换高亮，换markdown的css，一直没解决，后来从头到尾仔细看了下，推测 flex 布局的问题，用了 flex-1 的内容容器，内容区又用了 width: 100% ，于是就出问题了。移除了flex布局，就好了。

优化后端查询逻辑

重新调整了对接Strapi后端的逻辑。之前操作很奇葩，我直接在 gatsby-node.js 做同步请求 Strapi 后台拿数据，然后用 createPage 方法渲染几个模板生成页面。后来仔细研究了一下官方的 gatsby-source-strapi 插件和Demo，反复尝试和研究，终于搞明白怎么回事了，插件实际上将Strapi后端的Collections读取，当然你需要提前提供一个授权账户在插件配置，读取完成后，会产生出 allStrapiXxx 和 strapiXxx 之类的，这样就能直接用 GraphQL 查询了。同样也省去了 gatsby-node.js 这个文件。同时，之前放在模板的文件，现在放在page目录下了，用了 {StrapiXxx.slug}.js 这种名称，挺好用的。

优化网站跳转逻辑

移除了之前因旧博客的域名变化通过 gatsby-plugin-meta-redirect 来进行跳转的模式。

这个跳转还要基于预设的一套映射关系，而且会生成大量的跳转的静态页面，打包慢而且还不优雅，我后来琢磨了一下nginx的配置，直接在上面做跳转了，虽然很多规则写的感觉还是有问题，暂时能用，而且之前模式下， wp-content 和 归档日期 的路径页面等无法跳转的问题也解决了~

升级 TailwindCSS v3

这个变动并不大。

待优化

• 正文部分有些样式还是有些问题，比如列表缩进了但是没有符号。估计是TailwindCSS把基础样式去了。
• 保留了 gatsby-plugin-image 等相关插件，尝试做响应式图片展示。
• 之前做的一些单页面，都是手动维护更新代码的方式，打算对接Strapi后端。
• 开放 Strapi 后端服务，方便随时发布文章，并触发博客系统编译发布，免得每次写完文章都要上服务器一顿操作。
• 增加黑夜/白天样式切换。
• 可能升级到 Strapi v4 。

2022年02月15日

将本文的链接( /blog-update-note-202201 )和标题( 博客升级小记（2022.01） )换了，以后如果有什么需要记录的更新笔记，都写在这里好了~

今日正式添加了一个 Strapi 的 Webhooks ，基本实现了更新文章后自动触发博客系统（Gatsby）发布能力，不过可能会存在的问题，比如多次触发可能造成的问题，并未测试，不过这种情况可控，暂不处理。

这几天也是因为 Strapi V3 的打包的文件过大，访问速度过慢，尝试的本地升级了V4，目前发现的问题就是关系 Collections 的关系模式有变化，再就是官方 gatsby-source-strapi 还不支持V4，然而这个 gatsby-source-strapi 项目试了下还有些问题未解决。

另外之前说的单页面，我才发现有个 Single Types 类型的或许是专门展示单页面的。为何以前没发现？过几天有空再试试把那几个傻傻的单页面改造一下。