skip to content
声控烤箱 ｜ KazooTTT 博客

Notes(102) RSS feed
flow

1. 配置 cloudflare 规则实现重定向

IMG-16E2701A71548A6357EB84B23B32A3E2

博客路由结构对比

旧路由结构新路由结构 (Astro)
/blog/xxx/posts/xxx
/tag/xxx/tags/xxx
/category/xxx/categories/xxx

迁移之后可能会有一部分用户从搜索引擎或者之前收藏的链接中访问我的博客，如果不做处理，这些用户访问的页面会返回 404，导致用户体验下降。所以需要实现重定向。

思路有两种

  1. 基于部署平台 cloudflare 实现重定向
  2. 基于框架 astro 实现重定向

基于部署平台 cloudflare 实现重定向

在这里下载好 csv 的模板

CSV file format to import URL redirects · Cloudflare Rules docs

对照填写规则 Redirect visitors to a new page URL · Cloudflare Rules docs

根据自身需求填写，我的最终的 csv 如下

SOURCE_URL,TARGET_URL,STATUS_CODE,PRESERVE_QUERY_STRING,INCLUDE_SUBDOMAINS,SUBPATH_MATCHING,PRESERVE_PATH_SUFFIX


https://blog.kazoottt.top/category,https://blog.kazoottt.top/categories,301,true,false,true,true


https://blog.kazoottt.top/diary,https://blog.kazoottt.top/notes,301,true,false,true,true


https://blog.kazoottt.top/blog,https://blog.kazoottt.top/posts,301,true,false,true,true


https://blog.kazoottt.top/tag,https://blog.kazoottt.top/tags,301,true,false,true,true

然后点击侧边栏的批量重定向，上传 csv，保存，创建批量重定向列表。最后绑定把批量重定向规则绑定对应的列表就可以了。

（也可以点击域名然后再设置规则，总之入口和可配置项有很多，按需选择）

IMG-9B20E505345B2B2FFAEFCE7463420E90

下图是配置完成的效果

IMG-8072C6F424C6D27A40E457198B622A5C

这样我再访问 https://blog.kazoottt.top/posts/2025-W07/ 就会被重定向到 https://blog.kazoottt.top/posts/2025-W07/

通过配置 astro 完成重定向

其实 astro 也可以配置 astro.config.ts 中的 redirect 属性来实现，但是个人用下来觉得它对于动态路由的支持并不好，且文档中没有写的很详细，我通过代码跳转过去才知道支持动态路由的配置。

IMG-145A60CDEC5C619A9F432DBAA2325AA2-1

配置如下：

redirects: {
  "/blog/[...slug]": "/posts/[...slug]",
  "/category/[...slug]": "/categories/[...slug]",
  "/diary/[...slug]": "/notes/[...slug]",
  "/tag/[...slug]": "/tags/[...slug]",
 },

但是配置后打包开始报错，提示我去写 getStaticPaths 或者配置 export const prerender = false

