feat: 图片地址更换

Ethan-zjc · Dec 1, 2023 · 990b977 · 990b977
1 parent 2e082af
commit 990b977
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 19 deletions.
diff --git a/docs/.vuepress/config/themeConfig.js b/docs/.vuepress/config/themeConfig.js
@@ -51,7 +51,7 @@ module.exports = {
     blogger: {
         // 博主信息，显示在首页侧边栏
         avatar:
-            'https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231017/v2-3b4fc7e3a1195a081d0259246c38debc_1440w.7g0i5tb41cw0.webp',
+            'https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231017/v2-3b4fc7e3a1195a081d0259246c38debc_1440w.7g0i5tb41cw0.webp',
         name: 'Ethan',
         slogan: '前端界的小学生',
     },

diff --git a/docs/01.前端/25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md b/docs/01.前端/25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md
@@ -38,7 +38,7 @@ console.log(pages(arr, 8)) // [[1, 2, 3, 4, 5, 6, 7, 8], [9]]
 
 如图，按需求，图标模块中的图标个数是不确定的，每页最多显示8个，超出8个的显示到第二页，实现向左滑动翻页。提供的数据是一个一维数组，这时就可以使用上面的代码按长度为8转为二维数组，再分页渲染到页面。
 
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110142410.3e0eb5okn6w0.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110142410.3e0eb5okn6w0.webp)
 
 ```html
 <template>

diff --git a/docs/01.前端/40.学习笔记/00.《JavaScript教程》笔记.md b/docs/01.前端/40.学习笔记/00.《JavaScript教程》笔记.md
@@ -3,7 +3,7 @@ pageComponent:
   name: Catalogue
   data:
     path: 《JavaScript教程》笔记
-    imgUrl: https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110120340.14kttzvxfxxc.webp
+    imgUrl: https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110120340.14kttzvxfxxc.webp
     description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href='https://wangdoc.com/javascript/' target='_blank'>JavaScript教程</a>
 title: 《JavaScript教程》笔记
 date: 2020-01-12 11:51:53

diff --git a/docs/01.前端/40.学习笔记/10.《ES6 教程》笔记.md b/docs/01.前端/40.学习笔记/10.《ES6 教程》笔记.md
@@ -3,7 +3,7 @@ pageComponent:
   name: Catalogue
   data:
     path: 《ES6 教程》笔记
-    imgUrl: https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110160453.6z0ndccm4qs0.webp
+    imgUrl: https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110160453.6z0ndccm4qs0.webp
     description: 本章内容为博主在原教程基础上添加学习笔记，教程版权归原作者所有。来源：<a href='https://es6.ruanyifeng.com/' target='_blank'>ES6教程</a>
 title: 《ES6 教程》笔记
 date: 2020-01-12 15:49:22

diff --git a/docs/01.前端/40.学习笔记/20.《Vue》笔记.md b/docs/01.前端/40.学习笔记/20.《Vue》笔记.md
@@ -3,7 +3,7 @@ pageComponent:
   name: Catalogue
   data:
     path: 《Vue》笔记
-    imgUrl: https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110143633.12m8a3cxcuio.webp
+    imgUrl: https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110143633.12m8a3cxcuio.webp
     description: 本章内容是博主的Vue学习笔记，非教程文档，请以官方文档为准。
 title: 《Vue》笔记
 date: 2020-02-04 12:16:12

diff --git a/docs/01.前端/40.学习笔记/22.《AST》笔记.md b/docs/01.前端/40.学习笔记/22.《AST》笔记.md
@@ -3,7 +3,7 @@ pageComponent:
   name: Catalogue
   data:
     path: 《AST》笔记
-    imgUrl: https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/88323a540c41426e9c6572bbd544a5be.1hi63sy73a74.webp
+    imgUrl: https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/88323a540c41426e9c6572bbd544a5be.1hi63sy73a74.webp
     description: 本章内容是博主的Vue学习笔记，非教程文档，请以官方文档为准。
 title: 《AST》笔记
 date: 2023-11-30 10:40:07

diff --git a/docs/01.前端/40.学习笔记/30.《TypeScript 从零实现 axios》.md b/docs/01.前端/40.学习笔记/30.《TypeScript 从零实现 axios》.md
@@ -3,7 +3,7 @@ pageComponent:
   name: Catalogue
   data:
     path: 《TypeScript 从零实现 axios》
-    imgUrl: https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110104632.1ns1nmof5klc.webp
+    imgUrl: https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110104632.1ns1nmof5klc.webp
     description: 学习使用 TypeScript 从零实现 axios 库
 title: 《TypeScript 从零实现 axios》
 date: 2020-01-05 10:40:48

diff --git a/docs/02.页面/20.CSS/45.如何根据系统主题自动响应CSS深色模式.md b/docs/02.页面/20.CSS/45.如何根据系统主题自动响应CSS深色模式.md
@@ -16,7 +16,7 @@ author:
 # 如何根据系统主题自动响应CSS深色模式
 
 <p align="center">
-  <img src="https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110163531.t3rsrxmcg40.webp" width="500">
+  <img src="https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110163531.t3rsrxmcg40.webp" width="500">
 </p>
 
 很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。

diff --git a/docs/02.页面/20.CSS/60.CSS-function汇总.md b/docs/02.页面/20.CSS/60.CSS-function汇总.md
@@ -11,4 +11,4 @@ author:
   name: zhangjinchao
   link: https://github.com/Ethan-zjc/hub-blog
 ---
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110161232.38nwevo2op00.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110161232.38nwevo2op00.webp)
diff --git a/docs/《AST》笔记/01.初识 AST.md b/docs/《AST》笔记/01.初识 AST.md
@@ -15,7 +15,7 @@ author:
 # 初识AST
 
 <p align="center">
-  <img src="https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_16-11-42.6sljy811qv40.webp" width="500">
+  <img src="https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_16-11-42.6sljy811qv40.webp" width="500">
 </p>
 
 掌握了AST，相当于掌握了控制代码的代码能力
@@ -26,7 +26,7 @@ author:
 It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.
 它是一种分层的程序表示，根据编程语言的语法表示源代码结构，每个AST节点对应于源代码的一项。
 
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_16-5-13.n22as0ah2g.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_16-5-13.n22as0ah2g.webp)
 
 ## ast的抽象结构标准？
 JavaScript AST 的结构 遵循的是ESTree 标准， 无论babel、或者Esprima、Acorn https://github.com/estree/estree， estree是由多个 JavaScript 解析器和编译器开发者、工具和库的贡献者们共同制定和维护
@@ -37,12 +37,12 @@ CSS 的解析通常会生成样式表对象模型（CSSOM），它类似于 DOM
 
 
 ## 为什么要了解ast
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_16-9-40.3gfu0a740dm0.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_16-9-40.3gfu0a740dm0.webp)
 掌握了AST，相当于掌握了控制代码的代码能力，可以帮助我们拓宽思路和视野，不管是写框架，还是写工具和逻辑，AST都会成为我们的得力助手
 
 
 ## AST 在编译中的位置
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_16-11-42.6sljy811qv40.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_16-11-42.6sljy811qv40.webp)
 在编译原理中，编译器转换代码通常要经过三个步骤：词法分析（Lexical Analysis）、语法分析（Syntax Analysis）、代码生成（Code Generation），如下图：
 
 ### 词法分析
@@ -51,18 +51,18 @@ CSS 的解析通常会生成样式表对象模型（CSSOM），它类似于 DOM
 
 词法分析阶段是编译过程的第一个阶段，这个阶段的任务是从左到右一个字符一个字符地读入源程序，然后根据构词规则识别单词，生成 token 符号流，比如 isPanda('🐼')，会被拆分成 isPanda，(，'🐼'，) 四部分，每部分都有不同的含义，可以将词法分析过程想象为不同类型标记的列表或数组。
 
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101354716-611471191.6pxjv3v3ab00.gif)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/2501174-20220427101354716-611471191.6pxjv3v3ab00.gif)
 
 ### 语法分析
 [语法分析工具](https://astexplorer.net/)
 
 语法分析是编译过程的一个逻辑阶段，语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语，比如“程序”，“语句”，“表达式”等，前面的例子中，isPanda('🐼') 就会被分析为一条表达语句 ExpressionStatement，isPanda() 就会被分析成一个函数表达式 CallExpression，就会被分析成一个变量 Literal 等，众多语法之间的依赖、嵌套关系，就构成了一个树状结构，即 AST 语法树。
 
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101415313-1435211089.10wlanw3xt5s.gif)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/2501174-20220427101415313-1435211089.10wlanw3xt5s.gif)
 
 ### 代码生成
 代码生成是最后一步，将 AST 语法树转换成可执行代码即可，在转换之前，我们可以直接操作语法树，进行增删改查等操作，例如，我们可以确定变量的声明位置、更改变量的值、删除某些节点等，我们将语句 isPanda('🐼') 修改为一个布尔类型的 Literal：true，语法树就有如下变化：
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/2501174-20220427101416281-1772382765.72g0vvptagw0.gif)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/2501174-20220427101416281-1772382765.72g0vvptagw0.gif)
 
 ## Babel 相关
 Babel 包含的各种功能包、API、各方法可选参数等，在实际使用过程中，可以安装如下 npm install @babel/core @babel/parser @babel/traverse @babel/generator
@@ -185,7 +185,7 @@ Component({
 ```
 
 转换后的ast结构
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_16-31-25.5ebzdlk8qbk0.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_16-31-25.5ebzdlk8qbk0.webp)
 
 
 例如我们在将微信的代码转化为百度小程序是，因为百度不支持miniprogram-computed依赖引入以及behaviors注入，第一行为VariableDeclaration节点类型
