Whidy Writes

博客升级优化的一些笔记

发布于:(更新于:

其实我一直是很懒的写东西的,更别提更新网站了,但是自从上次改版到 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读取,当然你需要提前提供一个授权账户在插件配置,读取完成后,会产生出 allStrapiXxxstrapiXxx 之类的,这样就能直接用 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) )换了,以后如果有什么需要记录的更新笔记,都写在这里好了~

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

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

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

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢打篮球和分享 ฅʕ•̫͡•ʔฅ