19:33:08.963 11:33:08 ▶ /category/[...slug]
19:33:08.964 11:33:08 [ERROR] [build] Failed to call getStaticPaths for /category/[...slug]
19:33:09.240 [GetStaticPathsRequired] `getStaticPaths()` function is required for dynamic routes. Make sure that you `export` a `getStaticPaths` function from your dynamic route.
19:33:09.240   Hint:
19:33:09.240     See https://docs.astro.build/en/guides/routing/#dynamic-routes for more information on dynamic routes.
19:33:09.240
19:33:09.240      If you meant for this route to be server-rendered, set `export const prerender = false;` in the page.
19:33:09.241   Error reference:
19:33:09.241     https://docs.astro.build/en/reference/errors/get-static-paths-required/
19:33:09.241   Location:
19:33:09.241     /category/[...slug]:0:0
19:33:09.241   Stack trace:
19:33:09.241     at validateDynamicRouteModule (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/routing/validation.js:19:11)
19:33:09.241     at getPathsForRoute (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/generate.js:182:31)
19:33:09.241     at async generatePages (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/generate.js:82:7)
19:33:09.241     at async AstroBuilder.build (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/index.js:154:5)
19:33:09.241     at async build (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/build/index.js:45:3)
19:33:09.241     at async runCommand (file:///opt/buildhome/repo/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/cli/index.js:147:7)
19:33:09.410 Failed: Error while executing user command. Exited with error code: 1
19:33:09.422 Failed: build command exited with code: 1
19:33:10.423 Failed: error occurred while running build command

尝试一番后依然报错，然后也没有找到比较明确的解决方法，所以第二种方式暂时被弃用了。后面有时间的时候，会去看 astro 的源代码验证是否支持这样写，以及找到具体的正确写法。

2. 241029 1144 vite环境变量

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：

VITE_SOME_KEY=123
DB_PASSWORD=foobar

只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。

console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined

环境变量和模式 | Vite 官方中文文档

5. 2024-10-25 13分02秒 Vintage Camera Lab

Updated:
IMG-69C73A35AE6AA1B14805360168652323

Vintage Camera Lab：复古相机爱好者的数字中心

地址：Vintage Camera Lab

日期：20241025

摘要：Vintage Camera Lab 是专注于复古相机的网站，涵盖多种型号的详细信息与历史，按品牌、格式和类型分类，便于摄影师、收藏家等了解相机的背景与特点。同时，该网站还提供复古相机风格的周边产品。

亮点：

  • 丰富的相机数据库，包含规格与历史背景。
  • 支持按品牌、格式和类型分类。
  • 提供复古相机主题的周边商品。
  • 面向复古摄影爱好者和相机收藏家。

Vintage Camera Lab：复古相机爱好者的数字中心

Vintage Camera Lab 是专注于复古相机的网站，涵盖多种型号的详细信息与历史，按品牌、格式和类型分类，便于摄影师、收藏家等了解相机的背景与特点。同时，该网站还提供复古相机风格的周边产品。

亮点：

•  丰富的相机数据库，包含规格与历史背景。
•  支持按品牌、格式和类型分类。
•  提供复古相机主题的周边商品。
•  面向复古摄影爱好者和相机收藏家。

6. 碎片-2025-02-14 15时00分 状态没变更？记录一次没阻止冒泡导致的bug

Updated:

举个例子：

IMG-3D020E6C18045F751BC938C45EC88E95
  • 预期：删除了当前激活的item之后，list中第一个item被激活。
  • 错误的现象：删除了当前激活的item之后，无任何item被激活。

由于我点击删除按钮的时候，没有阻止冒泡，而删除的按钮的父组件是item，它们都有绑定click事件。

所以调用的步骤就是：

  1. 首先调用删除item的回调，并且由于我的激活index就是目标要删除的index，所以是期望设置activeIndex = 2
  2. 但是由于没有阻止冒泡，所以在设置了activeIndex = 2之后，又去调用了activeIndex = 1
  3. 最后导致看起来状态没有发生变化这样的bug
IMG-5D773F6926C2C236AC8FF3150AE233AD

最后的解决方法是：在删除item的回调中，阻止冒泡。

onClick = (e)=>{
  e.stopPropagation()
  deleteItemByIndex(index)
}

8. 碎片-2025-02-11 12时32分

Updated:

很羡慕和佩服那些拥有热爱并且为之付出的人 感觉自己没什么持久的热爱，很多时候只是因为受他人影响选择了目前的工作。

也有人说不要把工作看得多重要，只是挣钱的途径。但实际上工作占据一天中很多时间，如果体验糟糕，那么还是会觉得一天过得挺糟糕的。

很多时候都没弄清楚自己的行动意图

之前一直说希望可以远程工作，可以离家近一点。但是只是下意识的说辞，回到成都后，回家频率更高，也是往离家更近的方向靠，但是并没多开心。所以我期望的或许不是要离家近。

也说过离开上家公司的原因之一是流程太繁琐，层层审批，有时候互相推脱找不到负责人，推进一件事情过于困难。但换了公司后，确实更加扁平化，不再有所谓的工单和流程，面临的是另外的不愉快。随意指派的任务，不合理的排期，让我依然觉得心累。

比起接下一份工作，是更希望自己可以弄清楚自己喜欢什么，擅长什么，工作体验与工资比例相对合理的公司是我的目标吗，求稳定还是求待遇，以及自己能否找到这样的工作，如果不能找到还能怎么办

不然面临的又是匆忙决定然后又后悔然后又想离开

真的好迷茫啊

我一直都觉得我是情绪驱动类，有上头的事物可以高强度投入其中。

我的快乐很大部分都是追星带来的，真的会因为新消息开心很久，期盼很久。所以之前说我不知道我喜欢什么，准确来说是我不知道我能把什么爱好和我的工作对应上。

感觉能利用好情绪驱动的话是优势，利用不好就是劣势吧 ​​​

9. 如何解决 Nginx 启动时未联网无法访问DNS而挂掉的问题

Updated:

假设我们在 Nginx 配置文件中设置了如下的反向代理配置：

location / {
    proxy_pass http://example.com;
}

开机的时候，在没有网络连接的情况下，Nginx 启动时无法访问 DNS 服务器进行解析 example.com，导致 Nginx 启动失败。这种情况下，我们需要一种方法来确保 Nginx 启动时即使无法访问网络，依然可以顺利运行。

解决方案：配置 resolver

解决这个问题的一个有效方法就是在 Nginx 配置中添加 resolver 指定 DNS 服务器，告诉 Nginx 如何解析域名，即使在网络不可用时，Nginx 也能够正常启动。

resolver 指令的作用

resolver 指令用于指定一个或多个 DNS 服务器，Nginx 将通过这些服务器解析域名。当 Nginx 需要解析代理服务器的域名时，它会使用配置中的 DNS 服务器，而不是依赖系统默认的 DNS 配置。

如何配置

假设我们要配置的反向代理目标是 example.com ,在 Nginx 配置文件中，我们可以添加如下内容：

http {
  resolver 223.5.5.5 223.6.6.6 valid=30s;


  server {
      listen 80;


      location / {
          set $backend "http://example.com";
          proxy_pass $backend;
      }
  }
}

proxy_pass 后面接域名时候会 DNS 缓存，导致这个域名背后的机器负载不均衡，官方推荐的是使用变量解决 1

在上述配置中，resolver 223.5.5.5 223.6.6.6 valid=30s; 指定了一个 DNS 服务器

这意味着 Nginx 在启动时会使用这个 DNS 服务器来解析 example.com，即使机器没有网络连接，它也能够通过指定的 DNS 服务器来解析域名。

valid=30s 表示 DNS 解析结果的有效期为 30 秒。(具体来说就是 Nginx 会缓存 DNS 解析结果，30 秒内不再请求 DNS 服务器)

参考

nginx中resolver参数配置解释 |

Module ngx_http_core_module

89 | proxy模块中的proxy_pass指令—极客时间

Footnotes

  1. 89 | proxy模块中的proxy_pass指令—极客时间 ↩

10. 小红书长文切图笔记？其实 craft 就可以实现。

Updated:

访问 craft.do，登录后在右上角新建 doc ，复制你要切图的长文内容到里面去。 (如果你创建数量达到上限，可以打开一个老的文档替换你新的内容）

IMG-4A2263AE049DF9303F93F37EFCE8C9A4

点击右上角的 share - export - image 按钮，开启图片导出。

IMG-B479DBAD1C6B3C040B769DA8188B31EA

调整一下样式，检查没有问题后可以点击左下角的 save image 进行导出。

IMG-5A38B60FA4C5B7998BA40F6CA64BA8B6

最终效果预览：

图片 1：

IMG-965BBD8CA64A9C809E7B6B3D23E77044

图片 2：

IMG-8F2DC02EF85889CCEF25F30E68FC6DF5