@@ -309,6 +309,6 @@ traverse(result, {
 ## AST工具和V8编译
 对比 AST 标准工具与 V8 引擎的编译过程
 
-![](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/image2023-11-30_17-19-56.23w3ibwi77r4.webp)
+![](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/image2023-11-30_17-19-56.23w3ibwi77r4.webp)
 
 AST 标准工具与 V8 引擎处理代码的过程有一定的重合，不同的是，V8 将 AST 转换为字节码后进入执行代码的阶段，而 AST 标准工具只是将旧代码转换为新代码
diff --git a/docs/《TypeScript 从零实现 axios》/07.ts-axios 拦截器实现/01.拦截器设计与实现.md b/docs/《TypeScript 从零实现 axios》/07.ts-axios 拦截器实现/01.拦截器设计与实现.md
@@ -62,7 +62,7 @@ axios.interceptors.request.eject(myInterceptor)
 
 我们先用一张图来展示一下拦截器工作流程：
 
-![interceptor](https://jsd.cdn.zzko.cn/gh/Ethan-zjc/picx-images-hosting@master/20231110110744.3yioi25qevs0.webp 'interceptor')
+![interceptor](https://raw.githubusercontent.com/Ethan-zjc/picx-images-hosting/master/20231110110744.3yioi25qevs0.webp 'interceptor')
 
 整个过程是一个链式调用的方式，并且每个拦截器都可以支持同步和异步处理，我们自然而然地就联想到使用 Promise 链的方式来实现整个调用过程。