feat: img use cloudflare

source/_posts/16宫格拖拽.md

@@ -13,7 +13,7 @@ tags: JavaScript
 # 16宫格拖拽
 实现一个如图所示的16宫格页面，其中各个数字盒子之间是能相互拖拽，并交换位置的。而横纵各自的标题栏ABC与XYZ实现的功能则是，ABC（XYZ）之间两两互换位置，从而引起两列（行）一起调换位置。
 
-![示意图](./post-img/16宫格拖拽.png)
+![示意图](https://quanru-github-io.pages.dev/post-img/16宫格拖拽.png)
 
 # 外观处理
 

source/_posts/Building my second brain 🧠 with Obsidian.md

@@ -29,7 +29,7 @@ The content of this article is out of date. Please refer to the official website
 
 ### What is Obsidian?
 
-![](./post-img/LifeOS-示例-标注-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例-标注-EN.png)
 
 Here is how it introduces itself on the official website:
 
@@ -55,7 +55,7 @@ I adopt two systems: one for knowledge management and another for periodic notes
 
 ### Core Systems
 
-![](./post-img/第二大脑系统图-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑系统图-EN.png)
 
 - Knowledge management: Using the [PARA](https://fortelabs.com/blog/para/) system
   - Projects -> Projects are a series of tasks related to a goal with a deadline.
@@ -107,11 +107,11 @@ You might be curious that the above subsystem seems to only use "periodic notes.
 
 #### Tag Connection
 
-![](./post-img/第二大脑系统图-连接-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑系统图-连接-EN.png)
 
 Treat the first-level folders under PARA as special tags (they don't need to be exactly the same as the folder names), use them in "periodic notes," then you can index uniformly in each PARA folder in the same way. This ensures that the README.md index in each PARA folder has all the context for the current topic:
 
-![](./post-img/LifeOS-示例-标注-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例-标注-EN.png)
 
 #### Project Connection
 
@@ -122,7 +122,7 @@ Generate a project in "knowledge management," to enhance focus on the project, t
 - The "priority first dimension" in the quarterly review is a snapshot of the current domain list, used for arranging main event dimension goals and subsequent reviews.
 - The "priority first dimension" in the annual review, automatically merged and deduplicated from the quarter's priority first dimension, used for setting domain dimension goals and subsequent reviews.
 
-![](./post-img/LifeOS-示例-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例-EN.png)
 
 ### Search
 
@@ -148,24 +148,24 @@ Generate a project in "knowledge management," to enhance focus on the project, t
 ### Creating Notes
 
 - Quickly create daily, weekly, monthly, seasonal, and annual notes through the note creation module in the upper left corner.
-![](./post-img/第二大脑周期笔记创建.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑周期笔记创建.png)
 - Quickly create PARA notes, i.e., projects, areas, resources, archives through the note creation module in the upper left corner.
-![](./post-img/第二大脑PARA笔记创建.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑PARA笔记创建.png)
 
 ### "Daily Note" and "Project README"
 
 - Used for daily management, including project lists, daily records, habit tracking, energy allocation, today's accomplishments, etc.
 - The "project list" in the daily note is a snapshot of the current projects (i.e., under the Projects directory).
 
-![](./post-img/LifeOS-示例-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例-EN.png)
 
 ### "Weekly Review" and "Monthly Review"
 
 - Used for arranging weekly and monthly tasks, including task and review modules.
 - In the weekly and monthly reviews, the "priority first dimension" are a collection of snapshots of the project lists from daily notes of the period (generated automatically).
 - The "reviews" in the weekly and monthly notes mainly focus on the projects of the period.
 
-![](./post-img/LifeOS-示例2-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例2-EN.png)
 
 ### "Quarterly Review" and "Annual Review"
 
@@ -174,11 +174,11 @@ Generate a project in "knowledge management," to enhance focus on the project, t
 - In the annual review, the "priority first dimension" is a collection of snapshots from the priority first dimension of the period's quarterly reviews (generated automatically).
 - The "reviews" in the quarterly and annual notes mainly focus on the domains of the period.
 
-![](./post-img/LifeOS-示例3-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例3-EN.png)
 
 ### "PARA Index" and "Task Index"
 
-![](./post-img/LifeOS-示例4-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/LifeOS-示例4-EN.png)
 
 ### "Capture" and "Express"
 
@@ -193,11 +193,11 @@ Those familiar with PARA will see that this model is actually proposed by Tiago
 
 My practice is to temporarily store some marked articles in the "Capture" directory while using the "-1. Capture/README.md" file to index the notes tagged with `#PARA/Capture` scattered in the daily notes. This makes it convenient for me during specific time nodes, such as weekends, month-ends, and quarter-ends, to review and sort, first organizing marked articles into each PARA topical directory, then transferring some inspirational notes from the daily notes into some explicit to-dos;
 
-![](./post-img/第二大脑捕获-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑捕获-EN.png)
 
 Next, let's talk about "Express." I place my blog in the express section and also record some fragmentary notes in the daily note tagged with `PARA/Express`. These are outputs after internalization. If this output needs to be further posted on a specific social platform, such as Zhihu or Xiaohongshu, I will conveniently record it as a task. When I review the tasks indexed in the "5. Express/README.md" file and find pending ones, just complete them one by one.
 
-![](./post-img/第二大脑表达-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/第二大脑表达-EN.png)
 
 ## Small Tips in Practice
 
@@ -225,7 +225,7 @@ I consider there to be three types of task reminders:
 
 ### Micro-Habits
 
-![](./post-img/福格行为模型-EN.png)
+![](https://quanru-github-io.pages.dev/post-img/福格行为模型-EN.png)
 
 - I list micro-habits in my journal, and remember, they are not tasks. It's okay whether they are completed or not; they mainly serve as a reminder, "Do you consider practicing these micro-habits today?" These act as prompts when I have the "capability" and "motivation." For example:
   - Micro-Habits

source/_posts/Chrome 谜一样卡死的排查方法.md

@@ -20,7 +20,7 @@ tags:
 
 查看 pending 状态的请求：
 
-![pending](./post-img/chrome1.jpg)
+![pending](https://quanru-github-io.pages.dev/post-img/chrome1.jpg)
 
 发现请求卡在了一个 "Stalled" 的状态，谷歌还贴心的给出了 ["Explanation"](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference?utm_source=devtools#timing-explanation) 链接，解释如下：
 
@@ -71,7 +71,7 @@ tags:
 
 按上述方式打开浏览器，实时查看日志文件，一步一步复现步骤，日志打印如下：
 
-![log](./post-img/chrome2.jpg)
+![log](https://quanru-github-io.pages.dev/post-img/chrome2.jpg)
 
 所以绕了一圈还是 "ResizeObserver" 的问题，原因在 [Chrome 83 下千帆工作台卡死的问题](http://way.xiaojukeji.com/article/22698) 中也有提到，这里列两个 issue 大家有兴趣查看下：
 
@@ -107,11 +107,11 @@ EventTarget.prototype.addEventListenerBase = EventTarget.prototype.addEventListe
 
 所以，还有除了 `EventTarget.prototype.addEventListener` 方法之外的监听没有被重写，我掐指一算，难道是 `window.onerror`，于是去当前卡死页面的调试控制台打印 `window.onerror`:
 
-![log](./post-img/chrome3.jpg)
+![log](https://quanru-github-io.pages.dev/post-img/chrome3.jpg)
 
 真有这个监听，而且还有『字符串 replace 操作』，这要是无限循环调用这个回调，分分钟卡死！顺手点击这个打印结果，直接跳转到引用它的代码：
 
-![log](./post-img/chrome4.jpg)
+![log](https://quanru-github-io.pages.dev/post-img/chrome4.jpg)
 
 竟然是 vConsole 监听的，前端同学都知道，这个 vConsole 是为了在移动端方便调试使用的，一般在测试环境使用，所以这端代码很可能是这个导致了测试环境卡死，而线上环境正常的罪魁祸首！
 
@@ -121,11 +121,11 @@ EventTarget.prototype.addEventListenerBase = EventTarget.prototype.addEventListe
 
 接下来我们就验证下猜想，首先把 window.onerror 覆盖为 console.log，重复复现步骤，控制台便打印出：
 
-![verify](./post-img/chrome5.jpg)
+![verify](https://quanru-github-io.pages.dev/post-img/chrome5.jpg)
 
 果不其然，不过这样还是卡住了，因为 console.log 也是同步操作。接着直接置空 window.onerror，执行 `window.onerror = undefined`，再来一次复现：
 
-![verify](./post-img/chrome6.jpg)
+![verify](https://quanru-github-io.pages.dev/post-img/chrome6.jpg)
 
 
 

source/_posts/HTML5截图.md

@@ -14,7 +14,7 @@ tags:
 
 # 需求
 实现一个类似于QQ截图的小东西，点击载入按钮，则载入图片，长按图片，弹出截图框，截图框右下角能够调整大小，并在右边的截图预览区域实时显示，其最终效果图如下：
-![示意图](./post-img/screenShot.png)
+![示意图](https://quanru-github-io.pages.dev/post-img/screenShot.png)
 
 # HTML
 需要注意canvas的设置，主要结构如下：

source/_posts/JavaScript权威指南の笔记.md

@@ -183,7 +183,7 @@ tags:
 47. 原型对象是类的唯一标识，当且仅当两个对象继承自同一个原型对象时，它们才属于同一个类的实例。
 48. 对于任意函数F.prototype.constructor==F;一个对象的constructor属性指代这个类。
 
-49. 构造函数与原型对象之间的关系：![](./post-img/权威指南1.png)
+49. 构造函数与原型对象之间的关系：![](https://quanru-github-io.pages.dev/post-img/权威指南1.png)
 
 50.
 >1. 任何添加到构造函数对象（不是指添加到构造函数内部）的属性都是类字段和类方法，属于类而不属于类的某个实例；
@@ -198,27 +198,27 @@ tags:
 >3. 以上两个方法不适用于多窗口和多框架子页面，因此可以使用构造函数的名称；
 
 53. 工厂方法：
-![](./post-img/权威指南2.png)
-![](./post-img/权威指南3.png)    
+![](https://quanru-github-io.pages.dev/post-img/权威指南2.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南3.png)    
 
 54. 构造函数方法：
-![](./post-img/权威指南4.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南4.png)
 
 54. toJSON()用于序列号对象，如果一个对象有toJSON()方法，则JSON.stringify()并不会对传入的对象做序列号操作，而会调用toJSON()来执行序列号操作，JSON.parse()是其逆过程。
 
-55. forEach：![](./post-img/权威指南5.png)
+55. forEach：![](https://quanru-github-io.pages.dev/post-img/权威指南5.png)
 
 56. 私有方法：
 >通过将变量（或参数）闭包在一个构造函数内来模拟实现私有实例字段：
-![](./post-img/权威指南6.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南6.png)
 
 57. 创建子类的关键：
 >1. B.prototype = inherit(A.prototype);//子类派生自父类
 >2. B.prototype.constructor = B;//重载继承来的constructor属性
 
 58. 用组合代替继承的集合的实现：
-![](./post-img/权威指南7.png)
-![](./post-img/权威指南8.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南7.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南8.png)
 
 59.
 >1. Object.preventExtensions():将对象设置为不可扩展的，即不能给对象添加任何新属性；
@@ -227,8 +227,8 @@ tags:
 60. Object.create(null);//创建一个不包含原型的对象，使之能够直接对它使用in运算符
 
 61. 作为私有命名空间的函数：
-![](./post-img/权威指南9.png)
-![](./post-img/权威指南10.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南9.png)
+![](https://quanru-github-io.pages.dev/post-img/权威指南10.png)
 
 1. 创建屏外图像：
 >new Image(80,20).src = "images/***.gif";

source/_posts/Monorepo 下 Git 工作流的最佳实践.md

@@ -25,7 +25,7 @@ tags:
 2. Git flow, Gitlab flow, Github flow 都属于 feature branch development，它们有一个共同点：都采用『功能驱动式开发』，即：需求是开发的起点，先有需求再有功能分支（feature branch）或者补丁分支（hotfix branch）；
 
 
-![图片](./post-img/mono-git1.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git1.png)
 
 ## 适用场景
 
@@ -35,7 +35,7 @@ tags:
 
 **总的来说，选择一个工作流不仅仅是一系列操作工具的流程，我们往往还需要对它背后的思想买单；下面的表格是两种工作流模式在各个维度的适用情况：**
 
-![图片](./post-img/mono-git2.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git2.png)
 
 
 > 目前大部分业务场景使用的都是 feature branch 的开发模式，如果你的业务是多人开发一个巨型应用（如抖音主站、飞书文档等），应该尝试使用 Trunk based 开发模式，这会提高仓库整体工程质量和管理水平。
@@ -50,7 +50,7 @@ tags:
 
 『功能分支开发模式』的核心思想是所有特性开发都应该在专用的分支，而不是主分支中进行。这种封装使多个开发人员，可以轻松地在不干扰主代码库的情况下处理特定功能。这也意味着主分支永远不会包含损坏的代码，这对于持续集成环境来说是一个巨大的优势。-- Git Feature Branch Workflow | Atlassian Git Tutorial
 
-![图片](./post-img/mono-git3.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git3.png)
 
 - #### **上线模式**
 
@@ -103,7 +103,7 @@ tags:
 
 与其它存在『长期分支』的功能分支策略相比，开发者可以通过一些小的提交创建『短期分支』。随着代码库复杂性和团队规模的增长，『基于主干的开发模式』有助于保持生产版本的流畅。-- Trunk-based Development | Atlassian
 
-![图片](./post-img/mono-git4.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git4.png)
 
 
 - #### **上线模式**
@@ -113,7 +113,7 @@ tags:
 
 半自动化流程，适用于低频率部署，以及自动化测试不全面的项目
 
-![图片](./post-img/mono-git5.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git5.png)
 
 
 (A dot represents an MR merged into master. Green dots means good commits that passed e2e tests, and red dot means a buggy commit which should be avoided when deploying/rollback)
@@ -138,7 +138,7 @@ tags:
 
 全自动化流程，适用于需要高频率部署，以及自动化测试较为全面的项目
 
-![图片](./post-img/mono-git6.png)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git6.png)
 
 
 (A dot represents an MR merged into master. Green dots means good commits that passed e2e tests, and red dot means a buggy commit which should be avoided when deploying/rollback)
@@ -184,7 +184,7 @@ Trunk-based development 更容易做到线性的 commit 历史，它有如下几
 4. 撤销变更，比如：当你发现一个有问题的 commit，简单的 revert 对应的 commit 即可，而非线性的历史会有很多跨分支的合并，使 revert 变得困难
 
 
-![图片](./post-img/mono-git7.jpg)
+![图片](https://quanru-github-io.pages.dev/post-img/mono-git7.jpg)
 
 
 ### **有效的两个前提**

source/_posts/Node.js 的 Morgan 模块与 Cluster 模块.md

@@ -20,7 +20,7 @@ tags:
 
 整个 microblog 的代码已放至 github 上：[摸我](https://github.com/quanru/microblog)
 
-![ ](./post-img/microblog.png  "microblog")
+![ ](https://quanru-github-io.pages.dev/post-img/microblog.png  "microblog")
 
 
 # 二、Morgan 模块の日志生成
@@ -74,7 +74,7 @@ tags:
       }
 ```
     此时查看进程管理器，发现有多个 node 进程，而原来的代码则只有两个：
-![ ](./post-img/node.png  "node 进程个数")
+![ ](https://quanru-github-io.pages.dev/post-img/node.png  "node 进程个数")
 
 # 四、Node.js 除虫工具