diff --git a/deploy.sh b/deploy.sh
index d41a2ba512e21a7565bfc2e6f85035948fa0b6b5..697955e99ea005d9677a8a4f4fdf166b1cac1b9c 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -19,6 +19,7 @@ git commit -m 'feat: Bruceblog deploy'
 # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
 git push -f git@github.com:BruceCQM/bruceblogpages.git master:bruceblog_pages
 git push -f git@gitee.com:brucecai55520/bruceblogpages.git master:bruceblog_pages
+# git push -f https://gitee.com/brucecai55520/bruceblog.git master:bruceblog_pages
 
 # 返回一开始的路径
 cd -
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index fd11b68e8b5eff258f56b44186d2d758232d796f..8d396379431ffbe362f0e580b096adaecb9adcd5 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -99,7 +99,7 @@ export default {
     // 设置底部的版权声明，只有左边侧边栏不存在才会展示
     footer: {
       message: 'If there is any reprint or CV, please mark the original address of this website',
-      copyright: 'Copyright © 2019-present BruceBlog'
+      copyright: 'Copyright © 2023-present BruceBlog'
     },
     // 设置编辑页面链接
     editLink: {
diff --git a/docs/.vitepress/nav.js b/docs/.vitepress/nav.js
index e024c6394d16d1787e8a05b4dbdde84f2db65afd..33950c603a51a5a75f17f471c9760620dc5d8b04 100644
--- a/docs/.vitepress/nav.js
+++ b/docs/.vitepress/nav.js
@@ -1,6 +1,6 @@
 export default [
   {
-    text: '周录记',
+    text: '随笔杂谈',
     link: '/magazine/weekly2023'
   },
   {
@@ -11,26 +11,17 @@ export default [
     text: '前端学习',
     items: [
       {
-        text: '基础',
+        text: '扎马步',
         items: [
           { text: 'HTML / CSS', link: '/fe/css/css' },
           { text: 'JavaScript', link: '/fe/js/what_is_js' },
-        ]
-      },
-      {
-        text: '框架',
-        items: [
           { text: 'Vue', link: '/fe/vue/vue_core_basis' },
           { text: 'React', link: '/fe/react/react_basis' },
-        ]
-      },
-      {
-        text: '玩意儿',
-        items: [
           { text: 'Nodejs', link: '/fe/nodejs/node_basis' },
           { text: 'Git', link: '/fe/git/git' },
           { text: 'Webpack', link: '/fe/webpack/webpack_basis' },
           { text: 'Vscode', link: '/fe/ide/vscode' },
+          { text: '前端编程题', link: '/fe/js/coding_problem' },
         ]
       },
       {
@@ -56,11 +47,13 @@ export default [
     text: '高效搬砖',
     items: [
       { text: 'Antd 虐我千百遍', link: '/work/antd' },
+      { text: '富文本编辑器', link: '/work/editor' },
       { text: '第三方工具', link: '/work/tools' },
       {
-        text: '地图开发',
+        text: '微信小程序',
         items: [
-          { text: '微信小程序地图开发', link: '/work/maps/wx_map' },
+          { text: '小程序开发之坑', link: '/work/wx/wx_points' },
+          { text: '微信小程序地图开发', link: '/work/wx/wx_map' },
         ]
       },
     ]
diff --git a/docs/.vitepress/theme/components/Copyright.vue b/docs/.vitepress/theme/components/Copyright.vue
index 88e26417f9bf643ab164a2978789fe2c1eb429cb..99430b626f7e162265147674e540b76448661728 100644
--- a/docs/.vitepress/theme/components/Copyright.vue
+++ b/docs/.vitepress/theme/components/Copyright.vue
@@ -1,7 +1,6 @@
-
 <template>
   <div class="copyright_container">
-    Copyright © 2019-present BruceBlog
+    Copyright © 2023-present BruceBlog
     <img v-if="!DEV" class="visitor"
       :src="`https://visitor-badge.laobi.icu/badge?page_id=bruceblog_pages_55520_${route.path}`"
       title="How many people visit this page"
diff --git a/docs/fe/js/coding_problem.md b/docs/fe/js/coding_problem.md
new file mode 100644
index 0000000000000000000000000000000000000000..8a0dd80cec0c7d6b0166f6fe85fde5f46501eb0b
--- /dev/null
+++ b/docs/fe/js/coding_problem.md
@@ -0,0 +1,520 @@
+# 前端编程题
+
+## debounce 防抖
+
+防抖原理：连续触发事件，只有最后一次事件被触发 n 秒之后才会执行回调，是解决事件回调频繁调用的手段之一。
+
+实现思路：
+
+- 事件触发，设置定时器，在 n 秒之后调用回调
+- 若 n 秒之内再次触发事件，则清空定时器并重新设置
+
+注意事项：`this` 指向的修正、参数的正确传递。
+
+```js
+function debounce(func, wait) {
+  let timeout = null;
+
+  return function() {
+    const context = this;
+    const args = arguments;
+
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+
+    timeout = setTimeout(function() {
+      func.apply(context, args);
+    }, wait)
+  }
+}
+```
+
+## throttle 节流
+
+节流原理：连续触发事件，每隔 n 秒执行一次回调，解决事件回调频繁调用的手段之一。
+
+实现思路：主要有两种，使用时间戳判断和定时器。
+
+### 时间戳
+
+主要流程：
+- 一个变量 `now` 记录当前事件触发的时间戳，一个变量 `previous` 记录上一次触发的时间戳
+- 事件触发，判断 `now` 与 `previous` 的差值是否大于时间间隔 `wait`。若大于则调用回调函数，并将 `previous` 更新为 `now` 的值
+- 若 n 秒内再次触发事件，由于存在时间差节流阀，不会再次调用回调函数
+
+```js
+function throttle(func, wait) {
+  let previous = 0;
+
+  return function () {
+    const context = this;
+    const args = arguments;
+    const now = +new Date();
+
+    if (now - previous >= wait) {
+      func.apply(context, args);
+      previous = now;
+    }
+  };
+}
+```
+
+### 定时器
+
+主要流程：
+- 事件触发，设置定时器，在 n 秒之后执行回调函数并清空定时器
+- 若 n 秒内再次触发事件，不会做任何动作
+
+```js
+function throttle(func, wait) {
+  let timer = null;
+
+  return function () {
+    const context = this;
+    const args = arguments;
+    if (!timer) {
+      timer = setTimeout(() => {
+        func.apply(context, args);
+        clearTimeout(timer);
+        timer = null;
+      }, wait);
+    }
+  };
+}
+```
+
+### 结合体
+
+时间戳和定时器方式各有独特的效果：时间戳会在事件触发的时候立即执行一次回调函数，定时器方式会在停止触发事件之后再执行一次回调函数。
+
+这就是 `lodash` 和 `underscore` 工具库 `throttle` 方法的 `leading` 和 `trailing` 配置参数。
+
+[Lodash throttle](https://www.lodashjs.com/docs/lodash.throttle#_throttlefunc-wait0-options){link=card}
+
+```js
+function throttle(func, wait, option) {
+  if (typeof option !== 'object') {
+    option = {};
+  }
+  let previous = 0;
+  let timer = null;
+  const { leading, trailing } = option;
+
+  const throttled = function () {
+    const context = this;
+    const args = arguments;
+    const now = +new Date();
+    if (previous === 0 && leading === false) {
+      previous = now;
+    }
+    const remaining = wait - (now - previous);
+
+    if (remaining <= 0) {
+      // 若时间戳先执行了，清空定时器
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      func.apply(context, args);
+      previous = now;
+      return;
+    }
+    if (!timer && trailing === true) {
+      timer = setTimeout(() => {
+        // 若定时器先执行了，更新previous时间
+        previous = +new Date();
+        func.apply(context, args);
+        clearTimeout(timer);
+        timer = null;
+      }, remaining);
+    }
+  };
+
+  return throttled;
+}
+```
+
+注意，若时间戳先执行了，则要清空定时器，若定时器先执行了，则要更新previous时间。否则如果不断触发事件，会出现执行两次回调的情况。
+
+## unique 去重
+
+数组去重，经典中的经典。
+
+### 双重循环
+
+双重循环，最原始同时也是兼容性最好的版本。
+
+```js
+function unique1(arr) {
+  const res = [];
+  for(let i = 0;i < arr.length;i++) {
+    // 注意这里用 var，否则下面的判断无法取到 j
+    // 当然也可以在外层定义好
+    for(var j = 0;j < res.length;j++) {
+      if(arr[i] === res[j]) {
+        break;
+      }
+    }
+    if(j === res.length) {
+      res.push(arr[i]);
+    }
+  }
+  return res;
+}
+```
+
+使用数组的 `indexOf` 方法，可以简化代码。
+
+```js
+function unique2(arr) {
+  const res = [];
+  for(let i = 0;i < arr.length;i++) {
+    if(res.indexOf(arr[i]) === -1) {
+      res.push(arr[i]);
+    }
+  }
+  return res;
+}
+```
+
+### `underscore` 版本
+
+`underscore` 的去重方法主要有两个额外参数：`isSorted` 和 `iteratee`。
+
+`isSorted` 参数标识待去重的数组是否已经排好序，如果是排序好的数组使用更快捷的方法（判断当前元素是否与前一个元素相同，相同即重复，只需一次遍历）进行去重。
+
+`iteratee` 传递一个自定义函数，对于数组每一个元素，是对该函数处理后的返回值进行比较，达到自定义去重规则的效果。
+
+```js
+function unique3(arr, isSorted, iteratee) {
+  const res = [];
+  // 存储自定义函数处理后的值
+  const dealValueArr = [];
+  // 排序情况下的前一个值
+  const previousValue = undefined;
+
+  for(let i = 0;i < arr.length;i++) {
+    const value = arr[i];
+    const dealValue = iteratee ? iteratee(value) : value;
+
+    if(isSorted) {
+      // 若是第一个元素或者和前一个元素不相同
+      if(i === 0 || value !== previousValue) {
+        res.push(value);
+      }
+      previousValue = value;
+    } else if(iteratee) {
+      if(dealValueArr.indexOf(dealValue) === -1) {
+        // 注意res压入的是原始数组的值，不是经自定义函数处理后的返回值
+        res.push(value);
+        dealValueArr.push(dealValue);
+      }
+    } else {
+      if(res.indexOf(value) === -1) {
+        res.push(value);
+      }
+    }
+  }
+  return res;
+}
+```
+
+### Object 键值对
+
+该方法的主要思路是：把数组元素作为 key 值存入一个对象里面，在判断一个元素是否重复时，只需要看对象是否存在这个元素的 key 值。
+
+`typeof item + JSON.stringify(item)` 的处理是为了保证 key 值唯一。
+
+```js
+function unique4(arr) {
+  const obj = {};
+  return arr.filter(function(item, index, array) {
+    const keyValue = typeof item + JSON.stringify(item);
+    return obj.hasOwnProperty(keyValue) ? false : (obj[keyValue] = true)
+  })
+}
+```
+
+### 不能 JSON 序列化的特殊值
+
+json 是独立于编程语言的数据存储和表示格式，也就是说它只能存储各个语言通用的东西，JavaScript 特有的一些值无法正确 JSON 序列化。
+
+![不能 JSON 序列化的特殊值](./images/stringify_no.png)
+
+:::tip
+如图，`undefined`、JS 方法、`Symbol` 类型值经过 `stringify()` 处理后都丢失了。
+
+`Infinity`、`NaN` 和数字相关的特殊值转换成了 `null`。
+
+正则表达式转换成了空对象 `{}`。
+:::
+
+### 利用 ES6 新特性
+
+扩展运算符天下无双。
+
+```js
+function unique5(arr) {
+  return [...new Set(arr)];
+}
+```
+
+
+
+## shallowClone 浅拷贝
+
+```js
+function shallowClone(obj) {
+  // 不是对象直接返回
+  if(obj === null || typeof obj !== 'object' || || obj instanceof RegExp) {
+    return obj;
+  }
+
+  // 对象循环拷贝
+  const res = obj instanceof Array ? [] : {};
+  for(let key in obj) {
+    if(obj.hasOwnProperty(key)) {
+      res[key] = obj[key];
+    }
+  }
+  return res;
+}
+```
+
+由于 `typeof null` 的结果是 `object`，因此需要单独判断 `null` 值，否则拷贝 `null` 值会得到空对象 `{}`，比较怪异。
+
+JS 发展到今天，除了手撸一个浅拷贝函数之外，还能使用 `Object.assign()`、`...扩展运算符` 浅拷贝对象和数组，`concat()`、`slice()` 浅拷贝数组。
+
+## deepClone 深拷贝
+
+深拷贝就是在浅拷贝的基础上判断遍历拷贝的值是否为对象，如果是对象，则递归调用深拷贝函数。
+
+### 手撸深拷贝
+```js
+function deepClone(obj) {
+  if(obj === null || typeof obj !== 'object' || || obj instanceof RegExp) {
+    return obj;
+  }
+
+  const res = obj instanceof Array ? [] : {};
+  for(let key in obj) {
+    if(obj.hasOwnProperty(key)) {
+      res[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
+    }
+  }
+  return res;
+}
+```
+
+上述方式是比较基础的深拷贝实现方式，能实现日常开发常见对象的拷贝，没有考虑 DOM 对象、时间对象等特殊情况。不过也能应对日常开发的需求了，如果需要拷贝特殊对象再进行额外的考虑即可。
+
+### `JSON`
+
+使用 `JSON.stringify()` 和 `JSON.parse()` 方法实现深拷贝。
+
+这种方法简单方便，但无法正确拷贝 JS 特有的数据类型，如 `undefined`、JS 方法、`Symbol`、`Infinity`、`NaN`。
+
+### `lodash`
+
+使用 `lodash` 的 `cloneDeep()` 方法。
+
+日常开发最佳解决方案，使用成熟的解决方案。缺点是需要额外引入第三方库。
+
+### `MessageChannel`
+
+一种比较少见的方式，利用 `MessageChannel` 消息通道接口。
+
+```js
+function deepClone(obj) {
+  return new Promise((resolve) => {
+    const { port1, port2 } = new MessageChannel();
+    // port1 端口监听消息
+    port2.onmessage = event => resolve(event.data);
+    // port2 发送消息，会自动把 obj 进行深拷贝，port1 收到的就是拷贝好的对象
+    port1.postMessage(obj);
+  });
+}
+
+const obj = {};
+const res = await deepClone(obj);
+```
+
+该方法好处是可以拷贝 `undefined` 和循环引用对象，但是不能拷贝 `Symbol类型数据`、方法对象，并且是异步的，使用起来要多写点代码。
+
+:::details 结构化克隆算法
+`postMessage` 发送的数据 `message` 将会被结构化克隆算法 (en-US) 序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。
+
+结构化克隆算法用于复制复杂 JavaScript 对象的算法。通过来自 `Worker` 的 `postMessage()` 或使用 `IndexedDB` 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以**避免无限遍历循环**。
+:::
+
+:::details 结构化克隆不能做到的
+- `Function` 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 `DATA_CLONE_ERR` 的异常。
+- 企图去克隆 DOM 节点同样会抛出 `DATA_CLONE_ERR` 异常。
+- 对象的某些特定参数也不会被保留
+  - `RegExp` 对象的 `lastIndex` 字段不会被保留
+  - 属性描述符，`setters` 以及 `getters`（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 `read-only`，它将会被复制为 `read-write`，因为这是默认的情况下。
+  - 原形链上的属性也不会被追踪以及复制。
+:::
+
+相关链接：
+
+[MDN MessageChannel](https://developer.mozilla.org/zh-CN/docs/Web/API/MessageChannel){link=card}
+
+[MDN postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage){link=card}
+
+[MDN 结构化克隆算法](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Structured_clone_algorithm){link=card}
+
+## 求数组最值
+
+取出数组的最大值或最小值，以取出最大值为例。
+
+### 遍历比较
+
+最原始，同时也是兼容性最好的方式。
+
+```js
+function getMax(arr) {
+  let res = -Infinity;
+  for(let i = 0;i < arr.length;i++) {
+    res = arr[i] > res ? arr[i] : res;
+  }
+  return res;
+}
+```
+
+### `reduce` 方法
+
+通过遍历数组最终得到一个值，可以考虑 `reduce` 方法。
+
+```js
+function getMax(arr) {
+  return arr.reduce((pre, cur) => cur > pre ? cur : pre)
+}
+
+function getMax(arr) {
+  return arr.reduce((pre, cur) => Math.max(pre, cur))
+}
+```
+
+[MDN reduce](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce){link=card}
+
+### 排序
+
+给数组排序好，那么最大值就是数组第一个或最后一个元素。
+
+```js
+function getMax(arr) {
+  // 数组降序排序，首个元素即为最大值
+  arr.sort((a, b) => b - a);
+  return arr[0];
+}
+```
+
+### `Math.max()` 方法
+
+使用 JS 提供的 `Math.max()` 方法，可以方便求出数组的最大值。
+
+其实准确来说，该方法是返回传入参数的最大值。如果要使用它求出数组的最大值，需要将数组转换成**逗号分隔的参数序列**，否则会把数组整体当作一个参数看待。
+
+```js
+Math.max(3,2,4,1); // 4
+```
+#### 数组转为参数序列
+
+下面讨论如何把数组转换成参数序列，作为 `Math.max()` 的正确入参。
+
+1. `Function.prototype.apply()`
+
+`apply()` 方法可以把数组转成参数序列传递给调用函数。
+
+```js
+function getMax(arr) {
+  return Math.max.apply(null, arr);
+}
+```
+
+2. ES6 扩展运算符
+
+```js
+function getMax(arr) {
+  return Math.max(...arr);
+}
+```
+
+:::warning 注意事项
+如果数组元素太多，扩展运算符和 `apply()` 方法可能会得到错误的结果，这是因为 JS 引擎存在参数长度的上限，参数数量太多会出现问题。
+:::
+
+:::details MDN 文档说明
+注意：如果按上面方式调用 `apply`，有超出 JavaScript 引擎参数长度上限的风险。一个方法传入过多参数（比如一万个）时的后果在不同 JavaScript 引擎中表现不同。（JavaScriptCore 引擎中有被硬编码的参数个数上限：65536）。
+
+这是因为此限制（实际上也是任何用到超大栈空间的行为的自然表现）是不明确的。一些引擎会抛出异常，更糟糕的是其他引擎会直接限制传入到方法的参数个数，导致参数丢失。比如：假设某个引擎的方法参数上限为 4（实际上限当然要高得多），这种情况下，上面的代码执行后，真正被传递到 `apply` 的参数为 `5, 6, 2, 3`，而不是完整的数组。
+:::
+
+[MDN max](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/max){link=card}
+
+3. `eval()` 方法
+
+```js
+function getMax(arr) {
+  return eval('Math.max(' + arr + ')');
+}
+```
+
+`eval()` 方法的原理是发生了隐式类型转换，它会调用数组的 `toString()` 方法将其转换为字符串，就变成了参数序列。如 `[1,2,3] => "1,2,3"`。
+
+但是呢，如果数组里面混入了一些蛇皮牛马，比如说对象、空数组、`null`、`undefined`，就可能会大红大紫地报错了。
+
+为什么说**可能**呢，得看数组元素数量和具体的特殊值。只要看看这个数组调用 `toString()` 后的返回值即可知道是否会报错。
+
+```js
+[null, undefined, [], {}].toString(); // ',,,[object Object]'
+[null, undefined].toString(); // ','
+[null].toString(); // ''
+```
+
+空数组、`null`、`undefined` 转换后会变成空串，如果数组只包含一个这种元素，得到的结果也是空串，不会报错。如果是多个，就会出现逗号，此时会报 `Unexpected token ','` 的错误。
+
+同理，对象就更是这样了，对象会转成 `[object Object]` 字符串，更加不行，会出现 `Unexpected identifier 'Object'` 的错误。
+
+
+#### 注意事项
+
+`Math.max()` 注意事项：
+
+1. 如果没有参数，返回 `-Infinity`。
+
+```js
+Math.max(); // -Infinity
+```
+
+2. 如果其中一个参数无法转为数值，返回 `NaN`。
+
+```js
+Math.max('max', 1); // NaN
+Math.max(-1, []); // 0
+Math.max(5, [6]); // 6
+Math.max(5, ['6']); //6
+Math.max(5, [6, 1]); // NaN
+Math.max(1, Symbol()) // Cannot convert a Symbol value to a number
+```
+
+:::tip 判断一个值是否可转为数值
+要判断一个值是否可转为数值，使用 `Number()` 看看结果对不对即可。
+
+常见的像非纯数字字符串(如 `123n`)、对象`{}`、函数、包含两个及以上元素的数组、只包含一个元素且该元素无法转成数值的数组(如 `['66n']`)。
+
+特殊地，如果尝试转换 `Symbol` 类型值，会报错。
+:::
+
+3. 不要试图 `new Math()`。
+
+`Math` 不是构造函数，不能 `new` 创建实例，会报错。
+
+直接 `Math.max()` 使用，`max()` 是 `Math` 的静态方法。
+
+```js
+var n = new Math(); // Math is not a constructor
+```
\ No newline at end of file
diff --git a/docs/fe/js/images/stringify_no.png b/docs/fe/js/images/stringify_no.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef5576a3c0fa61ba4f16a0cff1d2d5f29faa2184
Binary files /dev/null and b/docs/fe/js/images/stringify_no.png differ
diff --git a/docs/fe/sidebar.js b/docs/fe/sidebar.js
index b836bed0d1dbe84dcc6250ea280402564b2d114f..4c9497558db8d4a75bf8bb01f9c2e460a10f4e6b 100644
--- a/docs/fe/sidebar.js
+++ b/docs/fe/sidebar.js
@@ -68,6 +68,8 @@ export default [
       { text: 'Webpack', link: '/fe/webpack/webpack_basis' },
       { text: 'Vscode', link: '/fe/ide/vscode' },
       { text: 'Vuepress', link: '/fe/vuepress/vuepress' },
+      { text: 'Vitepress', link: '/fe/vuepress/vitepress' },
+      { text: '前端编程题', link: '/fe/js/coding_problem' },
     ]
   },
 ]
\ No newline at end of file
diff --git a/docs/fe/vuepress/images/dev_error.png b/docs/fe/vuepress/images/dev_error.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fb3704cdcd40f8fa351fc0943596058e2792a45
Binary files /dev/null and b/docs/fe/vuepress/images/dev_error.png differ
diff --git a/docs/fe/vuepress/vitepress.md b/docs/fe/vuepress/vitepress.md
new file mode 100644
index 0000000000000000000000000000000000000000..a6bf58502c7c0ea1f49b8085964b142821732606
--- /dev/null
+++ b/docs/fe/vuepress/vitepress.md
@@ -0,0 +1,11 @@
+# vitepress 踩坑记录
+
+## 运行报错
+
+运行 `npm run dev` 或 `npm run build` 报 `UnhandledPromiseRejectionWarning: Unhandled promise rejection` 错误。
+
+![UnhandledPromiseRejectionWarning: Unhandled promise rejection](./images/dev_error.png)
+
+原因：node 版本太低，是 vitepress 最低 node 版本是 16，我使用了 12 版本的。
+
+解决方法：使用 nvm 切换 node 版本。
\ No newline at end of file
diff --git a/docs/magazine/images/weekly2023/advice13.png b/docs/magazine/images/weekly2023/advice13.png
new file mode 100644
index 0000000000000000000000000000000000000000..107d96883d1139404931af5f2798dfb0522e1c59
Binary files /dev/null and b/docs/magazine/images/weekly2023/advice13.png differ
diff --git a/docs/magazine/personal_growth.md b/docs/magazine/personal_growth.md
new file mode 100644
index 0000000000000000000000000000000000000000..1b45b66c31b93ae320f884c9ab695dcd542b045b
--- /dev/null
+++ b/docs/magazine/personal_growth.md
@@ -0,0 +1,63 @@
+# 个人成长
+
+## 言论
+
+1、毕业出来工作前三年，不要过于看重薪资之类的东西，首要任务是**夯实自己的技术基础**。
+
+2、要**在某个细分领域研究得有深度**，这体现的是你的学习研究能力，以及对技术的热情。如果有需要，别人也会相信你能够在新的领域也可以快速成长。
+
+3、学习知识，既要有广度，也要在某个细分点有深度。
+
+4、**万不得已，不要去外包公司**。大部分面试官其实对外包是抱有歧视与偏见的。
+
+5、如果可以，尽量去大公司镀镀金，如 BAT。既可以促进个人成长开阔视野，也能积累优质人脉资源，同时，有大厂资历的人，未来如果要去一些小公司的管理岗也相对更有优势。
+
+6、不要闭塞在技术世界里，有机会**多和不同行业的人交流学习，多去看看外面的世界**，看看社会时代的热点和发展趋势。这有利于打开自己的格局，未来的转行。
+
+7、搞搞副业也是很好的，很多打工人可能是某家公司的老板。自己的能力管不住名校高材生，但管一群文化水平比自己低的人还是可以的。
+
+8、对于 35 岁的坎，不必过于焦虑。
+
+- 提高自己的技术竞争力，社会淘汰的，始终是那些学艺不精的人；
+- 锻炼除技术外的能力，如管理能力，去管理层；
+- 去小公司，降低期望还是可以找到工作的；
+- 回去二三线城市或者老家，开个店、搞搞副业，未尝不是一条道路；
+- 考公务员；
+
+**不要把自己局限得太死**。
+
+9、每去一家公司，都想想自己想在这家公司获取学习什么，每一次跳槽除了薪资还有其它东西是你想要得到、提高的。比如如果想提高自己的管理沟通能力，可以申请多给自己机会做组长、项目经理等管理岗位。
+
+## 项目管理
+
+### 优秀项目评选的点
+
+- 哪些事情地方可以提现出我们是一个 team，团队协作。
+
+- 项目中最大的收获，可以应用到后续工作的东西。
+
+- **目标要明确清晰，不需要很宏大的东西**。
+
+- 具体的工作安排表，要有**具体的东西可以给别人感知**，或者具体的过程举几个例子。
+
+- 项目的创新点，**每个需求不会是简单的重复**，肯定有不一样的地方，**不一定要多么复杂高大上的创新点，一个细微之处的创新即可**。
+
+- 项目的难点，有困难就要有解决方法，说出是怎么解决的。
+
+- 要有总结思考，回顾反思。从项目中反思有哪些东西以后需要做的、加强的（比如系统初始化资源太多太杂，需要整理一份文档，加快初始化资源创建速度），哪些是可以保持再接再厉的。
+
+## 《左耳听风》
+
+### 技术变现
+
+- 从事编程这个事可以做到，完全靠自己的手艺，不依赖任何人或公司去生活。
+
+- 我完全没有必要通过打工听人安排而活着，而是反过来通过在公司工作提高自己的技能，让自己可以更为独立和自由地生活。
+
+- 对工作中没有技术含量的活，想尽办法提高效率，比如提高代码重用度、自动化、简化掉需求，少干一些活。**这样就有更多时间去研究公司内外更为核心更有技术含量的技术**。
+
+- 要去经历大多数人经历不到的，要把学习时间花在那些比较难的地方。
+
+- 要写文章就要写没有人写过的，或是别人写过，但我能写得更好的。
+
+- 我们可能都是在写一样的 `for(int i=0; i<n; i++)` 语句，但是，你写在那个地方一文不值，而我写在这个地方，这行代码就值 2000 元。
diff --git a/docs/magazine/sidebar.js b/docs/magazine/sidebar.js
index 1d312ed49e489db7e82371a94914e329300b0600..eb3cefef7c018d17608f72cdd05f99c88eac4155 100644
--- a/docs/magazine/sidebar.js
+++ b/docs/magazine/sidebar.js
@@ -1,10 +1,11 @@
 export default [
   {
-    text: '周录记',
+    text: '随笔杂谈',
     collapsed: true,
     items: [
       { text: '2023周录记', link: '/magazine/weekly2023' },
       { text: '我的博文', link: '/magazine/blog_essay' },
+      { text: '个人成长', link: '/magazine/personal_growth' },
     ]
   }
 ]
\ No newline at end of file
diff --git a/docs/magazine/weekly2023.md b/docs/magazine/weekly2023.md
index 6ead943d97be67db91d18b02abc5ad2ca1500c09..ef19916b624494bdfc5d02eb5cf087680e72a0ae 100644
--- a/docs/magazine/weekly2023.md
+++ b/docs/magazine/weekly2023.md
@@ -171,3 +171,140 @@ git 回退到指定版本的两种方法：`git reset` 和 `git revert`。
 冴羽大佬写的系列博客，包括 JavaScript 深入系列、JavaScript 专题系列、underscore 系列、ES6 系列等等，写得十分清晰详实。
 
 [冴羽系列博客](https://github.com/mqyqingfeng/Blog){link=card}
+
+## 0522-0528
+
+### 文章
+
+1、小程序页面栈溢出报错 `navigateTo fail page limit exceeded`
+
+小程序页面栈最多十层，反复使用 `navigateTo` 跳转页面，压入页面栈，会导致报错。
+
+[小程序页面跳转，页面栈提示”navigateTo fail page limit exceeded“错误，解决办法](https://blog.csdn.net/qq_35310623/article/details/108082712){link=card}
+
+2、`rpx` 和 `px` 单位的区别
+
+`px` 是固定单位，`1px` 就是 1 像素；`rpx` 是自适应单位，根据屏幕的实际尺寸变化，`1rpx` 可能等于不同的像素。
+
+[微信小程序中 rpx 和 px 的区别？](https://blog.csdn.net/weixin_43356308/article/details/115081242){link=card}
+
+3、`!.` 是什么意思？
+
+`!.` 是 TS 中的语法，称为非空断言操作符。它和 JS 的可选链操作符 `?.` 完全没有关系。
+
+`!.` 是告诉 TS，这个值我保证不为空，TS 你可以不用进行检查。
+
+因此，不建议使用 `!.`，因为实际上你并不能保证值不为空。
+
+[Non-null Assertion Operator (Postfix!)](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-){link=card}
+
+[js 中‘!.’是什么意思？](https://www.zhihu.com/question/459179143){link=card}
+
+4、何为 Docker？
+
+文章介绍了 Docker 的基本知识，比较通俗易懂。
+
+Docker 其实是一个容器。容器：搭建一套给程序运行的环境。只隔离应用程序运行时环境，共享操作系统。与虚拟机相比，更轻量级、占用资源更少。
+
+[什么是 Docker？看这一篇干货文章就够了！](https://zhuanlan.zhihu.com/p/187505981){link=card}
+
+5、SSH 登录 GitHub 报错 `Connection to xxx port 22: ...`
+
+:::danger 最近使用 ssh 登录 GitHub 时报错
+kex_exchange_identification: read: Software caused connection abort
+
+banner exchange: Connection to xxx port 22: Software caused connection abort
+
+fatal: Could not read from remote repository.
+
+Please make sure you have the correct access rights and the repository exists.
+:::
+
+修改 ssh 的默认端口为 443 即可。
+
+[坑：ssh: connect to host github.com port 22: Connection refused](https://zhuanlan.zhihu.com/p/521340971){link=card}
+
+## 0529-0604
+
+1、日常开发提升技术的 13 条建议
+
+文章总结了平常开发过程当中 13 条提升自我技术的建议，小处着手，实用。
+
+![日常开发提升技术的 13 条建议](./images/weekly2023/advice13.png)
+
+[我差点把同事卷跑了。。。](https://mp.weixin.qq.com/s/JQo9inrZ6eoBazDnxvkD8A){link=card}
+
+2、nvm 的安装与基本使用
+
+nvm 是管理 node 版本的快捷工具，使用它可以十分方便地切换 node 版本。
+
+文章详细介绍了 nvm 的安装步骤与常用命令的使用。
+
+```bash
+nvm list     // 查看已安装的 node 版本
+nvm install <version>       // 安装某个版本的 node，如：nvm install 12.22.22
+nvm use <version>      // 使用某一版本的 node
+nvm uninstall <version>   // 卸载指定版本的 node
+```
+
+[nvm 详细安装步骤以及使用（window10 系统）](https://blog.csdn.net/Anony_me/article/details/124153201){link=card}
+
+3、运行 `nvm use xxx` 命令报权限不足
+
+使用管理员身份运行 cmd 即可。
+
+[nvm use 报错：You do not have sufficient privilege to perform this operation](https://blog.csdn.net/JudyC/article/details/121702250){link=card}
+
+4、标准普尔家庭资产配置图
+
+标准普尔家庭资产配置图是世界公认最合理的适合多数家庭的资产分配方式，可以参考学习，来对自己的资产进行配置。
+
+需要注意几点：
+
+- 该资产配置图是一个参考，每个人的实际情况都不同，需要灵活变通
+- 此处的 10% 之类的百分比，基数是资产，而非收入。
+- 每隔一段时间，需要进行资产的再配置。例如每隔半年时间，需对资产重新进行配置，这时候增加了半年的工资，这半年的收入也成为了资产的一部分。
+
+[读懂“标准普尔家庭资产配置图”](https://zhuanlan.zhihu.com/p/357228526){link=card}
+
+## 1030-1105
+
+1、Taro 的 `Image` 图片组件宽高自适应
+
+微信小程序给图片的宽高设置了固定值，因此无法通过设置 CSS 属性来实现宽高自适应。
+
+使用 `Image` 的 `mode` 属性，设置为 `widthFix` 即可宽度不变，高度自适应。
+
+```jsx
+<Image src={imagePath} mode="widthFix" onClick={() => this.bigImage(imagePath)} />
+```
+
+[微信小程序——image 图片组件宽高自适应方法](https://blog.csdn.net/weixin_42326144/article/details/104817585){link=card}
+
+[image 属性说明](https://developers.weixin.qq.com/miniprogram/dev/component/image.html){link=card}
+
+2、Taro 全屏预览图片
+
+`Taro.previewImage()` 方法，传入 `urls` 和 `current` 参数，分别是图片链接列表、当前预览的图片链接。
+
+```js
+bigImage = (url) => {
+  const { imageSrcs } = this.state
+  Taro.previewImage({
+    current: url, // 当前显示图片的http链接
+    urls: imageSrcs, // 需要预览的所有图片http链接列表
+  })
+}
+```
+
+[Taro.previewImage](https://taro-docs.jd.com/docs/apis/media/image/previewImage){link=card}
+
+## 1112-1231
+
+1、QPS 为何物？
+
+QPS，Queries Per Second，每秒钟处理的请求数量。
+
+2000 万 QPS 的场景：春晚抢红包。
+
+[同事们天天谈论的 QPS、TPS、RT、吞吐量等词儿究竟是什么意思？](https://baijiahao.baidu.com/s?id=1764021596169092019){link=card}
diff --git a/docs/resources/navigation/data.js b/docs/resources/navigation/data.js
index 4c1d585c54819f52b8ac8e4fd4dc9d208751e2ca..fc8e0e69a1ed0db2c52caadf98e16c7df60f2371 100644
--- a/docs/resources/navigation/data.js
+++ b/docs/resources/navigation/data.js
@@ -243,6 +243,12 @@ export default [
   {
     title: 'JavaScript 库',
     items: [
+      {
+        icon: 'https://www.wangeditor.com/favicon.ico',
+        title: 'wangEditor',
+        desc: '开源 Web 富文本编辑器，开箱即用，配置简单',
+        link: 'https://www.wangeditor.com/'
+      },
       {
         icon: 'http://www.axios-js.com/icon/favicon-196x196.png',
         title: 'Axios',
@@ -382,6 +388,24 @@ export default [
         desc: '无所不有的在线工具箱，在线工具,开发人员工具,代码格式化、压缩、加密、解密...',
         link: 'https://tool.lu/'
       },
+      {
+        icon: 'https://onlineconvertfree.com/favicon.ico',
+        title: 'OnlineConvertFree',
+        desc: 'OnlineConvertFree 软件是在线免费转换软件， 能转换各种文件、视频、音频和照片等。',
+        link: 'https://onlineconvertfree.com/zh/'
+      },
+      {
+        icon: 'https://www.aconvert.com/favicon.ico',
+        title: 'Aconvert',
+        desc: '（好用免费）在线转换文档，图像，视频，音频文件格式',
+        link: 'https://www.aconvert.com/cn/'
+      },
+      {
+        icon: 'https://tinypng.com/images/favicon.ico',
+        title: 'TinyPng',
+        desc: '好用的在线图片压缩工具',
+        link: 'https://tinypng.com/'
+      },
     ]
   },
   {
@@ -405,6 +429,12 @@ export default [
         desc: '一个非常适合IT团队的在线API文档、技术文档工具',
         link: 'https://www.showdoc.com.cn/'
       },
+      {
+        icon: 'https://source.showdoc.com.cn/favicon.ico',
+        title: 'RunApi',
+        desc: 'runapi是一个以接口为核心的开发测试工具（功能上类似postman）, 包含接口测试/自动流程测试/Mock数据/项目协作等功能',
+        link: 'https://www.showdoc.com.cn/runapi/30291'
+      },
     ]
   },
   {
@@ -452,12 +482,6 @@ export default [
         desc: 'GitHub 小徽章制作网站',
         link: 'https://shields.io/'
       },
-      {
-        icon: 'https://onlineconvertfree.com/favicon.ico',
-        title: 'OnlineConvertFree',
-        desc: 'OnlineConvertFree 软件是在线免费转换软件， 能转换各种文件、视频、音频和照片等。',
-        link: 'https://onlineconvertfree.com/zh/'
-      },
     ]
   },
   {
@@ -512,6 +536,17 @@ export default [
       },
     ]
   },
+  {
+    title: '浏览器',
+    items: [
+      {
+        icon: 'https://chrome.zzzmh.cn/favicon.ico',
+        title: '极简插件',
+        desc: '不用翻墙的 Chrome 扩展插件商店，优质crx应用下载',
+        link: 'https://chrome.zzzmh.cn/#/index'
+      },
+    ]
+  },
   {
     title: '社区',
     items: [
diff --git a/docs/todoList.md b/docs/todoList.md
new file mode 100644
index 0000000000000000000000000000000000000000..d120c8bdb18df62759a242d3fa77a2c643cd8faa
--- /dev/null
+++ b/docs/todoList.md
@@ -0,0 +1,2 @@
+- vscode 插件、配置整理
+- 使用过的第三方库整理
\ No newline at end of file
diff --git a/docs/work/antd.md b/docs/work/antd.md
index e66c5b5381cdc569181e0c5f2fc0f7d7329b2e42..72148eb50e9550330e0e8c91213e06ec9ca32c6d 100644
--- a/docs/work/antd.md
+++ b/docs/work/antd.md
@@ -288,3 +288,58 @@ const initialValues = { color: 'yellow' }
 这种方法就是随便用户输入，在提交表单的时候再使用 `trim()` 方法去除前后空格。
 
 但是既然设置了这个规则，还是有必要让用户知道，给用户提示，因此综合下来第二种方法是比较推荐的解决办法。
+
+## `Form.Item` 如何包裹多个标签内容
+
+### 问题背景
+
+开发工作中遇到一个需求：需要在开关表单项后面增加一句文本内容，如下图所示。
+
+![开关后增加文本内容](./images/FormItemMulti.png)
+
+### 错误方法
+
+不能直接把文本内容直接放在 `Form.Item` 里面，否则后面提交表单时 `form.getFieldsValue()` 无法正确获取开关的值。
+
+```jsx
+// 始终只能取到初始值
+<Form.Item label="开关" name="isOpen" initialValue={false} valuePropName="checked">
+  <Switch />
+  <span>这是文本内容</span>
+</Form.Item>
+```
+
+后面又尝试把文本内容放在 `Form.Item` 后面，但样式始终存在问题，`Form.Item` 如果增加自定义样式，其样式会乱，比如表单标签被开关挡住了，总之也不行。
+
+### 解决方案
+
+经过高人支招，了解了`Form.Item` 表单项如果需要在表单后面增加额外的标签组件，需将整体封装为一个大的组件写在 `FormItem` 内，否则 `form` 表单无法获取到正确的表单值。
+
+```js
+const SwitchCom = (props) => {
+  const { value, type } = props
+
+  const handleChangeSwitch = (val) => {
+    form.setFieldsValue({ isOpen: val })
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Switch checked={value} onChange={(val) => handleChangeSwitch(val)} />
+      <span style={{ color: '#bfbfbf', marginLeft: '10px' }}>这是文本内容</span>
+    </div>
+  )
+}
+```
+
+```jsx
+<Form.Item label="开关" name="isOpen" initialValue={false}>
+  <SwitchCom type="good" />
+</Form.Item>
+```
+
+:::tip 注意事项
+1、需要给 `Switch` 的 `onChange` 事件绑定函数，开关改变时手动修改表单的 `isOpen` 值。
+
+2、`props` 里有表单的 `value` 值，若 `Form.Item` 设置了 `valuePropName` 就是对应的字符串，也可以传入自定义参数。
+:::
diff --git a/docs/work/editor.md b/docs/work/editor.md
new file mode 100644
index 0000000000000000000000000000000000000000..e3c89f04feaf132c89ab4dd47a7a24913bb0963c
--- /dev/null
+++ b/docs/work/editor.md
@@ -0,0 +1,249 @@
+# 富文本编辑器
+
+[wangEditor](https://www.wangeditor.com/){link=card}
+
+## 前言
+
+最近有一个需求，要做一个富文本编辑器，要有最基础的功能，比如字体样式加粗斜体、标题、字体颜色、插入图片等，同时还需要根据标题生成目录。
+
+像这种功能肯定不能自己造轮子，于是调研了一些第三方开源富文本编辑器，最初的技术选型是 [braft-editor](https://github.com/margox/braft-editor)。但在开发时发现用起来不简便，在有经验的前辈的推荐下最终选择了 [wangEditor](https://www.wangeditor.com/)，功能丰富，用法也更简易。
+
+![wangEditor](./images/editor/wang_editor.png)
+
+:::tip
+以下内容都基于 React 进行开发。
+:::
+
+## 安装
+
+```sh
+npm install @wangeditor/editor
+
+npm install @wangeditor/editor-for-react
+```
+
+## 基础用法
+
+```jsx
+import React, { useState, useEffect } from 'react'
+import { Editor, Toolbar } from '@wangeditor/editor-for-react'
+import '@wangeditor/editor/dist/css/style.css'
+
+function MyEditor() {
+  const [editor, setEditor] = useState(null)
+  // 编辑器内容
+  const [html, setHtml] = useState('<p>hello</p>')
+
+  // 工具栏配置
+  const toolbarConfig = {}
+
+  // 编辑器配置
+  const editorConfig = {
+    placeholder: '请输入内容...',
+  }
+
+  // 及时销毁 editor
+  useEffect(() => {
+    return () => {
+      if (editor == null) return
+      editor.destroy()
+      setEditor(null)
+    }
+  }, [editor])
+
+  return (
+    <>
+      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
+        <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }} />
+        <Editor defaultConfig={editorConfig} value={html} onCreated={setEditor} onChange={(editor) => setHtml(editor.getHtml())} mode="default" style={{ height: '500px', overflowY: 'hidden' }} />
+      </div>
+      <div style={{ marginTop: '15px' }}>{html}</div>
+    </>
+  )
+}
+
+export default MyEditor
+```
+
+## 工具栏配置
+该富文本编辑器提供的功能太丰富了，实际上用不着那么多，而且有些特殊样式的回显存在问题，例如表格，因此需要隐藏工具栏某些工具菜单，不提供相关功能。
+
+### `getConfig()` 获取工具栏配置
+
+```js
+import { DomEditor } from '@wangeditor/editor'
+const toolbar = DomEditor.getToolbar(editor)
+const curToolbarConfig = toolbar.getConfig()
+console.log(curToolbarConfig.toolbarKeys) // 菜单的key顺序和分组
+```
+`curToolbarConfig.toolbarKeys` 的内容如下。
+
+![toolbarKeys](./images/editor/toolbarkeys.png)
+
+
+### `excludeKeys` 排除某些菜单
+如果仅仅想排除掉某些菜单，其他都保留，可以使用 `excludeKeys` 来配置。
+
+写菜单的 key 值即可，菜单 key 通过 `toolbarKeys` 获取查看。
+
+```js
+if (curToolbarConfig) {
+  curToolbarConfig.excludeKeys = [
+    'emotion', // 表情
+    'insertTable', // 插入表格
+    'insertImage', // 网络图片
+  ];
+}
+```
+
+可以看到，表情、插入表格、网络图片等菜单都隐藏了。
+
+![excludeKeys](./images/editor/excludeKeys.png)
+
+### 完整代码
+
+```js
+useEffect(() => {
+  if (editor) {
+    const toolbar = DomEditor.getToolbar(editor);
+    const curToolbarConfig = toolbar?.getConfig();
+    if (curToolbarConfig) {
+      curToolbarConfig.excludeKeys = [
+        'emotion',
+        'insertTable',
+        'insertImage',
+      ];
+    }
+  }
+
+  return () => {
+    if (editor === null) return;
+    editor.destroy();
+    setEditor(null);
+  };
+}, [editor]);
+```
+
+## 图片自定义上传与回显
+
+一般情况下，上传图片的时候就需要将图片存到后端，因此需调用后端接口。
+
+可使用编辑器提供的 `customUpload` 方法自定义上传图片，在上传图片时调用接口存储图片，同时将图片插入到编辑器里。
+
+```jsx
+import React, { useState, useEffect } from 'react'
+import { Editor, Toolbar } from '@wangeditor/editor-for-react'
+import '@wangeditor/editor/dist/css/style.css'
+
+function MyEditor() {
+  const [editor, setEditor] = useState(null)
+  // 编辑器内容
+  const [html, setHtml] = useState('<p>hello</p>')
+
+  // 工具栏配置
+  const toolbarConfig = {}
+
+  // 编辑器配置
+  const editorConfig = {
+    placeholder: '请输入内容...',
+    MENU_CONF: {},
+  }
+  editorConfig.MENU_CONF.uploadImage = {
+    async customUpload(file, insertFn) {
+      const formData = new FormData();
+      formData.append('file', file);
+      const id = await xxx(formData);
+      const url = window.URL.createObjectURL(file);
+      const href = id;
+      const alt = id;
+      // 插入图片
+      insertFn(url, alt, href);
+    },
+  };
+
+  // 及时销毁 editor
+  useEffect(() => {
+    return () => {
+      if (editor == null) return
+      editor.destroy()
+      setEditor(null)
+    }
+  }, [editor])
+
+  return (
+    <>
+      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
+        <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }} />
+        <Editor defaultConfig={editorConfig} value={html} onCreated={setEditor} onChange={(editor) => setHtml(editor.getHtml())} mode="default" style={{ height: '500px', overflowY: 'hidden' }} />
+      </div>
+      <div style={{ marginTop: '15px' }}>{html}</div>
+    </>
+  )
+}
+
+export default MyEditor
+```
+
+:::tip 注意事项
+`insertFn(url, alt, href)` 三个参数分别对应 `<img>` 标签的 `src`、`alt`、`data-href` 属性，其中 `data-href` 是 wangEditor 为图片标签自定义的属性。
+:::
+
+![img](./images/editor/wang_img.png)
+
+## 文章图片回显
+
+图片成功自定义上传后，就会面临下一个问题：如何回显文章图片。
+
+文章编辑完成保存后，一般情况下我们会调用后端接口，将编辑器生成的 HTML 文本存储到后端。而文章的回显，就是把后端返回的 HTML 文本展示到编辑器里。
+
+### 文章内容回显
+
+若不考虑图片的回显，仅仅是文章文本内容的回显，操作非常简单，将返回的 HTML 文本设置到编辑器内容里即可。
+
+```js
+const getDocumentDetail = useCallback(async () => {
+  try {
+    const docContent = await api({ id });
+    setHtml(docContent);
+  } catch (err) {
+    console.log(err);
+  }
+}, []);
+```
+
+### 图片链接替换
+
+上传图片时，由于我们可以获得上传的文件的 `file` 对象，因此利用 `window.URL.createObjectURL` 方法即可直接生成本地的 `blob` 地址链接进行图片的展示。
+
+但，在回显文章内容时，保存的 `blob` 链接已经不可再用。
+
+因此，需要根据保存在 `<img>` 标签里的 `data-href` 属性的图片 id 拼接出一个正确的图片地址，这个图片地址如何生成，需要后端接口配合。
+
+再利用正则表达式，**将其 `<img>` 标签的 `src` 属性替换为可使用的图片地址**，即可正确展示图片。
+
+```js
+const replaceImgReg = /<img.*?data-href="(.*?)".*?>/g;
+
+const getPicUrl = (id) => {
+  // 根据后端提供的接口拼成可展示的图片链接
+  return `https://pic/${id}`;
+};
+
+const getDocumentDetail = useCallback(async () => {
+  try {
+    const docContent = await api({ id });
+
+    if (docContent) {
+      const content = docContent.replace(
+          replaceImgReg,
+          (_, picId) => `<img src="${getPicUrl(picId)}" alt="${picId}" data-href="${picId}"/>`
+        );
+      setHtml(content);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}, []);
+```
+
+## 目录生成
diff --git a/docs/work/images/FormItemMulti.png b/docs/work/images/FormItemMulti.png
new file mode 100644
index 0000000000000000000000000000000000000000..8717db9ed179f35c8d5dc4f72890d6946914a724
Binary files /dev/null and b/docs/work/images/FormItemMulti.png differ
diff --git a/docs/work/images/editor/excludeKeys.png b/docs/work/images/editor/excludeKeys.png
new file mode 100644
index 0000000000000000000000000000000000000000..8db6ac430d21a09c19b237970d1c020f9cb03955
Binary files /dev/null and b/docs/work/images/editor/excludeKeys.png differ
diff --git a/docs/work/images/editor/toolbarkeys.png b/docs/work/images/editor/toolbarkeys.png
new file mode 100644
index 0000000000000000000000000000000000000000..03b07e4d7ee3052f29506e0aa253b1d0e0cf4cd1
Binary files /dev/null and b/docs/work/images/editor/toolbarkeys.png differ
diff --git a/docs/work/images/editor/wang_editor.png b/docs/work/images/editor/wang_editor.png
new file mode 100644
index 0000000000000000000000000000000000000000..06b36936cf41d94ae7a2c1a10e7481d01618c6eb
Binary files /dev/null and b/docs/work/images/editor/wang_editor.png differ
diff --git a/docs/work/images/editor/wang_img.png b/docs/work/images/editor/wang_img.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a6643658dde781b83e361ac32cae762bc727056
Binary files /dev/null and b/docs/work/images/editor/wang_img.png differ
diff --git a/docs/work/sidebar.js b/docs/work/sidebar.js
index 697b9c5d4c8d78a4421b844cfe62a16203016ba9..107a7496a34e452635854f93119e9fb70e9c131c 100644
--- a/docs/work/sidebar.js
+++ b/docs/work/sidebar.js
@@ -4,6 +4,7 @@ export default [
     collapsed: true,
     items: [
       { text: '那些年, Antd 坑我的地方', link: '/work/antd' },
+      { text: '富文本编辑器', link: '/work/editor' },
       { text: '第三方工具', link: '/work/tools' },
     ]
   },
@@ -11,7 +12,8 @@ export default [
     text: '地图开发',
     collapsed: true,
     items: [
-      { text: '微信小程序地图开发教程', link: '/work/maps/wx_map' },
+      { text: '小程序开发之坑', link: '/work/wx/wx_points' },
+      { text: '微信小程序地图开发教程', link: '/work/wx/wx_map' },
     ]
   },
 ]
\ No newline at end of file
diff --git a/docs/work/maps/wx_map.md b/docs/work/wx/wx_map.md
similarity index 76%
rename from docs/work/maps/wx_map.md
rename to docs/work/wx/wx_map.md
index fceea65b0ea7cec4a7fa5f2daddab0abeea012f1..2d2847554b4207fee64c93ff0fa9a3d71337b5c2 100644
--- a/docs/work/maps/wx_map.md
+++ b/docs/work/wx/wx_map.md
@@ -12,7 +12,9 @@
 [Taro Map 实例方法](https://taro-docs.jd.com/docs/apis/media/map/MapContext){link=card}
 [微信官方文档 map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html){link=card}
 
-## 创建地图
+## 常见用法
+
+### 创建地图
 
 引入 `Map` 组件，再像普通组件使用即可。可以添加很多属性，各个属性的作用详见 [Taro 文档](https://taro-docs.jd.com/docs/components/maps/map)。
 
@@ -26,7 +28,7 @@ class TaroMap extends Component {
 }
 ```
 
-## 在地图画标记点
+### 在地图画标记点
 
 通过设置 `Map` 组件的 `markers` 属性，在地图上设置标记点。
 
@@ -69,7 +71,7 @@ class TaroMap extends Component {
 }
 ```
 
-## 在地图画圆圈
+### 在地图画圆圈
 
 通过设置 `Map` 组件的 `circles` 属性，在地图上画圈。
 
@@ -101,7 +103,7 @@ class TaroMap extends Component {
 }
 ```
 
-## 初始化地图中心为当前位置，并画圈
+### 初始化地图中心为当前位置，并画圈
 
 大部分地图都会在进入页面时把中心移动到当前位置，同时会以当前位置为中心画一个圆圈。
 
@@ -147,7 +149,7 @@ class TaroMap extends Component {
 }
 ```
 
-## 始终固定图标在地图中心
+### 始终固定图标在地图中心
 
 平时常见的地图，往往都会有一个图标固定在地图的中心，并且无论如何拖动地图，位置都始终不变。
 
@@ -195,7 +197,7 @@ class TaroMap extends Component {
 }
 ```
 
-## 返回当前位置
+### 返回当前位置
 
 点击返回图标，让地图回到当前位置，几乎是每个地图都必备的功能。而这个功能实现起来其实非常简单。
 
@@ -209,7 +211,7 @@ handleBackCurrenLocation = () => {
 }
 ```
 
-## 地图拖动展示不同的标记点
+### 地图拖动展示不同的标记点
 
 由于地图上的标记点可能会非常多，所以一般都不会一口气把所有的点都画到地图上，而是展示地图中心某个范围之内的点。
 
@@ -250,3 +252,43 @@ class TaroMap extends Component {
   }
 }
 ```
+
+
+### 地图设置圆角
+
+微信小地图比较坑，直接给 `Map` 组件设置 `border-radius` 属性是无法生效的，并没有圆角。
+
+需要在外层套一个 `View`，并且设置地图的大小略大于外层盒子，再给外层盒子设置溢出隐藏。
+
+IOS 地图圆角不生效，还需要加上 `transform: 'translateY(0)'`。
+
+```jsx
+<View 
+  style={{
+    width: '100%', 
+    height: '290rpx', 
+    borderRadius: '10px', 
+    overflow: 'hidden', 
+    transform: 'translateY(0)'
+  }}
+>
+  <Map
+    style={{ width: '100%', height: '330rpx' }}
+    className="map"
+    circles={circles}
+    longitude={longitude}
+    latitude={latitude}
+    showLocation
+  />
+</View>
+```
+
+[map地图组件设置圆角](https://developers.weixin.qq.com/community/develop/doc/000088de32c6d80c00e7444895ac00){link=card}
+
+## 一些坑点
+
+- 使用 `circles` 属性画圆圈，**颜色只能使用十六进制写法**，否则在手机预览会不生效。`rgba` 的颜色写法只在微信开发者工具上生效，手机不生效。
+- 使用 `Taro.moveToLocation` 将地图中心移动到当前位置，在手机预览会出现问题。第一次进地图可以正常移动，但是退出地图再进入就无法移动到当前位置。可以通过设置 `<Map>` 的 `longitude` 和 `latitude` 属性来设置地图的初始中心位置。
+- 目前小程序地图已经支持同层渲染，不需要再使用 `controls`、`cover-view`，直接使用普通的 `view` 视图组件即可，默认会在地图上方。
+- 图标 `markers` 的 `id` 如果数字太大，会转换错误，即使手动使用 `Number()` 也会错误。**无法通过 `onMarkerTap` 事件获取到正确的 `id`**。只能寻找其他小数字且唯一的值。
+- 手机预览的情况下，`markers` 无法正确显示 `svg` 图片，需要使用 `png` 图片。
\ No newline at end of file
diff --git a/docs/work/wx/wx_points.md b/docs/work/wx/wx_points.md
new file mode 100644
index 0000000000000000000000000000000000000000..dfe2a8796f22881af3cb2f6c4ba22e8ab0b3b561
--- /dev/null
+++ b/docs/work/wx/wx_points.md
@@ -0,0 +1,92 @@
+# 小程序开发的坑
+
+## 图片组件宽高自适应
+
+接到一个需求，需要在小程序中展示图片，自然而然需要使用到 Image 图片组件。由于项目使用的是Taro，因此使用的是Taro的 `Image` 图片组件。
+
+### 错误方法
+
+产品要求的是宽度 100% 屏幕宽度，高度自适应。如果是浏览器，给图片设置 `width: 100%`，那么高度就会自适应了。然而实际上小程序不会。
+
+```jsx
+import { Image } from '@tarojs/components';
+import './index.scss';
+
+<Image
+  src={imageUrl}
+  className="photo"
+/>
+```
+
+```scss
+.photo {
+  width: 100%;
+}
+```
+实际效果是，宽度铺满了屏幕，但高度始终是固定的。这就造成了图片的变形。
+
+后来尝试过给图片设置 `object-fit: contain` 属性，依然不奏效。
+
+### 问题根源
+
+查看页面元素，发现小程序为 image 标签设置了如下属性。
+
+```css
+image {
+  display: inline-block;
+  height: 240px;
+  width: 320px;
+  overflow: hidden;
+}
+```
+
+这导致了高度无法自适应的问题，但是也不能设置图片高度，因为每张图片的宽高也不一样。
+
+### 解决方法
+
+通过查阅 Taro 和微信小程序官方文档，发现 Image 组件提供了 mode 属性可设置图片裁剪、缩放模式。
+
+其中，将 mode 属性设置为 `widthFix` 即可实现需要的效果，宽度固定，高度自适应。
+
+```jsx
+<Image
+  src={imageUrl}
+  className="photo"
+  mode="widthFix"
+/>
+```
+
+折腾半天，这么一个属性就解决了。
+
+:::warning 教训
+遇到问题积极查资料、看文档。
+:::
+
+### 相关链接
+
+[微信小程序——image图片组件宽高自适应方法](https://blog.csdn.net/weixin_42326144/article/details/104817585){link=card}
+
+[image 属性说明](https://developers.weixin.qq.com/miniprogram/dev/component/image.html){link=card}
+
+## 点击全屏预览图片
+
+使用 `Taro.previewImage()` 方法，传入 `urls` 和 `current` 参数，分别是图片链接列表、当前预览的图片链接。
+
+```js
+bigImage = (url) => {
+  const { imageSrcs } = this.state;
+  Taro.previewImage({
+    current: url, // 当前显示图片的http链接
+    urls: imageSrcs // 需要预览的所有图片http链接列表
+  });
+};
+
+<Image
+  src={imageUrl}
+  className="photo"
+  mode="widthFix"
+  onClick={(imageUrl) => this.bigImage(imageUrl)}
+/>
+```
+
+[Taro.previewImage](https://taro-docs.jd.com/docs/apis/media/image/previewImage){link=card}
\ No newline at end of file
diff --git a/push.sh b/push.sh
index 30b8590b1453712f9885c5b3e358ac8c009985f9..55fa7faaa5dadc2ca33a8bf70470475967cd616f 100644
--- a/push.sh
+++ b/push.sh
@@ -1,4 +1,7 @@
+# 执行该文件命令：sh ./push.sh
 # 推送代码到github和Gitee
-git push
-# git push git@github.com:BruceCQM/bruceblog.git main:main
-git push git@gitee.com:brucecai55520/bruceblog.git main:bruceblog_vitepress
\ No newline at end of file
+# git push
+git push git@github.com:BruceCQM/bruceblog.git main:main
+# git push git@gitee.com:brucecai55520/bruceblog.git main:bruceblog_vitepress
+# git push https://github.com/BruceCQM/bruceblog.git main:main
+git push https://gitee.com/brucecai55520/bruceblog.git main:bruceblog_vitepress
\ No newline at end of file