aa
-```
-
-### 正则表达式标志
-|标志|描述|
-|:--:| -- |
-|g|全局搜索|
-|i|不区分大小写搜索|
-|m|多行搜索|
-|y|执行“粘性”搜索,匹配从目标字符串的当前位置开始|
-|u|Unicode模式。用来正确处理大于 \uFFFF 的Unicode字符|
-
-__`m`__
-
-使用`m`标志时，会改变开始（`^`）和结束字符（`$`）的工作模式，变为在多行上匹配，分别匹配每一行的开始和结束，即`\n`或`\r` 分割。
-
-__`y`__
-
-使用`y`标志时，匹配是从`RegExp.lastIndex`指定的位置开始匹配，匹配为真时，会修改`lastIndex`的值到当前匹配字符串后的位置，下次匹配从这个位置开始匹配，如果匹配为假时，不会修改`lastIndex`的值。
-``` js
-let reg = /o/y;
-let str= 'foo';
-
-// lastIndex 为 0，从字符 f 开始匹配
-reg.test(str); // false
-// 由于结果为 false， lastIndex 还是为 0
-reg.test(str); // false
-
-let str2 = 'oof';
-// lastIndex 为 0 ，从字符 o 开始匹配
-reg.test(str2); // true
-// lastIndex 此时修改为 1, 从第二个 o 开始匹配
-reg.test(str2); // true
-// lastIndex 此时修改为 2
-reg.test(str2); // false 此时开始匹配的字符是 f
-// lastIndex没有被修改
-reg.test(str2); // false
-```
-
-
-### 正则表达式中的捕获—— \1,\2,\3... 以及 $1,$2,$3...
-
-在上文中我们介绍了 `(x)` 是匹配 `x` 并捕获，那么有了捕获就必然可以去使用捕获到的结果， `\1,\2,\3...` 以及` $1,$2,$3...` 便是指捕获的结果。
-
-`\1, \2, \3, \4, \5, \6, \7, \8, \9` 在正则表达式中使用，捕获结果为正则表达式的源模式.
-
-在这个正则表达式中`(bc)`被捕获并标记为`\1`, `(ef)`被捕获并标记为`\2`。
-``` js
-let reg = /a(bc)d(ef)/
-```
-也可以使用来简化正则表达式
-``` js
-let reg = /a(bc)dbc/
-let reg2 = /a(bc)d\1/
-
-let str = 'abcdbc';
-
-reg.test(str); // true
-reg2.test(str); // true
-```
-
-`$1, $2, $3, $4, $5, $6, $7, $8, $9` 是`RegExp`的包含括号子表达式的正则表达式静态的只读属性。
-``` js
-let reg = /a(bc)d/;
-let str = 'abcd';
-
-reg.test(str);
-console.log(RegExp.$1); // bc
-```
-在 `String.replace()` 中使用：
-``` js
-let reg = /(\w+)\s(\w+)/;
-let str = 'apple pear';
-str.replace(reg, '$2 $1'); // pear apple
-RegExp.$1; // apple
-RegExp.$2; // pear
-```
diff --git a/docs/1.前端/1.基础/浏览器端的事件循环.md b/docs/1.前端/1.基础/浏览器端的事件循环.md
deleted file mode 100644
index e9cd6d59..00000000
--- a/docs/1.前端/1.基础/浏览器端的事件循环.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: Event Loop 浏览器端的事件循环
-createTime: 2021/06/03 01:53:17
-permalink: /article/browser-event-loop/
-author: pengzhanbo
-tags:
- - javascript
----
-
-事件循环，即 Event-Loop。
-
-## 什么是 Event-Loop ？
-
-Event-Loop 是一个执行模型，在 [html5规范](https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) 中进行了浏览器端的 Event-Loop 的明确定义。
-
-## 宏任务与微任务
-
-javascript 有两种异步任务，分别是`宏任务`和`微任务`
-
-### 宏任务
-
-宏任务，`macro task`，也叫 `tasks`，一些异步任务的回调会依次进入 `macro task queue`，等待后续被调用。
-
-这些异步任务包括：
-- setTimeout
-- setInterval
-- setImmediate (Node独有)
-- requestAnimationFrame (浏览器独有)
-- I/O
-- UI rendering
-
-### 微任务
-
-微任务， `micro task`, 也叫 `jobs`，另一些异步任务的回调会依次进入`micro task queue`，等待后续被调用。
-
-这些异步任务包括：
-- process.nextTick(Node独有)
-- Promise
-- Object.observe
-- MutationObserver
-
-## 事件循环 Event Loop
-
-1. 执行全局 `script` 代码，这些代码有一些是同步语句，有一些是异步语句（如： setTimeout）；
-2. 全局`script`同步代码执行完毕后，调用栈Stack会清空；
-3. 从微任务`micro task queue` 中取出位于队首的任务，放入调用栈Stack中执行，执行完后`micro task queue`长度减一；
-4. 继续取出微任务`micro task queue`位于队首的任务，放入调用栈Stack中执行，
- 以此类推，直到把`micro task queue`中的所有任务都执行完毕。__注意，如果在执行micro task的过程中，产生了`micro task`那么会加入到队列的末尾，也会在这个周期被调用执行__；
-5. `micro task`中的所有无人都执行完毕，此时 `micro task queue` 为空队列，调用栈Stack也为空；
-6. 取出宏队列 `macro task queue` 中位于队首的任务，放入Stack中执行；
-7. 执行完毕后，调用栈Stack为空；
-8. 重复第3-7个步骤；
-9. 以此继续循环重复；
-
-::: tip 重点
-1. 宏任务`marco task` 一次只从队列中取出一个任务执行，执行后就去执行微任务队列中的任务；
-2. 微任务队列中所有的任务都会依次取出来执行，直到`micro task queue`为空，
- 且当前微任务执行过程中产生新的`micro task`，也会加入到当前`micro task queue`;
-3. `UI Rendering`由浏览器自定判断决定执行节点。但是只要执行`UI Rendering`，它的节点是在执行完所有
- `micro task`之后，下一个`macro task`之前，紧跟着执行`UI Rendering`
-:::
-
-尝试从代码层面来分析 event-loop:
-
-::: note 抖个机灵
-代码人看代码应该比看流程图要来得好理解了吧（bushi）
-:::
-
-``` js
-// 执行器
-// 接收一段javascript代码
-class Execution {
- constructor(code) {
- this.code = code
- this.macroTaskQueue = []
- this.microTaskQueue = []
- }
-
- // 启动执行
- exec() {
- // 首次运行，将 传入的 code 推入到 Track中执行
- // 并获取其中的 宏任务和 微任务
- const { macroTaskQueue, microTaskQueue } = this.run(this.code)
- // 将宏任务和微任务 推入到 各自的 队列中
- this.macroTaskQueue.push(...macroTaskQueue)
- this.microTaskQueue.push(...microTaskQueue)
- // 开始执行微任务
- this.runMicroTaskQueue()
- }
-
- // 执行微任务队列
- runMicroTaskQueue() {
- // 遍历 微任务队列中的所有任务
- // 当当前的 微任务队列清空时，遍历才结束
- while (this.microTaskQueue.length) {
- // 取出 队首的微任务
- const task = this.microTaskQueue.shift()
- // 将 当前微任务 推入到 执行栈中执行
- // 并将返回的 宏任务和微任务 继续 推入到 各自的队列中
- const { macroTaskQueue, microTaskQueue } = this.run(task)
- this.macroTaskQueue.push(...macroTaskQueue)
- this.microTaskQueue.push(...microTaskQueue)
- }
- // 当前微任务执行完毕，继续执行宏任务
- this.runMacroTaskQueue()
- }
-
- // 执行宏任务队列
- runMacroTaskQueue() {
- // 从 宏任务队列队首 取出一个 宏任务
- const task = this.macroTaskQueue.shift()
- // 将当前 宏任务 推入到 执行栈中执行
- // 并将返回的 宏任务和微任务 继续 推入到 各自的队列中
- const { macroTaskQueue, microTaskQueue } = this.run(task)
- this.macroTaskQueue.push(...macroTaskQueue)
- this.microTaskQueue.push(...microTaskQueue)
- // 再一次执行 微任务队列中的任务
- this.runMicroTaskQueue()
- }
-
- // 执行栈调用
- run(task) {
- // track 函数表示 执行栈
- // 执行完毕返回 产生的 微任务队列 和 宏任务队列
- const { macroTaskQueue, microTaskQueue } = track(task)
- return { macroTaskQueue, microTaskQueue }
- }
-}
-const execute = new Execution(scriptCode)
-execute.exec()
-```
-
-`event-loop` 概念性的内容大体就这么多，接下来从示例中来实际执行情况。
-
-## 示例
-
-::: warning 注意
-以下示例是在 `Chrome` 中执行后获得的结果，在其他浏览器的表现并不一定完全相同。
-:::
-
-
-可以尝试自己心中执行这段代码后的打印顺序，再切换到`Console`中看实际的运行结果，是否符合你的预期结果。
-
-::: code-tabs
-
-@tab javascript
-``` js
-console.log('script')
-
-setTimeout(() => {
- console.log('timeout 1')
- Promise.resolve().then(() => {
- console.log('promise 1')
- })
-})
-
-new Promise((resolve) => {
- console.log('promise resolver')
-
- Promise.resolve().then(() => {
- console.log('promise 3')
- })
-
- resolve('promise 2')
-}).then((data) => {
- console.log(data)
-})
-
-setTimeout(() => {
- console.log('timeout 2')
-})
-
-console.log('end')
-```
-
-
-@tab Console
-``` txt
-script
-promise resolver
-end
-promise 3
-promise 2
-timeout 1
-promise 1
-timeout 2
-```
-:::
-
diff --git a/docs/1.前端/1.基础/详解Promise.md b/docs/1.前端/1.基础/详解Promise.md
deleted file mode 100644
index 3ccec921..00000000
--- a/docs/1.前端/1.基础/详解Promise.md
+++ /dev/null
@@ -1,407 +0,0 @@
----
-title: 详解 Promise
-createTime: 2020/11/22 12:58:28
-permalink: /article/q40nq4hv/
-author: pengzhanbo
-tags:
- - javascript
----
-
-## 概述
-
-`Promise` 是一个构造函数，用于创建一个新的 Promise 对象。该构造函数主要用于包装还没有添加 promise 支持的函数。
-``` ts
-Promise(resolver : (resolve, reject) => void)
-```
-
-`Promise` 接受一个函数`resolver`作为参数，包装需要执行的处理程序，当处理结果为成功时，将成功的返回值作为参数调用`resolve` 方法，
-如果失败，则将失败原因作为参数调用`reject`方法。
-
-### 示例
-``` js
-const promise = new Promise(function (resolve, reject) {
- setTimeout(() => {
- // do something
- if (Math.random() * 10 > 5) {
- resolve({ status: 'success', data: '' })
- } else {
- reject(new Error('error'))
- }
- }, 500)
-})
-```
-
-### Promise状态
-
-Promise 创建后，必然处于以下几种状态
-
-- `pending` : 待定状态，既没有被兑现，也没有被拒绝
-- `fulfilled` : 操作成功。
-- `rejected` : 操作失败。
-
-当状态从 `pending` 更新为`fulfilled`或`rejected` 后，就再也不能变更为其他状态。
-
-### Promise 实例方法
-
-#### `.then(onFulfilled, onRejected)`
- *then()* 接收两个函数参数（也可以仅接收一个函数参数 onFulfilled）。
- - onFulfilled 函数参数，表示当 promise的状态从 `pending` 更新为`fulfilled` 时触发，并将成功的结果 value 作为`onFulfilled`函数的参数。
- - onRejected 函数参数，表示当promise的状态从 `pending` 更新为`rejected` 时触发，并将失败的原因 reason 作为 `onRejected`函数的参数。
-
- *then()* 方法返回的结果会被包装为一个新的promise实例。
-
-#### `.catch(onRejected)`
- *catch()* 可以相当于 *.then(null, onRejected)*，即仅处理当promise的状态从 `pending` 更新为`rejected` 时触发。
-
-#### `.finally(onFinally)`
- 表示promise的状态无论是从`pengding`更新为`fulfilled`或`rejected`，当所有的 then() 和 catch() 执行完成后，最后会执行 finally() 的回调。
-
- 由于无法知道promise的最终状态，`onFinally` 回调函数不接收任何参数，它仅用于无论最终结果如何都要执行的情况。
-
-
-``` js
-promise
- .then(function (res) {
- console.log(res) // { status: 'success', data: '' }
- })
- .catch(function (reason) {
- console.log(reason) // error: error
- })
- .finally(() => {
- // do something
- })
-```
-
-### 链式调用
-
-使用Promise的一个优势是，可以链式调用的方式，执行多个`then()`/`catch()`方法。
-且回调函数允许我们返回任何值，返回的值将会被包装为一个 promise实例，将值传给下一个`then()`/`catch()`方法。
-
-``` js
-promise
- .then(res => {
- res.data = { a: 2 }
- return res
- })
- .then(res => {
- console.log(res) // { status: 'success', data: { a: 2 } }
- throw new Error('cath error')
- })
- .catch(reason => {
- console.log(reason) // error: cath error
- })
-```
-
-## Promise代码实现
-```js
-const PENDING = "pending";
-const FULFILLED = "fulfilled";
-const REJECTED = "rejected";
-const microtask = globalThis.queueMicrotask || ((cb) => setTimeout(cb, 0));
-
-function LikePromise(resolver) {
- if (typeof resolver !== "function") {
- throw new TypeError(`Promise resolver ${resolver} is not a function`);
- }
- this.state = PENDING;
- this.value = undefined;
- this.reason = undefined;
- this.fulfillQueue = [];
- this.rejectQueue = [];
-
- const that = this;
-
- function reject(reason) {
- if (that.state === PENDING) {
- that.state = REJECTED;
- that.reason = reason;
- that.rejectQueue.forEach((cb) => cb(reason));
- }
- }
-
- function resolve(value) {
- if (that.state === PENDING) {
- that.state = FULFILLED;
- that.value = value;
- that.fulfillQueue.forEach((cb) => cb(value));
- }
- }
-
- try {
- resolver(resolve, reject);
- } catch (e) {
- reject(e);
- }
-}
-
-function resolvePromise(promise, x, resolve, reject) {
- if (promise === x) {
- reject(new TypeError("chaining cycle"));
- } else if (x !== null && (typeof x === "object" || typeof x === "function")) {
- let used = false;
- try {
- const then = x.then;
- if (typeof then === "function") {
- then.call(
- x,
- (y) => {
- if (used) return;
- used = true;
- resolvePromise(promise, y, resolve, reject);
- },
- (r) => {
- if (used) return;
- used = true;
- reject(r);
- }
- );
- } else {
- if (used) return;
- used = true;
- resolve(x);
- }
- } catch (e) {
- if (used) return;
- used = true;
- reject(e);
- }
- } else {
- resolve(x);
- }
-}
-
-LikePromise.prototype.then = function (onFulfilled, onRejected) {
- onFulfilled =
- typeof onFulfilled === "function" ? onFulfilled : (value) => value;
- onRejected =
- typeof onRejected === "function"
- ? onRejected
- : (reason) => {
- throw reason;
- };
- const that = this;
- const promise = new LikePromise((resolve, reject) => {
- if (that.state === FULFILLED) {
- microtask(() => {
- try {
- const x = onFulfilled(that.value);
- resolvePromise(promise, x, resolve, reject);
- } catch (e) {
- reject(e);
- }
- });
- } else if (that.state === REJECTED) {
- microtask(() => {
- try {
- const x = onRejected(that.reason);
- resolvePromise(promise, x, resolve, reject);
- } catch (e) {
- reject(e);
- }
- });
- } else {
- that.fulfillQueue.push(() => {
- microtask(() => {
- try {
- const x = onFulfilled(that.value);
- resolvePromise(promise, x, resolve, reject);
- } catch (e) {
- reject(e);
- }
- });
- });
- that.rejectQueue.push(() => {
- microtask(() => {
- try {
- const x = onRejected(that.reason);
- resolvePromise(promise, x, resolve, reject);
- } catch (e) {
- reject(e);
- }
- });
- });
- }
- });
- return promise;
-};
-
-LikePromise.prototype.catch = function (onRejected) {
- return this.then(null, onRejected);
-};
-
-LikePromise.prototype.finally = function (onFinally) {
- return this.then(
- (value) => LikePromise.resolve(onFinally()).then(() => value),
- (reason) =>
- LikePromise.resolve(onFinally()).then(() => {
- throw reason;
- })
- );
-};
-
-LikePromise.resolve = function (value) {
- return new LikePromise((resolve) => resolve(value));
-};
-
-LikePromise.reject = function (reason) {
- return new LikePromise((_, reject) => reject(reason));
-};
-```
-
-
-## `Promise` 静态方法
-
-### Promise.resolve(value)
-返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果您不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以Promise对象形式使用。
-
-### Promise.reject(reason)
-返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
-
-### Promise.all(promises)
-`all()` 允许传入一组promise实例，并返回一个新的promise实例。
-
-promises并发执行，并且当这组promises的最终状态均更新为`fulfilled`时，才触发返回的promise实例的`onFulfilled`，
-并将这组promises的执行结果，已promises的定义顺序，以数组的形式传给`onFulfilled`。
-如果其中某个promise的最终状态更新为`rejected`，则立即触发返回的promise实例的`onRejected`。
-#### 示例：
-``` js
-const promises = [
- Promise.resolve({ a: 1}),
- new Promise((resolve) => {
- setTimeout(() => {
- resolve({ b: 1 })
- }, 0)
- })
-]
-Promise.all(promises).then(res => {
- console.log(res) // [ { a: 1}, { b: 1 } ]
-})
-```
-
-#### 手写Promise.all 实现代码
-``` js
-function promiseAll(promises) {
- promises = promises || []
- let length = promises.length
- if (length === 0) return Promise.resolve([])
- let count = 0
- const list = []
- return new Promise((resolve, reject) => {
- const resolveFn = (res, index) => {
- list[index] = res
- count ++
- if (count >= length) {
- resolve(list)
- }
- }
- promises.forEach((item, i) => {
- if (item instanceof Promise) {
- item.then(res => resolveFn(res, i), reject)
- } else {
- resolveFn(item, i)
- }
- })
- })
-}
-```
-### Promise.allSettled
-`allSettled(promises)` 允许传入一组promise实例，并返回一个新的promise对象。
-
-当这组promises的状态从`pending` 都更新到最终状态、无论最终状态是 `fulfilled` 或`rejected`时，触发返回的promise的`onfulfilled`。
-
-`onfulfilled` 回调函数，根据promises定义的顺序，将执行结果以 `{ status: string, [value|reason]: any }[]` 的形式作为参数传入。
-
-#### 示例
-``` js
-const promises = [
- Promise.resolve({ a: 1}),
- Promise.reject('reason')
-]
-Promise.allSettled(promises).then(res => {
- console.log(res) // [ { status: 'fulfilled’, value: { a: 1 } }, { status: 'rejected', reason: 'reason' } ]
-})
-```
-
-
-#### 手写Promise.allSettled 实现代码
-``` js
-function promiseAllSettled(promises) {
- promises = promises || []
- let length = promises.length
- if (length === 0) return Promise.resolve([])
- let count = 0
- const list = []
- return new Promise((resolve) => {
- const resolveFn = (res, index, status) => {
- list[index] = { status }
- if (status === 'fulfilled') {
- list[index].value = res
- } else {
- list[index].reason = res
- }
- count ++
- if (count >= length) {
- resolve(list)
- }
- }
- promises.forEach((item, i) => {
- if (item instanceof Promise) {
- item.then(
- res => resolveFn(res, i, 'fulfilled'),
- reason => resolveFn(reason, i, 'rejected')
- )
- } else {
- resolveFn(item, i, 'fulfilled')
- }
- })
- })
-}
-```
-
-### Promise.race
-
-`Promise.race(promises)` 接收一组promise实例作为参数，并返回一个新的promise对象。
-
-当这组promises中的任意一个promise的状态从`pending`更新为`fulfilled`或`rejected`时，返回的promise对象将会把该promise的成功返回值或者失败原因
-作为参数调用返回的promise的`onFulfilled`或`onRejected`
-
-#### 示例
-``` js
-const promises = [
- new Promise((resolve) => {
- setTimeout(() => {
- resolve('timeout')
- }, 500)
- }),
- Promise.resolve('resolve')
-]
-
-Promise.race(promises).then(res => {
- console.log(res) // resolve
-})
-```
-
-#### 手写Promise.race 实现代码
-``` js
-function promiseRace(array) {
- array = array || []
- return new Promise((resolve, reject) => {
- array.forEach(item => {
- if (item instanceof Promise) {
- item.then(resolve, reject)
- } else {
- resolve(item)
- }
- })
- })
-}
-
-```
-
-## 参考资料
-
-> [Promise A+ 规范](https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/)
->
-> [MDN Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)
->
-> [MDN 使用Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)
diff --git a/docs/1.前端/10.开发/1px解决方案.md b/docs/1.前端/10.开发/1px解决方案.md
deleted file mode 100644
index 5191ff4b..00000000
--- a/docs/1.前端/10.开发/1px解决方案.md
+++ /dev/null
@@ -1,247 +0,0 @@
----
-title: 1px解决方案
-createTime: 2019/05/15 10:41:32
-permalink: /article/tz7ncicn/
-author: pengzhanbo
-tags:
- - html
- - css
- - develop
----
-
-在日常移动端前端应用开发中，经常遇到一个问题就是 1px的线在移动端 Retina屏下的渲染并未达到预期。以下总几种不同场景下的 1px解决方案。
-
-
-
-## 背景及原因
-
-首先，需要明确的一个概念是， CSS的 `pixels` 并不完全等价于 设备的 `pixels`。当我们假定设备的 `pixels` 为标准的`pixels` 宽度。这些pixels决定了设备的分辨率。在默认情况下， PC设备上用户未进行缩放操作（即zoom缩放为100%时）, CSS的`pixels`与设备的`pixels`重叠，当用户进行了缩放操作时，假设用户缩放了200%，那么 124px的CSS`pixels`实际占用了248设备`pixels`。
-
-但我们开发时，通常设备的`pixels`对我们毫无用处，前端只需要关注CSS的`pixels`，浏览器会根据用户缩放自动处理CSS的pixels是被伸展还是收缩。
-
-但在移动端设备中，由于设备的宽度较小，导致了可显示的内容要少得多。浏览器或者缩放变小，导致内容无法阅读，或者通过拖动来浏览未被显示的内容。这导致了原本适合于PC设备的CSS布局，放到了移动端，变得十分丑陋。
-
-为了解决这个问题，移动端设备的厂商的通常做法是，让viewport更宽（这里的viewport指的是设备的视窗，它决定了HTML标签的宽度表现，继而影响其他的元素）。
-
-移动端的 viewport 被分为了 虚拟的 viewport 和 布局的 viewport：
-- `visual viewport`： 虚拟viewport
-- `layout viewport`： 布局viewport
-
-
-
-两者的概念， 可以想象 `layout viewport` 为一张不可改变大小和角度的图片，但它被一层蒙板挡住了， `visual viewport` 是一个蒙板上我们可以观察到 这张图片的窗口。我们可以通过这个窗口观察到 图片的部分内容。并且可以对这个窗口进行拖动或缩放，进而观察到图片的完整内容。
-
-在这里，`visual viewport` 相当于 移动端设备的屏幕，用户的 缩放和拖动操作，反馈到 `layout viewport` ,则是相对的变成 `layout viewport` 被 拖动和缩放。
-
-而通常我们关注的 CSS`pixels`，通常是按照 `layout viewport`来定义的，所以会比`visual viewport` 宽很多。而 ``元素的宽度继承于`layout viewport`。这可以保证你的网站的UI可以在移动端设备和桌面设备表现一致。
-
-但是 `layout viewport`的宽度有多宽，不同的设备，不同的浏览器各有不同。如 iPhone 的Safari 使用的是 980px。
-
-
-但是在移动端的交互中，我们并不期望 网站的内容是被缩放的，需要让用户进行缩放和拖动。 所以通常我们会在 html文件的head中，进行一个 meta声明。
-``` html
-
-```
-即强制设置了`layout viewport` 等于 设备宽度， 设置了缩放为100%，并且用户无法进行缩放操作。这样做的好处是我们可以以一种期望的方式进行设计UI和交互。
-
-但在前面，我们介绍了， CSS的`pixels`并不等价于设备的`pixels`。通常在移动端设备，我们可以通过 `window.devicePixelRatio` 查看当前设备的CSS`pixels`和设备`pixels`的比例，如 `window.devicePixelRatio` 值为 2时， 表示 1个CSS`pixels`的宽度占用2个设备`pixels`，即实际占用了 2x2 的设备`pixels`。
-
-这也是导致了 `1px`的线，在移动设备上的渲染，看起来会比实际上的 `1px`更粗的原因。
-
-知道了问题的背景，和产生的原因，那么只需要让 `1px`的 CSS`pixels`的表现，接近于或者贴合 `1px`的设备`pixels`, 那么就可以解决这个问题了。
-
-## 解决方案
-
-如何让 `1px`的 CSS`pixels`的表现，接近于或者贴合 `1px`的设备`pixels`。这个问题需要具体场景具体分析。
-
-### border-width: 0.5px
-
-一种最简单的，且适合各种场景的方案，就是使用 `0.5px` 的值代替 `1px` 的值。 但这个方案有一个兼容问题，现代浏览器并不全都支持该值的。
-
-可以先检查是否支持 `0.5px`，然后在 根元素上添加一个 类，进行使用。
-``` js
-if (window.devicePixelRatio && devicePixelRatio >= 2) {
- var testElem = document.createElement('div');
- testElem.style.border = '.5px solid transparent';
- document.body.appendChild(testElem);
- if (testElem.offsetHeight == 1)
- {
- document.querySelector('html').classList.add('hairlines');
- }
- document.body.removeChild(testElem);
-}
-```
-``` css
-div {
- border: 1px solid #bbb;
-}
-
-.hairlines div {
- border-width: 0.5px;
-}
-```
-
-这种方案的好处是简单，能够适配所有场景，但是从兼容性上看，iOS7及之前的版本、Android设备等，均不支持`0.5px`的渲染。
-
-### 伪类 + transform缩放
-
-该方法是是利用 元素的伪类进行线的渲染。
-
-比如 利用 `::before` 或者 `::after`, 画一条上边框的线
-``` css
-.hairlines {
- position: relative;
-}
-.hairlines::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- display: block;
- width: 100%;
- height: 1px;
- background-color: #000;
- transform: scaleY(0.5);
- transform-origin: 0 0;
-}
-```
-比如，利用 `::before` 或者 `::after`, 画一个线框：
-``` css
-.hairlines {
- position: relative;
-}
-.hairlines::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- box-sizing: border-box;
- display: block;
- width: 200%;
- height: 200%;
- border: 1px solid #000;
- transform: scale(0.5);
- transform-origin: 0 0;
-}
-```
-
-该方案的好处同样能都适配多数场景，并且支持圆角的情况。
-但缺点在于由于对元素本身设置了`position`，以及使用了伪类，但另一个交互需要使用到被占用的属性时，需要分情况处理问题。
-
-### border-image 图片
-
-使用 border-image-slice 对边框图片进行偏移。
-
-该方案的方法，比如处理 x轴方向的线时， 需要准备 一张2px高的图片，根据显示是上边框，还是下边框，如上边框，则该图片的 上一半1px为对应的颜色的先，下一半为透明。
-
-_line.png_ 
-
-``` css
-div {
- border-top: 1px transparent;
- border-image: url(line.png) 2 0 0 0 repeat;
-}
-```
-同理，处理其他方向的边框类似方法。
-
-该方法的缺点是 如果改变颜色，或者有不同颜色的线，需要准备多张图片。
-
-优先是适合多数的场景，且不对元素本身做出影响文档流的改动。
-
-### SVG
-
-由于CSS也支持 SVG 作为 image 资源使用，且SVG是矢量图片，能够相比于使用jpg、png格式的图片获得更好的保真。
-可以配合 CSS 的 `background-image` 或者 `border-image` 满足不同场景的需要。
-
-建议此方案配合 CSS 预渲染，如`stylus/sass/less` 进行使用， 也可使用`postcss` 相关插件使用。
-
-如在 stylus中：
-
-``` stylus
-// 画一个元素的线框
-borderXY(color = #eee, radius = 8px) {
- $r = unit(radius/ 2, '');
- border-radius radius /*px*/
- background-image url(s("data:image/svg+xml;charset=utf-8,
", color, $r, $r))
- background-repeat no-repeat
- background-position 0 0
- background-size 100% 100%
-}
-
-// 画一个元素的 上下边框
-borderX(color = #eee) {
- border 0
- border-top: 1px solid color; /*no*/
- border-bottom: 1px solid color; /*no*/
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color, color)) 100 0 100 0 stretch;
-}
-
-// 画一个元素的 左右边框
-borderY(color = #eee) {
- border 0
- border-left: 1px solid color; /*no*/
- border-right: 1px solid color; /*no*/
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color, color)) 0 100 0 100 stretch;
-}
-
-// 画一个元素的上边框
-borderTop(color = #eee) {
- border 0
- border-top: 1px solid color; /*no*/
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color)) 100 0 0 0 stretch;
-}
-
-// 画一个元素的下边框
-borderBottom(color = #eee) {
- border 0
- border-bottom: 1px solid color; /*no*/ // 设置border 0后，如果color设置为transparent，则该边框会变成透明
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color)) 0 0 100 0 stretch;
-}
-
-// 画一个元素的左边框
-borderLeft(color = #eee) {
- border 0
- border-left: 1px solid color; /*no*/
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color)) 0 0 0 100 stretch;
-}
-// 画一个元素的右边框
-borderRight(color = #eee) {
- border 0
- border-right: 1px solid color; /*no*/
- border-image: url(s("data:image/svg+xml;charset=utf-8,
", color)) 0 100 0 0 stretch;
-}
-
-div {
- borderXY()
-}
-```
-如果是使用 `postcss` ，可以使用安装插件 [postcss-write-svg](https://github.com/csstools/postcss-write-svg)，配合使用
-``` css
-@svg square {
- @rect {
- fill: var(--color, black);
- width: var(--size);
- height: var(--size);
- }
-}
-
-.example {
- background: svg(square param(--color green) param(--size 100%)) center / cover;
-}
-```
-
-使用SVG的优点是，支持调整线的颜色，支持设置圆角，可以根据场景不同，选择 `background-image` 或者 `border-image` 满足绝大多数的场景。
-
-### background-image + jpg/png 图片
-
-该做法是使用一张该元素的多倍的背景图，进行线的渲染。
-
-该做法一般不推荐。
-
-### 背景渐变
-
-该方案不推荐
-
-### box-shadow
-
-该方案不推荐
diff --git a/docs/1.前端/10.开发/lerna使用.md b/docs/1.前端/10.开发/lerna使用.md
deleted file mode 100644
index 532ccf7b..00000000
--- a/docs/1.前端/10.开发/lerna使用.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: lerna使用
-createTime: 2021/11/26 06:28:37
-permalink: /article/i1wc1uld/
-author: pengzhanbo
----
-
-::: center
-{ style="width: 50%" }
-:::
-
-## 概述
-
-`lerna` 是一个多包管理工具，针对使用 git 和 npm/yarn 等管理多软件包的代码仓库的工作流程进行优化。
-
-在开发一个大型项目时，往往会将整个项目拆分为多个代码仓库，进行独立版本化的软件包管理，这对于代码共享非常有用。
-
-比如开源项目 `babel`，整个项目被拆分为了`@babel/core`, `@babel/parser`, `@babel/traverse`等多个软件包。
-
-但是这也会导致如果某些更改跨越了多个代码仓库的话，会变得麻烦且难以跟踪。
-`lerna`可以帮助优化对多个代码仓库的依赖、版本管理、工作流等。
-
-## 安装
-
-lerna 可以全局安装，也可以在项目中安装（以下内容使用项目中安装的方式）
-``` sh
-# npm
-npm install lerna
-# yarn
-yarn add lerna
-```
-
-## 简单入门
-
-创建一个项目，并使用lerna进行项目环境初始化
-``` sh
-mkdir lerna-demo && cd $_
-yarn init -y
-yarn add lerna
-npx lerna init
-```
-你将会得到一个包含以下内容的项目文件夹：
-``` sh
-lerna-demo
- packages/
- lerna.json
- package.json
-```
-
-其中，`packages/` 目录用于存放所有的软件包。`lerna.json`是lerna的配置文件。
-
-
-## 配置说明
-``` json
-// lerna.json
-{
- "useWorkspaces": true,
- "npmClient": "npm", // npm | yarn
- "packages": ["packages/*"],
- "version": "0.0.0",
- "command": {
- "bootstrap": {
- // more...
- },
- // more
- }
-}
-```
-
-- `npmClient`：设置当前使用的包管理器， 默认是npm， 可以设置为yarn；
-- `version`：软件包版本号，根据 semver版本号规范命名；
-- `packages`：软件包所在的目录，可以使用golb做模式匹配；
-- `useWorkspaces`：使用工作空间，这个选项可以更好的跟yarn配合使用；
-- `command`：对lerna的各个command进行配置。
-
-## 命令行说明
-
-### lerna init
-初始化一个lerna项目，默认将会在目录中新建 packages/ 和 lerna.json。
-
-`--independent`: 使用分包独立版本管理模式，各个软件包使用独立的版本号。
-
-
-### lerna create pkgName [location]
-在项目中新建一个子包， pkgName设置包名。 location制定包所在目录，默认是 packages配置的第一个元素。
-
-### lerna add \
[@version] [--dev] [--exact] [--peer]
-类似于 `yarn add` 或`npm install`，在一个lerna repo中往dependency中添加依赖包。
-- `--dev`: 表示将包添加到 devDependencies
-- `--exact`: 添加一个确定版本的包（如1.0.1），而不是一个版本范围的包如（^1.0.1）
-- `--peer`: 添加一个前置依赖包。
-
-### lerna bootstrap
-为当前 lerna repo 中的所有包安装 依赖库，并 link所有 同域依赖。
-
-### lerna run \
-
-在当前 lerna repo 中的所有包中执行 script 命令。
-``` sh
-packages/
- package1/
- package2/
-```
-``` sh
-lerna run build # 相当于在 package1、package2 中执行 npm run build
-```
-- --scope 过滤符合条件的包
- ``` sh
- lerna run build --scope test component
- ```
-- --stream 使用报名作为前缀，交叉输出所有包的控制台信息流。
- ``` sh
- lerna run build --stream
- ```
-- --parallel 类似于 stream。
- ``` sh
- lerna run build --parallel
- ```
-
- ### lerna clean
- 删除所有包的node_modules
diff --git a/docs/1.前端/10.开发/pnpm.md b/docs/1.前端/10.开发/pnpm.md
deleted file mode 100644
index 1feac4f0..00000000
--- a/docs/1.前端/10.开发/pnpm.md
+++ /dev/null
@@ -1,280 +0,0 @@
----
-title: pnpm 包管理器
-createTime: 2022/05/10 03:50:47
-author: pengzhanbo
-permalink: /article/84nu27cz/
----
-
-`pnpm` 是一款新兴不久的包管理器，相比于 `npm` 和 `yarn`，`pnpm` 拥有更快的安装速度，同时节约磁盘空间。
-
-
-
-## 介绍
-
-
-
-`pnpm` 是一个类似于 `npm` 、`yarn` 的包管理器。
-
-`pnpm` 安装的包都会被存储在硬盘的某个相同位置，软甲包通过硬链接到这个位置，实现共享同一版本的依赖，
-对于同一依赖的不同版本，`pnpm update` 时，只会向存储中心添加新版本更新的文件，而不是仅仅应为一个文件的改变而复制整个新版本包的内容。
-
-`pnpm` 内置支持 `monorepo`，即单仓库多包。
-
-## 比较
-
-### pnpm/yarn/npm
-
-| 功能 | pnpm | yarn | npm |
-| -- | :--: | :--: | :--: |
-| 工作空间支持（monorepo）| ✔️ | ✔️ | ✔️ |
-| 隔离的`node_modules` | ✔️ - 默认 | ✔️ | ❌ |
-| 提升的`node_modules` | ✔️ | ✔️ | ✔️ -默认 |
-| 自动安装peers | ✔️ - `auto-install-peers=true` | ❌ | ✔️ |
-| Plug'n'Play | ✔️ | ✔️ - 默认 | ❌ |
-| 零安装 | ❌ | ✔️ | ❌ |
-| 修复依赖项 | ✔️ | ✔️ | ❌ |
-| 管理nodejs版本 | ✔️ | ❌ | ❌ |
-| 有锁文件 | ✔️ - `pnpm-lock.yaml` | ✔️ - `yarn.lock` | ✔️ - `package-lock.json` |
-| 支持覆盖 | ✔️ | ✔️ - `resolutions` | ✔️ |
-| 内容可寻址存储 | ✔️ | ❌ | ❌ |
-| 动态包执行 | ✔️ - `pnpm dlx` | ✔️ - `yarn dlx` | ✔️ - `npx` |
-| Side-effects cache | ✔️ | ❌ | ❌ |
-
-### 区别
-
-与 `yarn/npm` 不同的是，`pnpm` 并非采用 *扁平的`node_modules`* 来管理依赖项，
-而是基于符号链接的`node_modules` 结构。
-
-`node_modules` 中每个包的每个文件都是来自内容可寻址存储的硬链接。 假设安装了依赖于 `bar@1.0.0` 的 `foo@1.0.0`。 `pnpm` 会将两个包硬链接到 `node_modules` 如下所示：
-
-```sh
-node_modules
-└── .pnpm
- ├── bar@1.0.0
- │ └── node_modules
- │ └── bar -> /bar
- │ ├── index.js
- │ └── package.json
- └── foo@1.0.0
- └── node_modules
- └── foo -> /foo
- ├── index.js
- └── package.json
-```
-这是 `node_modules` 中的唯一的“真实”文件。 一旦所有包都硬链接到 `node_modules`，
-就会创建符号链接来构建嵌套的依赖关系图结构。
-
-`bar` 将被符号链接到 `foo@1.0.0/node_modules` 文件夹，然后处理依赖关系，`foo` 将被符号链接至根目录的 `node_modules` 文件夹:
-
-```sh
-node_modules
-├── foo -> ./.pnpm/foo@1.0.0/node_modules/foo
-└── .pnpm
- ├── bar@1.0.0
- │ └── node_modules
- │ └── bar -> /bar
- └── foo@1.0.0
- └── node_modules
- ├── foo -> /foo
- └── bar -> ../../bar@1.0.0/node_modules/bar
-```
-
-这种布局的好处在于，只有真正在依赖项中的包才能访问。
-如果是平铺的 `node_modules` 结构，所有被提升的包都可以访问。
-
-### 优势
-
-- 节约磁盘空间
-
- 包存储在全局存储中，pnpm 创建从全局存储到项目下 `node_modules` 文件夹的 硬链接，硬链接指向磁盘上原始文件所在的同一位置。不同软件包可以共享相同依赖项所占用的空间。
-
- 如果是单个依赖的不同版本，如版本更新，`pnpm` 仅安装版本更新的文件，而不是全量安装整个新版本的包。
-
-- 安装速度快
-
- 软件包中安装依赖时，如果检索到在本地的全局存储中已安装过该依赖，那么不会从网络下重新安装，而是直接创建硬链接到软件包中。
-
-- 内置支持 monorepo
-
- 支持 单仓库多包，通过 `pnpm-workspace.yaml` 配置工作空间，通过 `workspace:*` 协议引用工作空间的依赖包。
-
-## 安装
-
-### 通过 npm 安装
-
-```sh
-npm install -g pnpm
-```
-
-### 通过 Corepack 安装
-
-从 v16.13 开始，Node.js 发布了 `Corepack` 来管理包管理器。 这是一项实验性功能，因此需要通过运行如下脚本来启用它：
-
-```sh
-corpack enabled
-```
-
-这将自动在系统上安装 pnpm。 但是，它可能不是最新版本的 pnpm。
-若要升级，请检查 [最新的 pnpm 版本](https://github.com/pnpm/pnpm/releases/tag/v7.9.1) 并运行：
-
-```sh
-corepack prepare pnpm@ --activate
-```
-### 使用独立脚本安装
-
-在 POSIX 系统上，即使没有安装 Node.js，也可以使用以下脚本安装 pnpm：
-
-```sh
-curl -fsSL https://get.pnpm.io/install.sh | sh -
-```
-
-如果没有安装 `curl` ，也可以使用 `wget`:
-
-```sh
-wget -qO- https://get.pnpm.io/install.sh | sh -
-```
-
-在 Windows 系统中，如果使用 Powershell:
-
-```sh
-iwr https://get.pnpm.io/install.ps1 -useb | iex
-```
-
-### 使用 Homebrew 安装
-
-```sh
-brew install pnpm
-```
-
-### 使用 Scoop 安装
-
-```sh
-scoop install nodejs-lts pnpm
-```
-
-## 使用
-
-`pnpm` 在使用上 与 `npm` 、`yarn` 的使用上差别不大，但需要注意的区别，`pnpm` 会严格校验所有参数，
-比如，`pnpm install --target_arch x64` 会执行失败，因为 `--target_arch x64` 不是 `pnpm install` 的有效参数。
-
-### 常用命令
-
-#### `pnpm install`
-
-别名 `pnpm i`
-
-等效于 `npm install` / `yarn`
-
-用于安装项目所有依赖。
-
-[pnpm install 官方文档](https://pnpm.io/zh/cli/install)
-
-#### `pnpm add `
-
-安装软件包及其依赖的任何软件包。 默认情况下，任何新软件包都安装为生产依赖项。
-
-[pnpm add 官方文档](https://pnpm.io/zh/cli/add)
-
-#### `pnpm remove`
-
-别名： `rm` `uninstall` `un`
-
-从 `node_modules` 和项目的 `package.json` 中删除相关 packages。
-
-[pnpm remove 官方文档](https://pnpm.io/zh/cli/remove)
-
-#### `pnpm update`
-
-别名： `up` `upgrade`
-
-`pnpm update` 根据指定的范围更新软件包的最新版本。
-
-在不带参数的情况下使用时，将更新所有依赖关系。 您可以使用一些模式来更新特定的依赖项。
-
-[pnpm update 官方文档](https://pnpm.io/zh/cli/update)
-
-更多命令请查阅[官方文档](https://pnpm.io/zh/cli/add)
-
-### 配置
-
-#### `.npmrc`
-
-`pnpm` 从命令行、环境变量和 `.npmrc` 文件中获取其配置。
-
-`pnpm config` 命令可用于更新和编辑 用户和全局 .npmrc 文件的内容。
-
-四个相关文件分别为：
-
-- 每个项目的配置文件（`/path/to/my/project/.npmrc`）
-- 每个工作区的配置文件（包含 `pnpm-workspace.yaml` 文件的目录）
-- 每位用户的配置文件（ `~/.npmrc` ）
-- 全局配置文件（ `/etc/.npmrc` ）
-
-#### `pnpm-workspace.yaml`
-
-`pnpm-workspace.yaml` 定义了 工作空间 的根目录，并能够使工作空间中包含 / 排除目录 。 默认情况下，包含所有子目录。
-
-``` yaml
-packages:
- # 定义 packages 目录下的所有子目录都为一个 package
- - 'packages/*'
- # 定义 components 目录下的所有子目录都为一个 package
- - 'components/**'
- # 排除任何目录中的 test 目录下的所有目录
- - '!**/test/**'
-```
-
-## 工作空间
-
-pnpm 内置了对单一存储库（也称为多包存储库、多项目存储库或单体存储库）的支持， 你可以创建一个 workspace 以将多个项目合并到一个仓库中。
-
-一个 workspace 的根目录下必须有 `pnpm-workspace.yaml` 文件， 也可能会有 `.npmrc` 文件。
-
-### Workspace 协议 (workspace:)
-
-默认情况下，如果可用的 packages 与已声明的可用范围相匹配，pnpm 将从工作区链接这些 packages。 例如，如果 `bar` 中有 `"foo"："^1.0.0"` 的这个依赖项，则 `foo@1.0.0` 链接到 `bar。` 但是，如果 `bar` 的依赖项中有 `"foo": "2.0.0"`，而 `foo@2.0.0` 在工作空间中并不存在，则将从 `npm registry` 安装 `foo@2.0.0` 。 这种行为带来了一些不确定性。
-
-幸运的是，pnpm 支持 workspace 协议 `workspace:` 。 当使用此协议时，pnpm 将拒绝解析除本地 workspace 包含的 package 之外的任何内容。 因此，如果设置为 `"foo": "workspace:2.0.0"` 时，安装将会失败，因为 `"foo@2.0.0"` 不存在于此 workspace 中。
-
-使用示例：
-
-工作空间中存在以下项目：
-```sh
-+ packages/
- + foo/
- + bar/
- + qar/
- + zoo/
-```
-
-如果各个项目以其目录名作为其 package name，那么可以在其他项目中如下引入依赖：
-
-``` json
-{
- "dependencies": {
- "foo": "workspace:*",
- "bar": "workspace:~",
- "qar": "workspace:^",
- "zoo": "workspace:^1.5.0"
- }
-}
-```
-
-::: tip
-引入依赖的包名，是由包的 `package.json name` 确定，而不是 workspace 目录下的目录名确定。
-:::
-
-### 发布 Workspace
-
-当以上示例进行发布时，会被转换为
-```json
-{
- "dependencies": {
- "foo": "1.5.0",
- "bar": "~1.5.0",
- "qar": "^1.5.0",
- "zoo": "^1.5.0"
- }
-}
-```
-这个功能允许你发布转化之后的包到远端，并且可以正常使用本地 workspace 中的 packages，而不需要其它中间步骤。包的使用者也可以像常规的包那样正常使用，且仍然可以受益于语义化版本。
diff --git a/docs/1.前端/10.开发/前端路由.md b/docs/1.前端/10.开发/前端路由.md
deleted file mode 100644
index 7bbdd88b..00000000
--- a/docs/1.前端/10.开发/前端路由.md
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: 前端路由
-createTime: 2019/09/13 04:13:56
-author: pengzhanbo
-permalink: /article/xhb2iacu/
----
-
-在现代前端中，SPA应用是一种主流的前端应用交互方案，其中，前端路由是实现SPA应用的关键技术之一。
-
-
-
-## 路由
-
-**路由（Router）** 一般指的是 URI 中 pathname + basename + hash + query 所组成的 路径。
-
-在前端中， **路由** 一般指的是 **随着浏览器中的地址栏的变化，呈现不同的内容给用户**。
-浏览器地址栏的变化，即是 访问链接的变化，具体指的就是 pathname + basename + hash + query 部分的变化。
-
-示例：
-
-```
-/a/b
-/a/b/#/hash
-/a/b/#/hash?c=1
-```
-
-对于前端路由，一般会选择 监听 hash 部分的变化， 或者监听 pathname 部分的变化，从而一般有两种路由模式：
-
-
-### hash 模式
-
-通过监听 地址栏中 hash 部分的变化，从而呈现不同的内容。
-
-::: center
-**https://example.com/index.html ==#/a/b/==**
-:::
-
-在浏览器中，通过注册 **hashchange** 事件，监听 **hash** 变化。
-
-``` js
-window.addEventListener('hashchange', () => {
- const hash = window.location.hash;
- console.log(hash) // #/a/b/
-})
-```
-
-通过 hash 实现路由的优势在于， hash 仅依赖于浏览器，且hash的变化不会直接导致页面刷新，天然适合于实现 前端路由。
-
-### history 模式
-
-通过监听 地址栏中 pathname 部分的变化，从而呈现不同的内容。
-
-history模式是依赖于 浏览器端的 History API 而实现。
-History API 允许我们对浏览器会话历史记录进行访问并操作。
-
-::: center
-**https://example.com ==/a/b/==**
-:::
-
-History API 通过 history.pushState() 和 history.replaceState() 方法，新增或者替换历史记录，
-通过 popState 事件监听历史记录的变化。
-
-
-直接操作历史记录的变化，结果会改变浏览器地址栏的显示内容，但不会引起浏览器刷新页面。
-但是由于变化的部分一般是 `pathname + basename` 的部分，如果手动刷新页面，可能会导致浏览器通过当前路径
-向服务器发起请求找不到对应的资源而返回404，所以一般需要在服务器端的HTTP服务器进行配置，将相关的路径请求资源，
-都指向同一个html资源文件。
-
-> [History API](https://developer.mozilla.org/zh-CN/docs/Web/API/History_API)
-
-### 其他模式
-
-除了上述两种一般用于浏览器端中的路由模式，为了满足其他的场景，比如 在SSR场景下，需要在服务端模拟路由在生成页面内容，
-或者在 electron 桌面应用中。一般会基于 memory 实现一种 仅通过 memory 的变化的路由的模式。
-
-在这个模式中，通过一个普通的 JavaScript 字符串或者对象，来实现模拟 路由路径地址以及相关功能。
-
-## Router解析
-
-前端路由在不同的库或者框架中实现，一般会采用一套通用的解析规则，在实现细节上有所差异。
-
-一个路由地址，一般包含如下几个部分：
-
-- **path** 表示路由的路径
-- **params** 表示路由的路径动态匹配结果
-- **query** 表示路由携带的参数，未解析前为 queryString, 解析后为 queryObject
-
-如一个 路由地址： `/a/b/?c=1` 中， `/a/b/` 部分一般称为 **path** ， `?c=1` 部分一般被称为 `query`。
-
-### 具名路由
-
-具名路由，也称 静态路由 指在声明一个路由时，对地址栏路径地址使用 全等匹配，仅当声明的路由与路径地址全等时，才命中路由。
-
-``` js
-// 浏览器地址栏： https://example.com/a/b/
-// 声明路由：
-const routes = [
- {
- path: '/a/b', // 命中当前路由
- },
- {
- path: '/a/c', // 不一致，未命中
- },
- {
- path: '/a', // 不一致，未命中
- },
- {
- path: '/a/b/c', // 不一致，未命中
- }
-]
-```
-
-### 路由匹配
-
-路由匹配，指通过 一套匹配规则，对地址栏路径地址 进行 规则匹配，当命中匹配规则时，则命中路由。
-一般场景下， 通过 `/:pathname` 的格式来表示路由路径中的动态部分。
-
-如 `/user/:id`， 则可以匹配 `/user/123`，`/user/456` 等满足规则的地址栏路径。
-
-`/:pathname` 部分会被解析到 `params` 对象中，如上述的 通过`/user/:id`规则解析 `/user/123`，表示为：
-
-```js
-const currentRoute = {
- path: '/user/123',
- params: { id: 123 }
-}
-```
-
-### 其他
-
-在不同的框架或库中， 对路由解析会在基于上述的规则的基础上，进行补充和扩展，提供更加丰富的功能，以满足更多的场景。
-
-比如， **Vue-Router** 使用了 `path-to-regexp` 库作为其路由解析的依赖，该库提供了非常丰富且灵活的路径匹配功能，
-能够适配非常多的从简单到复杂的场景。**React-Router** 则在其内部实现了和扩展了相关的规则。
-
diff --git a/docs/1.前端/10.开发/微前端.md b/docs/1.前端/10.开发/微前端.md
deleted file mode 100644
index 142587f2..00000000
--- a/docs/1.前端/10.开发/微前端.md
+++ /dev/null
@@ -1,285 +0,0 @@
----
-title: 谈谈微前端
-createTime: 2019/08/31 05:13:33
-author: pengzhanbo
-permalink: /article/vpqgx0t7/
----
-
-微前端 是最近比较新兴的一个话题，它不具体指某个库某个框架，而是一个思想，一种概念，运用这种思想，
-根据自身的需求，从而实现适用于自身的 微前端 。
-
-
-
-> 本文根据最近我在公司内部举行的 微前端技术解决方案 分享而写。
-> 提供的 微前端方案 也应用于公司内部的项目，并取得了良好的反馈，获得广泛好评。
-> 本文不具体谈如何实现微前端，仅讲述微前端的概念，期望能够通过本文理解微前端。
-
-## 前言
-
-微前端 目前在行业内是一个新兴的思想。
-
-诞生这个思想的背景是，在公司内部，常常会有一类项目，这类项目很大、很重，
-涉及的业务内容多而杂，还涉及了跨部门共同维护，积累的庞大的技术债 等各种问题。
-这类项目在维护成本上、部署成本上等，都会花费巨大的开销，前端开发人员对于维护这类项目，苦不堪言，
-急需找到解决这类问题的方案。
-
-基于这样的背景下，开始探讨 解决方案的可行性， 微前端 正是基于此 开始慢慢 出现在人们的视野中。
-
-## 现状
-
-### 发展历程
-
-在 Web 的发展初期，还没有所谓的前端的概念，网页的内容也相对简单，大多仅涉及文字图片信息的展示和表单内容，
-这些工作可能网站负责人自己就包办了。
-然后微软推出了 **Ajax** 技术，引起了网页的技术变革，从此网站开始具备了动态交互性，
-能够在网页发起请求动态获取服务器的内容，这丰富了网页的可交互性，网页的开发也从UI界面和表单交互，进一步增加了
-数据和逻辑的开发，前端也慢慢的被划分一个相对独立的职能。
-
-而伴随着 nodejs 的出现，以及 angular 的出现，还包括 vue/react 等库，以及建立在 nodejs 上的生态，
-包括grunt、gulp、webpack 等工具的诞生，前端进入了一个喷井式爆发的时期，也是我们所处的时期。前端越来越专业化，
-包含的技术内容越来越丰富，依托于nodejs 以及众多的技术框架等，向着工程化进一步的发展，前端项目也越来越大。
-
-### 浮现的问题
-
-你是否维护过一个可能有着四五年以上历史的项目？是否维护过一个糅杂了各种各样的库的项目？
-是否维护过一个多个公司部门参与的跨团队联合开发的项目？
-
-对于很多人来说，入职的某个公司，最怕被安排去维护一个这样的项目。因为每一次维护迭代，就如同开盲盒一样，
-永远不知道有什么惊喜在等着自己。
-
-对于这类项目，可能存在的问题包括：
-
-- 跨部门，夸团队联合开发，如何沟通？如何协作？
-- 业务线多，页面多，如何管理？
-- 如何进行代码管理？
-- 如何进行分支管理？
-- 多部门进行迭代，如何把控版本？
-- 存在发布冲突，如何解决？
-- 如何进行测试？
-- 如何管理公共代码？
-- ...
-
-可能改动某一行代码，都会带来意想不到的结果，种种问题的积累，技术债的、业务债的，使得项目越来越臃肿，越来越难以维护。
-
-亟需寻找一种方案，能够解决这些问题。
-
-### iframe嵌入
-
-于是，在大多数时候，我们不得不去选择通过 iframe嵌入 的方式，先把臃肿的项目一点一点的拆开给回各个部门或者团队自行维护，
-再提供一个 系统门户应用，用 iframe嵌入 的方式，加上维护一个菜单列表与其他项目入口链接的映射，来糅合成一个 网站应用。
-
-
-
-通过 iframe嵌入，在一定程度上，满足了 各部门各团队各业务线 独立开发独立部署的需求，只需要提供对应的页面链接就可以接入到
-整个系统中。但也存在着一些问题
-
-**安全问题**
-
-然而，我们知道， iframe是存在安全问题的，如果攻击者使用 iframe访问一个 未知来源的链接，有可能被注入恶意脚本，从而盗取
-系统的隐私信息，这需要我们去严格配置 SCP，以及配置 sandbox，尽可能的保证 iframe 的安全性。
-
-**资源加载过多**
-
-而由于仅需要提供链接就可以嵌入，那么对于各自的项目来说，灵活度就很高，各个项目可以随意的选择各种技术框架来实现自己的业务，
-又或者即使使用了相同的技术框架，但各项目的资源相对独立，对于整个系统而言，需要加载的资源量会十分庞大，
-从而导致了页面访问速度变慢，经常会出现页面部分区域白屏等待时间过长等，这也带来了体验问题。
-
-**访问地图丢失**
-
-由于 iframe 嵌入的站点，独享访问历史记录，与外部的历史记录是相互独立的，即通过浏览器的 前进/回退 按钮来访问历史记录并
-不能得到预期的结果，这在一定程度上影响了用户的操作。
-
-## 寻找解决方案
-
-有没有什么其他的方案，来进一步解决这些问题呢？
-
-
-首先我们明确的知道，单项目管理目前来看不是一个可行的方案，需要在多项目管理上寻求解决方案。
-
-### 多项目公共业务组件
-
-对于多数的大型系统项目而言，大体上都采用以下布局结构：
-
-
-
-主体布局结构包括：
-
-- 导航栏 （可选）
-- 左侧菜单栏 （可选）
-- 内容区域
-- 页脚 (可选)
-
-在这种布局结构下，各个业务板块通常通过 导航栏 或者 左侧菜单栏 进行 导航切换，在 内容区域 展示 业务板块。
-即，总体上看，对于业务来说，导航栏、左侧菜单栏、页脚，这几个都是可能 共同的，主要的不同点在于 内容区域。
-
-那么我们可以把 共同的部分，如 导航栏、左侧菜单栏、页脚 这几个部分，抽离为公共业务组件，
-对于每个业务板块，独立为单独的项目进行开发维护，并在项目中引入这些 公共业务组件。
-公共业务组件其中主要负责之一是提供 链接到各个业务板块。
-
-
-
-这种方案具有如下的优点：
-
-- 整体系统根据业务板块拆分为了多个项目；
-- 实现了项目的独立性，可独立进行开发、发布；
-- 通过在主项目重载渲染，实现类似 **SPA应用** 的访问体验；
-
-但同样也带来了新的问题：
-
-- 公共业务组件
-
- - 公共业务组件 如何进行管理；
- - 公共业务组件 如何在业务板块项目之间保持同步更新；
-
-以及没有解决的问题：
-
-- 资源加载过多；
-
- 各个业务板块项目重复加载公共业务组件，重复加载各种库资源。
-
-- 项目无法实现统一管理；
-
-### 主项目重载业务项目资源
-
-在上一个方案中，公共业务组件的引入解决了一部分问题，也带来了一部分问题，如何把公共业务组件进行统一管理，并保持一致性？
-
-我们回到 iframe方案，在这个 iframe方案中，有一个主项目用于管理这些 菜单栏、导航栏等。 同样的，可以借鉴这个思路，
-也抽象一个主项目，用于管理这些 公共业务组件，然后寻找另一种方式来加载渲染其他的业务板块项目。
-
-我们知道，业务板块的项目，也是通过链接去访问的，而每个链接都对应着一个 html 资源文件，通过加载这个资源，以及HTML内的 css资源、js资源等来渲染页面。那么，我们可以通过解析这个 html资源，然后将得到的 html内容、css文件、js文件，在主项目中加载后渲染到特定的区域，
-那么就可以做到在主项目中加载业务板块项目。
-
-
-
-在主项目中，实现一个 资源加载器与解析器，通过业务板块项目的访问链接，获取 html资源文件，并解析 html 的内容，包括：
-
-- `` 标签中的 ``, `<link>`, `<script>` 等;
-- `<body>` 标签中的 html 内容，`<script>` 等
-
-然后加载 解析得到的 CSS资源、JS资源，将 html内容 插入到 特定的区域中，并进行渲染。
-从而呈现完整的网页内容。
-
-这种方案，进一步解决了如下的问题：
-
-- 公共业务组件交由 主项目进行统一管理，直接避免了同步问题；
-- 业务板块均在主项目中渲染，提高了用户体验；
-
-然而，也引入了新的问题：
-
-- 业务板块都运行在同一个环境中，多个板块之间切换，加载的资源容易对环境产生污染，
- 如污染了某个全局变量、polyfill相互污染等。
-- 可能存在 加载资源跨域问题。
-
-但是也拥有了如下的优点：
-
-- 拆分项目，可独立开发和部署；
-- 主项目统一管理 公共业务组件，更易于维护；
-- 项目间的切换得到体验优化；
-
-当方案思考到了这里，发现，主项目是通过 解析 **链接** 来加载业务板块项目，
-而 **链接** 对于现代前端来说，更多的意义是可能是 **路由**。那么我们顺着这个思路，继续优化，
-
-
-## 新的方案
-
-
-说起路由，我们很容易想到，像如今的 `react`, `vue`, `angular` 等主流的库/框架， 通过 路由 来实现 `SPA` 应用，
-或者说， 通过 **路由分发页面**。
-
-那么，我们可以进一步的扩展这个思路，是否可以通过 **路由分发应用** ？
-
-### 路由
-
-在前端的范畴中，路由指 随着浏览器的地址栏变化，而呈现不同的内容给用户。
-
-通常使用 **hash** 或者 **history API** 实现前端路由。
-
-``` js
-// hash
-`https://pengzhanbo.com/#route`
-
-// history API
-`https://pengzhanbo.com/route`
-```
-路由进一步细化，通过 `/` ，又可以 划分为 一级路由、二级路由、三级路由... 等多级路由。
-
-在现代的前端框架如 `React` / `Vue` / `Angular` 等，均有通过 路由 实现 SPA应用 的技术方案。
-而 SPA应用 就是 **路由分发页面** 。
-
-### 路由分发应用
-
-与 **路由分发页面** 类似，我们也可以通过 **路由分发应用** 。
-
-类似于 主项目重载业务项目资源，通过 实现 路由与业务板块项目的映射关系，
-在主项目中通过路由寻找业务板块项目，加载相关资源并渲染在相关区域。
-
-### 主应用与子应用
-
-从这里开始， 我们将 主项目 定位为 主应用， 将各个 业务板块项目 定义为 子应用。
-在主应用中实现 子应用加载器，加载器通过 解析路由来获取加载对应的子应用。
-
-**主应用：** 作为独立的项目，整个系统的入口应用，负责统一管理公共业务组件（如 菜单栏、导航栏、页脚等），负责实现子应用加载器，负责实现渲染子应用的容器。
-
-**子应用：** 作为独立的项目，系统的各个业务板块分别独立为单独的项目，单独开发维护与部署。
-
-### 注册子应用
-
-主应用需要通过路由发现子应用，需要建议起 路由与子应用的映射关系，所以需要有一套机制，用于向主应用注册子应用，
-并关联相关资源文件等。
-``` json
-[
- {
- "AppName": "Sub Application",
- "route": "/sub-app-route",
- "resource": {
- "js": [
- "https://example.com/index.js"
- ],
- "css": [
- "https://example.com/style.css"
- ]
- }
- },
- // more ...
-]
-```
-
-## 微前端
-
-通过将整个系统拆分为一个个小型的项目，小型项目即为子应用，通过细化，将整个系统细化为一个个微小的应用，
-从而实现了降低整个系统的复杂性。
-一个小型项目可以是某个部门的业务项目，可以是某个业务项目中的某个板块，也可以是一个单独的页面。
-
-这也是为什么将新的方案称之为 **微前端**。
-
-微前端是指，通过将一个系统，拆分为一个个 微小的独立的子应用，通过主应用聚合为一个完整的系统。
-微前端是一个与框架无强关联的概念，可以类比于服务端的微服务，是浏览器端的微服务。
-
-
-
-由于子应用是独立的，理论上是支持使用任意的技术框架进行开发，无论是使用 jQuery开发，还是使用 Vue、React、Angular等。
-然而在实际中，对于整个系统而言，技术框架的选择应该保持统一性，以保证整个系统的可维护性。
-
-
-## 微前端的局限性
-
-微前端的技术方案，更适合于 中大型的项目中使用，而对于小型项目而言，由于本身体量不大，没有必要对整个系统进行进一步的细化，
-细化反而增加了项目的复杂度。
-
-而对于中大型项目而言，如果是老系统迁移到微前端的方案，那么不可避免的，还需考虑新旧方案之间的迁移过渡的方案以及规划。
-如果老系统中存在应用了多种不同的技术框架，或者同框架的不同版本，由于主应用、所有子应用均运行在同一个浏览器环境中，
-不可避免的存在环境污染问题，如全局环境污染，polyfill对于原生对象的多次污染等，还包括CSS的命名污染等问题。
-所以如何保证子应用的正确渲染，如何避免环境污染问题，也是亟需解决的问题。
-
-## 微前端的未来
-
-目前来看，微前端主要分为 主应用 和 子应用，在 **微** 上，也仅细化到页面级别，然而，对于微前端而已，还可以进一步的细化，
-如，细化到页面的某一个区块，细化到某一个逻辑功能，均可以通过微前端的技术方案，共享到主应用以及子应用中使用。
-整个系统愈加化整为零，将复杂度进一步的拆解，细化，令每一块功能、逻辑等都能使用通过某个项目提供，甚至独立的项目进行维护和部署。
-
-微前端是一个与框架无关的概念，但在实现微前端时，如果允许多技术框架共存，所带来的问题的，反而比不使用微前端时所存在的问题，要更难以预料，难以解决。在实际的场景中，最好还是限定在统一的技术框架范畴中，避免由于共存不同的技术框架，而引入更为复杂的问题，
-
-## 结语
-
-微前端是一个相对新兴的技术概念，适用于一些前端场景，但最好是你已经考虑清楚了，微前端是解决你的场景问题的最好方案，否则，除非必要，
-无需选择微前端方案。
diff --git a/docs/1.前端/10.开发/浅谈前端低代码.md b/docs/1.前端/10.开发/浅谈前端低代码.md
deleted file mode 100644
index 03ef65c6..00000000
--- a/docs/1.前端/10.开发/浅谈前端低代码.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 浅谈前端低代码
-createTime: 2022/09/13 08:15:38
-author: pengzhanbo
-permalink: /article/ecdgrife/
-article: false
----
-
-前端低代码在最近的这两年，不少的公司或技术团队都对此青睐有佳，并各自实现了各自的低代码平台。
-
-<!-- more -->
-
-## 前言
-
-前端低代码，是指 无需代码或者仅需少量的代码，即可生成可交互的应用。
-
-这个概念的兴起，期望于能够更快的去构建、部署新的应用，并降低门槛，让非技术开发人员也能够构建新的应用。
-
-## 为什么做低代码
-
-传统的应用开发从启动到发布的过程，大致的流程如下：
-::: center
-
-:::
-
-在这个过程中，我们需要花费大量的时间用于 代码开发 -> 测试 这个过程，在这个过程，还需要根据项目大小，组织多个开发人员、测试人员等参与到项目中，包括制定开发规范、测试规范等。
-
-而对于某些场景的应用，可能整个应用的生命周期相对较短，多个应用之间存在着类似的功能、需求、设计等等，然而在传统的项目开发中，
-我们仍然需要按照上述的流程，完整的走一遍，才能正式发布上线，这无疑会花费大量的时间。一般我们会通过抽离重复的功能、需求、UI等为
-独立的库、组件等，在新项目中实现复用，从而减少开发时间，然而这并不能对项目的发布速度有质的提升。
-
-而对于一些小型企业，或者个体经营户，期望做一个线上应用，但并没有多余的资金资源去组建一个开发团队，对购买服务器、上线应用等更是一知半解，成为了制约他们发展的一道坎。
-
-对于这些场景、存在的问题，需要需要一种方案，能够实现快速的实现从创建项目到发布部署为可访问的项目，并且能够面向更广泛的用户群体。
-这成为了一个非常具有市场潜力的需求。
-
-## 如何做低代码
-
-对于一个前端应用，通常由多个页面组成，在现代前端开发中，我们将页面拆分为一个个组件来进行组合：
-
-
-
-在 前端低代码 中，我们同样的，可以通过 组件来组装页面，通过可视化的交互方式，将组件拖拽到 页面容器中，
-这种交互方式相对来说更加适用于更多的群体。
-
-
-
-同时，需要提供能够对组件进行编辑状态的能力，以支持应用的个性化配置。
-
-
-
-在初步确定好 基础的功能、交互方式后，就可以围绕它们，来完善 实现低代码平台的技术方案。
-
-----
-
-初步明确的，我们需要 通过 **组件** 来组装 应用，围绕这一块，需要实现：
-
-- 低代码组件的规范：开发规范、接入规范；
-- 用于承载组件、组装组件并渲染的应用容器；
-- 组件的状态的更新与保存；
diff --git a/docs/1.前端/10.开发/移动端适配方案.md b/docs/1.前端/10.开发/移动端适配方案.md
deleted file mode 100644
index 54b1c77e..00000000
--- a/docs/1.前端/10.开发/移动端适配方案.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: 移动端适配方案
-createTime: 2020/08/14 01:54:29
-permalink: /article/vhpmovsm/
-author: pengzhanbo
-tags:
- - develop
----
-## 背景
-
-移动端设备由于不同品牌、不同机型，不同设备中，使用的不同浏览器，带来的一系列适配问题。在这些设备中，如何实现展示效果、交互的一致性，是比较头疼的问题。
-
-## 发展
-
-早期的适配方案五花八门。
-
-在2015年双十一左右， 阿里前端团队 AmFe 分享了 `flexiable` 的移动端适配方案，在往后的几年中， `flexiable`成为了主流的移动端适配方案在各大移动端应用中使用。
-
-随着技术的发展，CSS3的`viewport`越来越得到了更多的设备支持， 逐渐的可以直接使用 viewport 来作为 移动端适配方案，2017年左右开始步入开发者的视野。
-
-后来 AmFe 宣布 推荐使用 `viewport` 方案代替 `flexible`，`viewport`方案逐渐成为主流适配方案。
-
-## lib-flexible 方案介绍
-
-### viewport
-
-viewport 即浏览器窗口，在移动端设备中，viewport太窄，为了更好的服务于CSS，提供了 `visual viewport` 和 `layout viewport`
-
-### 物理像素（physical pixel）
-
-物理像素即设备像素，是显示设备中最微小的物理部件。
-
-### 设备独立像素（density-independent pixel）
-
-设备独立像素也称为 密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由系统转换为物理像素
-
-### CSS像素（CSS pixel）
-
-css像素是一个抽象单位，主要用在浏览器上，用来精确的度量Web页面上的内容。
-
-一般情况下， CSS像素称为设备无关的像素，简称 `DIPs`
-
-### 屏幕密度
-
-屏幕密度是指一个设备表面上存在的像素密度，它通常已每英寸有多少像素来计算（`PPI`）
-
-### 设备像素比（device pixel ratio）
-
-简称 `DPR`，定义了物理像素和设备独立像素的对应关系
-
-```html
-设备像素比 = 物理像素 / 设备独立像素
-```
-
-### 简要说明
-
-`flexiable` 通过hack手段，根据设备的dpr值相应改变 `<meta>` 标签中viewport的值：
-
-```html
-<!-- dpr = 1-->
-<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
-<!-- dpr = 2-->
-<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
-<!-- dpr = 3-->
-<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">
-```
-
-从而让页面达到缩放的效果，变相的实现页面的适配功能。
-
-主要的思想：
-
-1. 根据 `dpr`的值来修改 `viewport` 实现1px的线
-2. 根据 `dpr`的值来修改 `html`的 `font-size`，从而使用rem实现等比缩放
-3. 使用 `hack` 手段用`rem`模拟 `vw`的特性
-
-### 使用
-
-> github: [https://github.com/amfe/lib-flexible](https://github.com/amfe/lib-flexible)
->
-
-> px-to-rem: [https://www.npmjs.com/package/postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem)
->
-
-## px-to-viewport 适配方案
-
-`Flexiable` 是通过javascript 模拟 `vw`的特性，到今天未知，`vw`已经得到了众多浏览器的支持，完全可以考虑直接将`vw`单位用于我们的适配布局中。
-
-在css level3 中，定义了和 viewport相关的四个单位，分别是 `vw`、`vh`、`vmin`、`vmax`。
-
-- `vw`: viewport width 简写，1vw等于 `window.innerWidth` 的 `1%`
-- `vh`： viewport height简写，1vh 等于 `window.innerHeight` 的 `1%`
-- `vmin`：vmin的值是当前 vw和vh中较小值
-- `vmax`： vmax的值是当前 vw和vh中较大值
-
-
-
-在一张 750px的设计稿中， 100vw=750px， 1vw=7.5px，通过公式即可转换px单位为vw单位，实现适配。
-
-可以通过 postcss-px-to-viewport 来帮助实现自动转换
-
-> github: [https://github.com/evrone/postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md)
->
-
-### 适用vw适配页面的场景
-
-1. 容器适配
-2. 文本适配
-3. 大于1px的边框、圆角、阴影
-4. 内边距和外边距
diff --git a/docs/1.前端/10.开发/表单配置化生成.md b/docs/1.前端/10.开发/表单配置化生成.md
deleted file mode 100644
index ac0ce4e6..00000000
--- a/docs/1.前端/10.开发/表单配置化生成.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: 表单配置化生成方案
-createTime: 2022/03/17 10:10:04
-author: pengzhanbo
-permalink: /article/y979pp8x/
----
-
-一个简单的基于 vue3 的表单配置化生成方案，可以作为思路参考。
-
-<!-- more -->
-
-## 前言
-
-本方案是个人在做某个项目时，需要实现一个简单的表单配置化生成，而做的一个方案。
-最终结果是通过一份表单配置，渲染为一个表单，并支持：
-
-- 支持多种表单字段类型 （单行文本/多行文本/数字/下拉/多选/单选 等），并支持嵌套字段（对象/数组）
-- 支持字段校验
-- 支持条件判断显示/隐藏 表单字段
-- 支持字段分组展示
-
-
-::: tip
-完整代码仓库地址： [formative](https://github.com/pengzhanbo/formative)
-:::
-
-## 效果展示
-
-**通过配置生成表单：**
-
-
-**配置的字段为对象或者数组时：**
-
-
-**对配置的字段进行分组展示：**
-
-
-## 方案说明
-
-通过配置生成表单，需要明确如何实现 **表单字段** 与对应的表单组件进行关联，并实现**数据绑定**。
-
-### 协议配置
-
-约定一个协议，通过一个对象来表示 表单中某一个字段：
-
-**FieldSchema:**
-```json
-{
- "type": "表示字段的类型，比如单选、多选、单行文本、多行文本等",
- "field": "表示字段的名",
- "label": "表示字段显示的标签",
- "default": "字段默认值",
- "description": "字段描述信息，作为提示信息使用"
-}
-```
-
-对于完整的表单，则使用 `FieldSchema[]` 的数组形式进行配置。
-
-### 表单字段与组件关联
-
-在 vue 中， 组件可以通过 `h(component, attrs[, children])` 渲染函数 进行渲染，
-通过 `h()` 函数，可以实现动态渲染不同的组件。
-
-我们可以利用这一特性，首先 字段类型与对应的组件进行映射，通过映射关系，用 字段类型获取对应的组件，
-然后调用 `h()` 进行渲染。
-
-``` ts
-// 字段类型 与 组件 映射
-const componentMap = {
- radio: RadioField,
- checkbox: CheckboxField,
- text: TextField,
- select: SelectField,
-}
-```
-``` tsx
-{
- name: 'Field',
- props: ['fieldType'],
- setup(props) {
- return () => h(componentMap[props.fieldType])
- }
-}
-```
-
-### 表单数据绑定
-
-对于表单数据，需要实现 数据初始化，以及 对应的 Field组件对数据的可读写。
-
-在vue中，我们可以使用 `provide/inject` API， 在 表单组件的根组件，通过 `provide()` 进行注入，在内部的
-`FieldComponent` 中通过 `inject()` 获取对应的数据，进行读写。
-
-``` ts
-/**
- * 通过 provide 输入数据
- */
-const useFormDataProvide = (formData: FormData): FormInjectKey => {
- const key: FormInjectKey = Symbol('formData')
- provide(key, formData)
-
- return key
-}
-
-/**
- * 通过 inject 获取数据
- */
-const useFormData = (key: FormInjectKey): FormData => inject<FormData>(key)!
-```
-
-由于需要支持 字段为对象/数组时产生的 多层级数据结构，还需要考虑 `FieldComponent` 对 `FormData.a.b` 的
-深层数据的读写。
-
-可以通过实现 `dotPath`， 通过 `FormData['a.b']` 的形式来读写 `FormData.a.b`，这样 `FieldComponent`
-只需要知道 `a.b` 的 `dotPath` 字段路径即可配合 `inject()` 获取的表单数据进行读写。
-
-``` ts
-const useDotPath = <T = any>(model: FormData, dotKey: ComputedRef<string>) => {
- const binding = computed<T>({
- set(data) {
- setDotPath(model.value, dotKey.value, data)
- },
- get() {
- return getDotPath(model.value, dotKey.value)
- },
- })
-
- return binding
-}
-```
-
-## 技术实现
-
-在 [formative](https://github.com/pengzhanbo/formative) 仓库中， 通过本方案实现了一个 配置化生成表单的库。
-
-- `src/components/Formative.tsx` 文件作为表单根组件。
-- `src/components/Field.tsx` 文件作为根据表单字段动态选择对应组件进行表单字段渲染。
-- `src/components/Group.tsx` 文件实现了对表单字段进行分组。
-- `src/components/[other].tsx` 其他文件实现了 各种表单字段组件。
-
-有兴趣了解细节的，可以阅读 [formative 源码](https://github.com/pengzhanbo/formative)，
-我在关键位置进行了相关的代码注释说明。
-
-同时，你可以直接拉取 源码，在本地进行运行。并授权代码使用。
diff --git a/docs/1.前端/2.工具/Jenkinss使用.md b/docs/1.前端/2.工具/Jenkinss使用.md
deleted file mode 100644
index bf7bd8f7..00000000
--- a/docs/1.前端/2.工具/Jenkinss使用.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: Jenkins 使用
-lang: zh-CN
-createTime: 2018/09/16 11:15:27
-permalink: /article/bmtl5ah4/
-author: pengzhanbo
-tags:
- - 工具
----
-
-[Jenkins](https://jenkins.io/) 是一款功能强大的应用程序，允许持续集成和持续交付项目。这里记录一些 Jenkins 使用的方法。
-
-<!-- more -->
-
-_以下基于 `CentOS` 系统。_
-
-### 安装
-安装详见 官网 [Jenkins 安装](https://jenkins.io/download/) 流程，各个系统如何安装均有说明。
-
-环境依赖： `java`
-
-CentOS 下安装：
-``` bash
-sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
-sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
-yum install jenkins
-```
-
-- __默认安装目录__ : `/var/lib/jenkins`
-- __默认日志目录__ ：`/var/log/jenkins`
-- __默认缓存目录__ : `/var/cache/jenkins`
-- __默认admin密码文件__ : `/var/lib/jenkins/secrets/initialAdminPassword`
-- __配置文件__ : `/etc/sysconfig/jenkins`
-
-### 运行
-``` bash
-# 启动 Jenkins
-service jenkins start
-# 重启 Jenkins
-service jenkins restart
-# 停止 Jenkins
-service jenkins stop
-```
-默认运行在 `8080` 端口， 本机可通过 `localhost:8080` 访问。
-
-### 卸载
-``` bash
-service jenkiins stop
-yum clean all
-yum remove jenkins
-rm -rf /var/lib/jenkins
-rm -rf /var/cache/jenkins
-rm -rf /var/log/jenkins
-```
-
-### 修改端口
-1. 打开`Jenkins` 配置文件
-``` bash
-vim /etc/sysconfig/jenkins
-```
-2. 修改 `$HTTP_PORT`
-``` bash
-$HTTP_PORT="8080"
-```
-
-### 获取root用户权限
-1. 打开`Jenkins` 配置文件
-``` bash
-vim /etc/sysconfig/jenkins
-```
-2. 修改 `HTTP_PORT`
-``` bash
-$JENKINS_USER="root"
-```
-3. 修改`Jenkins` 相关目录权限
-``` bash
-chown -R root:root /var/lib/jenkins
-chown -R root:root /var/log/jenkins
-chown -R root:root /var/cache/jenkins
-```
-4. 重启`Jenkins`并验证
-``` bash
-service jenkins restart
-ps -ef|grep jenkins
-# 若显示为root用户，则表示修改完成
-```
-
-### 开机自启
-``` bash
-chkconfig jenkins on
-```
-
-### 全局工具配置
-全局工具配置可以 配置相关工具如`Maven`、`GIT`等工具的路径、或者安装新的不同版本的工具。
-
-配置该设置需要获取 `admin`权限，进入`系统管理 > 全局工具配置`。
-
-如：配置全局 GIT：
-
-
-
-### 用户管理以及用户权限
-- 使用`admin`权限的账号，进入`系统管理 > 用户管理`, 可以添加/修改/删除 用户。
-- 进入`系统管理 > 全局安全配置` 中，勾选 __启用安全__。访问控制选择 __Jenkins专有用户数据库__，使用 __项目矩阵授权策略__, 可以为每个用户分配全局权限。
-- 进入项目配置中，权限 __启用项目安全__ 可以单独为该项目分配用户权限。 从而确保每个项目的安全性。
-
-### Git Parameter
-为项目添加 `git`分支/标签选择参数构建配置，从而方便通过不同分支构建项目。
-
-项目配置：
-
-
-参数化构建：
-
-
-基础`pipeline`配置：
-``` groovy
-// Using git without checkout
-pipeline {
- agent any
- parameters {
- gitParameter branchFilter: 'origin/(.*)', defaultValue: 'master', name: 'BRANCH', type: 'PT_BRANCH'
- }
- stages {
- stage('Example') {
- steps {
- git branch: "${params.BRANCH}", url: 'https://github.com/jenkinsci/git-parameter-plugin.git'
- }
- }
- }
-}
-```
-
-[阅读插件原文（git-parameter）](https://plugins.jenkins.io/git-parameter)
-
-### 其他
-相关工具以及项目配置，都只是小问题而已...
diff --git a/docs/1.前端/2.工具/NPMBinary镜像配置.md b/docs/1.前端/2.工具/NPMBinary镜像配置.md
deleted file mode 100644
index 5c15240b..00000000
--- a/docs/1.前端/2.工具/NPMBinary镜像配置.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: NPM Binary 镜像配置
-createTime: 2021/03/15 08:54:32
-author: pengzhanbo
-tags:
- - 工具
-permalink: /article/hsgdhlah/
----
-
-在 NPM 安装 Electron, Puppeteer 等包时，他们会通过 `postinstall` 脚本下载对应的二进制文件。因为一些不得而知的原因这个过程在某些网络下可能会很慢或不可用。你可以复制以下配置至 `.bashrc` 或 `.zshrc` 中，使用 [npmmirror.com](https://npmmirror.com) 提供的二进制镜像。
-
-<!-- more -->
-
-数据来源于 `binary-mirror-config`。
-
-```sh
-# === NPM BINRAY CHINA ===
-# https://github.com/cnpm/binary-mirror-config/blob/main/package.json#L48
-export NODEJS_ORG_MIRROR="https://cdn.npmmirror.com/binaries/node"
-export NVM_NODEJS_ORG_MIRROR="https://cdn.npmmirror.com/binaries/node"
-export PHANTOMJS_CDNURL="https://cdn.npmmirror.com/binaries/phantomjs"
-export CHROMEDRIVER_CDNURL="https://cdn.npmmirror.com/binaries/chromedriver"
-export OPERADRIVER_CDNURL="https://cdn.npmmirror.com/binaries/operadriver"
-export ELECTRON_MIRROR="https://cdn.npmmirror.com/binaries/electron/"
-export ELECTRON_BUILDER_BINARIES_MIRROR="https://cdn.npmmirror.com/binaries/electron-builder-binaries/"
-export SASS_BINARY_SITE="https://cdn.npmmirror.com/binaries/node-sass"
-export SWC_BINARY_SITE="https://cdn.npmmirror.com/binaries/node-swc"
-export NWJS_URLBASE="https://cdn.npmmirror.com/binaries/nwjs/v"
-export PUPPETEER_DOWNLOAD_HOST="https://cdn.npmmirror.com/binaries"
-export SENTRYCLI_CDNURL="https://cdn.npmmirror.com/binaries/sentry-cli"
-export SAUCECTL_INSTALL_BINARY_MIRROR="https://cdn.npmmirror.com/binaries/saucectl"
-export npm_config_sharp_binary_host="https://cdn.npmmirror.com/binaries/sharp"
-export npm_config_sharp_libvips_binary_host="https://cdn.npmmirror.com/binaries/sharp-libvips"
-export npm_config_robotjs_binary_host="https://cdn.npmmirror.com/binaries/robotj"
-```
diff --git a/docs/1.前端/2.工具/caniuse.md b/docs/1.前端/2.工具/caniuse.md
deleted file mode 100644
index 8d183aaa..00000000
--- a/docs/1.前端/2.工具/caniuse.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: caniuse
-createTime: 2020/11/01 06:41:12
-permalink: /article/h4z91gyz/
-author: pengzhanbo
----
-
-### 工具
-
-将caniuse 的feature 结果，以图片或者iframe的形式，嵌入到站点。
-[https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
diff --git a/docs/1.前端/2.工具/git工作流实践.md b/docs/1.前端/2.工具/git工作流实践.md
deleted file mode 100644
index 121b2693..00000000
--- a/docs/1.前端/2.工具/git工作流实践.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: git工作流实践
-createTime: 2022/04/18 12:26:46
-author: pengzhanbo
-permalink: /article/cjeo0sia/
-tags:
- - 工具
-banner: https://assets.processon.com/chart_image/6251bfce1efad407891be6c8.png
----
-
-这是一篇在我个人工作实践中，在我参与的，负责的项目、团队协作中，逐步调整，适合于一些实际场景的 git 工作流实践。
-
-众所周知，在软件开发中， git 是目前使用最广泛的 软件版本管理工具，它足够高效，足够安全，也足够灵活，
-对于团队协作和软件管理提供了很大的帮助。
-
-而一个良好的合适的 分支管理方案，可以更好的帮助我们通过 git 进行 软件版本管理。
-
-在过去， git-flow 是一个很流行的 分支管理方案。对于多人协作，中大型项目，提供了一个较为满意的解决方案。
-
-但在我过去的实践中，逐渐感受到 git-flow 对于我来说还是太过于繁杂了，虽然在事实上满足了 我对于项目的软件版本管理，
-但认为还是可以做一些简化，调整 分支管理策略，以更好的适配实际的开发工作。
-
-## 场景
-
-试想一下，在我们实际的软件开发过程中，迭代一个软件的版本，正常来说是：
-
-```
-需求评审 -> 需求确认 -> 开发阶段 ->
-测试环境测试 -> 预生产发布验证 -> 生产环境发布验证 -> 发布完成
-```
-
-### 从开发到发布
-
-在这个过程中，如果在 测试环境发现了 bug，需要重新回归到 开发阶段进行修复，
-同样的，在预生产发布验证环节发现了问题，也需要重新回归到 开发阶段修复后，重新测试和发布预生产。
-
-而如果 生产环境发布验证 出现了问题， 需要紧急回滚到上一个版本，并重新回到开发阶段修复，测试，预生产验证，再生产发布。
-
-### 需求明确 or 变更
-
-虽然我们一直强调，版本迭代进入开发后，这个版本的需求应该是明确的。
-
-然而，这仅仅只是理想情况下，实际过程中经常会遇到 需求变更，甚至是 添加新的功能，删除功能等。
-这种变更，还很难控制会发生在开发阶段还是测试阶段。
-
-也许我们会吐槽甚至抱怨这样的容易变更需求的项目管理很糟糕，很不专业。但是，这也是确确实实存在的场景，
-即使再成熟的团队，也会不可避免的遇到这种问题。
-
-然而需求变更也不代表着一定是上面这种场景。
-
-### 周期性版本发布，需求池
-
-有些项目可能相对来说比较成熟，或者采用了不同的版本迭代方式。
-
-周期性版本发布指，采用某个固定的周期内，仅会也一定会发布一个版本，如 每两周发布一个版本。
-那么在这种模式下，每个版本上线哪些功能，上线多少功能，实际上是以各个功能的开发进度，和进入到当前周期后，
-明确下来的版本计划再决定的。
-
-将产品 明确划分为一个个需求，建立一个需求池，并指定了每个需求的按时间的线性迭代预期计划，
-在预期的未来的周期性的版本发布中，会上线哪些需求功能。
-
-在这种场景下，我们不可能把需求都集中在某个分支上进行开发，仅有的一个 develop分支也很难满足所有的
-开发合并和测试。
-
-
-### 开发人员对于 git的掌握
-
-很多时候，对于工具能够使用到什么程度，对于项目能够有多少帮助，其实不在于 工具有多优秀，而是在于团队成员
-对于工具的平均掌握程度，已经是否有成熟的规范化的操作流程。
-
-早期我认为 成员对于 git 的掌握是大差不差的，只要说明一些操作流程即可，未加以限制和规范
-
-然而，这会也给项目带来了潜在的风险：主要分支可能会被误操作污染，多个功能直接在同一个分支开发等等。
-
-而为了解决这些问题，需要建立一套足够完善，同时低复杂度的操作规范，并对人员和分支加以权限控制。
-
-
-## 分支管理实践
-
-在以上的场景中，逐渐摸索出了一套合适的分支管理方案：
-
-- `master` 分支： 主分支，正式版本的代码提交记录。
-
- 永远不会在上面做任何改动提交，也仅接受来自 `release` 分支的合并请求，合并后打上版本tag。
-
-- `release` 分支：发布分支，用于发布版本到预生产和生产环境，发布完成后合并到 master分支。
-
- 永远不会咋上面做任何改动提交，也仅接受来自 prerelease 分支的合并请求。
-
-- `prerelease/*` 分支组： 预发布分支，根据版本号创建新的分支。
-
- 仅合并当前版本关联的 `feature/*` 分支，用于合并开发完成的需求，进入到版本测试阶段，发布到测试环境。
- 不会或者尽可能少的在上面做任何改动提交。
-
-- `feature/*` 分支组： 功能开发分支(包括hotfix)，从 master 分支拉取创建的分支，
-
- 每个分支仅针对某一个单一的业务或者功能，所有的改动都应该在 feature 分支上进行。
- 仅能合并到 prerelease 分支。 master有更新后需要及时拉取合并同步。
-
-
-流程图：
-
-
-可以看出，整个方案只有四条主要的分支，且不同功能分支到其他分支都是单向的。
-
-这样的好处是足够的简单，足够的好理解，也保证了一定的灵活性。
-
-删除了 develop分支的原因是，单一的develop分支并不能很好的满足 需求变更后导致的 develop分支无效，
-选择使用 prerelease 分支组作为替代，可以灵活的根据版本规划创建分支，即使发生需求变更，也可以灵活的直接抛弃
-当前已创建的分支，重新新建一条 prerelease分支再次从feature分支合并代码。
-
-从 develop 改名为 prerelease 也是因为，功能分支开发完后并不是马上合并的，而是根据迭代计划再合并的，理解起来就是
-预期上线的功能，即 prerelease。
-
-从分支的行为上看， master分支和 release分支 似乎可以在简化仅保留一条。但这里是考虑到 如果有发布回滚操作，如果
-都在 master 分支上进行，那么master分支的操作记录看起来就不够的干净，简洁，而把发布、回滚等策略都放到了 release分支
-，而 master仅保留干净的版本历史，那么会更加的友好，便于维护。
-
-在这个方案中，最好是配合上 git分支的权限控制，对 master分支、release分支进行保护，确保这两个分支仅接受来自对应
-分支的合并请求。
-
-分支合并，选择 `merge` 还是 `rebase`，这个需要对 commit记录有何要求去考量。
-如果需要保证所有提交记录都可追踪，建议使用 merge，如果希望 提交记录线性、整洁，建议使用 rebase。
-
-同时，feature分支 合并到 prerelease 分支，最好是通过 pull requests 的操作模式，在进入测试阶段前，接受来自其他
-有用审查权限的开发人员的code review。
-
-::: warning 说明
-该实践方案仅是我过去在我的工作实践中总结的，并在团队内部经历过超过2年的验证和调整所得出的，适合于当时团队的实践方案。
-
-是否与您的团队或所在的团队契合，还需要重新考量。
-
-分支管理方案 需要从实际的情况触发考虑，包括团队人数，产品规模等等。
-
-没有最好的方案，只有合适自己的方案。
-:::
diff --git a/docs/1.前端/2.工具/vsCode插件推荐.md b/docs/1.前端/2.工具/vsCode插件推荐.md
deleted file mode 100644
index c5c75a20..00000000
--- a/docs/1.前端/2.工具/vsCode插件推荐.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: VSCode 常用插件推荐
-lang: zh-CN
-createTime: 2018/12/29 11:15:27
-permalink: /article/ofp08jd8/
-author: pengzhanbo
-tags:
- - VSCode
----
-
-`VS Code` 作为我现在工作中最常用的编辑器，也是我十分喜欢的编辑器。它强大的功能和插件系统，对我的工作提供了很多帮助和支持。将我在工作中经常使用的插件，推荐给大家。
-
-<!-- more -->
-
-### Code
-
-1. [Code Spell Checker](https://github.com/Jason-Rev/vscode-spell-checker)
-
- 单词拼写检查插件，帮助检查代码中单词是否拼写错误，包括驼峰形式的变量名称检查。可以在一定程度避免一些不必要的单词拼写错误导致的一些低级错误。
-
-2. [ESLint](https://github.com/Microsoft/vscode-eslint)
-
- javascript ES6 代码规范、语法检查工具，帮助规范团队代码规范。
-
-3. [EditorConfig](https://github.com/editorconfig/editorconfig-vscode)
-
- 编辑器配置，代码格式规范相关，必备。
-
-4. [Prettier](https://github.com/prettier/prettier-vscode)
-
- 帮助格式化`javascript`、`typescript`、`CSS`代码。 <br />
- `Prettier` 会读取 `.editorconfig`，或根据提供相关配置，格式化代码为符合项目代码规范。
-
-5. [Bracket Pair Colorizer](https://github.com/CoenraadS/BracketPair)
-
- 可以对每一个代码块或者每一层嵌套，以不同的颜色高亮，帮助阅读代码。
-  <br/>
- 主要是针对 `()`，`[]`，`{}` 进行不同嵌套的颜色高亮
-
-6. [Code Runner](https://github.com/formulahendry/vscode-code-runner)
-
- 在`VSCode`中运行各种各样的语言。并将结果输出到输出控制台。
- 方便代码调试。
-
-7. [Color Highlight](https://github.com/sergiirocks/vscode-ext-color-highlight)
-
- 颜色高亮插件，读取文件中的 十六进制、RGB、RGBA 等颜色，并以对应的颜色高亮显示。
-
-
-### theme
-
-1. [Atom One Dark Theme](https://github.com/akamud/vscode-theme-onedark)
-
- 一款 Atom 的 暗色系主题皮肤。 习惯了`Atom`编辑器，转而使用`VSCode`的小伙伴们可以使用这款皮肤。<br/>
- 颜色对比度适中，不会太过强烈。
- 
-
-### GIT
-
-1. [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)
-
- 可以帮助查看到文件的每一行的详细修改信息，包括 HASH串、作者、日期等。
-
-2. [Git history](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
-
- 以可视化的界面查看 git log 信息。支持：<br/>
- 查看所有分支或者某一个分支的log信息；<br/>
- 查看某一个文件的log信息；<br/>
- 查看某一个作者的log信息等。<br/>
-
-3. [Git Project Manager](https://github.com/felipecaputo/git-project-manager)
-
- 该插件可以帮助你快速在VSCode新窗口打开本地git项目。<br />
- 命令：`ctrl+shift+p` / `cmd+shift+p` <br/>
- 或者按下 `F1`，输入 `GPM`
-
-4. [Git Tags](https://github.com/leftstick/vscode-git-tags)
-
- Git Tag 管理插件
-
-5. [Git Lens](https://gitlens.amod.io/)
-
- 这款插件十分适合在多人协作项目中使用，可以定位到当前文件每一行的最后提交作者、时间等git log，也可以查看到当前文件的所有日志等。
- 如果有装这一款插件，`Git Blame`插件就没有必要装了。
-
-
-6. [git ignore](https://github.com/CodeZombieCH/vscode-gitignore)
-
-### Markdown
-
-1. [Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced)
-
- 一款功能强大的 markdown 插件。让你在vscode 中拥有更好的 markdown 写作体验。
-
-### Icon
-1. [vscode-icons](https://github.com/vscode-icons/vscode-icons)
- 文件菜单 icons。 根据文件夹命名、文件后缀等，对文件夹、文件菜单栏添加 对应的`icon`。
- 
-
-2. [VSCode Great Icons](https://marketplace.visualstudio.com/items?itemName=emmanuelbeziat.vscode-great-icons)
- 另一款 文件菜单栏 icons，支持 100+的文件类型。<br/>
- 
-
-### IDE support
-
-1. [View In Browser](https://github.com/hellopao/view-in-browser)
-
- 快速打开html页面在浏览器中访问。
-
-2. [ftp-simple](https://github.com/humy2833/FTP-Simple)
-
- FTP 上传/下载插件。
-
-3. [Rest Client](https://github.com/Huachao/vscode-restclient)
-
- 允许你在 `VSCode` 中发送HTTP请求，并查看response的内容。
-
-### Framework support
-
-1. [Vetur](https://github.com/vuejs/vetur)
-
- Vue 支持。
-
-2. [minapp](https://github.com/wx-minapp/minapp-vscode)
-
- 微信小程序 支持。
-
-
diff --git a/docs/1.前端/2.工具/小徽章制作.md b/docs/1.前端/2.工具/小徽章制作.md
deleted file mode 100644
index 2099625b..00000000
--- a/docs/1.前端/2.工具/小徽章制作.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: 小徽章制作
-createTime: 2021/07/20 04:37:25
-author: pengzhanbo
-permalink: /article/qrfeqp1q/
----
-
-用于制作 小徽章的在线网站 或项目
-
-- [https://shields.io/](https://shields.io/)
-- [https://badgen.net/](https://badgen.net/)
-- [https://forthebadge.com/](https://forthebadge.com/)
-- [https://badge.fury.io/](https://badge.fury.io/)
-- [https://github.com/boennemann/badges](https://github.com/boennemann/badges)
-
-## example
-
-``` md
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
diff --git a/docs/1.前端/2.工具/有用的工具列表.md b/docs/1.前端/2.工具/有用的工具列表.md
deleted file mode 100644
index 200b76ce..00000000
--- a/docs/1.前端/2.工具/有用的工具列表.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: 有用的工具列表
-createTime: 2021/02/10 09:55:09
-author: pengzhanbo
-permalink: /article/xb4woxjg/
-sticky: 10
----
-
-## 浏览器插件
-
-- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?) 顾名思义，非常有用的浏览器 vue开发调试插件
-- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) React 开发调试插件
-- [Octotree - GitHub code tree](https://chrome.google.com/webstore/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc) 对github仓库的文件tree生成侧边栏，方便在线查阅浏览/跳转
-- [XPath Helper](https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl) 提取当前网站选中的 DOM 元素的 XPath，做埋点测试之类时有用
-
-
-## cli开发
-
-- [commander](https://www.npmjs.com/package/commander) 完整的命令行解决方案
-- [cac](https://www.npmjs.com/package/cac) 轻量级的用于构建cli工具的解决方案
-----
-- [minimist](https://www.npmjs.com/package/minimist) 命令行参数解析工具
-- [yargs](https://www.npmjs.com/package/yargs) 命令行参数解析工具
-----
-- [Inquirer](https://www.npmjs.com/package/inquirer) 交互式命令行工具
-- [prompt](https://www.npmjs.com/package/prompt) 命令行 对话工具
-----
-- [shelljs](https://www.npmjs.com/package/shelljs) shell调用工具
-- [execa](https://www.npmjs.com/package/execa) shell 调用工具
-- [chalk](https://www.npmjs.com/package/chalk) node终端输出美化工具
-- [ora](https://www.npmjs.com/package/ora) 终端 loading 工具
-- [chokidar](https://www.npmjs.com/package/chokidar) 文件监听工具
-
-- [is-ci](https://www.npmjs.com/package/is-ci) 检查当前环境是否是集成环境
-
-## Http server
-
-- [express](http://expressjs.com/)
-- [connect](https://github.com/senchalabs/connect)
-- [koa](https://koajs.com/)
-- [fastify](https://www.fastify.io/)
-
-## Server Framework
-
-- [Nestjs](https://nestjs.com/) 类Spring boot的 Node端开发框架
-- [Next.js](https://nextjs.org/) React 应用开发框架
-- [Nuxt.js](https://nuxtjs.org/) Vue 应用开发框架
-- [Think.js](https://thinkjs.org/) Node端开发框架
-
-- [Egg.js](https://www.eggjs.org/index) 阿里开源的Node端开发框架
-
-## VSCode 插件
-
-### 皮肤
-
-- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) 个人觉得非常耐看，好用，舒服的一个皮肤。
-- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 非常全面又好看的文件图标主题
-
-### 辅助开发
-- [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 辅助代码提示
-- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 拼写检查插件
-- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) 用更友好更直观的方式，将错误信息显示出来
-- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 更加友好的注释高亮
-- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 代码缩进高亮
-- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 显示包体积
-- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TODO注释高亮
-- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 缩进高亮标识
-- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) 文件路径提示
-- [TypeScript Hero](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero) typescript 辅助开发工具
----
-- [any-rule](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) 正则表达式大全
----
-- [Rest Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) 类 Postman 的 Rest工具
-
-
-## 测试工具
-
-### assertion
-- [chai](https://www.npmjs.com/package/chai)
-- [should](https://www.npmjs.com/package/should)
-
-### unit
-- [jest](https://www.npmjs.com/package/jest)
-- [ava](https://www.npmjs.com/package/ava)
-- [mocha](https://www.npmjs.com/package/mocha)
-- [karma](https://www.npmjs.com/package/karma)
-- [tape](https://www.npmjs.com/package/tape)
-- [@vue/test-utils](https://www.npmjs.com/package/@vue/test-utils)
-
-### 2e2
-- [nightwatch](https://www.npmjs.com/package/nightwatch)
-- [cypress](https://www.npmjs.com/package/cypress)
-
-
-## GIT相关
-
-- [@commitlint/cli](https://www.npmjs.com/package/@commitlint/cli)
-- [@commitlint/config-conventional](https://www.npmjs.com/package/@commitlint/config-conventional)
-- [commitizen](https://www.npmjs.com/package/commitizen)
-- [conventional-changelog-cli](https://www.npmjs.com/package/conventional-changelog-cli)
-- [cz-conventional-changelog](https://www.npmjs.com/package/cz-conventional-changelog)
-- [husky](https://www.npmjs.com/package/husky)
-- [lint-staged](https://www.npmjs.com/package/lint-staged)
-
-## 其他
-
-- [Slidev](https://github.com/slidevjs/slidev) 为开发者打造的演示文稿工具
-- [loupe](http://latentflip.com/loupe/) 代码执行流程可视化
diff --git a/docs/1.前端/3.Vue/Vue组件间通信.md b/docs/1.前端/3.Vue/Vue组件间通信.md
deleted file mode 100644
index dd8865cf..00000000
--- a/docs/1.前端/3.Vue/Vue组件间通信.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: Vue组件间通信
-lang: zh-CN
-tags:
- - vue
-createTime: 2018/07/20 11:15:27
-permalink: /article/iezlvhvg/
-author: pengzhanbo
----
-在我们在进行基于[Vue](https://cn.vuejs.org/)的项目开发时，组件间的数据通信，是我们必须考虑的。
-
-<!-- more -->
-
-> 注： 本文所实现的方式，是在不考虑`vuex`下所做的实现。
-
-
-我把组件间的关系，大致分为三种：
-1. 父子组件
- ``` html
- <parent>
- <child></child>
- </parent>
- ```
- 拥有类似结构，`parent`组件包含`child`组件，则`child`组件是`parent`的子组件，`parent`组件是`child`组件的父组件。
-2. 兄弟组件
- ``` html
- <item></item>
- <item></item>
- ```
- 两个`item`组件在结构上同级，我们称之互为兄弟组件。
-3. 跨多级组件
- ``` html
- <list>
- <item>
- <message><message>
- </item>
- </list>
- <dialog>
- <content></content>
- </dialog>
- ```
- 在这个结构中，`<list>`和`<message>`并不是直接的父子组件，中间还跨了一个级，在实际场景中，还会有跨更多层级的组件关系。`<message>` 和 `<content>` 组件两个既不是兄弟组件，又不是父子组件，而是跨了兄弟，父子的多级关系，实际场景中也会有发生交互。
-
-那么这三种关系的组件，我们应该如何进行组件通信？
-
-### 父子组件通信
-
-要讲父子组件的通信，首先，我们需要了解 `vue` 组件的 特性。
-1. 单向数据流，数据自上而下。
- > Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为
- >了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
-
-2. 事件自下而上。
-
- 组件内部状态的变化，通过事件往上冒泡，通知上一级组件，由上一级组件监听事件，并触发相应回调。
-
-基于以上，父子组件通信推荐的方式是：
-
-父组件通过`props`将状态传到子组件，子组件通过事件将状态冒泡到父组件，由父组件监听触发回调改变状态。
-
-`parent.vue`
-``` html
-<template>
- <div class="parent">
- <child
- :name="name"
- @name-change="nameChange"
- >
- </child>
- </div>
-</template>
-<script>
-import Child from './child';
-export default {
- name: 'parent',
- data () {
- return {
- name: 'Jack'
- };
- }
- methods: {
- nameChange(name) {
- this.name = name;
- }
- },
- components: {
- Child
- }
-}
-</script>
-```
-`child.vue`
-``` html
-<template>
- <div class="child">
- <span>{{name}}</span>
- <button @click="onClick">change name</button>
- </div>
-</template>
-<script>
-export default {
- name: 'child',
- props: {
- name: {
- type: String,
- defualt() {
- return '';
- }
- }
- },
- methods: {
- onClick() {
- this.$emit('name-change', 'John');
- }
- }
-}
-</script>
-```
-在某些例子或个人项目中，经常有发现到在子组件中使用 `this.$parent` 直接改变父组件的状态，诚然这种方式能够简化两个深耦合的组件的数据通信，在一些简单的场景中也会比较方便，但其实并不推荐采用这种方式实现父子组件通信，这样做的后果就是导致了数据流的不明确性，牺牲了单项数据流的简洁性，数据的变化流动变得不易于理解。
-
-### 兄弟组件通信、跨多级组件通信
-
-这两种组件关系，并没有直接的联系。
-
-如兄弟组件，我们会很自然的想到使用他们的父级组件作为中转，将 `子组件1` 的状态通信到父组件，再由父组件通过 `props` 流向 `子组件2` ，反之亦然，但是如果兄弟组件间的交互复杂，但又与父组件没有存在直接的交互关联，父组件在这个过程当中，承担了多余的职责。
-
-又如跨多级组件，上述例子中，`<list>`和`<message>`之间间隔了多层，如果我们继续使用父子组件通信`prop`和事件冒泡，中间的层需要重复的定义`prop`和事件，这显然也导致了它们承担了多余的职责。 `<message>` 和 `<content>` 组件之间，更是在结构上没有关联，`prop`和事件冒泡显得十分乏力，无法直接完成通信。
-
-那么这两种组件关系，该如何完成通信，又不对它们中间层级组件，或者父级组件造成多余的干扰？
-
-由于两种组件关系没有直接的关联，所以我们需要有一个桥梁，能够直接连接它们，使它们变得有关联。即，我们需要一个`中间件`。
-
-官方给我们的解决方案是`vuex`，但我认为它更多是的作为全局状态的管理，使用它作为某两个组件的通信中间件，显得大材小用，所以我这里不做讨论。
-
-我所采取的方案是使用 自定义事件 完成组件通信。
-
-__实例化Vue__
-
-`vue`已实现了一套事件系统，可以很方便的使用它来完成我们的组件通信。
-
-``` javascript
-let middleware = new Vue();
-export defualt middleware;
-```
-`message.vue`
-``` javascript
-export default {
- name: 'message',
- data () {
- return {
- info: 'hello'
- };
- },
- methods: {
- sayHello() {
- middleware.$emit('say-hello', this.info);
- }
- }
-};
-```
-`content.vue`
-``` javascript
-export default {
- name: 'content',
- data() {
- return {
- info: '';
- }
- },
- created() {
- middleware.$on('say-hello', info => {
- this.info = info;
- });
- }
-}
-```
-我们通过 `middleware`， 在`content.vue`注册了`say-hello`事件，当`message.vue`触发该事件时，`content.vue`监听到事件触发回调，从而实现了状态传导。
-
-组件数据传导不再是通过`props`传导，而是通过事件进行通信。
-
-__如果不使用实例化Vue的方式去完成，我们也可以自己实现一套自定义事件。__ 这可以做更加个性化的自定义事件，满足项目中的多样的使用场景。
-``` javascript
-class Event{
- constructor() {
- // some props
- }
- on() {
- // do something
- }
- emit() {
- // do something
- }
- off() {
- // do somethig
- }
-}
-```
-
-### 总结
-复杂结构的组件通信，实现它们的通信，关键是实现中间件作为桥梁连接它们，无论是使用自定义事件，还是其他的方案。
diff --git a/docs/1.前端/5.Node/单仓库导出ES和CJS.md b/docs/1.前端/5.Node/单仓库导出ES和CJS.md
deleted file mode 100644
index 6e6dbb88..00000000
--- a/docs/1.前端/5.Node/单仓库导出ES和CJS.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-title: 单仓库实现同时导出esm、cjs
-createTime: 2022/04/06 08:33:04
-author: pengzhanbo
-permalink: /article/exports-esm-and-cjs/
----
-
-在开发一些公共模块作为一个独立仓库时，有时候可能会在一个使用 es 的项目中通过 `import` 导入，
-有可能在一个 cjs 项目中通过 `require` 导入。
-
-如何实现单个仓库能够同时被 cjs 和 esm 项目导入呢？
-
-<!-- more -->
-
-## 为什么这么做？
-
-在过去的时间里，JavaScript 并没有一套标准的模块化系统，并且在过去的时间里，逐渐发展出了各种模块化解决方案，
-其中最主流的有两种模块化方案：
-
-- `CommonJs`： 即`cjs`,通过 `require('package')` 导出，`module.exports` 导入。
- 这套模块化系统应用与在`NodeJs` 和 `NPM packages`。
-
- ```js
- // in cjs
- const _ = require('lodash')
- console.log(`assignIn: ` _.assignIn({ b: '2'}, { a: '1' }))
- // { a: '1', b: '2' }
- ```
-
-- `Ecmascript modules`: 即`esm`，在2015年，`esm` 最终确定为标准模块化系统，浏览器以及各个社区开始逐渐
- 迁移并支持`esm`。
-
- ```js
- import { assignIn } from 'lodash'
- console.log(`assignIn: ` assignIn({ b: '2'}, { a: '1' }))
- // { a: '1', b: '2' }
- ```
-
- `ESM`使用 `named exports`，能够更好的支持静态分析，对各种打包工具有利于做`tree-shaking`，
- 而且浏览器原生支持，作为一个标准，代表的是JavaScript的未来。
-
- 同时，在`NodeJs` 的 `v12.22.0`、`v14.17.0`版本，开始实验性的支持`ESM`，并在`16.0.0`版本开始正式支持`ESM`。
-
-
-::: note
-- ESM - [ECMAScrip modules](https://nodejs.org/api/esm.html)
-- CJS - [CommonJs](https://nodejs.org/api/modules.html#modules-commonjs-modules)
-:::
-
-目前有很多包仅支持 `CJS` 或者 `ESM` 格式。 但同时，也有越来越多的包推荐并仅支持导出 `ESM` 格式。
-
-但是相对来说，就目前而言，作为一个库，仅支持`ESM` 格式还是过于激进了。即使在 `NodeJs v16`已开始正式支持`ESM`，
-但是整个社区的迁移还是需要大量的时间成本和人力成本的，如果某个版本破坏性的从`CJS`支持迁移到`ESM`，
-那么可能导致一系列问题。
-
-所以，如果一个库，能够同时支持`ESM`以及`CJS`，是一种相对来说更为安全的迁移方案。
-
-## 共存问题
-
-我们知道，`Nodejs` 能够很好的同时支持 `ESM` 和 `CJS` 进行工作，但是，有一个最主要的问题是，不能在一个 `CJS` 中
-导入`ESM`，这时候会抛出一个错误：
-```js
-// cjs package
-const pkg = require('esm-only-package')
-```
-```
-Error [ERR_REQUIRE_ESM]: require() of ES Module esm-only-package not supported.
-```
-
-因为`ESM` 模块本质上是一个异步模块，所以不能用 `require()` 方法同步的导入一个异步的模块。
-但是这并不意味着完全不能在 `CJS` 模块中使用`ESM` 模块，我们可以使用 动态 `import()` 的方式，来异步的导入`ESM` 模块。
-`import()` 会返回一个 `Promise`：
-
-```js
-// CJS
-const { default: pkg } = await import ('esm-only-package')
-```
-
-但是，这并不是一个令人满意的解决方案，它与我们日常使用的模块导入方式来说，显得有点笨拙，不符合一般使用习惯，
-我们还是更期望能够符合一般习惯的导入方式：
-
-```js
-// ESM
-import { named } from 'esm-package'
-import cjs from 'cjs-package'
-```
-
-## 如何做？
-
-### package.json
-
-在现在的稳定版本的`NodeJs` 中，已经支持同时在一个包中导出两种不同的格式。
-在`package.json` 文件中，有一个`exports` 字段，提供给我们有条件的导出不同格式。
-
-``` js
-{
- "name": "package",
- "exports": {
- ".": {
- "require": "./index.js",
- "import": "./index.mjs"
- }
- }
-}
-```
-
-这一段声明描述了， 当进行导入包的默认模块时，如果是通过 `require('package')` 进行导入，那么引入的是 `./index.js` 文件，如果是通过`import pkg from 'package'`进行导入，那么引入的是 `./index.mjs` 文件。
-
-`Nodejs` 会根据当前运行环境，选择合适的导入方式将包进行导入。
-
-所以我们可以借助这一特性，来完成我们单仓库支持两个格式的第一步。
-
-然后，下一个要解决的，就是如何构建两个格式的导出文件。
-
-### Building
-
-我们当然不可能为了同时支持`CJS`和 `ESM`，而编写两份代码。
-
-但我们可以借助一些构建打包工具，来生成`ESM`和`CJS`代码。
-
-通常情况下，我们可能会使用 `rollup` 来构建打包我们的模块。
-或者也可以使用 `tsup` 来构建。
-
-#### rollup
-
-当我们会选择 `rollup` 来构建一个库时，可能配置如下：
-
-```js
-// rollup.config.js
-export default {
- input: 'src/index.js',
- output: {
- file: './dist/index.js',
- }
-}
-```
-
-由于`rollup` 是支持多配置打包的，所以我们可以使用多配置的方式，同时打包输出两种格式的文件：
-```js
-// rollup.config.js
-export default [
- {
- input: 'src/index.js',
- output: {
- file: './dist/index.js',
- format: 'cjs',
- }
- },
- {
- input: 'src/index.js',
- output: {
- file: './dist/index.mjs',
- format: 'es',
- }
- }
-]
-```
-
-
-#### tsup
-
-`tsup` 是一个面向 `TypeScript` 的打包工具，基于 `esbuild`， 可以很方便的将我们的库打包成多种模式进行输出：
-
-`tsup` 可以支持零配置，直接使用命令行即可输出两种格式
-
-``` sh
-tsup src/index.ts --format esm,cjs
-```
-
-执行完成后，将会得到两个文件：`cjs` 格式文件`dist/index.js` 和 `esm`格式文件`dist/index.mjs` 。
-
-
-使用构建工具构建完成后，接下来就是完善 `package.json`，
-
-建议在使用 `type` 字段声明为 `module`, 来声明当前库时一个标准的 esm 库，以及添加 `main`,`module`,`exports`字段,
-以便向下兼容：
-
-```json
-{
- "name": "my-package",
- "type": "module",
- "main": "./dist/index.js",
- "module": "./dist/index.mjs",
- "exports": {
- ".": {
- "require": "./dist/index.js",
- "import": "./dist/index.mjs"
- }
- },
- "types": "./dist/index.d.ts",
- "files": ["dist"]
-}
-```
-
-最后，你的 `CJS` 项目中，或者 `ESM` 项目中，均可以根据环境要求，导入这个包。
-
-```js
-// cjs
-const pkg = require('my-package')
-```
-
-```js
-// esm
-import pkg from 'my-package'
-```
-
-## 总结
-
-虽然 `Nodejs` 从 `v14.22.0` 版本开始试验性的支持 `esm` ，并且到 `v16` 版本，正式支持 `esm`。
-但将库升级到仅支持`esm` 还是一个比较激进的做法，建议从相对安全的 双格式支持 开始迁移，在合适的时机，过渡到仅支持`esm`。
-
diff --git a/docs/1.前端/5.Node/在node项目中使用esm.md b/docs/1.前端/5.Node/在node项目中使用esm.md
deleted file mode 100644
index 48676167..00000000
--- a/docs/1.前端/5.Node/在node项目中使用esm.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: 在NodeJs项目中使用ECMAScript module
-createTime: 2022/06/17 02:04:57
-author: pengzhanbo
-permalink: /article/7jzjudus/
----
-
-随着 `Nodejs v16` 成为长期稳定支持的版本，`ESM` 也随之成为 `NodeJs` 正式支持的标准化模块系统，这允许我们通过
-`ESM` 来开发我们的 `NodeJs` 项目，并在项目中通过`ESM` 来导入其他的`ESM`包。
-
-<!-- more -->
-
-## 创建项目
-
-我们以新建一个 NodeJs 项目为例， 它有如下的结构：
-```sh
-./my-esm-package
-├── lib
-│ ├── resolve.js
-│ └── index.js
-└── package.json
-```
-
-这个项目的功能是导出一个 resolve 方法，是 `path.resolve` 的封装实现。
-
-::: code-tabs
-@tab lib/index.js
-```js
-export * from './resolve.js'
-
-```
-
-@tab lib/resolve.js
-```js
-import path from 'path'
-
-export const resolve = (...arg) => path.resolve(...arg)
-```
-:::
-
-## package.json
-
-在 `package.json` 中，我们需要进行以下声明：
-
-- 声明 `type` 字段值为 `module`
-
- 这个字段声明了你的包将作为一个 `ECMAScript module` 被`NodeJs` 加载并解析，并允许使用`.mjs`格式的文件。
-
-- 声明 `exports` 字段
-
- 该字段描述了 项目如何导出模块给到其他包使用。
-
- - 默认导出
-
- ::: code-tabs
- @tab package.json
- ```json
- {
- "exports": "./lib/index.js"
- }
- ```
- :::
-
- 即当使用`import { resolve } from 'my-esm-package'`时，默认引入的文件是 `lib/index.js`。
-
- - 导出多个模块
-
- ::: code-tabs
- @tab package.json
- ```json
- {
- "exports": {
- ".": "./lib/index.js",
- "resolve": "./lib/resolve.js"
- }
- }
- ```
- :::
-
- 声明了导出了两种模块：一个是默认导出，使用`"."` 作为key；一个是具名导出。
-
- 当使用`import { resolve } from 'my-esm-package'`时，默认引入的文件是 `lib/index.js`。
-
- 当使用`import { resolve } from 'my-esm-package/resolve'` 时，引入的文件是 `lib/resolve.js`。
-
- - `exports` 还支持其他形式的值，这里暂不赘述。
-
-- 声明 `engines` 字段
-
- 由于 `Nodejs` 并不是全版本支持`esm`的，而是从`v14.16.0`版本开始试验性的支持，并到了`v16`版本才作为正式支持，
- 且当前`v16`版本作为目前的长期稳定支持的版本。这个项目运行环境的`NodeJs` 版本，最低应该推荐使用 `v16` 以上的版本。
- 即它的值应该为 `{ "node": ">=16" }`
-
-到这里，这个项目的`package.json` 文件，包含以下内容:
-
-::: code-tabs
-@tab package.json
-```json
-{
- "name": "my-esm-package",
- "description": "My first esm package.",
- "type": "module",
- "exports": {
- ".": "./lib/index.js",
- "resolve": "./lib/resolve.js"
- },
- "engines": {
- "node": ">=16"
- }
-}
-```
-:::
-
-## 编写项目代码
-
-1. 由于是一个 `esm` 项目，所以理所当然的不能项目中使用 `require()`/`module.exports` 来导入导出模块。
-而是应该全部使用`import`/`export` 的方式来导入导出模块。
-
-2. 不需要在项目代码中 使用 `use strict`。
-
-3. 由于 `esm` 项目中，`NodeJs` 不再支持 `__dirname`/`__filename`，所以有相关场景需要使用时，需要使用其他的方式来实现相同功能：
- ```js
- import { dirname, basename } from 'path'
- import { fileURLToPath } from 'url'
-
- const _dirname = typeof __dirname !== 'undefined'
- ? __dirname
- : dirname(fileURLToPath(import.meta.url))
-
- const _filename = typeof __filename !== 'undefined'
- ? __filename
- : basename(fileURLToPath(import.meta.url))
- ```
-## TypeScript
-
-如果在项目中使用了 `TypeScript`，那么除了需要遵循以上的内容，还需要在 `tsconfig.json` 配置文件中补充以下配置：
-
-```json
-{
- "module": "node16",
- "moduleResolution": "node16"
-}
-```
-
-并且，应该将 `.ts` 文件，编译为 `.js` 文件，`package.json` 配置的 `exports` 导出的，是编译后的 `.js` 文件。
-
-## 最后
-
-当完成了以上步骤，就可以得到一个`NodeJs ESM` 项目。它也只能在另一个支持 `esm` 的项目中使用。
diff --git a/docs/1.前端/6.JavaScript/2.进阶/函数参数按值传递.md b/docs/1.前端/6.JavaScript/2.进阶/函数参数按值传递.md
deleted file mode 100644
index 0523006c..00000000
--- a/docs/1.前端/6.JavaScript/2.进阶/函数参数按值传递.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: JavaScript进阶（五）— 函数参数按值传递
-createTime: 2020/02/12 11:27:54
-author: pengzhanbo
-permalink: /article/m4a92nl5/
----
-
-我们知道，在 `ECMAScrip` 中， 函数的参数是 **按值传递** 的。
-
-那么怎么理解 **按值传递** ？
-
-简单来说， **把函数外部的值复制给函数内部的参数**，即 **把值从一个变量复制到另一个变量**。
-
-那么也就是说，在函数内部，修改函数参数的值，不会改变外部变量的值。
-
-我们来看一个例子：2
-
-**示例1**
-```js
-
-var a = 1
-function foo(arg) {
- arg = 2
- console.log(arg)
-}
-foo(a) // 2
-console.log(a) // 1
-```
-
-可以看出，外部变量`a`作为 函数 `foo` 的执行时参数值， 在函数内部修改传入的参数值进行修改，
-函数执行后，并不会对外部变量`a` 发生修改。
-
-这个例子确实说明了函数参数是按值传递的。
-
-但是再来看另一个例子：
-
-**示例2**
-```js
-var obj1 = {
- a: 1
-}
-function foo(arg) {
- arg.a = 2
- console.log(arg)
-}
-foo(obj1) // { a: 2 }
-console.log(obj1) // { a: 2 }
-
-var obj2 = {
- a: 1
-}
-function bar(arg) {
- arg = 2
- console.log(arg)
-}
-bar(obj2) // 2
-console.log(obj2) // { a: 1 }
-```
-
-在这个例子中， 函数`foo` 执行完后， 打印的 `obj1` 值发生了变化，说明函数`foo` 内部修改了外部变量`obj1`，
-为什么会发生修改？而在 函数`bar` 执行后，`obj2` 值保持不变，这又是为什么？ 函数参数是否真的是 **按值传递**？
-
-那么该如何理解 `函数参数是按值传递的`?
-
-在理解这个之前，我们首先需要知道，`JavaScript` 的数据类型，以及不同数据类型的存储方式。
-
-## 数据类型及其存储方式
-
-我们知道， 在 `JavaScript` 中， 有两种 数据类型，分别是：**(1)基本数据类型**和 **(2)引用数据类型**，
-
-- 基本数据类型：值 直接保存在 **栈（stack）** 中。
- ```js
- let a = 1
- let b = a
- a = 2
- console.log(a, b) // 2 1
- ```
- 基本类型在 **栈** 中的赋值变动如下：
- ::: center
- { style=width:500px; }
- :::
-
-- 引用数据类型：值 保存在 **堆（heap）** 中， 并在 **栈（stack）** 中保存 值 在 **堆（heap）** 中的内存地址。
-
- ```js
- let a = { name: 'Mark' }
- let b = a
- b.name = 'John'
- console.log(a) // { name: 'John' }
- ```
- 引用类型在 **栈** 和 **堆** 中的复制变动如下：
- ::: center
- { style=width:680px; }
- :::
-
-## 按值传递
-
-我们从 数据类型来理解 `按值传递`, 那么可以发现， **传递** 的值， 是指在 **栈（stack）** 中保存的值。
-
-即， 无论 **参数值** 是 基本数据类型还是引用数据类型， **传递** 的是 **栈（stack）** 中的值。
-
-- 对于基本数据类型， 函数内部修改参数的值，实际上是修改的是 函数参数重新在 **栈（stack）** 中的内存片段保存的值。
-
-- 对于引用数据类型， 函数参数 传递是的 引用类型在 **栈（stack）** 中的内存地址：
- - 如果直接修改参数的值，函数参数在 **栈（stack）** 中的内存片段保存的内存地址被覆盖。
- - 如果修改 参数对象的属性值，修改的是根据 函数参数在 **栈（stack）** 中的内存片段保存的内存地址对应的在 **堆（heap）** 中的值。
-
-所以回头重新看 **示例1** 和 **示例2**， 均正确表述了 函数的参数是 **按值传递** 的。
diff --git a/docs/1.前端/6.JavaScript/2.进阶/原型到原型链.md b/docs/1.前端/6.JavaScript/2.进阶/原型到原型链.md
deleted file mode 100644
index 500d5504..00000000
--- a/docs/1.前端/6.JavaScript/2.进阶/原型到原型链.md
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: JavaScript进阶（一）— 原型到原型链
-createTime: 2020/02/09 09:27:29
-author: pengzhanbo
-permalink: /article/hx3h2vvj/
----
-
-在 `JavaScript` 的世界中，我们常常会通过 构造函数 来创建一个 **实例对象**：
-
-```js
-function Person(name) {
- this.name = name
-}
-const person = new Person('Mark')
-console.log(person.name) // Mark
-```
-
-我们使用构造函数`Person`，通过 `new` 创建了一个实例对象 `person`。
-
-在实例对象 `person` 上， 有一个私有属性 `__proto__` 指向了它的构造函数的原型对象`prototype`，
-
-那么，什么是 `prototype`, 什么是 `__proto__` ?
-
-接下来，我们开始进入正题。
-
-## prototype
-
-在 `JavaScript` 中，每个函数都有一个 `prototype` 属性，这个属性指向了该函数的原型对象。
-
-```js
-function Person(name) {
- this.name = name
-}
-Person.prototype.age = 18
-
-const person1 = new Person('Mark')
-const person2 = new Person('John')
-console.log(person1.name, person1.age) // Mark 18
-console.log(person2.name, person2.age) // John 18
-```
-可以看到，当 `person1` 和 `person2` 均打印 `age` 属性值为 `18`。
-
-这是因为 `Person.prototype` 正是 实例对象 `person1` 和 `person2` 的原型。
-
-既然 `prototype` 指向的是原型， 那么，**原型** 又是什么？
-
-简单的理解，在 `JavaScript` 中，每一个对象在创建时，都有一个与之关联的另一个对象，这个关联的对象就是指原型。
-
-::: warning 注意
-`null` 是没有原型的。
-:::
-
-对象会从其原型对象，**继承** 属性。这也是为什么 `person1` 和 `person2` 均打印 `age` 属性值为 `18`。
-
-## \_\_proto\_\_
-
-在 `JavaScript` 中，每个对象（`null` 除外）都有一个 私有属性 `__proto__`，
-这个属性指向了该对象的构造函数的原型`prototype`。
-
-```js
-function Person(name) {
- this.name = name
-}
-const person = new Person('Mark')
-console.log(person.__proto__ === Person.prototype) // true
-```
-
-到这里就会发现，既然构造函数有原型 `prototype`，原型也是一个对象，而对象有 `__proto__` 指向它的构造函数的原型对象，
-那么 构造函数的原型对象，是否也有其原型对象呢？
-
-## constructor
-
-在说明 原型的原型前，需要了解原型上的一个属性 `constructor`, 它指向了原型对象关联的构造函数：
-
-``` js
-function Person(name) {
- this.name = name
-}
-const person = new Person('Mark')
-console.log(person.prototype.constructor === Person) // true
-```
-
-它有助于帮我们理解 找到原型的原型的构造函数。
-
-## 原型的原型
-
-当我们在控制台打印并输出 `Person.prototype.__proto__` 时，发现打印了一个对象：
-
-```js
-function Person(name) {
- this.name = name
-}
-console.log(Person.prototype.__proto__)
-```
-
-`output`:
-
-
-
-既然 `Person` 的原型也有原型， 那么 这个原型的原型对象，它的构造函数又是什么呢？
-
-我们可以使用 `constructor` 来获取 它的构造函数：
-
-```js
-function Person(name) {
- this.name = name
-}
-console.log(Person.prototype.__proto__.constructor)
-```
-
-`output`:
-
-
-可以发现 `Person` 的原型对象的原型对象，指向的构造函数是 `Object`。
-
-即 `Person.prototype` 的原型，指向的是 `Object.prototype`。
-
-那么， `Object.prototype` 有没有自己的原型呢？
-
-
-
-可以发现，`Object.prototype` 的原型，指向的是 `null`。
-
-而`null` 是表示 **没有对象**，它没有原型。
-
-## 原型链
-
-`Person.prototype` -> `Object.prototype` -> `null`
-
-(通过 `__proto__` 进行关联)
-
-这种 对象有一个原型对象，它的原型对象又有它的原型对象，一层层如同链式一样，向上关联，称为 `原型链`。
-
-几乎所有 `JavaScript` 中的对象都是位于原型链顶端的 `Object` 的实例。
-
-::: tip
-`__proto__` 是一个非标准的属性，但绝大部分浏览器都支持通过这个属性来访问原型。
-
-`__proto__` 在实现上是`Object` 上的一个 `getter/setter`访问器 ，使用 `obj.__proto__` 时，可以理解成返回了 `Object.getPrototypeOf(obj)`。
-:::
-
-## 基于原型链的继承
-
-`JavaScript` 对象是动态的属性“包”（指其自己的属性）。`JavaScript` 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
-
-```js
-function Person(name) {
- this.name = name
-}
-Person.prototype.age = 18
-
-const person1 = new Person('Mark')
-const person2 = new Person('John')
-console.log(person1.name, person1.age) // Mark 18
-console.log(person2.name, person2.age) // John 18
-```
-
-在这个示例中， 虽然`Person` 的实例对象自身并没有`age` 属性，但由于它的原型对象上有 `age` 属性，
-实例对象从它的原型对象 **继承** 了属性 `age` 。 从而其 `age` 属性的值为 `18`。
diff --git a/docs/1.前端/6.JavaScript/2.进阶/执行上下文.md b/docs/1.前端/6.JavaScript/2.进阶/执行上下文.md
deleted file mode 100644
index 4d6b4c47..00000000
--- a/docs/1.前端/6.JavaScript/2.进阶/执行上下文.md
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: JavaScript进阶（四）— 执行上下文
-createTime: 2020/02/12 04:35:52
-author: pengzhanbo
-permalink: /article/d12xkizf/
----
-
-## 执行上下文
-
-执行上下文是， `JavaScript` 代码被 **解析** 和 **执行** 时 **所在环境** 的抽象概念。
-`JavaScript` 的任何代码都是在执行上下文中执行的。
-
-### 类型
-
-`JavaScript` 有三种 执行上下文 类型：
-
-- **全局执行上下文**
-
- 默认的执行上下文，或者说基础执行上下文。 任何不在函数内部的代码，都是在 全局执行上下文中。
- 全局上下文执行两个事情：
- - 创建一个全局的 `window`对象（在浏览器环境中）。
- - 设置 `this` 的值等于 全局的 `window` 对象。
-
- 一个程序只会有一个全局执行上下文。
-
-- **函数执行上下文**
-
- 每当函数被执行时，都会为该函数创建一个新的执行上下文。
- 每个函数都有它自己的执行上下文，且是在函数执行的时候进行创建。
- 函数上下文可以有任意多个，每当一个函数执行上下文被创建，它会按照定义的顺序，执行一系列步骤。
-
-- **eval函数执行上下文**
-
- 执行在 `eval` 函数内部的代码也会有它属于自己的执行上下文。
-
-### 创建执行上下文
-
-创建执行上下文主要分为两个阶段： **创建阶段** 和 **执行阶段**。
-
-## 创建阶段
-
-在创建阶段，会做三件事：
-- this 值的决定，即 This绑定
-- 创建词法环境组件
-- 创建变量环境组件
-
-### This绑定
-
-- 全局执行上下文
-
- 在全局执行上下文中， `this` 的值指向全局对象。(在浏览器中， `this` 引用 `Window` 对象)。
-
-
-- 函数执行上下文
-
- 在函数执行上下文中， `this` 的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么 `this` 会被设置成那个对象，否则 `this` 的值被设置为全局对象或者 `undefined` （在严格模式下）。
-
- ```js
- let foo = {
- bar: function() {
- console.log(this);
- }
- }
-
- // 'this' 引用 'foo', 因为 'baz' 被对象 'foo' 调用
- foo.bar();
-
- let bar = foo.baz;
-
- // 'this' 指向全局 window 对象，因为没有指定引用对象
- bar();
- ```
-
-### 词法环境
-
-> [ECMAScript 标准](https://262.ecma-international.org/6.0/)
->
-> 词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。
-> 一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。
-
-词法环境是一种 **持有标识符—变量映射** 的结构。
-
-::: tip
-这里的标识符指的是变量/函数的名字，而变量是对实际对象[包含函数类型对象]或原始数据的引用。
-:::
-
-在词法环境的内部有两个组件：**(1) 环境记录器**和 **(2) 一个外部环境的引用**。
-
-- **环境记录器**是存储变量和函数声明的实际位置。
-- **外部环境的引用**意味着它可以访问其父级词法环境（作用域）。
-
-词法环境有两种类型：
-
-- **全局环境**（在全局执行上下文中）是没有外部环境引用的词法环境。全局环境的外部环境引用是 `null`。它拥有内建的 Object/Array/等、在环境记录器内的原型函数（关联全局对象，比如 `window` 对象）还有任何用户定义的全局变量，并且 `this` 的值指向全局对象。
-- 在**函数环境**中，函数内部用户定义的变量存储在环境记录器中。并且引用的外部环境可能是全局环境，或者任何包含此内部函数的外部函数。
-
-环境记录器也有两种类型：
-
-- **声明式环境记录器**: 存储变量、函数和参数。
-- **对象环境记录器**: 用来定义出现在全局上下文中的变量和函数的关系。
-
-可以看出：
-
-- 在**全局环境**中，环境记录器是对象环境记录器。
-- 在**函数环境**中，环境记录器是声明式环境记录器。
-
-::: tip 注意
-对于**函数环境**，**声明式环境记录器**还包含了一个传递给函数的 `arguments` 对象（此对象存储索引和参数的映射）和传递给函数的参数的 `length`。
-:::
-
-使用伪代码描述 词法环境，大致如下：
-```js
-GlobalExecutionContext = {
- LexicalEnvironment: {
- EnvironmentRecord: {
- Type: "Object",
- // 在这里绑定标识符
- }
- outer: <null>
- }
-}
-
-FunctionExecutionContext = {
- LexicalEnvironment: {
- EnvironmentRecord: {
- Type: "Declarative",
- // 在这里绑定标识符
- }
- outer: <Global or outer function environment reference>
- }
-}
-```
-
-### 变量环境
-
-**变量环境** 同样是一个 **词法环境**，其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。
-
-**变量环境** 有着上面定义的词法环境的所有属性。
-
-在 `ES6` 中，**词法环境**和**变量环境**的一个不同就是前者被用来存储函数声明和变量（`let` 和 `const`）绑定，
-而后者只用来存储 `var` 变量绑定。
-
-示例代码：
-```js
-let a = 20
-const b = 30
-var c
-
-function multiply(e, f) {
- var g = 20
- return e * f * g
-}
-
-c = multiply(20, 30)
-```
-
-示例代码 执行上下文伪代码：
-```js
-GlobalExectionContext = {
-
- ThisBinding: <Global Object>,
-
- LexicalEnvironment: {
- EnvironmentRecord: {
- Type: "Object",
- // 在这里绑定标识符
- a: < uninitialized >,
- b: < uninitialized >,
- multiply: < func >
- }
- outer: <null>
- },
-
- VariableEnvironment: {
- EnvironmentRecord: {
- Type: "Object",
- // 在这里绑定标识符
- c: undefined,
- }
- outer: <null>
- }
-}
-
-FunctionExectionContext = {
- ThisBinding: <Global Object>,
-
- LexicalEnvironment: {
- EnvironmentRecord: {
- Type: "Declarative",
- // 在这里绑定标识符
- Arguments: {0: 20, 1: 30, length: 2},
- },
- outer: <GlobalLexicalEnvironment>
- },
-
- VariableEnvironment: {
- EnvironmentRecord: {
- Type: "Declarative",
- // 在这里绑定标识符
- g: undefined
- },
- outer: <GlobalLexicalEnvironment>
- }
-}
-```
-
-::: warning
-只有遇到调用函数 `multiply` 时，函数执行上下文才会被创建。
-:::
-
-**说明：**
-
-可能你已经注意到 `let` 和 `const` 定义的变量并没有关联任何值，但 `var` 定义的变量被设成了 `undefined。`
-
-这是因为在创建阶段时，引擎检查代码找出变量和函数声明，虽然函数声明完全存储在环境中，但是变量最初设置为 `undefined`（`var` 情况下），或者未初始化（`let` 和 `const` 情况下）。
-
-这就是为什么你可以在声明之前访问 `var` 定义的变量（虽然是 `undefined`），但是在声明之前访问 `let` 和 `const` 的变量会得到一个引用错误。
-
-这就是我们说的变量声明提升。
-
-## 执行阶段
-
-在此阶段，完成对所有这些变量的分配，最后执行代码。
-
-::: warning
-在执行阶段，如果 `JavaScript` 引擎不能在源码中声明的实际位置找到 `let` 变量的值，它会被赋值为 `undefined`。
-:::
diff --git a/docs/1.前端/6.JavaScript/2.进阶/执行上下文栈.md b/docs/1.前端/6.JavaScript/2.进阶/执行上下文栈.md
deleted file mode 100644
index f0e3d2d2..00000000
--- a/docs/1.前端/6.JavaScript/2.进阶/执行上下文栈.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: JavaScript进阶（三）— 执行上下文栈
-createTime: 2020/02/11 11:53:33
-author: pengzhanbo
-permalink: /article/6snk1b6c/
----
-
-关于 执行上下文，请点击查看[这篇文章](/article/d12xkizf/)。
-
-## 执行上下文栈
-
-`JavaScript` 引擎 创建了 执行上下文栈 来存储并管理 代码执行时创建的所有 执行上下文。
-
-执行上下文栈（Execution context stack，ECS） 是一个种拥有 LIFO(后进先出) 的栈。
-
-我们使用一个数组 模拟 执行上下文栈:
-
-```js
-const ECSStack = []
-```
-
-当 `JavaScript` 执行时，首先遇到的是 全局代码，初始化时，会首先向 执行上下文栈中压入 全局执行上下文
-（global execution context)。它只有在整个程序结束时，才会被清空，所以在程序结束前， `ECSStack` 底部
-都会有一个 `globalExecutionContext`
-
-```js
-const ECSStack = [
- globalExecutionContext
-]
-```
-
-当 `JavaScript` 开始执行以下代码时：
-``` js
-function foo() {
- console.log('foo')
-}
-function bar() {
- foo()
-}
-function run() {
- bar()
-}
-
-run()
-```
-在这段代码中，`JavaScript` 进行以下处理：
-``` ts
-// 伪代码：
-
-// run()， 创建 函数执行上下文，并压入 执行上下文栈
-ECSStack.push(functionExecutionContext<run>)
-
-// run() 中发现需要执行 bar(), 继续创建 函数执行上下文，并压入执行上下文栈
-ECSStack.push(functionExecutionContext<bar>)
-
-// bar() 中发现需要执行 foo(), 继续创建 函数执行上下文，并压入执行上下文栈
-ECSStack.push(functionExecutionContext<foo>)
-
-/** 此时， ECSStack 的结构，如下：
- * [
- * globalExecutionContext,
- * functionExecutionContext<run>,
- * functionExecutionContext<bar>,
- * functionExecutionContext<foo>
- * ]
- */
-
-// 当 foo() 执行完毕，从执行上下文栈中移除 functionExecutionContext<foo>
-ECSStack.pop()
-
-// 当 bar() 执行完毕，从执行上下文栈中移除 functionExecutionContext<bar>
-ECSStack.pop()
-
-// 当 run() 执行完毕，从执行上下文栈中移除 functionExecutionContext<run>
-ECSStack.pop()
-
-// 在程序未结束时， ECSStack 底部永远有一个 globalExecutionContext
-```
-
-再看下一个例子：
-
-```js
-var scope = "global scope";
-function checkScope(){
- var scope = "local scope";
- function f(){
- return scope;
- }
- return f();
-}
-checkScope();
-```
-
-```js
-var scope = "global scope";
-function checkScope(){
- var scope = "local scope";
- function f(){
- return scope;
- }
- return f;
-}
-checkScope()();
-```
-
-这两段代码，虽然在执行结果是一样的，都是输出 `local scope`， 但是在 执行上下文栈 中的变化不同。
-
-第一段代码， 在 执行上下文栈，模拟处理如下：
-
-```ts
-// 执行checkScope()
-ECSStack.push(functionExecutionContext<checkScope>)
-// 在checkScope执行阶段中执行 f()
-ECSStack.push(functionExecutionContext<f>)
-
-ECSStack.pop()
-ECSStack.pop()
-```
-
-第二段代码， 在执行上下文栈，模拟处理如下：
-
-```ts
-// 执行checkScope()
-ECSStack.push(functionExecutionContext<checkScope>)
-ECSStack.pop()
-// 在checkScope 完成后，再执行 f()
-ECSStack.push(functionExecutionContext<f>)
-ECSStack.pop()
-```
-
-可以看出， 函数执行的时机不同，虽然最终结果一致，但是在 执行上下文栈 中的过程是不同的。
-
-## 总结
-
-1. 执行上下文栈，是用于存储和管理所有执行上下文。
-2. 在程序没有结束前，执行栈中永远有一个全局执行上下文。
-3. 函数执行时，会创建一个新的函数执行上下文，并按顺序压入到执行栈中。
-4. 函数执行完成后，对应的函数执行上下文会从执行栈中移除。
diff --git a/docs/1.前端/6.JavaScript/2.进阶/词法作用域.md b/docs/1.前端/6.JavaScript/2.进阶/词法作用域.md
deleted file mode 100644
index 79cb5122..00000000
--- a/docs/1.前端/6.JavaScript/2.进阶/词法作用域.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: JavaScript进阶（二）— 词法作用域
-createTime: 2020/02/10 11:37:25
-author: pengzhanbo
-permalink: /article/fpcpgpod/
----
-
-## 作用域
-
-作用域是指 程序源代码中，定义变量的区域。
-
-作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
-
-## 词法作用域
-
-在 `JavaScript` 中，采用的是 词法作用域， 即静态作用域。
-
-词法作用域规定了，函数的作用域是在 **函数定义的时候就确定** 了。
-
-### 示例
-
-```js
-var a = 1
-function foo() {
- console.log(a)
-}
-function bar() {
- var a = 2
- foo()
-}
-bar()
-```
-
-这个示例的执行结果为 `1`。
-
-在这个例子中， 由于 函数`foo` 的作用域在 定义的时候就确定了，即使在 函数`bar` 中也有相同的变量名`a`的定义，
-但是由于两个函数在定义时，作用域是相互独立的，函数`foo`在其作用域查找局部变量`a`，没有找到，
-继续从它书写位置往上查找上一层的代码，所以输出的结果为 `1`。
diff --git a/docs/1.前端/7.构建工具/webpack-HMR.md b/docs/1.前端/7.构建工具/webpack-HMR.md
deleted file mode 100644
index 27733b59..00000000
--- a/docs/1.前端/7.构建工具/webpack-HMR.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: webpack模块热替换（HMR）
-createTime: 2021/03/24 05:14:18
-author: pengzhanbo
-permalink: /article/knagbtgd/
----
-
-**模块热替换（Hot Module Replacement）** 是 webpack 的一个 十分有用且强大的 特性。
-当我们对 文件代码进行修改并保存后，webpack 会重新编译打包文件代码，并将新的模块代码发送给客户端，
-浏览器通过将旧模块替换为新模块，实现在浏览器不刷新的情况下，对应用进行更新。
-
-<!-- more -->
-
-## 前言
-
-在还没有 HMR 之前，我们对文件代码进行更新保存后，想要查看更新后的内容，常常需要手动刷新浏览器。
-
-但还好的是，也有一些 **live reload** 的工具库，这些库能够监听文件的变化，通知浏览器刷新页面，
-从而帮助我们减少了重复的操作。
-
-但是为什么还需要 HMR 呢？
-
-当浏览器刷新，也意味着当前页面的状态丢失了。
-比如，我们打开了一个弹窗，然后我们对弹窗的代码逻辑进行了修改并保存，浏览器刷新后，弹窗被关闭了，
-我们需要重新进行交互打开弹窗。
-这无疑会增加非常多的重复且无意义工作量、时间。
-
-HMR 的作用，就是不仅帮助我们在无刷新的情况下更新了应用代码，同时还保留了应用的状态，让我们能避免了
-大量重复操作，从而提高开发效率。
-
-## 模块热替换
-
-模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。
-
-### 启用
-启用 HMR 的方式很简单，[查看官方文档](https://www.webpackjs.com/guides/hot-module-replacement/)
-
-### 特性
-
-HMR有几个特性：
-
-- 保留在完全重新加载页面时丢失的应用程序状态。
-- 只更新变更内容，以节省宝贵的开发时间。
-- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
-
-
-## HMR基本流程
-
-- **Step 1:**
-
- webpack watch 模式下，监听文件系统中的某个文件是否发生修改。当监听到文件发生变更时，
- 根据配置文件**对模块进行重新编译打包**，并将打包后的代码 通过 JavaScript 对象保存在内存中。
-
-- **Step 2:**
-
- webpack-dev-middleware 调用 webpack 的API 对代码的变化进行监控，并通知webpack，将代码打包到内存中。
-
-- **Step 3:**
-
- webpack-dev-server 监听文件变化，不同于第一步的是，这一步不监听代码变化进行重新编译打包。
- 当配置文件中配置了 `devServer.watchContentBase` 为 `true` 时，
- Server会监听配置的文件夹中静态文件的变化，如果发生变化，通知浏览器进行 `live reload`,即刷新页面。
-
-- **Step 4:**
-
- webpack-dev-server 通过 sockjs 在浏览器和服务器端之间建立一个 websocket 长连接，
- 将webpack编译打包的各个阶段的状态信息告知浏览器端，也包括第三步中 Server 监听静态文件变化的信息。
- 浏览器端根据这些socket消息进行不同的操作。
- 其中，服务器传递的最主要的信息，是新模块的 hash 值，后续步骤根据 hash值 进行模块的替换。
-
-- **Step 5:**
-
- webpack-dev-server 虽然会告知浏览器打包状态，但在 webpack-dev-server/client 端并不会去请求更新的代码，
- 也不会执行热模块替换的操作，这些工作会交回给 webpack/hot/dev-server。
- webpack/hot/dev-server 根据 webpack-dev-server/client 传给它的信息，以及 dev-server 的配置信息，
- 来决定是刷新浏览器，还是执行 热模块替换。
-
-- **Step 6:**
-
- 在客户端中，HotModuleReplacement.runtime 接受到 上一步传递给它的新模块的 hash 值，
- 通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，server 端返回一个 json。
- 该 json 包含了所有要更新的模块的 hash 值，获取到需要更新的模块列表后，再发送一个 jsonp 请求，
- 获取最新的模块代码。
-
-- **Step 7:**
-
- HotModulePlugin 会对新旧模块进行对比，决定是否更新模块。
- 在决定更新模块后，检查模块之间的依赖关系，更新模块的同时，也更新模块间的依赖引用。
- 这个步骤也决定了 HMR 是否成功。
-
-- **Step 8:**
-
- 如果 HMR 失败，则回退到 live reload 操作，通过刷新浏览器来获取最新打包的代码。
-
diff --git a/docs/1.前端/7.构建工具/webpack原理.md b/docs/1.前端/7.构建工具/webpack原理.md
deleted file mode 100644
index 899a632b..00000000
--- a/docs/1.前端/7.构建工具/webpack原理.md
+++ /dev/null
@@ -1,176 +0,0 @@
----
-title: webpack原理的简单入门
-createTime: 2021/03/21 06:13:07
-author: pengzhanbo
-permalink: /article/gq88mn6a/
----
-
-::: center
-{width="100px"}
-:::
-
-## 前言
-
-我们知道， `webpack` 作为前端工程化中，主流的模块打包工具之一，应用于各种各样的前端工程化项目中。
-
-虽然大多数项目都或多或少会使用到 `webpack`， 但是可能对于大多数的 前端开发人员来说，
-可能只是改改 `webpack` 的配置， 或者甚至从未动过 `webpack` 的相关文件,
-或多或少对 `webpack` 的配置以及功能感到陌生。
-
-还有类似于 `vue-cli`、`create-react-app` 、 `umi.js` 等各种基于 `webpack` 封装的 脚手架，
-提供了各种开箱即用的功能，这使得 `webpack` 离我们好像越来越远。
-
-但是当我们的某个项目面临了不得不去 深入 `webpack` 才能解决的问题，或者 面试时，被问起 `webpack` 相关的问题，
-就难以解决或者回答。
-
-所以我们需要对 `webpack` 至少有基本的了解，了解它的原理、如何编写 `loader` 、 `plugin` 等。
-
-## webpack是什么
-
-> 引用 [webpack官网](https://webpack.js.org/concepts/) ：
->
-> At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
->
-> 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
-
-从作用上讲，webpack 的功能就是将不同模块的文件，打包整合到一起，并且保证它们之间引用的正确，且有序执行。
-这使得我们在做项目架构时，能够从模块的角度去做文件拆分，然后交给 webpack 打包整合。
-
-而一个项目中的文件，不仅有 html文件、CSS文件、JavaScript文件、图片资源、Vue特有的`.vue`文件，typescript的`.ts` 文件等，以及项目的中的代码还需要进行压缩混淆、浏览器兼容、等等必要的处理，启动一个本地的开发服务器、模块的热更新替换等， 可以通过`webpack` 提供的各种机制，来一一实现。
-
-对于 `webpack` 来说， 它自身只能识别 JavaScript 文件， 而对于其他的资源，可以通过 webpack提供的 `Loader` 特性来实现
-识别。 通过 `Loader`，可以把其它类型的资源文件，转换为 webpack能够处理的有效模块。
-
-而对于 代码混淆、本地开发服务器、模块热更新，则可以通过 webpack 提供的 `Plugin` 特性来实现功能上的扩展。
-
-## 模块打包原理
-
-在 webpack 中，有四个基础且核心的概念：
-
-- **入口（entry）**
-- **输出（output）**
-- **加载器（Loader）**
-- **插件（Plugin）**
-
-### 入口（entry）
-
- 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
-
-### 输出(output)
-
- 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
-
-### 加载器（Loader）
-
- webpack 自身只能理解 JavaScript 文件 和 json 文件， loader 可以将其他类型的资源文件转换为 webpack能够处理的有效模块。
-
- 本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
-
-### 插件（Plugin）
-
- 用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
- 插件接口功能极其强大，可以用来处理各种各样的任务。
-
-
-### 模块（modules）
-
-在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。
-
-对于 webpack ，任何文件都可以是一个模块。
-
-### 模块打包运行原理
-
-在说 webpack 的 **模块打包运行原理** 之前， 先看下 我们是如何使用 webpack的，
-一般情况下， 我们通过编写一个 配置文件`webpack.config.js`， 对 webpack 进行本地化的配置，
-大致的配置如下：
-``` js
-module.exports = {
- // 声明模块的入口文件
- entry: './src/entry.js',
- output: {
- path: path.resolve(__dirname, 'dist'), // 输出目录
- filename: 'bundle.js', // 文件名称
- },
- module: {
- rules: [
- // 配置 使用 babel-loader 对 .js 资源进行转换
- {
- test: /\.js$/,
- loader: 'babel-loader',
- },
- // ...more loader
- ],
- },
- // 插件配置
- plugins: [
- new EslintWebpackPlugin(),
- new webpack.NoEmitOnErrorsPlugin(),
- // ...more plugin
- ],
- // ...more config
-}
-```
-
-`webpack` 读取了 配置文件后，运行的流程大致如下：
-
-1. 读取 `webpack` 的配置参数；
-2. 启动 `webpack` , 创建 `compiler` 对象，开始解析项目；
-3. 从入口文件 `entry` 开始解析，并找到其导入的**依赖模块**，递归遍历分析，形成**依赖关系树**；
-4. 对不同的文件类型资源的依赖模块文件，使用对应的 `Loader` 进行转换，最终转为 webpack的有效模块；
-5. 在编译过程中， `webpack` 通过 发布订阅模式，向外抛出一些 `hooks` ，`webpack` 的 `Plugin` 通过监听各个 `hooks` ，
- 执行插件任务，扩展 `webpack` 的功能，干预输出结果。
-6. 根据 输出配置 `output` ，将打包构建好的资源文件 输出。
-
-`compiler` 对象是一个全局单例，负责控制整个 webpack 构建流程。
-
-在构建过程中，还会产生一个当前构建的上下文对象 `compilation`, 它包含了当前构建的所有信息，在每个热更新或重新构建时， `compiler` 都会产生一个新的`compilation` 对象，负责当前构建过程。
-
-每个模块间的依赖关系，则依赖于`AST`语法树。每个模块文件在通过`Loader`解析完成之后，
-会通过`acorn`库生成模块代码的`AST`语法树，通过语法树就可以分析这个模块是否还有依赖的模块，
-进而继续循环执行下一个模块的编译解析。
-
-最终， webpack 打包构建出来的 bundle 文件，是一个 IIFE 执行函数。
-
-```js
-// webpack5下进行的最小化打包输出文件
-(() => {
- // webpack 模块文件内容
- var __webpack_modules__ = ({
- "entry.js": ((modules) => { /* ... */ }),
- "other.js": ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => { /* ... */ })
- });
-
- // 模块缓存
- var __webpack_module_cache__ = {};
-
- // The require function
- function __webpack_require__(moduleId) {
- // Check if module is in cache
- var cachedModule = __webpack_module_cache__[moduleId];
- if (cachedModule !== undefined) {
- return cachedModule.exports;
- }
- // Create a new module (and put it into the cache)
- var module = __webpack_module_cache__[moduleId] = {
- // no module.id needed
- // no module.loaded needed
- exports: {}
- };
-
- // Execute the module function
- __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-
- // Return the exports of the module
- return module.exports;
- }
-
- // startup
- // Load entry module and return exports
- // This entry module can't be inlined because the eval devtool is used.
- var __webpack_exports__ = __webpack_require__("entry.js");
-
-})();
-```
-在上面的打包demo中，整个立即执行函数里边只有三个变量和一个函数方法，`__webpack_modules__`存放了编译后的各个文件模块的JS内容，`__webpack_module_cache__` 用来做模块缓存，`__webpack_require__` 是Webpack内部实现的一套依赖引入函数。最后一句则是代码运行的起点，从入口文件开始，启动整个项目。
-
-`__webpack_require__`模块引入函数，我们在模块化开发的时候，通常会使用`ES Module`或者`CommonJS`规范导出/引入依赖模块，webpack打包编译的时候，会统一替换成自己的`__webpack_require__`来实现模块的引入和导出，从而实现模块缓存机制，以及抹平不同模块规范之间的一些差异性。
diff --git a/docs/1.前端/8.HTTP/CORS.md b/docs/1.前端/8.HTTP/CORS.md
deleted file mode 100644
index ea5f2b5a..00000000
--- a/docs/1.前端/8.HTTP/CORS.md
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: 跨域资源共享(CORS)
-createTime: 2020/08/29 07:40:31
-author: pengzhanbo
-tags:
- - http
-permalink: /article/2f45bq9x/
----
-
-**跨域资源共享（CORS）** 是一种基于 **HTTP Header** 的机制。
-该机制通过允许服务器标示除了它自己的 origin（域，协议和端口），使这些 origin 有权限访问加载服务器上的资源。
-
-<!-- more -->
-
-跨域资源共享 通过 **预检请求** 的机制，检查服务器是否允许要发送的真实请求。
-浏览器向服务器发送一个到服务器托管的跨域资源 **预检请求**，
-在预检请求中，浏览器发送的头部中标示有HTTP方法和真实请求会用到的头。
-
-## 前言
-
-浏览器出于安全性的原因，会限制脚本内发起的跨域资源请求，
-比如 **XMLHttpRequest** 和 **Fetch API** 遵循 **同源策略**，默认情况下不允许发起非同源的资源请求。
-使用这些API的Web应用，只能加载从应用程序的同一个域的请求HTTP资源，
-**除非响应报文中包含了正确的CORS响应头**
-
-## 概述
-
-跨域资源共享 新增了一组 HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
-同时，对于可能对服务器数据产生副作用的 HTTP 请求方法，浏览器必须首先使用 `OPTIONS` 方法发起一个预检请求，
-从而获取服务器是否允许跨域请求，服务器确认允许之后，才发起实际的HTTP请求。
-
-CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码中，是无法获取具体是哪里出了问题。
-我们只能通过查看浏览器的控制台来获取具体出现的错误。
-
-若要开启 CORS ，我们需要配置 CORS 相关的 HTTP首部字段。
-
-## HTTP 响应首部字段
-
-在 CORS 中，HTTP 响应首部字段主要有以下几个：
-
-- **Access-Control-Allow-Origin**
-- **Access-Control-Allow-Methods**
-- **Access-Control-Allow-Headers**
-- **Access-Control-Max-Age**
-- **Access-Control-Expose-Headers**
-- **Access-Control-Allow-Credentials**
-
-### Access-Control-Allow-Origin
-
-**Access-Control-Allow-Origin** 响应首部字段，用于 **指定允许访问该资源的外域URI**。
-
-对于不需要携带身份凭证的请求，服务器可以指定改字段的值为通配符(`*`)，表示允许来自所有域的请求。
-
-语法：
-```
-Access-Control-Allow-Origin: <origin>
-Access-Control-Allow-Origin: *
-```
-
-如果服务器 指定了具体的域名而非 `*`，那么响应首部中的 **Vary** 字段的值必须包含 `Origin`。
-用于告诉客户端：服务器对不同的源站返回不同的内容。
-
-::: info 注意
-当响应的是附带身份凭证的请求时，服务端 必须 明确 **Access-Control-Allow-Origin** 的值，而不能使用通配符`“*”`。
-:::
-
-**示例1：**
-
-允许所有域访问
-```
-Access-Control-Allow-Origin: *
-```
-
-**示例2：**
-
-允许来自 https://pengzhanbo.cn 的请求
-```
-Access-Control-Allow-Origin: https://pengzhanbo.cn
-Vary: Origin
-```
-
-### Access-Control-Allow-Methods
-
-**Access-Control-Allow-Methods** 响应首部字段用于 预检请求的响应。
-**指明了实际请求所允许使用的HTTP方法或方法列表**。
-
-语法：
-```
-Access-Control-Allow-Methods: <method>[, <method>]*
-```
-
-示例：
-
-```
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-```
-
-### Access-Control-Allow-Headers
-
-**Access-Control-Allow-Headers** 响应首部字段用于 预检请求的响应。
-**指明了实际请求中允许携带的首部字段**。
-
-语法：
-```
-Access-Control-Allow-Headers: <header-name>[, header-name]*
-Access-Control-Allow-Headers: *
-```
-
-以下特定的首部是一直允许的，无需特意声明他们：
-- Accept
-- Accept-Language
-- Content-Language
-- Content-Type，但只在其值属于MIME类型 `application/x-www-form-urlencoded`,`multipart/form-data`,`text/pain` 中的一种。
-
-**示例1：**
-
-自定义请求头。 除了 CORS 安全清单列出的请求头外，支持 自定义请求头 X-Custom-Header
-
-```
-Access-Control-Allow-Headers: X-Custom-Header
-```
-
-**示例2：**
-
-多个自定义请求头。
-
-```
-Access-Control-Allow-Headers: X-Custom-Header, X-My-Header
-```
-
-### Access-Control-Max-Age
-
-**Access-Control-Max-Age** 响应首部字段表示 **预检请求的返回结果可以被缓存多久**。
-
-返回结果是指： **Access-Control-Allow-Methods** 和 **Access-Control-Allow-Headers** 提供的信息。
-
-语法：
-```
-Access-Control-Max-Age: <delta-seconds>
-```
-
-**delta-seconds** 表示返回结果可以被缓存的最长时间（秒）。
-在 Firefox 中， 上限是 **24小时（86400秒）**。
-在 Chromium 中，上限是 **2小时（7200秒）**，同时 Chromium 还规定了默认值是 **5秒**。
-如果值为 **-1** ， 表示禁用缓存，则每次请求前都需要使用 OPTIONS 预检请求。
-
-**示例**
-
-将预检请求缓存 10分钟：
-```
-Access-Control-Max-Age: 600
-```
-
-### Access-Control-Expose-Headers
-
-**Access-Control-Expose-Headers** 响应首部字段，列出了 哪些首部可以作为响应的一部分暴露给外部。
-
-在 跨源访问时，XMLHttpRequest 对象的 `getResponseHeader()` 方法默认只能拿到一些最基本的响应头。
-
-默认情况下，只有七种 简单响应首部 可以暴露给外部:
-
-- Cache-Control
-- Content-Language
-- Content-Length
-- Content-Type
-- Expires
-- Last-Modified
-- Pragma
-
-如果期望让客户端可以访问到其他的首部信息，可以将它们 该字段受列出来。
-
-语法：
-```
-Access-Control-Expose-Headers: <header-name>[, <header-name>]*
-```
-
-**示例**
-
-暴露一个非简单响应首部：
-```
-Access-Control-Expose-Headers: X-My-Header
-```
-
-暴露多个非简单响应首部：
-```
-Access-Control-Expose-Headers: X-My-Header, X-Custom-Header
-```
-
-### Access-Control-Allow-Credentials
-
-**Access-Control-Allow-Credentials** 响应首部字段 用于在 请求包含 Credentials 时，
-告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。
-
-当请求的 Credentials 模式 （Request.credentials）为 `include` 时，浏览器尽在相应头 **Access-Control-Allow-Credentials** 的值为 `true` 时将响应暴露给前端的 JavaScript 代码。
-
-Credentials 可以是 `cookies`、 `authorization headers` 或 `TLS client certificates`。
-
-语法：
-```
-Access-Control-Allow-Credentials: true
-```
-
-**Access-Control-Allow-Credentials** 需要与 `XMLHttpRequest.withCredentials`
-或 **Fetch API** 的 `Request()` 构造函数中的 `credentials` 选项结合使用。
-Credentials 必须在前后端都被配置，才能使带 credentials 的 CORS 请求成功。
-
-**示例：**
-
-允许 credentials
-
-```
-Access-Control-Allow-Credentials: true
-```
-
-使用带 credentials 的 XHR:
-
-``` js
-const xhr = new XMLHttpRequest()
-xhr.open('GET', 'https://pengzhanbo.cn', true)
-xhr.withCredentials = true
-xhr.send(null)
-```
-
-使用带 credentials 的 Fetch:
-
-``` js
-fetch('https://pengzhanbo.cn', {
- credentials: 'include'
-})
-```
-
-## HTTP 请求首部字段
-
-在 CORS 中，可用于发起跨域请求的首部字段，如下：
-
-- Origin
-- Access-Control-Request-Method
-- Access-Control-Request-Headers
-
-这些首部字段无需手动设置。
-
-当开发者使用 XMLHttpRequest 发起跨域请求时，它们已经被设置就绪。
-
-### Origin
-
-**Origin** 请求首部字段表明预检请求或实际请求的源站。
-
-语法：
-
-```
-Origin: <origin>
-```
-
-origin 参数的值为源站的URI。不包含任何路径信息，仅表示服务器名称。
-
-### Access-Control-Request-Method
-
-**Access-Control-Request-Method** 请求首部字段用于预检请求。作用是 将实际情况所使用的HTTP方法告诉服务器。
-
-语法：
-
-```
-Access-Control-Request-Method: <method>
-```
-
-### Access-Control-Request-Headers
-
-**Access-Control-Request-Headers** 请求首部字段用于预检请求。作用是 将实际请求所携带的首部字段告诉服务器。
-
-语法：
-
-```
-Access-Control-Request-Headers: <header-name>[, <header-name>]*
-```
-
-## 预检请求
-
-一个 CORS 预检请求时用于 检查服务器使用支持 CORS， 即 跨域资源共享。
-
-预检请求 通过 发送一个 OPTIONS 请求，请求头部包含了以下字段：
-
-- Access-Control-Request-Method
-- Access-Control-Request-Headers
-- Origin
-
-浏览器会在有必要的时候，自动发出一个预检请求。
-
-所以在正常情况下，前端开发者不需要自己去发送这样的请求。
-
-### 预检请求与凭据
-
-CORS 预检请求不能包含凭据。预检请求的响应必须指定 Access-Control-Allow-Credentials: true 来表明可以携带凭据进行实际的请求。
-
-## 简单请求
-
-某些情况下，不会触发 CORS预检请求，这样的请求，可表述为 _简单请求_。
-
-若请求满足以下所有条件，则可视为 简单请求：
-
-- 使用 GET, HEAD POST 请求方法
-- 除了被用户代理自动设置的首部字段（Connection，User-Agent等），
- 以及在 Fetch 规范中定义为 [禁用首部名称](https://fetch.spec.whatwg.org/#forbidden-header-name) 的其他首部，
- 允许人为设置的字段为 Fetch 规范定义的 对 [CORS 安全的首部字段集合](https://fetch.spec.whatwg.org/#cors-safelisted-request-header)
-- 请求中任意的 XMLHttpRequest 对象均没有注册任何监听事件，
- XMLHttpRequest 对象可以使用 XMLHttpRequest.upload 属性访问。
-- 请求中没有使用 ReadableStream 对象。
-
-## 附带身份的请求与通配符
-
-在响应附带身份凭证的请求时：
-
-- 服务器不能将 **Access-Control-Allow-Origin** 的值设为通配符 `*`，而应将其设置为特定的域，如：Access-Control-Allow-Origin: https://pengzhanbo.cn。
-
-- 服务器不能将 **Access-Control-Allow-Headers** 的值设为通配符 `*`，而应将其设置为首部名称的列表，如：Access-Control-Allow-Headers: X-Custom-Header, Content-Type
-
-- 服务器不能将 **Access-Control-Allow-Methods** 的值设为通配符 `*`，而应将其设置为特定请求方法名称的列表，如：Access-Control-Allow-Methods: POST, GET
-
-
-## 需要CORS的场景
-
-1. 使用 **XMLHttpRequest** 发起的 HTTP请求
-2. 使用 **Fetch API** 发起的 HTTP 请求
-3. Web字体，CSS通过 `@font-face` 使用的跨域字体资源
-4. WebGL 贴图
-5. 使用 drawImage 将 Images/video 画面绘制到 canvas
-6. 来自图像的 CSS 图形
-
-
-## 安全
-
-在实际的使用场景中，尽可能的少使用 通配符 `*`，来允许所有域访问，或允许所有自定义首部字段，
-这可能在 web 安全上来带风险。
diff --git a/docs/1.前端/8.HTTP/CSP.md b/docs/1.前端/8.HTTP/CSP.md
deleted file mode 100644
index f38912b4..00000000
--- a/docs/1.前端/8.HTTP/CSP.md
+++ /dev/null
@@ -1,256 +0,0 @@
----
-title: 内容安全策略(CSP)
-createTime: 2020/08/28 03:25:32
-author: pengzhanbo
-tags:
- - http
- - 安全
-permalink: /article/snkdmwsz/
----
-
-
-内容安全策略（`Content-Security-Policy`），简称 `CSP`。是一种 计算机安全标准。
-
-主要目标是 减少和报告XSS攻击、数据注入攻击等。这些攻击手段的主要目的是盗取网站数据、网站内容污染、散发恶意软件等。
-
-几乎所有现在浏览器都支持 `CSP`， 对于不支持的浏览器，则会忽略 `CSP`。
-
-<!-- more -->
-
-## XSS攻击
-
-XSS攻击是一种常见的、危害极大的网络攻击手段。它利用浏览器对从服务器获取的内容的信任，
-通过站点的 `script` 脚本、内联脚本、外部导入资源等方式进行注入攻击。
-恶意脚本在受害者浏览器中执行，以达成其目的。
-
-## CSP
-
-`CSP` 通过 **有效域名**，即 **浏览器认可的可执行脚本的有效来源** ，使 服务器管理者有能力消除或减少 XSS 攻击所以来的载体。
-支持 `CSP` 的浏览器，仅会执行从白名单域名加载的脚本文件，忽略其他所有脚本，包括内联脚本和 HTML 事件处理属性。
-
-
-## 制定策略
-
-`CSP` 通过 声明 HTTP 头部字段 `Content-Security-Policy` 来启用和配置策略：
-```
-Content-Security-Policy: policy;
-Content-Security-Policy: policy; policy;
-```
-
-参数 `[policy]` 是一个包含了描述 各种CSP策略指令的字符串。
-
-## 策略指令
-
-### default-src
-
-为其他CSP指令提供备选项，如果其他指令不存在，用户代理会查找并应用该值，如果其他指令有配置值，那么则不会应用 default-src的值。
-
-default-src 策略允许指定一个或多个值：
-```
-Content-Security-Policy: default-src <source>;
-Content-Security-Policy: default-src <source> <source>;
-```
-
-### script-src
-
-脚本内容安全策略指令，包括限制 外部资源、内联脚本、eval函数。
-
-```
-Content-Security-Policy: script-src <source>
-```
-
-### style-src
-
-CSS文件内容安全策略指令，包括限制 内联样式表、通过`<link>` 引入的css文件、样式中通过 `@import` 导入的css文件、
-元素的 `style` 属性、 `style.cssText` 属性、以及 `el.setAttribute('style', '')`
-
-```
-Content-Security-Policy: style-src <source>
-```
-
-### img-src
-
-图片资源内容安全策略指令， 限制通过 `<img>` 加载的图片资源
-
-```
-Content-Security-Policy: img-src <source>
-```
-
-### media-src
-
-媒体资源内容安全策略指令，限制通过 `<audio>`、`<video>`、`<track>` 加载的媒体资源
-
-```
-Content-Security-Policy: media-src <source>
-```
-
-### frame-src
-
-iframe内容安全策略指令，限制`<iframe>` 加载的页面资源
-
-### 其他指令
-
-- `manifest-src` 限制 manifest 资源（通过`<link>`引入的 manifest文件）
-- `worker-src` 限制 `worker`资源，包括 `Worker`、`SharedWorker` 、`ServiceWorker`
-- `child-src` 限制 `web worker`、`<frame>` 、`<iframe>`
-- `connect-src` 限制允许通过脚本接口加载的链接地址，包括：`<a>`、`Fetch`、`XMLHttpRequest`、`WebSocket`、`EventSource`
-- `font-src` 限制 `@font-face` 加载字体的有效源规则。
-- `object-src` 限制 `<object>`、`<embed>`、`<applet>`
-
-
-### 指令`<source>`有效值
-
-- `<host-source>`
-
- 以域名或者 IP 地址表示的主机名，外加可选的 URL 协议名（URL scheme）以及端口号。
- 支持前置通配符（星号 '*'），可以将通配符应用于站点地址、端口中，如应用于端口，则表示允许使用该域名下的所有端口。
-
- - **example.com:443** 匹配 example.com 上 443 端口访问
- - **https://example.com** 匹配使用了 http: 的 example.com 的访问
- - ***.example.com** 匹配 example.com 下的所有子域名的访问
-
-- `<scheme-source>`
-
- 协议名如'http:' 或者 'https:'。必须带有冒号，不要有单引号。
-
-- `'self'`
-
- 指向与要保护的文件所在的源，包括相同的 URL scheme 与端口号。必须有单引号。
-
-- `'unsafe-inline'`
-
- 允许使用内联资源，例如内联 `<script>` 元素（javascript: URL）、内联事件处理器以及内联 `<style>` 元素。必须有单引号。
-
-- `'unsafe-eval'`
-
- 允许使用 eval() 以及相似的函数来从字符串创建代码。必须有单引号。
-
-- `'none'`
-
- 不允许任何内容。 必须有单引号。
-
-- `'nonce-<base64 值>'`
-
- 特定使用一次性加密内联脚本的白名单。服务器必须在每一次传输政策时生成唯一的一次性值。否则将存在绕过资源政策的可能。
-
-- `<hash-source>`
-
- 使用 sha256、sha384 或 sha512 编码过的内联脚本或样式。其由用短划线分隔的两部分组成：用于创建哈希的加密算法，以及脚本或样式 base64 编码的哈希值。当生成哈希值的时候，不要包含 `<script>` 或 `<style>` 标签，同时注意字母大小写与空格——包括首尾空格——都是会影响生成的结果的。
-
- ```
- Content-Security-Policy: default-src sha256-abcdef;
- ```
-- `'strict-dynamic'`
-
- strict-dynamic 指定对于含有标记脚本 (通过附加一个随机数或散列) 的信任，应该传播到由该脚本加载的所有脚本。与此同时，任何白名单以及源表达式例如 'self' 或者 'unsafe-inline' 都会被忽略。
-
-## 启用CSP
-
-启用CSP，可以在 HTTP服务器中，新增 Header 字段：
-如，在nginx中：
-``` nginx
-http {
- # ...more
- server {
- # ...more
- location / {
- index index.html;
- Content-Security-Policy default-src 'self';
- # ...more
- }
- }
-}
-```
-
-也可以在 html 文件中 添加 `<meta>` 标签
-``` html
-<meta http-equiv="Content-Security-Policy" content="default-src 'self';" />
-```
-
-## 示例
-
-### 示例1
-
-默认只允许加载本站资源
-
-```
-Content-Security-Policy: default-src 'self';
-```
-
-### 示例2
-
-默认只允许加载本站资源，但允许任意来源图片资源
-
-```
-Content-Security-Policy: default-src 'self'; img-src *;
-```
-
-### 示例3
-
-默认只允许加载本站资源，允许 script资源、css资源、图片资源从指定cdn域名加载
-```
-Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' https://cdn.example.com; img-src 'self' https://cdn.example.com;
-```
-
-### 示例4
-
-阻止所有 iframe 窗口，允许本站加载其他资源
-
-```
-Content-Security-Policy: default-src 'self'; frame-src 'none';
-```
-
-### 示例5
-
-执行特定 nonce 的内联脚本：
-
-```
-Content-Security-Policy: script-src 'nonce-abcdef' 'self';
-```
-
-只有在`<script>`标签内带有特定 `nonce` 值的脚本才允许执行：
-
-``` html
-<script nonce="abcdef" src="example.js"></script>
-```
-
-### 示例6
-
-Hash 值相符的脚本才能执行：
-
-```
-Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='
-```
-该hash值必须是 script 标签内容的 sha256 值，代码才能执行：
-``` html
-<script>
- alert("Hello, world.");
-</script>
-```
-
-## 违例报告
-
-启用 CSP 后，默认情况下，违例报告不会发送。我们可以通过配置 `report-uri` 策略指令，并提供至少一个URI地址去递交报告。
-
-```
-Content-Security-Policy: default-src 'self'; report-uri http://report.example.com/csp;
-```
-
-### 违例报告示例
-
-违例报告将以 JSON 对象的数据结构进行递交：
-
-``` json
-{
- "csp-report": {
- "document-uri": "http://example.com/index.html", // 发生违规的文档的 URI
- "referrer": "", // 违规发生处的文档引用（地址）
- "blocked-uri": "http://example.com/css/style.css", // 被 CSP 阻止的资源 URI。
- "violated-directive": "style-src cdn.example.com", // 违反的策略名称。
- // 在 Content-Security-Policy HTTP 头部中指明的原始策略。
- "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
- }
-}
-```
-
-当服务器接收到 违例报告，可以通过分析报告内容，来进行自定义的处理。
diff --git a/docs/1.前端/8.HTTP/HSTS.md b/docs/1.前端/8.HTTP/HSTS.md
deleted file mode 100644
index fe8ad940..00000000
--- a/docs/1.前端/8.HTTP/HSTS.md
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 为你的站点开启HSTS
-createTime: 2020/11/12 07:08:12
-author: pengzhanbo
-tags:
- - http
- - 安全
-permalink: /article/1w4onzn1/
----
-
-`HTTP-Strict-Transport-Security` 简称为 `HSTS`，是一个 HTTP 响应头。
-用于通知浏览器应该只通过 HTTPS 访问该站点，并且以后使用 HTTP 访问该站点的所有尝试都应自动转换为 HTTPS。
-
-<!-- more -->
-
-## 中间人劫持
-
-当用户在未知风险的网络环境中访问 某个网站的时候，如访问 `http://example.com`，在这个未知风险的网络环境中，
-可能会被其他人拦截到用户发出的网络请求，然后跳转到一个一模一样的钓鱼网站，或者在请求内容中，注入有危害的代码、广告等，
-这种攻击行为，被称为 **中间人劫持**。
-
-当 `example.com` 也支持 `https` 协议进行访问后，如果用户直接通过 `https` 协议访问，那么在一定程度上可以有效防止
-`中间人劫持`。
-
-如果用户依然通过 `http` 协议访问，虽然服务器可以重定向到 `https` 请求，然而在这个过程中，中间人依然可以
-通过拦截 `http` 请求，然后向服务器发起 `https` 请求获取内容，再注入新的内容 返回给用户。
-
-用户在浏览器地址栏中 输入 `example.com`, 浏览器默认发起的是 `http` 请求，这导致了我们很难要求用户在通过域名访问
-网站时，一定要输入 `https://example.com`。
-
-为了限制 `中间人劫持` 这种潜在的攻击手段，一种处理方式就是 强制浏览器使用 `https` 协议访问网站。
-为此，我们需要给网站开启 `HSTS`。
-
-## HSTS
-
-`HSTS` 通过声明 `HTTP` 头部字段 `HTTP-Strict-Transport-Security` 来启用和配置策略：
-
-```
-Strict-Transport-Security: max-age=<expire-time>
-Strict-Transport-Security: max-age=<expire-time>; includeSubDomains
-Strict-Transport-Security: max-age=<expire-time>; preload
-```
-
-### 指令
-
-#### `max-age=<expire-time>`
-
-设置在浏览器收到这个请求后的`<expire-time>`秒的时间内凡是访问这个域名下的请求都使用 HTTPS 请求。
-
-#### `includeSubDomains` <Badge>可选</Badge>
-
-如果这个可选的参数被指定，那么说明此规则也适用于该网站的所有子域名。
-
-#### `preload` <Badge>可选</Badge>
-
-查看 [预加载 HSTS](https://www.chromium.org/hsts/) 获得详情。不是标准的一部分。
-
-### 浏览器处理
-
-> 当网站已开启 `HSTS`
-
-用户在第一次通过 `https` 协议访问网站时，服务器响应`Strict-Transport-Security` 头，浏览器记录下信息，
-在以后重新访问访问网站时，会把访问这个网站的 `http` 请求自动替换为 `https`。
-
-当 `HSTS` 头设置的过期时间到了，后面通过 `HTTP` 的访问恢复到正常模式，不会再自动跳转到 `HTTPS。`
-
-每次浏览器接收到 `Strict-Transport-Security` 头，它都会更新这个网站的过期时间，所以网站可以刷新这些信息，防止过期发生。
-
-Chrome、Firefox 等浏览器里，当尝试访问该域名下的内容时，会产生一个 307 Internal Redirect（内部跳转），自动跳转到 HTTPS 请求。
-
-
-## 预加载
-
-如果用户首次访问网站时，依然使用的是 `http` 协议，浏览器会忽略`Strict-Transport-Security`，而且中间人依然可以劫持请求内容，删除 `Strict-Transport-Security`。
-
-为了进一步处理这个问题， `Google`、`Firefox` 等浏览器厂商，维护了一个 `HSTS` 预加载服务。
-
-你可以将你已开启了 `HSTS` 的 站点域名，提交到 预加载服务中，浏览器将会永不使用非安全的方式连接到你的域名。
-
-但是，这不是 HSTS 标准的一部分，也不该被当作正式的内容。
-
-[`HSTS`预加载服务](https://hstspreload.org/)
-
-
-## 示例
-
-当前域名，以及所有子域名，开启 `HSTS`, 过期时间为 一年。
-```
-Strict-Transport-Security: max-age=31536000; includeSubDomains
-```
diff --git a/docs/1.前端/8.HTTP/浏览器HTTP缓存机制.md b/docs/1.前端/8.HTTP/浏览器HTTP缓存机制.md
deleted file mode 100644
index 6b659274..00000000
--- a/docs/1.前端/8.HTTP/浏览器HTTP缓存机制.md
+++ /dev/null
@@ -1,331 +0,0 @@
----
-title: HTTP缓存机制
-createTime: 2019/08/24 12:18:39
-author: pengzhanbo
-permalink: /article/c3ez957l/
----
-
-::: note
-老生常谈！老生常谈！老生常谈啊！
-:::
-
-## 什么是HTTP缓存
-
-当客户端向服务器发起资源请求时，会先抵达浏览器缓存，如果浏览器有要请求的资源的副本，
-那么就可以直接从浏览器缓存中提取而不是从原始服务器中获取这个资源。
-
-http缓存都是从对同一资源的第二次请求开始的。
-- 第一次请求时，服务器返回资源，并在`response header`中回传资源的缓存参数；
-- 第二次请求时，浏览器会根据这些缓存参数，判断是否使用浏览器缓存的资源副本还是从服务器获取资源。
-
-## HTTP缓存分类
-
-HTTP缓存，根据是否需要重新向服务器发起请求，可分为两大类：
-- 强缓存： 强制缓存，在缓存有效时间内，不再向服务器发起资源请求，直接使用浏览器缓存的资源副本
-- 协商缓存：在缓存有效时间内，需要向服务器询问资源是否需要更新，如果需要更新，则从服务器获取新的资源，
- 如果不需要更新，则继续使用浏览器缓存的资源副本；
-
-::: tip 另一种缓存分类
-根据资源是否可以被单个用户或多个用户使用来分类，还可以分为 私有缓存和共享缓存。
-
-这种一般是对于 代理服务器的，即 浏览器发起请求 -> 代理服务器 -> 原始服务器。
-
-- 私有缓存： 在代理服务器中，仅针对单个用户使用的资源缓存，其他用户发起的对同一个资源的首次请求，仍然需要从原始服务器获取资源
- 并为该用户建立新的缓存资源。
-
-- 共享缓存：只要有一个用户发起的对同一个资源的首次到达代理服务器的请求，代理服务器对该资源缓存后，其他用户请求代理服务器上的资源，
- 在缓存有效时间内，代理服务器不再向原始服务器获取新的资源，返回代理服务为缓存的资源副本。
-:::
-
-
-## 主要的HTTP Headers
-
-- 通用首部字段
-
- | 字段 | 说明 |
- | -- | -- |
- | Cache-Control | 控制缓存行为 |
- | Pragma | http1.0时代的产物，值为 no-cache 时禁用缓存 |
-
-- 请求头部字段 Request Headers
-
- | 字段 | 说明 |
- | -- | -- |
- | If-Match | 比较 ETag 是否一致 |
- | If-None-Match | 比较 ETag 是否不一致 |
- | If-Modified-Since | 比较资源最后更新时间是否一致 |
- | If-Unmodified-Since | 比较资源最后更新时间是否不一致 |
-
-- 响应头部字段 Response Headers
-
- | 字段 | 说明 |
- | -- | -- |
- | ETag | 资源匹配信息 |
-
-- 实体头部字段
-
- | 字段 | 说明 |
- | -- | -- |
- | Expires | http1.0时代的产物，实体主体过期时间 |
- | Last-Modified | 资源的最后一次更新时间 |
-
-
-
-::: warning 提醒
-`Pragma`、`Expires` 这两个header是 http1.0中的内容，在 http1.1及往后的版本中逐步被弃用。
-
-但为了能够对浏览器向下兼容，大多数网站在设置 缓存机制时，仍然在 response headers 中保留这两个字段的声明。
-
-本文同样也会对这两个字段进行说明，以及为什么http1.1后会使用 `Cache-Control` 代替。
-:::
-
-::: warning 提醒
-在某些技术文章分享中，常常会直接把这些headers字段各自分类到 强缓存 或 协商缓存中，
-个人认为这种简单粗暴的划分方式是有待商榷，就比如`Cache-Control`的不同取值，其行为会根据值表现为强缓存或协商缓存。
-:::
-
-### Pragma
-
-`Pragma` 字段仅有一个 `no-cache`的可选值，会告知客户端不要对该资源进行缓存读取，应该每次都向服务器发送资源请求。
-
-在客户端使用时，通常做法是在 HTML中加上一个 meta 标签：
-``` html
-<meta http-equiv="Pragma" content="no-cache">
-```
-::: caution 警告
-- 这个标签声明仅有 IE才能识别含义，其他主流浏览器不兼容。
-- 在IE浏览器中，虽然能够识别含义，但并不一定会在请求Request Header中加上Pragma，但确实会让当前页面每次都发起新请求。
- （仅限页面html文件，页面内使用的其他资源不受影响。）
-:::
-
-在服务端配置为 Response Header 时，浏览器读取到该字段，会禁用缓存行为，后续的对同一资源的请求会重新发起请求而不使用缓存。
-
-::: warning 提醒
-由于`Pragma` 在浏览器端的兼容问题，在服务器端又有其他字段能更好的控制缓存行为，Pragma 字段基本已经被抛弃，不再使用，
-
-*除了部分网站出于兼容性考虑，还会带上该字段。*
-:::
-
-
-### Expires
-
-在 http1.0中，Pragma 用于禁用缓存，也需要有一个字段用于启用缓存和定义缓存时间。Expires 就是用于这个目的。
-
-Expires 的值是一个 GMT时间， 如：`Thu Jun 07 2018 14:26:45 GMT`，用于告诉浏览器资源的缓存过期时间，如果还没有超过该时间
-则不发起新的资源请求。
-
-在客户端，可以使用 meta标签来告知浏览器缓存时间
-``` html
-<meta http-equiv="expires" content="Thu Jun 07 2018 14:26:45 GMT">
-```
-如果希望不走缓存，每次页面请求都发起新的请求，可以把 content 设置为 -1 或 0。
-
-::: caution 提醒
-跟 Pragma 字段一样， 该 meta 标签只有 IE 能够正确识别。
-而且该方式仅是告知 IE 缓存时间的标记，并不能在 Request Header 中找到该字段。
-:::
-
-服务端在 Response Headers 中设置 Expires 字段，则在任何浏览器中都能正确设置资源缓存时间；
-
-::: info 说明
-如果同时使用 Pragma 和 Expires 字段， 则 Pragma 优先级会更好，页面会发起新的请求
-:::
-
-::: warning 提醒
-Expires 字段虽然能够定义缓存有效时间，但是这个时间的设置是相对于本地时间的。
-如果在服务端定义，则这个时间是相对于服务端时间的，
-这个时间返回到客户端， 客户端是拿着客户端的本地时间与返回的服务端时间做对比。
-那么就会导致一种情况，当用户更改了客户端的时间，如超过了 Expires定义的缓存时间，那么缓存就立即失效了。
-
-也正是应该存在着这样的问题，Expires并不能保证缓存能够达到预期的表现，所以也被逐步弃用。
-:::
-
-### Cache-Control
-
-`Cache-Control` 是从 `http1.1` 开始支持的 header 属性，该属性的值描述了使用缓存的行为以及缓存的有效时间。
-
-`Cache-Control` 可以在 发起请求时，在`Request Headers` 中声明该属性，（如果资源请求是通过代理服务器再到原始服务器，）
-通知代理服务器对资源的缓存方式，以及是否向原始服务器请求最新的资源。
-
-`Cache-Control` 做为 `Response Headers` 属性返回时，通知浏览器对该资源的缓存方式和有效时间。
-
-Cache-Control 语法如下：
-```
-Cache-Control: <cache-directive>
-```
-
-- 作为 `Request Headers` 时， `cache-directive` 支持以下可选值
-
-| 字段名称 | 说明 |
-| -- | -- |
-| no-cache | 告知(代理)服务器不直接使用缓存，要求从原始服务器发起请求 |
-| no-store | 所有内容都不会被保存到缓存或 Internet临时文件中 |
-| max-age=delta-seconds | 告知服务器 客户端希望接收一个存在时间（age）不大于 delta-seconds 秒的资源|
-| max-stale\[=delta-seconds] | 告知(代理)服务器 客户端愿意接收一个超过缓存时间的资源，若有定义delta-seconds，则为delta-seconds秒，若没有则为超过任意时间 |
-| min-fresh=delta-seconds | 告知(代理)服务器 客户端希望接收一个在delta-seconds秒内被更新过的资源 |
-| no-transform | 告知(代理)服务器 客户端希望获取一个实体数据没有被转换(如压缩)过的资源 |
-| only-if-cached | 告知(代理)服务器 客户端希望获取缓存的资源（若有）,而不用向原服务器发起请求 |
-
-- 作为 `Response Headers`时，`cache-directive` 支持以下可选值
-
-| 字段名称 | 说明 |
-| -- | -- |
-| public | 表明任何情况下都需要缓存该资源 |
-| private[="file-name"] | 表明返回报文中全部或部分(若指定了*file-name*的字段数据)仅开放给某些用户(服务器指定的*share-use*)做缓存使用，其他用户则不能缓存这些数据 |
-| no-cache | 不直接使用缓存，要求向服务器发起（新鲜度校验）请求 |
-| no-store | 所有内容都不会被保存到缓存或 Internet临时文件中 |
-| max-age=delta-seconds | 告知客户端该资源在*delta-seconds*秒内是新鲜的，无需向服务器发起请求 |
-| s-max-age=delta-seconds| 同 max-age，但仅应用于 共享缓存 |
-| no-transform | 告知客户端缓存文件时不得对实体数据做任何改变 |
-| must-revalidate | 当前资源一定是向原始服务器发去验证请求的，若请求失败会返回504(而非代理服务器上的缓存) |
-| proxy-revalidate | 和 must-revalidate类似，但仅应用于 共享缓存 |
-
-
-- 可以直接在 HTML页面的`<head>` 中通过 meta标签来给请求头加上 `Cache-Control` 字段：
-
- ``` html
- <meta http-equiv="Cache-Control" content="no-cache">
- ```
-
-- `Cache-Control` 允许自由组合可选值：
- ```
- Cache-Control: max-age=3600, must-revalidate
- ```
- 这段声明表示，该资源必须从原始服务器获取，且其缓存有效时间为一个小时，在后续的一个小时内，用户重新访问该资源都无需发送请求。
-
-### 缓存校验
-
-`Pragma`、`Expires`、`Cache-Control` 字段能够让客户端决定是否向服务器发送请求，缓存未过期的从本地缓存获取资源，缓存过期的从服务器端获取资源。
-
-但是，客户端向服务器发送了请求，是否以为着一定要读取并返回该资源的实体内容？
-
-- 如果一个资源在客户端的缓存时间过期了，但服务器并没有更新过这个资源，那服务端是否一定要重新把资源的实体内容返回？
-
-- 如果这个资源过大，虽然缓存过期，但又没有更新过，返回实体内容是否会浪费带宽和时间？
-
-对于这些问题，其实只要采取某种策略，让服务器知道客户端现在保存的缓存文件跟服务端的资源文件是一致的，
-然后通知客户端该资源可以继续使用缓存文件，不需要重新返回资源实体内容。
-那么就可以解决上述的问题，同时为HTTP请求带来优化和加速。
-
-http1.1 新增了 `Last-Modified`、`ETag`、 `If-Match`、`If-None-Match`、`If-Modified-Since`、
-`If-Unmodified-Since` 这些字段，用于对缓存资源的校验，提高缓存的复用率。
-
-### Last-Modified
-
-服务器将资源发送给客户端时，会将资源的最后更新时间以如下格式加载实体首部，一起返回给客户端。
-
-客户端会为该资源标记上该信息，下次在请求时，会把该信息添加在请求报文中发送给服务端去做检查。
-如果客户端上报字段时间值和服务端的对应资源的最后修改时间一致，则说明改资源没有被修改过，直接返回 304状态码。
-
-客户端在上报 Last-Modified 时，可以使用的 Request Headers 字段有两个：
-
-- `If-Modified-Since`: 该字段格式如下
- ```
- If-Modified-Since: <Last-Modified-Value>
- ```
- 字段告诉服务端，如果客户端上报的最后修改时间和服务器上的最后修改时间一致，则直接返回304和响应报头即可。
-
- 当前各浏览器默认使用该字段用来向服务端上报保存的 Last-Modified 值。
-
-- `If-Unmodified-Since`: 该字段格式如下
- ```
- If-Unmodified-Since: <Last-Modified-Value>
- ```
- 字段告诉服务端，如果客户端上报的最后修改时间和服务端上的最后修改时间不一致，
- 则应当返回 412（Precondition Failed）状态码给客户端。
-
-Last-Modified 由于是使用的资源最后修改时间来确定资源是否有被修改，
-但是在实际情况中，往往存在着一个资源被修改了但实际内容没有发生改变，
-而由于资源最后修改时间已经发生改变，依然会返回整个实体内容给客户端，而其实内容跟客户端缓存内容一致。
-
-### ETag
-
-为了解决 `Last-Modified` 可能存在的不准确的问题，http1.1 还推出了 ETag 实体首部字段。
-
-服务器会通过某种算法，给资源计算得出一个唯一标识符，在把资源响应给客户端的时候，会在实体首部加上该字段一起返回给客户端。
-```
-ETag: ETag-Value
-```
-
-客户端为资源标记上该信息，下次在请求时，会把该信息添加在请求报文中发送给服务端去做检查。
-服务端只需要比较客户端传来的ETag和对应的该资源的ETag是否一致，就可以判断资源相对于客户端资源是否被修改过。
-如果ETag是一致的，那么就直接返回304状态码，否则就返回新的资源实体内容给客户端。
-
-客户端在上报 ETag 时，可以使用的 Request Headers 字段有两个：
-
-- `If-None-Match` 该字段格式如下
- ```
- If-None-Match: <ETag-Value>
- ```
- 字段告诉服务端，如果ETag没有匹配上，需要重新返回新的资源实体内容，否则直接返回 304 状态码。
-
- 当前各浏览器默认使用该字段用来向服务端上报保存的 ETag 值。
-
-- `If-Match` 该字段格式如下
- ```
- If-Match: <ETag-Value>
- ```
- 字段告诉服务端，如果ETag没匹配到，或者收到了`"*"`值而当前没有该资源实体，
- 则应当返回412（Precondition Failed）状态码给客户端。否则服务器直接忽略该字段。
-
-::: tip 提醒
-如果 `Last-Modified` 和 `ETag` 同时被使用，则要求它们的验证必须同时通过才返回 304，
-若其中一个没有通过，则服务器会按照常规返回资源的实体以及200状态码。
-:::
-
-## 次要的 HTTP Headers
-
-以下的字段虽然跟缓存有关系，但没有那么重要。
-
-### Vary
-
-`Vary` 表示 服务端会以什么基准字段来区分、筛选缓存版本。
-
-首先考虑一个问题，服务端有一个请求地址，如果是IE用户则返回针对IE开发的内容，否则返回另一个主流浏览器版本的内容。
-
-一般来说，服务端获取到请求的 `User-Agent` 字段做处理即可。
-但是如果用户请求的是代理服务器而非原始服务器，且代理服务器如果直接把缓存的IE版本资源发给了非IE的客户端，那就出问题了。
-
-而 Vary 则是用于处理这类问题的头部字段，只需要在响应报文加上：
-```
-Vary: User-Agent
-```
-字段告知代理服务器需要以 User-Agent 这个请求头部字段来区别缓存版本，确定传递给客户端的版本。
-
-Vary 字段也接受条件组合的形式
-```
-Vary: User-Agent, Accept-Encoding
-```
-字段告知代理服务器需要以 User-Agent 和 Accept-Encoding 两个请求头部字段来区别缓存版本。
-
-### Date、Age
-
-Date 字段表示原始服务器发送该资源的响应报文时间（GMT时间）。
-该字段的作用可以帮助我们判断该资源命中的是原始服务器还是代理服务器。
-
-- 如果`Date`的时间与当前时间差别较大，或者连续F5刷新发现Date值没有变化，那么说明当前请求命中的是代理服务器的缓存。
-- 如果每次刷新页面，浏览器每次都会重新发起这条请求，那么其Date的值会不断变化，说明该资源是直接从原始服务器返回的。
-
-Age 字段表示某个文件在代理服务器中存在的时间（秒），如果文件被修改或替换，Age会重新从0开始累计。
-
-
-## 浏览器表现
-
-### 强缓存
-
-对于强缓存的资源：
-
-- 当用户第一次访问该资源时，服务器返回 200状态码，以及资源实体内容。
-
-- 如果用户访问完第一次后，在没有关闭浏览器的前提下，进行了第二次或更多次资源访问，那么浏览器不再请求服务器，
- 而是从 浏览器的内存缓存区取出资源，并且 状态码 标记为 `200 (memory cache)`
-
-- 如果用户访问完第一次后，关闭浏览器后，重新打开浏览器，进行第二次或更多次资源访问，那么浏览器也不会请求服务器，
-- 而是从 浏览器的磁盘缓存区取出资源，并且 状态码 标记为 `200（disk cache）`
-
-### 协商缓存
-
-- 当用户第一次访问该资源时，服务器返回 200状态码，以及资源实体内容。
-
-- 如果用户进行第二次访问时，进行缓存校验。 或在缓存时间内，或 资源未被修改，那么 直接返回 304状态码
-- 如果用户进行第二次访问时，服务器资源已被更新，则返回 状态码 200 ，以及新的资源实体内容。
diff --git a/docs/1.前端/9.框架/一些好玩的库或者框架汇总.md b/docs/1.前端/9.框架/一些好玩的库或者框架汇总.md
deleted file mode 100644
index ab54e1f0..00000000
--- a/docs/1.前端/9.框架/一些好玩的库或者框架汇总.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: 一些好玩的库或者框架汇总
-createTime: 2022/05/27 09:16:16
-author: pengzhanbo
-permalink: /article/ci39ae1o/
----
-
-这里收集了一些各种类型的好玩的库或者框架。
-
-<!-- more -->
-
-----
-
-## Client Framework
-
-### Lit
-
-[{style="width:40px"}](https://lit.dev/)
-
-**lit** 是一个简单的、高效的、用于构建 web component 的轻量级库。
-
-它替代了 [polymer](https://github.com/Polymer/polymer) 成为 WebComponent/customElement开发的首选库。
-
-::: code-tabs
-@tab my-element.ts
-```ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement("my-element")
-export class MyTimer extends LitElement {
- static styles = css`...`;
-
- @property() count = 0;
-
- render() {
- return html`<div>${this.count}</div>`;
- }
-}
-```
-@tab index.html
-```html
-<!doctype html>
-<head>...</head>
-<body>
- <my-timer count="7"></my-timer>
-</body>
-```
-:::
-
-
-### solid-js
-
-[solid-js](https://www.solidjs.com/)
-
-一个用于构建用户界面，简单高效、性能卓越的JavaScript库。
-
-Solid 站在 React, Knockout 等巨人的肩膀上。如果你之前用 React Hooks 开发过，Solid 应该看起来很自然。事实上，Solid 模型更简单，没有 Hook 规则。每个组件执行一次，随着依赖项的更新，钩子和绑定会多次执行。
-
-Solid 遵循与 React 相同的理念，具有单向数据流、读/写隔离和不可变接口。但是放弃了使用虚拟 DOM，使用了完全不同的实现。
-
-> 号称比 react 还 react 的库
-
-```ts
-import { render } from "solid-js/web";
-import { onCleanup, createSignal } from "solid-js";
-
-const CountingComponent = () => {
- const [count, setCount] = createSignal(0);
- const interval = setInterval(
- () => setCount(count => count + 1),
- 1000
- );
- onCleanup(() => clearInterval(interval));
- return <div>Count value is {count()}</div>;
-};
-
-render(() => <CountingComponent />, document.getElementById("app"));
-```
-
-### inferno
-
-[inferno](https://www.infernojs.org/) 是一个快速的、类似于 React 的库，用于在客户端和服务器上构建高性能用户界面。
-
-```tsx
-import { render, Component } from 'inferno';
-
-class MyComponent extends Component {
- constructor(props) {
- super(props);
- this.state = {
- counter: 0
- };
- }
- render() {
- return (
- <div>
- <h1>Header!</h1>
- <span>Counter is at: { this.state.counter }</span>
- </div>
- );
- }
-}
-
-render(
- <MyComponent />,
- document.getElementById("app")
-);
-```
-
-### cycle-js
-
-[cycle.js](https://cycle.js.org/)
-
-Cycle.js是一个极简的JavaScript框架,提供了一种函数式，响应式的人机交互接口。
-
-Cycle.js 有别于其他如 React/Vue 等框架，它提供的是一套完整的开发范式，需要在其范式基础上进行开发，相对来说并不
-容易入门，但其函数式、响应式的思想，会带来非常好的启示和学习。
-
-```js
-import {run} from '@cycle/run'
-import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom'
-
-function main(sources) {
- const input$ = sources.DOM.select('.field').events('input')
-
- const name$ = input$.map(ev => ev.target.value).startWith('')
-
- const vdom$ = name$.map(name =>
- div([
- label('Name:'),
- input('.field', {attrs: {type: 'text'}}),
- hr(),
- h1('Hello ' + name),
- ])
- )
-
- return { DOM: vdom$ }
-}
-
-run(main, { DOM: makeDOMDriver('#app-container') })
-```
-
-
-### svelte
-
-[svelte](https://svelte.dev/)
-
-Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。
-
-与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。
-
-```svelte
-<script>
- let count = 0;
-
- function handleClick() {
- count += 1;
- }
-</script>
-
-<button on:click={handleClick}>
- Clicked {count} {count === 1 ? 'time' : 'times'}
-</button>
-```
diff --git a/docs/1.示例/加密文章.md b/docs/1.示例/加密文章.md
new file mode 100644
index 00000000..77692335
--- /dev/null
+++ b/docs/1.示例/加密文章.md
@@ -0,0 +1,15 @@
+---
+title: 加密文章，密码：123456
+author: pengzhanbo
+createTime: 2023/12/25 01:28:29
+permalink: /article/enx7c9s/
+tags:
+ - 预览
+ - 标签
+---
+
+这是一篇 示例文章。
+
+<!-- more -->
+
+无内容。
diff --git a/docs/1.示例/示例文章.md b/docs/1.示例/示例文章.md
new file mode 100644
index 00000000..5f81836d
--- /dev/null
+++ b/docs/1.示例/示例文章.md
@@ -0,0 +1,15 @@
+---
+title: 示例文章
+author: pengzhanbo
+createTime: 2023/12/25 01:28:29
+permalink: /article/xld23tu1/
+tags:
+ - 预览
+ - 标签
+---
+
+这是一篇 示例文章。
+
+<!-- more -->
+
+无内容。
diff --git a/docs/10.面试/面试2.md b/docs/10.面试/面试2.md
deleted file mode 100644
index 292b2693..00000000
--- a/docs/10.面试/面试2.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 面试2
-createTime: 2022/04/03 17:48:00
-author: pengzhanbo
-permalink: /article/exavsmm1
----
-
-::: code-tabs
-
-@tab yarn
-``` bash
-yarn add
-```
-
-@tab npm
-``` bash
-npm install
-```
-
-:::
-
-::: tip
-提示
-:::
-
-::: info
-信息
-:::
-
-::: note
-注释
-:::
-
-::: warning
-警告
-:::
-
-::: caution
-危险
-:::
-
-::: details
-详情
-:::
-
-
-- [ ] todo
-- [x] todo
-
-::: normal-demo 普通代码
-```html
-<h3>这是一个代码片段</h3>
-<span>???</span>
-```
-:::
diff --git a/docs/10.面试/面试题-JS篇.md b/docs/10.面试/面试题-JS篇.md
deleted file mode 100644
index 571bc330..00000000
--- a/docs/10.面试/面试题-JS篇.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: 面试题以及个人答案 JS篇
-tags:
- - 面试
-createTime: 2022/03/26 11:46:50
-permalink: /article/4ml7z17g
-author: pengzhanbo
-top: false
-type: null
----
-
-### JS：变量声明方式有哪些，有什么区别？
-
-声明变量的方式有三种，分别是`var`、`let`、`const`。其中`let`、`const`是`es6`新增的变量声明方式。
-
-`var`声明的变量的作用域是它当前执行的上下文中，并且存在变量提升
-``` js
-function fn() {
- console.log(a);
- var a = 1;
- console.log(a);
-}
-fn();
-```
-相当于
-``` js
-function fn() {
- var a;
- console.log(a); // undefined
- a = 1;
- console.log(a); // 1
-}
-fn();
-```
-并且在可以重复声明同一变量，在该声明的上下文中不会丢失其值。通过var声明的全局变量会作为窗口对象的属性。
-
-`let` 声明的变量是块级作用域，不存在变量提升，并存在暂时死区，不允许在同一块级作用域重复声明。
-``` js
-function fn() {
- console.log(a); // ReferenceError: a is not defined
- let a = 1;
- let a = 2; // TypeError thrown
- console.loga(a);
-}
-fn();
-```
-`const` 声明一个常量，其作用域可以是全局或者是本地声明的块级作用域，与`var`变量不同，全局常量不会变为窗口对象的属性。常量必须在声明的同时初始化。同时声明创建的值是一个只读引用，但不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。如果引用内容是对象的情况下，则可以改变对象内容，除非使用`Object.freeze()`方法冻结对象。`const`声明常量同样存在暂时死区。
-
-____
-
-### JS数据类型隐式转换
-
-
-————
-
-### JS模块化，各自的优劣与不同点？
-
-____
-
-### EVENT LOOP
diff --git a/docs/10.面试/面试题—css篇.md b/docs/10.面试/面试题—css篇.md
deleted file mode 100644
index 5a8bdc91..00000000
--- a/docs/10.面试/面试题—css篇.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: 面试题以及个人答案 CSS篇
-tags:
- - 面试
-createTime: 2022/03/26 11:46:50
-permalink: /article/565o1wn0
-author: pengzhanbo
-top: false
-type: null
----
-
-
-### CSS：什么是盒模型？盒模型有哪些？具体的表现和不同点是什么？
-
-盒模型是CSS规范定义的模块，它规定了一个矩形盒子（标准盒模型），描述任意元素在文档树中占据的空间区域。每个盒子有四个边：`外边距边（margin edge or outer edge）`、`边框边（border edge）`、`内填充边（padding edge）`和`内容边（content edge or inner edge）`，可以划分四个区域`外边距区域（margin area）`、`边框区域（border area）`、`内填充区域（padding area）`和`内容区域（content area）`。
-
-
-
-为什么会有盒模型类型，严格来说，多数浏览器都按照规范实现了标准盒模型，而盒模型的类型主要是来自于不同浏览器对元素宽高的方式不同而导致，IE浏览器认为元素的`width/height`应该是由元素的`内容+内填充+边框`组成，而W3C规定的元素的`width/height`应该是元素的`内容`，从而衍生了不同的盒子模型。到`CSS3`，添加了`box-sizing`属性，用于更改用于计算元素宽高的默认盒子模型，并将IE浏览器和W3C规范纳入了实现中。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
-
-_注：`width/height`最终并不能完全决定元素的实际占用宽高。_
-``` css
-/* 关键字值 */
-box-sizing: border-box; /* 默认值 */
-box-sizing: content-box;
-/* 全局值 */
-box-sizing: inherit;
-box-sizing: initial;
-box-sizing: unset;
-```
-`border-box`规定了元素的`width`由`内容+内填充+边框`组成，即IE浏览器的实现。 元素的实际占据宽度由 width属性+外边距。内容宽度为`width - padding - border`。
-
-`content-box`规定了元素的`width`即`内容宽度`, W3C规范的标准。元素的实际占据宽度由`widht + padding + border + margin`。内容宽度为`width`。
-
-`box-sizing`还有一个待废除的值`padding-box`，`width` 和 `height` 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。
-
-在高度计算上以上规则同样适用，但对非替换行内元素，尽管内容周围存在内边距与边框，但其占用空间受到`line-height`属性影响。
-
-____
-
-### CSS: 什么是外边距合并？什么情况下会发生外边距合并？
-
-块元素的上外边距和下外边距有时候会发生合并，其大小取其中绝对值最大的值，这种行为叫做外边距合并。
-
-__浮动元素__ 和 __绝对定位元素__ 的外边距不会发生合并。这是因为触发了 __块格式化上下文__ 。
-
-1. 相邻元素之间的外边距会发生合并（如果后一个元素需要清除前面的浮动，则不一定发生合并）。
-2. 父元素与其第一个子元素之间不存在边框、内边距、行内内容、没有创建 __块格式化上下文__、没有清除浮动；或者父元素与其最后一个子元素之间不存在边框、内边距、行内内容、heigh、min-height、max-height，那么子元素的外边距会溢出到父元素外面。
-3. 如果一个块级元素不包含任何内容，并且在不存在边框、内边距、行内内容、heigh、min-height，则该元素的上下外边距会发生合并。
-
-三种情况的外边距合并是可以组合产生更加复杂的外边距合并情况的。
-
-_如果外边距合并的值都是负值，则合并的值为最小的外边距的值。_
-
-_如果发生外边距合并的值包含负值，则合并后的值为最大的正外边距与最小的负外边距之和。_
-
-_____
-
-### CSS：垂直水平居中
-
-_这是个老生常谈的问题了，场景可以有很多，答案也有很多，答案而言其实本身不重要，重要是明白为什么这个方法为什么可以实现垂直居中。_
-
-__设立一个场景：在一个宽高不固定的容器中，实现一个宽高不固定的内容盒子，并垂直水平居中。__
-``` html
-<!-- 假设 warpper、container 宽高不固定 实现container相对于wrapper垂直水平居中-->
-<div class="wrapper">
- <div class="container">
- </div>
-</div>
-```
-__方法一：__ 使用 flex 布局
-``` css
-.wrapper{
- display: flex;
-}
-.container{
- margin: auto;
-}
-```
-适用于支持 flex布局的浏览器（IE11以上，其他现代浏览器）。这里是利用flex弹性布局的特性，弹性容器改变了其子元素填充可用空间的方式，子元素默认从容器左上角开始排列，在不设置宽高时，子元素填充空间由`flex`声明，默认值为`0 1 auto`,即
-`flex-grow: 0;flex-shrink: 1;flex-basis: auto`; 其中 `flex-basis`定义了子元素的宽和高的尺寸大小，`auto`值表示自动尺寸，根据子元素内容计算宽高，在子元素上设置`margin: auto`，这是利用`auto`平均分配水平或垂直方向上的额外的空间，从而达到目的。（此方法实现的结果是“真正的”垂直水平居中）
-
-或者
-``` css
-.wrapper{
- display: flex;
- justify-content: center;
- align-content: center;
-}
-```
-
-__方法二：__ 使用 table 布局
-``` css
-.wrapper{
- display: table-cell;
- vertical-align: middle;
-}
-.container{
- margin: auto;
-}
-```
-利用的是table布局的特性，不过该方法有个缺点就是，`display: table-cell`元素的宽高设置百分比数值是“无效的”，原因是父元素非`table`元素或`display: table`元素，`display: table-cell`元素的宽高百分比数字是相对于`table`计算的。
-
-__方法三：__ `position` + `transform`
-``` css
-.wrapper{
- position: relative;
-}
-.container{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-```
-该方法与前面两个方法的作用机理有很大的不同，首先第一点是`container`脱离了文档流，并且`container`自身的宽高发生了坍塌，在不设置宽高属性下，尺寸由内容撑开，`container`相对`wrapper`元素进行绝对定位，水平方向与垂直方向上，`container`的左上角顶点偏移到`wrapper`中点，`container`的`transform`是相对于自身的，` translate(-50%, -50%)`相对于自身，将左上角顶点做左上偏移自身的一半，从而实现了目的。
-
-_有一些面试者给出了`container`元素上设置`margin-left: -50%; margin-top: -50%`的答案，然而，margin的百分比值，是相对于其父元素计算的。_
-
-__方法四：__ 使用 行内块元素
-``` css
-.wrapper{
- text-align: center;
-}
-.wrapper:after{
- content: '';
- display: inline-block;
- vertical-align: middle;
- height: 100%;
-}
-.container{
- display: inline-block;
- vertical-align: middle;
- text-align: left;
-}
-```
-该方法实现的垂直水平居中其实是一个近似垂直水平居中，兼容IE7以上的浏览器。水平方向上`.wrapper`设置`text-align: center;`实现了水平居中；垂直方向上，给定`container`声明行内块元素，并`vertical-align: middle`，但由于`container`高度不确定，无法声明具体的行高，所以借助了父元素的伪类元素，创建了一个宽度为0高度为100%的行内块元素，从而使`container`元素在垂直方向上实现了居中。但由于`vertical-align: middle`是元素的中线与字符X的中心点对齐，大多数字体设计字体的中心点偏下，也导致了实现的垂直居中并不是绝对的垂直居中。而要实现绝对的垂直居中，需要添加一下属性：
-```css
-.wrapper{
- font-size: 0;
- white-space: nowrap;
-}
-.container{
- font-size: 14px; /* 重置回默认字体大小 */
- white-space: normal;
-}
-```
-实现方法有很多，这里暂时只列出其中的四种。
-
-____
-
-_想到还有其他问题继续补充..._
diff --git a/docs/2.preview/主题效果预览.md b/docs/2.preview/主题效果预览.md
index bfd05969..4e6894ca 100644
--- a/docs/2.preview/主题效果预览.md
+++ b/docs/2.preview/主题效果预览.md
@@ -1,6 +1,6 @@
---
title: 主题效果预览
-author: Plume Theme
+author: pengzhanbo
createTime: 2023/12/25 01:28:29
permalink: /article/0lk24ty5/
sticky: true
@@ -86,7 +86,7 @@ H~2~O
[外部链接](https://github.com/pengzhanbo)
-
+
**Badge**
diff --git a/docs/README.md b/docs/README.md
index 3efdb55f..db468215 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,5 +1,6 @@
---
home: true
+externalLink: false
config:
-
type: hero
@@ -17,60 +18,149 @@ config:
-
theme: alt
text: Github
- link: /
+ link: https://github.com/pengzhanbo/vuepress-theme-plume
-
type: features
- title: 标题
- description: 随便描述
features:
-
- title: 特性1
- icon: 🖨
- details: 特性说明
+ title: 响应式布局
+ icon: 💻
+ details: 适配移动设备，PC，平板
-
- title: 特性1
- icon: 🖨
- details: 特性说明
+ title: 博客 & 文档
+ icon: 📖
+ details: 无论是想写博客，或想写产品文档，或者两者兼顾
-
- title: 特性1
- icon: 🖨
- details: 特性说明
+ title: 开箱即用
+ icon: 🚀
+ details: 支持零配置即可使用，也支持丰富的自定义配置
-
- title: 特性1
- icon: 🖨
- details: 特性说明
+ title: 多语言
+ icon: ⚖
+ details: 内置了 中文/英文支持，还可以自定义添加更多的语言支持
-
- title: 特性1
- icon: 🖨
- details: 特性说明
- -
- type: custom
- -
- type: text-image
- title: 标题
- description: 随便描述
- list:
+ title: 双色主题
+ icon: 👨💻
+ details: 支持 浅色/深色 主题，包括代码高亮
-
- title: 描述
- description: 随便描述一下
- - 随便描述一下
- - 随便描述一下
- image: /images/blogger.png
+ title: 插件
+ icon: 📦
+ details: 内置丰富的插件，一站式解决网站一般需求
+ -
+ title: 搜索、评论
+ icon: 🔍
+ details: 支持多种评论系统，支持本地搜索、Algolia搜索
+ -
+ title: 加密
+ icon: 🔒
+ details: 支持全站加密、部分加密（加密目录、加密文章）
+ -
+ title: Markdown 增强
+ icon: 📝
+ details: 支持 Markdown 语法，支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
-
type: image-text
- title: 标题
- description: 随便描述
+ title: 功能
+ description: 内置丰富的功能，满足网站一般需求。
+ image: /images/plume-1.svg
list:
-
- title: 描述
- description: 随便描述一下
- - 随便描述一下
- - 随便描述一下
- image: /images/blogger.png
+ title: 文章信息
+ description: 为文章添加标签、分类、字数统计、阅读时间、写作日期等信息。
+ -
+ title: 评论
+ description: 支持 4 种评论系统，你可以自由选择符合你的需求的评论系统。
+ -
+ title: 搜索
+ description: 支持基于 minisearch 的本地搜索， 支持Algolia搜索。
+ -
+ title: 加密
+ description: 支持全站加密、部分加密（加密目录、加密文章）。
+ -
+ title: 代码复制
+ description: 一键复制代码块中的内容
-
- type: profile
- name: 鹏展博
- description: 前端开发工程师, 热爱前端, 热爱生活, 热爱互联网, 热爱技术, 热爱开源, 热爱生命。
+ type: text-image
+ title: 博客
+ description: 主题默认支持博客，生成你的个人博客。
+ image: /images/plume-2.svg
+ list:
+ -
+ title: 文章列表
+ description: 通过文章写作日期，自动排序并生成博客文章列表页。
+ -
+ title: 博主信息
+ description: 自定义名称、座右铭、头像，社交媒体链接。
+ -
+ title: 标签、归档
+ description: 自动生成标签页，为文章根据年份进行归档。
+ -
+ type: image-text
+ title: 文档
+ image: /images/plume-3.svg
+ description: 主题默认支持文档，生成你的产品文档，或归纳你的知识体系。
+ list:
+ -
+ title: 侧边栏
+ description: 根据文档目录自动生成侧边栏，也可以手动配置，主题提供了更简单的配置方式。
+ -
+ title: 文档分类归纳
+ description: 可以文档的不同，归纳到不同的目录，更好的管理文档结构。
+ -
+ type: custom
---
-这里是自定义的内容，你可以随意添加你自己的内容
+<div style="max-width: 960px;margin:0 auto;">
+
+::: center
+
+
+
+
+:::
+
+### 安装
+
+:::code-tabs
+@tab pnpm
+```sh
+pnpm add vuepress@next vuepress-theme-plume vue
+```
+@tab npm
+```sh
+npm install vuepress@next vuepress-theme-plume
+```
+@tab yarn
+```sh
+yarn add vuepress@next vuepress-theme-plume
+```
+:::
+
+### 配置
+
+::: code-tabs
+@tab .vuepress/config.ts
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ // vuepress config...
+ theme: plumeTheme({
+ // theme config...
+ })
+})
+```
+:::
+
+### 更新记录
+
+[Changelog](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/CHANGELOG.md)
+
+### 贡献者
+
+[](https://github.com/pengzhanbo/)
+
+[](https://github.com/huankong233)
+
+</div>
diff --git a/docs/en/README.md b/docs/en/README.md
index 653c0c25..df0f9a78 100644
--- a/docs/en/README.md
+++ b/docs/en/README.md
@@ -1,17 +1,26 @@
---
home: true
-banner: /images/bg-home.jpg
-hero:
- name: pengzhanbo
- tagline: Front-End Developer
- text: 简单介绍专业技能信息相关的描述
- actions:
- -
- theme: brand
- text: Blog
- link: /en/blog/
- -
- theme: alt
- text: Github
- link: /
+externalLink: false
+config:
+ -
+ type: hero
+ full: true
+ background: filter-blur
+ hero:
+ name: Theme Plume
+ tagline: Vuepress Next Theme
+ text: A simple, feature-rich vuepress document & blog theme
+ actions:
+ -
+ theme: brand
+ text: Quick Start →
+ link: /
+ -
+ theme: alt
+ text: Github
+ link: https://github.com/pengzhanbo/vuepress-theme-plume
+ -
+ type: custom
---
+
+Todo...
diff --git a/docs/en/notes/theme/config/intro.md b/docs/en/notes/theme/config/intro.md
new file mode 100644
index 00000000..9fedea73
--- /dev/null
+++ b/docs/en/notes/theme/config/intro.md
@@ -0,0 +1,8 @@
+---
+title: Configuration
+author: pengzhanbo
+createTime: 2024/03/02 10:48:14
+permalink: /en/config/intro/
+---
+
+Todo...
diff --git a/docs/en/notes/theme/guide/intro.md b/docs/en/notes/theme/guide/intro.md
new file mode 100644
index 00000000..bf67bc35
--- /dev/null
+++ b/docs/en/notes/theme/guide/intro.md
@@ -0,0 +1,9 @@
+---
+title: Theme Introduction
+author: pengzhanbo
+createTime: 2024/03/04 11:06:24
+permalink: /en/guide/intro/
+---
+
+
+Todo...
diff --git a/docs/en/notes/vuepress-plugin/caniuse/README.md b/docs/en/notes/vuepress-plugin/caniuse/README.md
deleted file mode 100644
index 59370030..00000000
--- a/docs/en/notes/vuepress-plugin/caniuse/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: plugin-caniuse
-author: Plume Theme
-createTime: 2023/06/15 09:33:00
-permalink: /en/note/vuepress-plugin/caniuse
----
-
-## Can I Use
diff --git a/docs/home-banner.jpg b/docs/home-banner.jpg
deleted file mode 100644
index f81731a9..00000000
Binary files a/docs/home-banner.jpg and /dev/null differ
diff --git a/docs/notes/README.md b/docs/notes/README.md
deleted file mode 100644
index f8c8781d..00000000
--- a/docs/notes/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: README
-createTime: 2022/04/04 11:13:30
-author: pengzhanbo
-permalink: /note/
----
diff --git a/docs/notes/theme/config/frontmatter/basic.md b/docs/notes/theme/config/frontmatter/basic.md
new file mode 100644
index 00000000..5e1d9a95
--- /dev/null
+++ b/docs/notes/theme/config/frontmatter/basic.md
@@ -0,0 +1,112 @@
+---
+title: 通用配置
+author: pengzhanbo
+createTime: 2024/03/02 20:01:09
+permalink: /config/frontmatter/basic/
+---
+
+## 概述
+
+通用 Frontmatter 配置，适用于 所有的文章。
+
+示例：
+
+```md
+---
+title: 标题
+author: 作者
+createTime: 2024/03/02 20:01:09
+permalink: /config/frontmatter/basic/
+---
+```
+
+## 配置
+
+### title
+
+文章标题。
+
+主题会在文件创建时，自动填充 当前文件名作为 文章标题。
+
+### author
+
+文章作者。
+
+主题会在文件创建时，自动填充 `avatar.name || packageJson.author` 作为 文章作者。
+
+### createTime
+
+文章创建时间。
+
+主题会在文件创建时，自动填充 当前时间作为 文章创建时间。
+
+### permalink
+
+文章永久链接。
+
+主题会在文件创建时:
+
+- 博客类型的文章，自动填充 `/article/` + `nanoid 生成的 6 位随机字符串` 作为 文章永久链接
+- notes 目录下的文章，会根据 notes 的配置，自动填充 文章永久链接
+
+### externalLink
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章内的 外部链接是否显示 外部链接图标， 即 “ <ExternalLinkIcon /> ” 图标
+
+### backToTop
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 显示 回到顶部 的按钮。
+
+### comments
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 可评论。 仅在启用了评论功能的情况下生效。
+
+### prev
+
+- 类型： `string | { text: string, link: string, icon?: string }`
+- 默认值： `''`
+
+自定义当前文章的上一篇文章。
+
+- 博客类型的文章，主题根据时间排序，自动填充上一篇文章的标题和链接。
+- notes 类型的文章，主题根据 note sidebar 配置，自动填充上一篇文章的标题和链接。
+
+### next
+
+- 类型： `string | { text: string, link: string, icon?: string }`
+- 默认值： `''`
+
+自定义当前文章的下一篇文章。
+
+- 博客类型的文章，主题根据时间排序，自动填充下一篇文章的标题和链接。
+- notes 类型的文章，主题根据 note sidebar 配置，自动填充下一篇文章的标题和链接。
+
+### lastUpdated
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 显示 最后更新时间。 最后更新时间 根据 git 提交时间自动填充。
+
+### contributors
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 显示 贡献者。 贡献者 根据 git 提交者自动填充。
+
+### editLink
+
+- 类型： `boolean`
+- 默认值： `true`
+
+当前文章是否 显示 文章编辑 按钮。
diff --git a/docs/notes/theme/config/frontmatter/friend.md b/docs/notes/theme/config/frontmatter/friend.md
new file mode 100644
index 00000000..70b87e4c
--- /dev/null
+++ b/docs/notes/theme/config/frontmatter/friend.md
@@ -0,0 +1,75 @@
+---
+title: 友情链接页
+author: pengzhanbo
+createTime: 2024/03/03 18:00:52
+permalink: /config/frontmatter/friends/
+---
+
+## 概述
+
+适用于友情链接页。
+
+示例：
+
+```md
+---
+friends: true
+title: 友情链接
+list:
+ -
+ name: pengzhanbo
+ link: https://github.com/pengzhanbo
+ avatar: https://github.com/pengzhanbo.png
+ desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+---
+```
+
+## 配置
+
+### friends
+
+- 类型： `boolean`
+- 默认值： `false`
+
+当前页面是否为友情链接页。
+
+### title
+
+- 类型： `string`
+- 默认值： `友情链接`
+
+友情链接页的标题
+
+### description
+
+- 类型： `string`
+
+友情链接页的描述
+
+### list
+
+- 类型： `FriendsItem[]`
+- 默认值: `[]`
+
+友情链接列表
+
+```ts
+interface FriendsItem {
+ /**
+ * 友情链接名
+ */
+ name: string
+ /**
+ * 友情链接
+ */
+ link: string
+ /**
+ * 友情链接头像
+ */
+ avatar?: string
+ /**
+ * 友情链接描述
+ */
+ desc?: string
+}
+```
diff --git a/docs/notes/theme/config/frontmatter/home.md b/docs/notes/theme/config/frontmatter/home.md
new file mode 100644
index 00000000..c43062e5
--- /dev/null
+++ b/docs/notes/theme/config/frontmatter/home.md
@@ -0,0 +1,59 @@
+---
+title: 首页
+author: pengzhanbo
+createTime: 2024/03/03 15:00:43
+permalink: /config/frontmatter/home/
+---
+
+## 概述
+
+仅适用于 首页。在 `{sourceDir}/README.md` 中进行配置。
+
+示例：
+
+```md
+---
+home: true
+config:
+ - type: banner
+ - type: custom
+---
+```
+
+## 配置
+
+### home
+
+- 类型： `boolean`
+
+声明是否为 首页
+
+### config
+
+- 类型： `PlumeHomeConfig[]`
+
+定义 首页 区域
+
+```ts
+interface PlumeHomeConfigBase {
+ /**
+ * 该区域的类型，根据类型应用不同的组件
+ */
+ type: 'banner' | 'hero' | 'text-image' | 'image-text' | 'features' | 'profile' | 'custom' | string
+ /**
+ * 该区域是否占满全屏
+ */
+ full?: boolean
+ /**
+ * 该区域的背景图片
+ * 你可以定义在 浅色/暗色 模式下的背景图片
+ */
+ backgroundImage?: string | { light: string, dark: string }
+ /**
+ * 该区域的背景 定位方式
+ */
+ backgroundAttachment?: 'fixed' | 'local'
+}
+```
+
+更多详细配置请参考 [自定义首页](/guide/custom-home/)
diff --git a/docs/notes/theme/config/frontmatter/post.md b/docs/notes/theme/config/frontmatter/post.md
new file mode 100644
index 00000000..eae7266b
--- /dev/null
+++ b/docs/notes/theme/config/frontmatter/post.md
@@ -0,0 +1,46 @@
+---
+title: 博客文章
+author: pengzhanbo
+createTime: 2024/03/03 11:01:03
+permalink: /config/frontmatter/article/
+---
+
+## 概述
+
+适用于 博客类型的文章。
+
+示例：
+
+```md
+---
+title: 文章标题
+tags:
+ - tag1
+ - tag2
+---
+```
+
+## 配置
+
+### sticky
+
+- 类型： `boolean \| number`
+- 默认值： `false`
+
+是否在文章列表中，置顶当前文章。
+
+如果为 `number` ，则数字越大，文章置顶的位置越靠前。
+
+### article
+
+- 类型： `boolean`
+- 默认值： `true`
+
+是否在文章列表中，显示当前文章。
+
+### tags
+
+- 类型： `string[]`
+- 默认值： `[]`
+
+文章标签。
diff --git a/docs/notes/theme/config/notes配置.md b/docs/notes/theme/config/notes配置.md
new file mode 100644
index 00000000..679786c9
--- /dev/null
+++ b/docs/notes/theme/config/notes配置.md
@@ -0,0 +1,8 @@
+---
+title: notes配置
+author: pengzhanbo
+createTime: 2024/03/02 14:00:06
+permalink: /config/notes/
+---
+
+Todo...
diff --git a/docs/notes/theme/config/plugins/README.md b/docs/notes/theme/config/plugins/README.md
new file mode 100644
index 00000000..bdb1a179
--- /dev/null
+++ b/docs/notes/theme/config/plugins/README.md
@@ -0,0 +1,24 @@
+---
+title: 介绍
+author: Plume Theme
+createTime: 2024/03/06 8:26:44
+permalink: /config/plugins/
+---
+
+主题内置的使用的插件，扩展了主题的众多功能，你可以在这个 字段中， 实现对内部使用的各个插件的自定义配置。
+
+## 配置
+
+所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
+``` js
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ // more options... // [!code ++]
+ }
+ }),
+})
+```
diff --git a/docs/notes/theme/config/plugins/markdown增强.md b/docs/notes/theme/config/plugins/markdown增强.md
new file mode 100644
index 00000000..48e98740
--- /dev/null
+++ b/docs/notes/theme/config/plugins/markdown增强.md
@@ -0,0 +1,50 @@
+---
+title: markdown增强
+author: pengzhanbo
+createTime: 2024/03/06 20:25:36
+permalink: /config/plugins/markdown-enhance/
+---
+
+## 概述
+
+提供 Markdown 增强功能。
+
+关联插件：[vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/)
+
+默认配置：
+
+```ts
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ markdownEnhance: {
+ hint: true,
+ codetabs: true,
+ tabs: true,
+ align: true,
+ mark: true,
+ tasklist: true,
+ attrs: true,
+ sup: true,
+ sub: true,
+ alert: true,
+ footnote: true,
+ katex: true,
+ }
+ }
+ }),
+})
+```
+
+## 配置
+
+详见 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/config.html)
+
+
+:::tip 说明
+主题还未完全对 该插件提供的 所有 增强功能 进行 样式上的适配。
+如果你在使用过程中遇到样式上的问题，可以在 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出。
+:::
diff --git a/docs/notes/theme/config/plugins/代码复制.md b/docs/notes/theme/config/plugins/代码复制.md
new file mode 100644
index 00000000..dca66a04
--- /dev/null
+++ b/docs/notes/theme/config/plugins/代码复制.md
@@ -0,0 +1,69 @@
+---
+title: 代码复制
+author: pengzhanbo
+createTime: 2024/03/06 16:24:34
+permalink: /config/plugins/copy-code/
+---
+
+## 概述
+
+主题内置的代码复制插件，在代码块中插入复制按钮。
+
+关联插件： [@vuepress-plume/plugin-copy-code](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-copy-code)
+
+默认配置：
+
+```ts{7-9}
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ copyCode: {
+ selector: '.page-content div[class*="language-"] pre',
+ },
+ }
+ }),
+})
+```
+
+## 配置
+
+### selector
+
+- 类型： `string`
+- 默认值： `'.page-content div[class*="language-"] pre'`
+
+用于指定复制按钮应用的代码块选择器。
+
+### duration
+
+- 类型： `number`
+- 默认值： `1500`
+
+用于置顶 提示消息显示时间。 设置为 `0` 将会禁用提示。
+
+### showInMobile
+
+- 类型： `boolean`
+- 默认值： `false`
+
+用于控制是否在移动端显示复制按钮。
+
+## 禁用
+
+你可以指定 `copyCode: false` 来禁用插件。
+
+```ts{7}
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ copyCode: false,
+ }
+ }),
+})
+```
diff --git a/docs/notes/theme/config/plugins/代码高亮.md b/docs/notes/theme/config/plugins/代码高亮.md
new file mode 100644
index 00000000..f9e7a7f2
--- /dev/null
+++ b/docs/notes/theme/config/plugins/代码高亮.md
@@ -0,0 +1,95 @@
+---
+title: 代码高亮
+author: pengzhanbo
+createTime: 2024/03/06 10:21:47
+permalink: /config/plugins/code-highlight/
+---
+
+## 概述
+
+主题内置的代码高亮插件， 对代码块进行代码高亮。
+
+主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
+Shiki 支持多种编程语言。
+
+在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
+
+关联插件： [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji)
+
+默认配置：
+
+```ts
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ shiki: {
+ theme: { light: 'vitesse-light', dark: 'vitesse-dark' },
+ },
+ }
+ }),
+})
+```
+
+## 配置
+
+### theme
+
+- 类型: `string | { light: string, dark: string }`
+- 默认值: `{ light: 'vitesse-light', dark: 'vitesse-dark' }`
+
+代码高亮主题，支持 浅色/暗色 双主题。
+
+可在 支持的 [主题列表](https://shiki.style/themes) 中选择你喜欢的主题。
+
+### languages
+
+- 类型: `string[]`
+- 默认值: `[]`
+
+
+需要高亮的编程语言， 例如 `javascript`、`typescript`、`python`、`java`、`c++`、`c#`等。
+默认会根据代码块的语言自动识别。
+
+在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages) 。
+
+### defaultHighlightLang
+
+- 类型: `string`
+- 默认值: `text`
+
+默认高亮的编程语言。当代码块未指定语言时使用。
+
+### codeTransformers
+
+- 类型: `ShikiTransformer[]`
+- 默认值: `[]`
+
+代码转换器， 查看 [shiki transformers](https://shiki.style/guide/transformers) 了解更多信息。
+
+### twoslash <Badge type="tip" text="实验性" />
+
+- 类型: `boolean`
+- 默认值: `false`
+
+实验性功能，是否启用 对 `typescript` 和 `vue` 语言的 类型提示 支持。
+
+查看 [twoslash](/guide/markdown/experiment/#twoslash) 了解更多信息。
+
+### whitespace
+
+- 类型: `boolean`
+- 默认值: `false`
+
+将空白字符（Tab 和空格）渲染为单独的标签（具有 tab 或 space 类名）。
+
+效果：
+
+```ts whitespace
+function block( ) {
+ space( )
+ table( )
+}
+```
diff --git a/docs/notes/theme/config/plugins/搜索.md b/docs/notes/theme/config/plugins/搜索.md
new file mode 100644
index 00000000..6137e1e3
--- /dev/null
+++ b/docs/notes/theme/config/plugins/搜索.md
@@ -0,0 +1,98 @@
+---
+title: 搜索配置
+author: pengzhanbo
+createTime: 2024/03/06 09:19:26
+permalink: /config/plugins/search/
+---
+
+## 本地搜索
+
+### 概述
+
+为站点添加本地搜索。
+
+关联插件： [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search)
+
+该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
+
+默认配置：
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ search: {
+ // more options
+ }
+ }
+ })
+})
+```
+
+### 配置
+
+```ts
+interface SearchOptions {
+ /**
+ * 本地搜索 国际化
+ */
+ locales?: {
+ [locale: string]: SearchBoxLocale
+ }
+
+ /**
+ * 文章是否可被搜索，默认为 `() => true`
+ */
+ isSearchable?: (page: Page) => boolean
+}
+
+interface SearchBoxLocale {
+ placeholder: string
+ buttonText: string
+ resetButtonTitle: string
+ backButtonTitle: string
+ noResultsText: string
+ footer: {
+ selectText: string
+ selectKeyAriaLabel: string
+ navigateText: string
+ navigateUpKeyAriaLabel: string
+ navigateDownKeyAriaLabel: string
+ closeText: string
+ closeKeyAriaLabel: string
+ }
+}
+```
+
+## Algolia DocSearch
+
+### 概述
+
+使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
+
+关联插件：[@vuepress/plugin-docsearch](https://ecosystem.vuejs.press/zh/plugins/docsearch.html)
+
+查看 [Algolia DocSearch 参考](/guide/features/content-search/#algolia-docsearch) 获取更多信息。
+
+### 启用
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ docsearch: {
+ appId: 'YOUR_APP_ID',
+ apiKey: 'YOUR_API_KEY',
+ indexName: 'YOUR_INDEX_NAME',
+ // more options
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/config/plugins/百度统计.md b/docs/notes/theme/config/plugins/百度统计.md
new file mode 100644
index 00000000..e13f89a7
--- /dev/null
+++ b/docs/notes/theme/config/plugins/百度统计.md
@@ -0,0 +1,38 @@
+---
+title: 百度统计
+author: pengzhanbo
+createTime: 2024/03/06 12:22:57
+permalink: /config/plugins/baidu-tongji/
+---
+
+## 概述
+
+为站点添加 百度统计。该插件默认不启用。
+
+关联插件： [@vuepress-plume/plugin-baidu-tongji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-baidu-tongji)
+
+## 配置
+
+### key
+
+- 类型：`string`
+- 默认值：`''`
+
+配置百度统计的key
+
+### 启用
+
+```ts{7-9}
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ baiduTongji: {
+ key: '你的百度统计key'
+ }
+ }
+ }),
+})
+```
diff --git a/docs/notes/theme/config/plugins/阅读统计.md b/docs/notes/theme/config/plugins/阅读统计.md
new file mode 100644
index 00000000..94871e75
--- /dev/null
+++ b/docs/notes/theme/config/plugins/阅读统计.md
@@ -0,0 +1,68 @@
+---
+title: 阅读统计
+author: pengzhan
+createTime: 2024/03/06 15:23:39
+permalink: /config/plugins/reading-time/
+---
+
+
+## 概述
+
+为每个页面生成字数统计与预计阅读时间。
+
+关联插件： [@vuepress/plugin-reading-time](https://ecosystem.vuejs.press/zh/plugins/reading-time.html)
+
+默认配置：
+
+```ts
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ readingTime: {
+ wordPerMinute: 300
+ }
+ }
+ }),
+})
+```
+
+## 配置
+
+### wordPerMinute
+
+- 类型：`number`
+- 默认值：`300`
+
+每分钟阅读字数。
+
+### locales
+
+- 类型: `ReadingTimePluginLocaleConfig`
+
+阅读时间插件的国际化配置。
+
+```ts
+interface ReadingTimePluginLocaleData {
+ /**
+ * 字数模板，模板中 `$word` 会被自动替换为字数
+ */
+ word: string
+
+ /**
+ * 小于一分钟文字
+ */
+ less1Minute: string
+
+ /**
+ * 时间模板
+ */
+ time: string
+}
+
+interface ReadingTimePluginLocaleConfig {
+ [localePath: string]: ReadingTimePluginLocaleData
+}
+```
diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
new file mode 100644
index 00000000..81825b79
--- /dev/null
+++ b/docs/notes/theme/config/主题配置.md
@@ -0,0 +1,449 @@
+---
+title: 主题配置
+author: pengzhanbo
+createTime: 2024/03/02 18:07:03
+permalink: /config/basic/
+---
+
+## 基础配置
+
+### plugins
+
+- 类型：`PlumeThemePluginOptions`
+- 默认值： `{}`
+- 详情： 对主题内部使用的插件进行自定义配置。
+
+主题使用的插件默认已进行了配置，大多数情况下您不需要进行任何修改，如果需要使用到细致的定制化，请查阅
+[此文档](/vuepress-theme-plume/plugins-config/)
+
+### locales
+
+- 类型： `Record<string, PlumeThemeLocaleConfig>`
+- 默认值： `{}`
+- 详情： 多语言配置
+
+多语言配置，参考 [此文档](/vuepress-theme-plume/locales/)
+
+多语言配置支持以下 [Locale](#locale-配置) 所有配置选项
+
+## Locale 配置
+
+### home
+
+- 类型： `false | string`
+- 默认值： `/`
+- 详情：
+ 首页的路径， 它将被用于：
+ - 导航栏中 logo的链接；
+ - 404页面的 *返回首页* 的链接；
+
+### logo
+
+- 类型: `false | string`
+- 默认值： `false`
+- 详情： 导航栏中的logo。
+
+### logoDark
+
+- 类型 `false | string`
+- 默认值： `false`
+- 详情： Dark模式下，导航栏中的logo。
+
+### appearance
+
+- 类型： `boolean | 'dark' | 'force-dark`
+- 默认值： `true`
+
+是否启用 深色模式。
+
+- 如果该选项设置为 `true`，则默认主题将由用户的首选配色方案决定。
+- 如果该选项设置为 `dark`，则默认情况下主题将是深色的，除非用户手动切换它。
+- 如果该选项设置为 `false`，用户将无法切换主题。
+- 如果该选项设置为 `force-dark`，则用户将无法切换主题，但会强制将主题更改为深色。
+
+此选项注入一个内联脚本，从本地存储恢复用户设置。这确保在呈现页面之前应用 `.dark` 类以避免闪烁。
+
+### appearanceText
+
+- 类型： `string`
+- 默认值： `'Appearance'`
+- 详情： 导航栏中的主题切换按钮的文本。
+
+### hostname
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+ 部署站点域名。
+
+ 当 `hostname` 配置为有效域名时，主题将会生成 `sitemap` 和 `seo` 相关的内容。
+
+### avatar
+
+- 类型： `PlumeThemeAvatar`
+- 默认值： `{}`
+- 详情：配置站点博主的个人信息
+ - `avatar.url`: 头像地址，用于右侧博主信息展示
+ - `avatar.name`: 名称， 用于右侧博主信息展示
+ - `avatar.description`: 个人描述，用于右侧博主信息展示
+ - `avatar.circle`: 是否为圆形头像
+- 示例：
+ ``` ts
+ export default {
+ theme: themePlume({
+ avatar: {
+ url: '/avatar.jpg',
+ name: '张三',
+ description: '此处无银三百两，隔壁王二不曾偷',
+ circle: true
+ }
+ })
+ }
+ ```
+
+### social
+
+- 类型： `false | SocialLink[]`
+- 默认值： `false`
+- 详情： 个人社交信息配置。
+
+ 将作为 图标链接 展示在 导航栏最右侧。
+
+ 图标可选值：`'discord' | 'facebook' | 'github' | 'instagram' | 'linkedin' | 'mastodon' | 'npm' | 'slack' | 'twitter' | 'x' | 'youtube' | 'qq' | 'weibo' | 'bilibili' | { svg: string }`
+
+- 示例：
+ ``` ts
+ export default {
+ theme: themePlume({
+ social: [{
+ icon: 'github',
+ link: 'https://github.com/zhangsan',
+ }]
+ })
+ }
+ ```
+
+### blog
+
+- 类型： `false | BlogOptions`
+- 默认值： `{ link: '/blog/', include: ['**/*.md'], exclude: [] }`
+- 详情：
+
+ 博客配置。
+
+```ts
+interface BlogOptions {
+ /**
+ * blog list link
+ *
+ * @default '/blog/'
+ */
+ link?: string
+
+ /**
+ * 在 `blog.dir` 目录中，通过 glob string 配置包含文件
+ *
+ * @default - ['**\*.md']
+ */
+ include?: string[]
+
+ /**
+ * 在 `blog.dir` 目录中，通过 glob string 配置排除的文件
+ *
+ * README.md 文件一般作为主页或者某个目录下的主页，不应该被读取为 blog文章
+ *
+ * @default - ['.vuepress/', 'node_modules/', '{README,index}.md']
+ */
+ exclude?: string[]
+
+ /**
+ * 分页配置
+ */
+ pagination?: false | {
+ /**
+ * 每页显示的文章数量
+ * @default 10
+ */
+ perPage?: number
+ /**
+ * 前一页的文本
+ * @default 'Prev'
+ */
+ prevPageText?: string
+ /**
+ * 后一页的文本
+ * @default 'Next'
+ */
+ nextPageText?: string
+ }
+
+ /**
+ * 是否启用标签页
+ * @default true
+ */
+ tags?: boolean
+ /**
+ * 是否启用归档页
+ * @default true
+ */
+ archives?: boolean
+}
+```
+
+### article
+
+- 类型： `string`
+- 默认值： `/article/`
+- 详情： 文章链接前缀
+
+
+### navbar
+
+- 类型： `NavItem[]`
+- 默认值： `[]`
+- 详情： 导航栏配置。
+
+ 为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `NavItem` 对象、
+ - `NavItem` 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 `activeMatch` 字段。
+
+``` ts
+type NavItem = string | {
+ text: string
+ link: string
+ items?: NavItem[]
+ /**
+ * 支持 iconify 图标，直接使用 iconify name 即可自动加载
+ *
+ * @see https://icon-sets.iconify.design/
+ */
+ icon: string
+ /**
+ * 控制元素何时被激活
+ */
+ activeMatch?: string
+}
+```
+- 示例1：
+ ``` js
+ export default {
+ theme: plumeTheme({
+ navbar: [
+ // NavbarItem
+ { text: 'Foo', link: '/foo/' },
+ // NavbarGroup
+ {
+ text: 'Group',
+ item: ['/group/foo/', '/group/bar/'],
+ },
+ // 字符串 - 页面文件路径
+ '/bar/',
+ ],
+ }),
+ }
+ ```
+- 示例2：
+ ``` js
+ export default {
+ theme: plumeTheme({
+ navbar: [
+ // 嵌套 Group - 最大深度为 2
+ {
+ text: 'Group',
+ items: [
+ {
+ text: 'SubGroup',
+ items: ['/group/sub/', '/group/sub/bar/'],
+ },
+ ],
+ },
+ // 控制元素何时被激活
+ {
+ text: 'Group 2',
+ items: [
+ {
+ text: 'Always active',
+ link: '/',
+ // 该元素将一直处于激活状态
+ activeMatch: '/',
+ },
+ {
+ text: 'Active on /foo/',
+ link: '/not-foo/',
+ // 该元素在当前路由路径是 /foo/ 开头时激活
+ // 支持正则表达式
+ activeMatch: '^/foo/',
+ },
+ ],
+ },
+ ],
+ }),
+ }
+ ```
+
+### footer
+
+- 类型： `false | { message: string; copyright: string }`
+- 默认值： `false`
+- 详情：页脚配置。
+
+### notes
+
+- 类型： `false | PlumeThemeNotesOptions`
+- 默认值： `{ link: '/note', dir: 'notes', notes: [] }`
+- 详情： 笔记配置， 笔记中的文章默认不会出现在首页文章列表
+
+ 你可以将配置的notes 配置到 navbar中，以便浏览查看
+
+详细配置请查看 [此文档](/config/notes/)
+
+### selectLanguageName
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+ Locale 的语言名称。
+
+ 该配置项 **仅能在主题配置的 [locales](#locales) 的内部生效** 。它将被用作 locale 的语言名称，展示在 _选择语言菜单_ 内。
+
+### selectLanguageText
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+ _选择语言菜单_ 的文字。
+
+ 如果你在站点配置中设置了多个 [locales](#locales) ，那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
+
+
+### selectLanguageAriaLabel
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+ _选择语言菜单 的 `aria-label` 属性。_
+
+ 它主要是为了站点的可访问性 (a11y) 。
+
+### sidebarMenuLabel
+
+- 类型： `string`
+- 默认值： `'Menu'`
+- 详情：
+
+ 移动设备下的导航栏中 菜单选项的文字。
+
+### returnToTopLabel
+
+- 类型： `string`
+- 默认值： `'return to top'`
+- 详情：
+
+ 移动设备下的导航栏中返回顶部的文字。
+
+### outlineLabel
+
+- 类型： `string`
+- 默认值： `'On this page'`
+- 详情：
+
+ 移动设备下的导航栏中大纲标题的文字
+
+### repo
+
+- 类型： `string`
+- 默认值： `''`
+- 详情： 仓库配置
+
+### editLink
+
+- 类型： `boolean`
+- 默认值： `true`
+- 详情： 是否启用 编辑链接
+
+### editLinkText
+
+- 类型： `string`
+- 默认值： `'Edit this page'`
+- 详情： 编辑链接文字
+
+### editLinkPattern
+
+- 类型： `string`
+- 默认值： `''`
+- 详情： 编辑链接的正则表达式
+
+ 示例： `':repo/edit/:branch/:path'`
+
+### docsRepo
+
+- 类型： `string`
+- 默认值： `''`
+- 详情： 文档仓库配置, 用于生成 `Edit this page` 链接，如果为空，默认使用 `repo` 配置的值
+
+### docsBranch
+
+- 类型： `string`
+- 默认值： `''`
+- 详情： 文档仓库分支配置，用于生成 `Edit this page` 链接。
+
+### docsDir
+
+- 类型： `string`
+- 默认值： `''`
+- 详情： 文档仓库目录配置，用于生成 `Edit this page` 链接。
+
+### lastUpdated
+
+- 类型： `boolean`
+- 默认值： `true`
+- 详情： 是否显示最后更新时间
+
+### lastUpdatedText
+
+- 类型： `string`
+- 默认值： `'Last Updated'`
+- 详情： 最后更新时间的文字
+
+### contributors
+
+- 类型： `boolean`
+- 默认值： `true`
+- 详情： 是否显示贡献者
+
+### contributorsText
+
+- 类型： `string`
+- 默认值： `'Contributors'`
+- 详情： 贡献者的文字
+
+### prevPageLabel
+
+- 类型： `string`
+- 默认值： `'Previous Page'`
+- 详情： 上一页的文字
+
+### nextPageLabel
+
+- 类型： `string`
+- 默认值： `'Next Page'`
+- 详情： 下一页的文字
+
+### notFound
+
+- 类型： `NotFound | undefined`
+- 默认值： `undefined`
+- 详情： 404 页面配置
+
+```ts
+interface NotFound {
+ code?: string
+ title?: string
+ quote?: string
+ linkLabel?: string
+ linkText?: string
+ }
+```
diff --git a/docs/notes/theme/config/多语言配置.md b/docs/notes/theme/config/多语言配置.md
new file mode 100644
index 00000000..1f2955bd
--- /dev/null
+++ b/docs/notes/theme/config/多语言配置.md
@@ -0,0 +1,93 @@
+---
+title: 多语言
+author: pengzhanbo
+createTime: 2024/03/02 10:07:15
+permalink: /config/locales/
+---
+
+## 设置语言 <Badge type="danger">重要</Badge>
+
+你需要为每个语言设置 `lang` 选项。即使你只在使用单个语言，你也必须在 `.vuepress/config.{js,ts}` 中设置 `lang`。
+
+::: tip 为什么要这样做?
+要提供正确的语言环境文本，主题需要知道根文件夹以及每个多语言文件夹正在使用哪种语言。
+:::
+
+::: code-tabs
+@tab 单语言
+```ts
+import { defineUserConfig } from "vuepress";
+
+export default defineUserConfig({
+ // 设置正在使用的语言
+ lang: "zh-CN",
+});
+```
+@tab 多语言
+```ts
+import { defineUserConfig } from "vuepress";
+
+export default defineUserConfig({
+ locales: {
+ "/": {
+ // 设置正在使用的语言
+ lang: "zh-CN",
+ },
+ "/en/": {
+ // 设置正在使用的语言
+ lang: "en-US",
+ },
+ },
+});
+```
+:::
+
+## 多语言配置
+
+`locales` 是一个对象，其键为每个语言的路径前缀，值为该语言的配置，可以包含 `title`, `description`, `lang` 等。
+
+你应当为每个语言设置 `lang` 选项，以便主题和插件能够正确的处理它们。
+
+如果站点和主题配置中的 `locales` 对象只包含 "/" 一个键，则主题不会显示语言切换菜单。当你通过 `locales` 设置多个键，即存在多个语言的时候，我们会在导航栏显示语言切换菜单。
+
+## 语言适配
+
+主题默认适配了以下语言
+
+- 简体中文 (zh-CN)
+- 英文(美国) (en-US)
+
+## 为每个语言设置主题选项
+
+与站点配置和 `@vuepress/theme-default` 的主题配置相同，`vuepress-theme-plume` 也支持你在主题选项中设置 locale 选项，并为每种语言设置不同的配置。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ locales: {
+ '/': {
+ lang: 'en-US',
+ },
+ '/zh/': {
+ lang: 'zh-CN',
+ },
+ },
+
+ theme: plumeTheme({
+ // 通用配置
+ // ...
+ locales: {
+ '/': {
+ // 英文配置
+ // ...
+ },
+ '/zh/': {
+ // 中文配置
+ // ...
+ },
+ },
+ }),
+})
+```
diff --git a/docs/notes/theme/config/导航栏配置.md b/docs/notes/theme/config/导航栏配置.md
new file mode 100644
index 00000000..6d9a5365
--- /dev/null
+++ b/docs/notes/theme/config/导航栏配置.md
@@ -0,0 +1,185 @@
+---
+title: 导航栏配置
+author: pengzhanbo
+createTime: 2024/03/01 15:07:33
+permalink: /config/navigation/
+---
+
+## 概述
+
+主题默认会自动生成最简单的导航栏配置，仅包括 **首页** 和 **博客文章列表页** 。
+
+你也可以自己配置导航栏，覆盖默认的的导航栏配置。
+
+默认配置如下：
+
+::: code-tabs
+@tab default config
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ notes: [
+ { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
+ { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
+ ]
+ })
+})
+```
+:::
+
+当开启了 多语言配置，则会生成对应语言的导航栏的默认配置：
+
+::: code-tabs
+@tab default config
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ lang: 'zh-CN',
+ locales: {
+ '/': { lang: 'zh-CN', title: '博客' }, // 简体中文
+ '/en/': { lang: 'en-US', title: 'Blog' }, // English
+ }
+ theme: plumeTheme({
+ locales: {
+ '/': {
+ notes: [
+ { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
+ { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
+ ]
+ },
+ '/en/': {
+ notes: [
+ { text: 'Home', link: '/en/', icon: 'material-symbols:home-outline' },
+ { text: 'Blog', link: '/en/blog/', icon: 'material-symbols:article-outline' },
+ ]
+ }
+ }
+ })
+})
+```
+:::
+
+但是，通常情况下，随着站点内容变得越来越丰富，包括了 博客文章列表、notes、友情链接、 外部链接等等，
+默认生成的导航栏配置满足不了您的需求。
+
+这时候，您可以通过 `navbar` 字段来完全自定义导航栏，它将直接覆盖默认的导航栏配置。
+
+## 配置
+
+类型: `NavItem[]`
+
+```ts
+type NavItem = string | {
+ text: string
+ link: string
+ /**
+ * 支持 iconify 图标，直接使用 iconify name 即可自动加载
+ * @see https://icon-sets.iconify.design/
+ */
+ icon?: string
+ /**
+ * 控制元素何时被激活
+ */
+ activeMatch?: string
+ /**
+ * 最大深度为 2，生成嵌套的导航栏
+ */
+ items?: NavItem[]
+}
+```
+
+### 嵌套配置示例
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ notes: [
+ { text: '首页', link: '/', icon: 'material-symbols:home-outline' },
+ { text: '博客', link: '/blog/', icon: 'material-symbols:article-outline' },
+ {
+ text: '技术文档',
+ icon: 'mdi:idea',
+ items: [
+ {
+ text: 'Vuepress Theme',
+ icon: 'icon-park-solid:theme',
+ items: [
+ {
+ text: 'vuepress-theme-plume',
+ link: '/vuepress-theme-plume/',
+ icon: 'mdi:paper-airplane',
+ },
+ ],
+ },
+ {
+ text: 'Vuepress Plugin',
+ icon: 'mingcute:plugin-2-fill',
+ items: [
+ {
+ text: 'caniuse',
+ link: '/vuepress-plugin/caniuse/',
+ icon: 'pajamas:feature-flag',
+ },
+ {
+ text: 'auto-frontmatter',
+ link: '/vuepress-plugin/auto-frontmatter/',
+ icon: 'material-symbols:move-selection-down-rounded',
+ },
+ {
+ text: 'blog-data',
+ link: '/vuepress-plugin/blog-data/',
+ icon: 'ic:baseline-post-add',
+ },
+ {
+ text: 'notes-data',
+ link: '/vuepress-plugin/notes-data/',
+ icon: 'material-symbols:note-alt-rounded',
+ },
+ {
+ text: 'shikiji',
+ link: '/vuepress-plugin/shikiji/',
+ icon: 'material-symbols-light:code-blocks-outline-rounded',
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ })
+})
+```
+
+### `activeMatch`
+
+`activeMatch` 用于控制当前链接元素何时被激活。其值为一个类正则表达式的字符串。
+
+**示例：** `activeMatch: '^/(blog|article)/'`
+
+这表示，以 `/blog/` 或 `/article/` 开头的页面链接地址，该链接元素将被激活。
+
+
+## 配置帮助函数
+
+主题提供了 `defineNavbar(config)` 函数，为主题使用者提供导航栏配置的类型帮助。
+便于将 `navbar` 配置分离到独立的配置文件中。
+
+::: code-tabs
+@tab navbar.ts
+```ts
+import { defineNavbar } from 'vuepress-theme-plume'
+
+export default defineNavbar([
+ { text: '首页', link: '/' },
+ { text: '博客', link: '/blog/' },
+ // ... more
+])
+```
+:::
diff --git a/docs/notes/theme/config/配置说明.md b/docs/notes/theme/config/配置说明.md
new file mode 100644
index 00000000..c7f996bd
--- /dev/null
+++ b/docs/notes/theme/config/配置说明.md
@@ -0,0 +1,51 @@
+---
+title: 配置说明
+author: pengzhanbo
+createTime: 2024/03/02 10:48:14
+permalink: /config/intro/
+---
+
+## 概述
+
+VuePress 站点的基本配置文件是 `.vuepress/config.js` ，但也同样支持 TypeScript 配置文件。
+你可以使用 `.vuepress/config.ts` 来得到更好的类型提示。
+
+具体而言，VuePress 对于配置文件的路径有着约定（按照优先顺序）：
+
+当前工作目录 `cwd` 下：
+
+- `vuepress.config.ts`
+- `vuepress.config.js`
+- `vuepress.config.mjs`
+
+源文件目录 `sourceDir` 下：
+
+- `.vuepress/config.ts`
+- `.vuepress/config.js`
+- `.vuepress/config.mjs`
+
+基础配置文件示例：
+
+```ts
+import { viteBundler } from '@vuepress/bundler-vite'
+import { plumeTheme } from 'vuepress-theme-plume'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ bundler: viteBundler(),
+ theme: plumeTheme(),
+
+ lang: 'zh-CN',
+ title: '你好， VuePress ！',
+ description: '这是我的第一个 VuePress 站点',
+})
+```
+
+## 类型
+
+在 VuePress 中，有三种配置类型:
+
+
+- 站点配置: 这是你在 配置文件 中直接导出的对象
+- 主题配置: 传递给 `plumeTheme` 的对象参数
+- 页面配置: 由在页面顶部基于 YAML 语法的 Frontmatter 提供
diff --git a/docs/notes/theme/guide/api-node.md b/docs/notes/theme/guide/api-node.md
new file mode 100644
index 00000000..2e2677d3
--- /dev/null
+++ b/docs/notes/theme/guide/api-node.md
@@ -0,0 +1,32 @@
+---
+title: Node
+author: pengzhanbo
+createTime: 2024/03/07 21:59:13
+permalink: /guide/api/node/
+---
+
+## 使用
+
+```ts
+import { plumeTheme } from 'vuepress-theme-plume'
+```
+
+## `plumeTheme(options)`
+
+__options__ : `PlumeThemeOptions`
+
+主题配置函数。
+
+查看 [主题配置](/config/basic/) 了解更多。
+
+## `defineNavbarConfig(options)`
+
+主题导航栏配置函数。
+
+查看 [主题配置](/config/navigation/) 了解更多。
+
+## `definePlumeNotesConfig(options)`
+
+主题 notes 配置函数
+
+查看 [主题配置](/config/notes/) 了解更多。
diff --git a/docs/notes/theme/guide/api-客户端.md b/docs/notes/theme/guide/api-客户端.md
new file mode 100644
index 00000000..ed3d774b
--- /dev/null
+++ b/docs/notes/theme/guide/api-客户端.md
@@ -0,0 +1,42 @@
+---
+title: 客户端
+author: pengzhanbo
+createTime: 2024/03/07 21:58:48
+permalink: /guide/api/client/
+---
+
+## 使用
+
+```ts
+import { useDarkMode } from 'vuepress-theme-plume/client'
+```
+
+
+## `useDarkMode()`
+
+- 类型： `() => Ref<boolean>`
+
+Composable `useDarkMode()` 用于获取当前的 `dark` 状态。
+
+
+```ts
+import { useDarkMode } from 'vuepress-theme-plume/client'
+
+const isDark = useDarkMode()
+```
+
+## `<HomeBox />`
+
+- 类型：`Component`
+
+自定义首页时，提供给 区域 的 包装容器。
+
+
+### Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --------------------- | ------------------ | --------- | ---------------- |
+| type | string | `''` | 区域类型 |
+| full | boolean | `false` | 是否全屏 |
+| background-image | string | `''` | 区域背景图片 |
+| background-attachment | `'fixed'\|'local'` | `'local'` | 区域背景定位方式 |
diff --git a/docs/notes/theme/guide/markdown-基础.md b/docs/notes/theme/guide/markdown-基础.md
new file mode 100644
index 00000000..04e374c5
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-基础.md
@@ -0,0 +1,828 @@
+---
+title: 基础
+author: pengzhanbo
+createTime: 2024/03/05 11:10:39
+permalink: /guide/markdown/basic/
+---
+
+Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
+
+Markdown 的目标是实现「易读易写」。
+
+<!-- more -->
+
+## 概述
+
+不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 [Setext][1]、[atx][2]、[Textile][3]、[reStructuredText][4]、[Grutatext][5] 和 [EtText][6]，然而最大灵感来源其实是纯文字的电子邮件格式。
+
+因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像\*强调\*。Markdown 的列表看起来，嗯，就是列表。假如你有使用过电子邮件，引言写法看起来就真的像是引用一段文字。
+
+Markdown 具有一系列衍生版本，用于扩展 Markdown 的功能 (如表格、脚注、内嵌 HTML 等等) ，这些功能原初的 Markdown 尚不具备，它们能让 Markdown 转换成更多的格式，例如 LaTeX，Docbook。Markdown 增强版中比较有名的有 Markdown Extra、MultiMarkdown、 Maruku 等。这些衍生版本要么基于工具，如 Pandoc；要么基于网站，如 GitHub 和 Wikipedia，在语法上基本兼容，但在一些语法和渲染效果上有改动。
+
+## 用途
+
+Markdown 的语法有个主要的目的: 用来作为一种网络内容的*写作*用语言。Markdown 的重点在于，它能让文件更容易阅读、编写。因此，Markdown 的格式语法只涵盖纯文字可以涵盖的范围。
+
+Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台 WordPress 能很好的支持 Markdown。
+
+用于编写说明文档，并且以 `README.md` 的文件名保存在软件的目录下面。
+
+除此之外，我们还可以快速将 Markdown 转化为演讲 PPT、Word 产品文档、LaTex 论文甚至是用非常少量的代码完成最小可用原型。在数据科学领域，Markdown 已经广泛使用，极大地推进了动态可重复性研究的历史进程。
+
+### 行内 HTML
+
+不在 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。
+
+只有块元素 ── 比如 `<div>`、`<table>`、`<pre>`、`<p>` 等标签，必须在前后加上空行，以利与内容区隔。而且这些 (元素) 的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 的解析器有智慧型判断，可以避免在块标签前后加上没有必要的 `<p>` 标签。
+
+举例来说，在 Markdown 文件里加上一段 HTML 表格:
+
+```md
+This is a regular paragraph.
+
+<table>
+ <tr>
+ <td>Foo</td>
+ </tr>
+</table>
+
+This is another regular paragraph.
+```
+
+请注意，Markdown 语法在 HTML 块标签中将不会被进行处理。例如，你无法在 HTML 块内使用 Markdown 形式的 `*强调*`。
+
+### 特殊字元自动转换
+
+在 HTML 文件中，有两个字元需要特殊处理: `<` 和 `&` 。 `<` 符号用于起始标签，`&` 符号则用于标记 HTML 实体，如果你只是想要使用这些符号，你必须要使用实体的形式，像是 `<` 和 `&`。
+
+`&` 符号其实很容易让写作网络文件的人感到困扰，如果你要打「AT&T」 ，你必须要写成「`AT&T`」 ，还得转换网址内的 `&` 符号，如果你要链接到 `http://images.google.com/images?num=30&q=larry+bird`
+
+你必须要把网址转成:
+
+```html
+http://images.google.com/images?num=30&q=larry+bird
+```
+
+才能放到链接标签的 `href` 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。
+
+Markdown 允许你直接使用这些符号，但是你要小心跳脱字元的使用，如果你是在 HTML 实体中使用 `&` 符号的话，它不会被转换，而在其它情形下，它则会被转换成 `&`。所以你如果要在文件中插入一个著作权的符号，你可以这样写:
+
+```md
+©
+```
+
+Markdown 将不会对这段文字做修改，但是如果你这样写:
+
+```md
+AT&T
+```
+
+Markdown 就会将它转为:
+
+```html
+AT&T
+```
+
+类似的状况也会发生在 `<` 符号上，因为 Markdown 支持 [行内 HTML](#行内-html) ，如果你是使用 `<` 符号作为 HTML 标签使用，那 Markdown 也不会对它做任何转换，但是如果你是写:
+
+```md
+4 < 5
+```
+
+Markdown 将会把它转换为:
+
+```html
+4 < 5
+```
+
+不过需要注意的是，code 范围内，不论是行内还是块， `<` 和 `&` 两个符号都*一定*会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言， HTML 语法中，你要把所有的 `<` 和 `&` 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。)
+
+---
+
+## 块元素
+
+### 段落和换行
+
+一个段落是由一个以上相连接的行句组成，而一个以上的空行则会切分出不同的段落 (空行的定义是显示上看起来像是空行，便会被视为空行。比方说，若某一行只包含空白和 tab，则该行也会被视为空行) ，一般的段落不需要用空白或断行缩进。
+
+「一个以上相连接的行句组成」这句话其实暗示了 Markdown 允许段落内的强迫断行，这个特性和其他大部分的 text-to-HTML 格式不一样 (包括 MovableType 的「Convert Line Breaks」选项) ，其它的格式会把每个断行都转成 `<br />` 标签。
+
+<!-- markdownlint-disable MD038 -->
+
+如果你*真的*想要插入 `<br />` 标签的话，在行尾加上两个以上的空格 (` `) 或斜线 (`/`)，然后按 Enter。
+
+<!-- markdownlint-enable MD038 -->
+
+是的，这确实需要花比较多功夫来插入 `<br />` ，但是「每个换行都转换为 `<br />`」的方法在 Markdown 中并不适合， Markdown 中 email 式的 [块引言][bq] 和多段落的 [列表][l] 在使用换行来排版的时候，不但更好用，还更好阅读。
+
+### 标题
+
+标题能显示出文章的结构。
+
+Markdown 支持两种标题的语法，[Setext][1] 和 [atx][2] 形式。
+
+Setext 形式是用底线的形式，利用 `=` (最高阶标题) 和 `-` (第二阶标题) ，例如:
+
+```md
+# This is an H1
+
+## This is an H2
+```
+
+任何数量的 `=` 和 `-` 都可以有效果。
+
+Atx (推荐)形式则是在行首插入 1 到 6 个 `#` ，对应到标题 1 到 6 阶，例如:
+
+- H1: `# Header 1`
+- H2: `## Header 2`
+- H3: `### Header 3`
+- H4: `#### Header 4`
+- H5: `##### Header 5`
+- H6: `###### Header 6`
+
+### Blockquotes
+
+Markdown 使用 email 形式的块引言，如果你很熟悉如何在 email 信件中引言，你就知道怎么在 Markdown 文件中建立一个块引言，那会看起来像是你强迫断行，然后在每行的最前面加上 `>` :
+
+```md
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+>
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+```
+
+Markdown 也允许你只在整个段落的第一行最前面加上 `>` :
+
+```md
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+```
+
+块引言可以有阶层 (例如: 引言内的引言) ，只要根据层数加上不同数量的 `>` :
+
+```md
+> This is the first level of quoting.
+>
+> > This is nested blockquote.
+>
+> Back to the first level.
+```
+
+引言的块内也可以使用其他的 Markdown 语法，包括标题、列表、代码块等:
+
+```md
+> ## This is a header.
+>
+> 1. This is the first list item.
+> 1. This is the second list item.
+>
+> Here's some example code:
+>
+> return shell_exec("echo $input | $markdown_script");
+```
+
+任何标准的文字编辑器都能简单地建立 email 样式的引言，例如 BBEdit ，你可以选取文字后然后从选单中选择*增加引言阶层*。
+
+### 列表
+
+Markdown 支持有序列表和无序列表。
+
+无序列表使用减号作为列表标记(也可使用星号、加号):
+
+```md
+- Red
+- Green
+- Blue
+```
+
+也可以(不建议):
+
+```md
+- Red
+- Green
+- Blue
+
+* Red
+* Green
+* Blue
+```
+
+有序列表则使用数字接着一个英文句点:
+
+```md
+1. Bird
+2. McHale
+3. Parish
+```
+
+很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为:
+
+```html
+<ol>
+ <li>Bird</li>
+ <li>McHale</li>
+ <li>Parish</li>
+</ol>
+```
+
+如果你的列表标记写成:
+
+```md
+1. Bird
+1. McHale
+1. Parish
+```
+
+你都会得到完全相同的 HTML 输出。重点在于，你可以让 Markdown 文件的列表数字和输出的结果相同，或是你懒一点都写作 `1` 你可以完全不用在意数字的正确性。
+
+列表项目标记通常是放在最左边，但是其实也可以缩进，最多三个空白，项目标记后面则一定要接着至少一个空白或 tab。
+
+要让列表看起来更漂亮，你可以把内容用固定的缩进整理好:
+
+```md
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+ viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+ Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+但是如果你很懒，那也不一定需要:
+
+```md
+- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+ Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
+ viverra nec, fringilla in, laoreet vitae, risus.
+- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
+ Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+如果列表项目间用空行分开， Markdown 会把项目的内容在输出时用 `<p>` 标签包起来，举例来说:
+
+```md
+- Bird
+- Magic
+```
+
+会被转换为:
+
+```html
+<ul>
+ <li>Bird</li>
+ <li>Magic</li>
+</ul>
+```
+
+但是这个:
+
+```md
+- Bird
+
+- Magic
+```
+
+会被转换为:
+
+```html
+<ul>
+ <li><p>Bird</p></li>
+ <li><p>Magic</p></li>
+</ul>
+```
+
+列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空白或是一个 tab :
+
+```md
+1. This is a list item with two paragraphs. Lorem ipsum dolor
+ sit amet, consectetuer adipiscing elit. Aliquam hendrerit
+ mi posuere lectus.
+
+ Vestibulum enim wisi, viverra nec, fringilla in, laoreet
+ vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
+ sit amet velit.
+
+2. Suspendisse id sem consectetuer libero luctus adipiscing.
+```
+
+如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许:
+
+```md
+- This is a list item with two paragraphs.
+
+ This is the second paragraph in the list item. You're
+ only required to indent the first line. Lorem ipsum dolor
+ sit amet, consectetuer adipiscing elit.
+
+- Another item in the same list.
+```
+
+如果要在列表项目内放进引言，那 `>` 就需要缩进:
+
+```md
+- A list item with a blockquote:
+
+ > This is a blockquote
+ > inside a list item.
+```
+
+当然，项目列表很可能会不小心产生，像是下面这样的写法:
+
+```md
+1986. What a great season.
+```
+
+换句话说，也就是在行首出现*数字-句点-空白*，要避免这样的状况，你可以在句点前面加上反斜线。
+
+```md
+1986\. What a great season.
+```
+
+### 代码块
+
+和代码相关的写作或是标签语言原始码通常会有已经排版好的代码块，通常这些块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 `<pre>` 和 `<code>` 标签来把代码块包起来。
+
+要在 Markdown 中建立代码块很简单，只要简单地缩进 4 个空白或是 1 个 tab 就可以，例如，下面的输入:
+
+```md
+This is a normal paragraph:
+
+This is a code block.
+```
+
+Markdown 会转换成:
+
+```html
+<p>This is a normal paragraph:</p>
+
+<pre>
+ <code>This is a code block.</code>
+</pre>
+```
+
+这里的缩进 (4 个空白或是 1 个 tab) ，都会被移除，例如:
+
+```md
+Here is an example of AppleScript:
+
+tell application "Foo"
+beep
+end tell
+```
+
+会被转换为:
+
+```html
+<p>Here is an example of AppleScript:</p>
+
+<pre><code>tell application "Foo"
+ beep
+end tell
+</code></pre>
+```
+
+一个代码块会一直持续到没有缩进的那一行 (或是文件结尾) 。
+
+在代码块里面， `&` 、 `<` 和 `>` 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制粘贴，再加上缩进就可以了，剩下的 Markdown 都会帮你处理，例如:
+
+````md
+```
+<div class="footer">
+ © 2004 Foo Corporation
+</div>
+```
+````
+
+会被转换为:
+
+```html
+<pre>
+ <code><div class="footer">
+ © 2004 Foo Corporation
+</div></code>
+</pre>
+```
+
+代码块中，一般的 Markdown 语法不会被转换，像是星号便只是星号，这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。
+
+如果你想要在代码块里输入用 Markdown 表示的代码库，你可以进行嵌套。
+
+`````md
+````md
+```js
+const a = 1;
+```
+````
+`````
+
+会渲染为
+
+````md
+```js
+const a = 1;
+```
+````
+
+### 分隔线
+
+你可以在一行中用三个或以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号中间插入空白。下面每种写法都可以建立分隔线:
+
+```html
+---(建议) * * * *** ***** - - - ---------------------------------------
+```
+
+## 行内元素
+
+### 链接
+
+Markdown 支持两种形式的链接语法: *行内*和*参考*两种形式。
+
+不管是哪一种，链接的文字都是用 `[方括号]` 来标记。
+
+要建立一个行内形式的链接，只要在方块括号后面马上接着括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如:
+
+```html
+This is [an example](http://example.com/ "Title") inline link. [This
+link](http://example.net/) has no title attribute.
+```
+
+会产生:
+
+```html
+<p>
+ This is <a href="http://example.com/" title="Title"> an example</a> inline
+ link.
+</p>
+
+<p><a href="http://example.net/">This link</a> has no title attribute.</p>
+```
+
+如果你是要链接到同样主机的资源，你可以使用相对路径:
+
+```md
+See my [About](/about/) page for details.
+```
+
+参考形式的链接使用另外一个方括号接在链接文字的括号后面，而在第二个方括号里面要填入用以辨识链接的标签:
+
+```md
+This is [an example][id] reference-style link.
+```
+
+接着，在文件的任意处，你可以把这个标签的链接内容定义出来:
+
+```md
+[id]: http://example.com/ "Optional Title Here"
+```
+
+链接定义的形式为:
+
+- 方括号，输入链接的标识 ID
+- 冒号
+- 一个以上的空白或 tab
+- 链接的网址
+- 选择性地添加 title 内容，可以用单引号、双引号或是括号包括
+
+下面这三种链接的定义相同:
+
+```md
+[foo]: http://example.com/ "Optional Title Here"
+[foo]: http://example.com/ "Optional Title Here"
+[foo]: http://example.com/ "Optional Title Here"
+```
+
+**请注意:** 有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。
+
+链接网址也可以用方括号包起来:
+
+```md
+[id]: http://example.com/ "Optional Title Here"
+```
+
+你也可以把 title 属性放到下一行，也可以加一些缩进，网址太长的话，这样会比较好看:
+
+```md
+[id]: http://example.com/longish/path/to/resource/here "Optional Title Here"
+```
+
+网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。
+
+链接辨识标签可以有字母、数字、空白和标点符号，但是并**不**区分大小写，因此下面两个链接是一样的:
+
+```md
+[link text][a]
+[link text][a]
+```
+
+*预设的链接标签*功能让你可以省略指定链接标签，这种情形下，链接标签和链接文字会视为相同，要用预设链接标签只要在链接文字后面加上一个空的方括号，如果你要让 "Google" 链接到 google.com，你可以简化成:
+
+```md
+[Google][]
+```
+
+然后定义链接内容:
+
+```md
+[google]: http://google.com/
+```
+
+由于链接文字可能包含空白，所以这种简化的标签内也可以包含多个文字:
+
+```md
+Visit [Daring Fireball][] for more information.
+```
+
+然后接着定义链接:
+
+```md
+[daring fireball]: http://daringfireball.net/
+```
+
+链接的定义可以放在文件中的任何一个地方，我比较偏好直接放在链接出现段落的后面，你也可以把它放在文件最后面，就像是注解一样。
+
+下面是一个参考式链接的范例:
+
+```md
+I get 10 times more traffic from [Google][1] than from
+[Yahoo][2] or [MSN][3].
+
+[1]: http://google.com/ "Google"
+[2]: http://search.yahoo.com/ "Yahoo Search"
+[3]: http://search.msn.com/ "MSN Search"
+```
+
+如果改成用链接名称的方式写:
+
+```md
+I get 10 times more traffic from [Google][] than from
+[Yahoo][] or [MSN][].
+
+[google]: http://google.com/ "Google"
+[yahoo]: http://search.yahoo.com/ "Yahoo Search"
+[msn]: http://search.msn.com/ "MSN Search"
+```
+
+上面两种写法都会产生下面的 HTML。
+
+```html
+<p>
+ I get 10 times more traffic from
+ <a href="http://google.com/" title="Google">Google</a> than from
+ <a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
+ or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.
+</p>
+```
+
+下面是用行内形式写的同样一段内容的 Markdown 文件，提供作为比较之用:
+
+```md
+I get 10 times more traffic from [Google](http://google.com/ "Google")
+than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
+[MSN](http://search.msn.com/ "MSN Search").
+```
+
+参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字元，但是用行内形式的链接却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文字还要多。
+
+使用 Markdown 的参考式链接，可以让文件更像是浏览器最后产生的结果，让你可以把一些标记相关的资讯移到段落文字之外，你就可以增加链接而不让文章的阅读感觉被打断。
+
+### 强调
+
+Markdown 使用星号 (`*`) 和底线 (`_`) 作为标记强调字词的符号，被 `*` 或 `_` 包围的字词会被转成用 `<em>` 标签包围，用两个 `*` 或 `_` 包起来的话，则会被转成 `<strong>`，例如:
+
+```md
+**double asterisks** (建议)
+
+**double underscores** (建议)
+
+_single asterisks_
+
+_single underscores_
+```
+
+会转成:
+
+```html
+<em>single asterisks</em>
+
+<em>single underscores</em>
+
+<strong>double asterisks</strong>
+
+<strong>double underscores</strong>
+```
+
+你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。
+
+强调也可以直接插在文字中间:
+
+```md
+un*frigging*believable
+```
+
+但是如果你的 `*` 和 `_` 两边都有空白的话，它们就只会被当成普通的符号。
+
+如果要在文字前后直接插入普通的星号或底线，你可以用反斜线:
+
+```md
+\*this text is surrounded by literal asterisks\*
+```
+
+### 代码
+
+如果要标记一小段行内代码，你可以用反引号把它包起来 (`` ` ``) ，例如:
+
+```md
+Use the `printf()` function.
+```
+
+会产生:
+
+```md
+<p>Use the <code>printf()</code> function.</p>
+```
+
+如果要在代码内插入反引号，你可以用多个反引号来开启和结束行内代码:
+
+```md
+``There is a literal backtick (`) here.``
+```
+
+这段语法会产生:
+
+```html
+<p><code>There is a literal backtick (`) here.</code></p>
+```
+
+代码码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号:
+
+```md
+A single backtick in a code span: `` ` ``
+
+A backtick-delimited string in a code span: `` `foo` ``
+```
+
+会产生:
+
+```html
+<p>A single backtick in a code span: <code>`</code></p>
+
+<p>A backtick-delimited string in a code span: <code>`foo`</code></p>
+```
+
+在代码码区段内，`&` 和方括号都会被转成 HTML 实体，这样会比较容易插入 HTML 原始码，Markdown 会把下面这段:
+
+```md
+Please don't use any `<blink>` tags.
+```
+
+转为:
+
+```html
+<p>Please don't use any <code><blink></code> tags.</p>
+```
+
+你也可以这样写:
+
+```md
+`—` is the decimal-encoded equivalent of `—`.
+```
+
+以产生:
+
+```html
+<p>
+ <code>—</code> is the decimal-encoded equivalent of
+ <code>—</code>.
+</p>
+```
+
+### 图片
+
+很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。
+
+Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式: _行内_ 和 _参考_。
+
+行内图片的语法看起来像是:
+
+```md
+
+
+
+```
+
+详细叙述如下:
+
+- 一个惊叹号 `!`
+- 一个方括号，里面放上图片的替代文字
+- 一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上
+ 选择性的 title 文字。
+
+参考式的图片语法则长得像这样:
+
+```md
+![Alt text][id]
+```
+
+「id」是图片参考的名称，图片参考的定义方式则和链接参考一样:
+
+```md
+[id]: url/to/image "Optional title attribute"
+```
+
+到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 `<img>` 标签。
+
+### 其他文本样式
+
+- 删除:`~~delete~~`
+- 段落: 段落之间空一行
+- 换行符: 一行结束时输入两个空格
+
+---
+
+## 其它
+
+### 自动链接
+
+Markdown 支持比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用方括号包起来， Markdown 就会自动把它转成链接，链接的文字就和链接位置一样，例如:
+
+```md
+<http://example.com/>
+```
+
+Markdown 会转为:
+
+```html
+<a href="http://example.com/">http://example.com/</a>
+```
+
+自动的邮件链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字元转成 16 进位码的 HTML 实体，这样的格式可以混淆一些不好的信箱地址收集机器人，例如:
+
+```md
+<address@example.com>
+```
+
+Markdown 会转成:
+
+```html
+<a
+ href="mailto:address@example.com"
+ >address@example.com</a
+>
+```
+
+在浏览器里面，这段字串会变成一个可以点击的 <address@example.com> 链接。
+
+(这种作法虽然可以混淆不少的机器人，但并无法全部挡下来，不过这样也比什么都不做好些。无论如何，公开你的信箱终究会引来广告信件的。)
+
+### 转义字符
+
+Markdown 可以利用反斜线来插入一些在语法中有其它意义的符号，例如: 如果你想要用星号加在文字旁边的方式来做出强调效果 (但不用 `<em>` 标签) ，你可以在星号的前面加上反斜线:
+
+```md
+\*literal asterisks\*
+```
+
+Markdown 支持在下面这些符号前面加上反斜线来帮助插入普通的符号:
+
+- `\` 反斜线
+- `` ` `` 反引号
+- `*` 星号
+- `_` 底线
+- `{}` 大括号
+- `[]` 方括号
+- `()` 括号
+- `#` 井字号
+- `+` 加号
+- `-` 减号
+- `.` 英文句点
+- `!` 惊叹号
+
+## 快捷键
+
+| 输出后的效果 | Markdown | 快捷键 |
+| ------------- | ---------- | -------------- |
+| **Bold** | `**text**` | Ctrl/⌘ + B |
+| _Emphasize_ | `*text*` | Ctrl/⌘ + I |
+| `Inline Code` | \`code\` | 选中后 `` ` `` |
+
+## 表格
+
+| 居中 | 右对齐 | 左对齐 |
+| :-----------: | -------------: | :------------- |
+| 居中使用`:-:` | 右对齐使用`-:` | 左对齐使用`:-` |
+| b | aaaaaaaaa | aaaa |
+| c | aaaa | a |
+
+[1]: http://docutils.sourceforge.net/mirror/setext.html
+[2]: http://www.aaronsw.com/2002/atx/
+[3]: http://textism.com/tools/textile/
+[4]: http://docutils.sourceforge.net/rst.html
+[5]: http://www.triptico.com/software/grutatxt.html
+[6]: http://ettext.taint.org/doc/
+[bq]: #blockquotes
+[l]: #列表
diff --git a/docs/notes/theme/guide/markdown-扩展.md b/docs/notes/theme/guide/markdown-扩展.md
new file mode 100644
index 00000000..99f4a59e
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-扩展.md
@@ -0,0 +1,746 @@
+---
+title: 扩展
+author: pengzhanbo
+createTime: 2024/03/05 23:29:07
+permalink: /guide/markdown/extensions/
+---
+
+## 标题锚点
+
+标题会自动应用锚点。
+
+#### 自定义锚点
+
+要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：
+
+```md
+# 使用自定义锚点 {#my-anchor}
+```
+
+这允许将标题链接为 `#my-anchor`，而不是默认的 `#使用自定义锚点`。
+
+## 链接
+
+内部和外部链接都会被特殊处理。
+
+主题默认对每个 md 文件自动生成一个新的 链接，并保存在对应的 md 文件的 frontmatter 的 `permalink` 中。
+你可以随时修改它们。
+
+
+#### 内部链接
+
+建议使用 生成的 `permalink` 作为内部链接的目标。
+
+```md
+[Markdown](/guide/markdown/)
+```
+
+渲染为：
+
+[Markdown](/guide/markdown/)
+
+#### 外部链接
+
+外部链接带有 `target="_blank" rel="noreferrer"` ：
+
+[VuePress](https://v2.vuepress.vuejs.org/)
+
+## Github风格的表格
+
+**输入**
+
+```md
+| Tables | Are | Cool |
+| ------------- | :-----------: | ----: |
+| col 3 is | right-aligned | $1600 |
+| col 2 is | centered | $12 |
+| zebra stripes | are neat | $1 |
+```
+
+**输出**
+
+| Tables | Are | Cool |
+| ------------- | :-----------: | ----: |
+| col 3 is | right-aligned | $1600 |
+| col 2 is | centered | $12 |
+| zebra stripes | are neat | $1 |
+
+## Emoji :tada:
+
+**输入**
+
+```md
+:tada: :100:
+```
+
+**输出**
+
+:tada: :100:
+
+这里可以找到 [所有支持的 emoji 列表](https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.mjs)。
+
+## 目录表
+
+**输入**
+
+```md
+[[TOC]]
+```
+
+**输出**
+
+[[TOC]]
+
+## 自定义容器
+
+自定义容器可以通过它们的类型、标题和内容来定义。
+
+### 默认标题
+
+**输入**
+
+```md
+::: note
+This is a note box
+:::
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: caution
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**输出**
+
+::: note
+This is a note box
+:::
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: caution
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+### 自定义标题
+
+可以通过在容器的 "type" 之后附加文本来设置自定义标题。
+
+**输入**
+
+````md
+::: caution STOP
+危险区域，请勿继续
+:::
+
+::: details 点我查看代码
+```js
+console.log('Hello, VitePress!')
+```
+:::
+````
+
+**输出**
+
+::: caution STOP
+危险区域，请勿继续
+:::
+
+::: details 点我查看代码
+```js
+console.log('Hello, VitePress!')
+```
+:::
+
+## GitHub 风格的警报
+
+主题 同样支持以标注的方式渲染 [GitHub 风格的警报](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。它们和[自定义容器](#自定义容器)的渲染方式相同。
+
+**输入**
+
+```md
+> [!NOTE]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+```
+
+**输出**
+
+> [!NOTE]
+> 强调用户在快速浏览文档时也不应忽略的重要信息。
+
+> [!TIP]
+> 有助于用户更顺利达成目标的建议性信息。
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。
+
+## 代码块中的语法高亮
+
+主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块中使用彩色文本实现语法高亮。
+Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：
+
+**输入**
+
+````
+```js
+export default {
+ name: 'MyComponent',
+ // ...
+}
+```
+````
+
+````
+```html
+<ul>
+ <li v-for="todo in todos" :key="todo.id">
+ {{ todo.text }}
+ </li>
+</ul>
+```
+````
+
+**输出**
+
+```js
+export default {
+ name: 'MyComponent',
+ // ...
+}
+```
+
+```html
+<ul>
+ <li v-for="todo in todos" :key="todo.id">
+ {{ todo.text }}
+ </li>
+</ul>
+```
+
+在 Shiki 的代码仓库中，可以找到 [合法的编程语言列表](https://shiki.style/languages)。
+
+## 在代码块中实现行高亮
+
+**输入**
+
+````
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js{4}
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!'
+ }
+ }
+}
+```
+
+除了单行之外，还可以指定多个单行、多行，或两者均指定：
+
+- 多行：例如 `{5-8}`、`{3-10}`、`{10-17}`
+- 多个单行：例如 `{4,7,9}`
+- 多行与单行：例如 `{4,7-13,16,23-27,40}`
+
+**输入**
+
+````
+```js{1,4,6-8}
+export default { // Highlighted
+ data () {
+ return {
+ msg: `Highlighted!
+ This line isn't highlighted,
+ but this and the next 2 are.`,
+ motd: 'VitePress is awesome',
+ lorem: 'ipsum'
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js{1,4,6-8}
+export default { // Highlighted
+ data () {
+ return {
+ msg: `Highlighted!
+ This line isn't highlighted,
+ but this and the next 2 are.`,
+ motd: 'VitePress is awesome',
+ lorem: 'ipsum'
+ }
+ }
+}
+```
+
+也可以使用 `// [!code highlight]` 注释实现行高亮。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!' // [\!code highlight]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Highlighted!' // [!code highlight]
+ }
+ }
+}
+```
+
+## 代码块中聚焦
+
+在某一行上添加 `// [!code focus]` 注释将聚焦它并模糊代码的其他部分。
+
+此外，可以使用 `// [!code focus:<lines>]` 定义要聚焦的行数。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Focused!' // [\!code focus]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Focused!' // [!code focus]
+ }
+ }
+}
+```
+
+## 代码块中的颜色差异
+
+在某一行添加 `// [!code --]` 或 `// [!code ++]` 注释将会为该行创建 diff，同时保留代码块的颜色。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Removed' // [\!code --]
+ msg: 'Added' // [\!code ++]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Removed' // [!code --]
+ msg: 'Added' // [!code ++]
+ }
+ }
+}
+```
+
+## 高亮“错误”和“警告”
+
+在某一行添加 `// [!code warning]` 或 `// [!code error]` 注释将会为该行相应的着色。
+
+**输入**
+
+````
+```js
+export default {
+ data () {
+ return {
+ msg: 'Error', // [\!code error]
+ msg: 'Warning' // [\!code warning]
+ }
+ }
+}
+```
+````
+
+**输出**
+
+```js
+export default {
+ data () {
+ return {
+ msg: 'Error', // [!code error]
+ msg: 'Warning' // [!code warning]
+ }
+ }
+}
+```
+
+## 代码块中 词高亮
+
+**输入**
+
+````
+```ts
+export function foo() { // [\!code word:Hello]
+ const msg = 'Hello World'
+ console.log(msg) // prints Hello World
+}
+```
+````
+
+**输出**
+
+```ts
+export function foo() { // [!code word:Hello]
+ const msg = 'Hello World'
+ console.log(msg) // prints Hello World
+}
+```
+
+你还可以指定高亮显示的次数，例如 `[!code word:options:2]` 会高亮显示近两个 `options`。
+
+**输入**
+
+````
+```ts
+// [\!code word:options:2]
+const options = { foo: 'bar' }
+options.foo = 'baz'
+console.log(options.foo) // 这个不会被高亮显示
+```
+````
+
+**输出**
+
+```ts
+// [!code word:options:2]
+const options = { foo: 'bar' }
+options.foo = 'baz'
+console.log(options.foo) // 这个不会被高亮显示
+```
+
+## 代码组
+
+可以像这样对多个代码块进行分组：
+
+
+**输入**
+
+````md
+::: code-tabs
+@tab config.js
+```js
+/**
+ * @type {import('vuepress').UserConfig}
+ */
+const config = {
+ // ..
+}
+
+export default config
+```
+
+@tab config.ts
+```ts
+import { type UserConfig } from 'vuepress'
+
+const config: UserConfig = {
+ // ..
+}
+
+export default config
+```
+:::
+````
+
+**输出**
+
+::: code-tabs
+@tab config.js
+```js
+/**
+ * @type {import('vuepress').UserConfig}
+ */
+const config = {
+ // ..
+}
+
+export default config
+```
+@tab config.ts
+```ts
+import { type UserConfig } from 'vuepress'
+
+const config: UserConfig = {
+ // ..
+}
+
+export default config
+```
+:::
+
+你还可以通过 `@tab:active`
+
+## 导入代码块
+
+**输入**
+
+你可以使用下面的语法，从文件中导入代码块：
+
+```md
+@[code](../snippet/snippet-1.js)
+```
+
+**输出**
+
+@[code](../snippet/snippet-1.js)
+
+如果你只想导入这个文件的一部分：
+
+```md
+<!-- 仅导入第 1 行至第 10 行 -->
+@[code{1-10}](../snippet/snippet-1.js)
+```
+
+代码语言会根据文件扩展名进行推断，但我们建议你显式指定：
+
+```md
+<!-- 指定代码语言 -->
+@[code js](../snippet/snippet-1.js)
+
+<!-- 行高亮 -->
+@[code js{2,4-5}](../foo.js)
+```
+
+## 数学方程
+
+**输入**
+
+````
+When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+**Maxwell's equations:**
+
+| equation | description |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
+````
+
+**输出**
+
+When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+**Maxwell's equations:**
+
+| equation | description |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
+| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
+| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |
+
+## 标记
+
+使用 `== ==` 进行标记。请注意两边需要有空格。
+
+**输入**
+
+```md
+vuepress-theme-plume 是一个 ==简洁美观== 的 主题
+```
+
+**输出**
+
+vuepress-theme-plume 是一个 ==简洁美观== 的 主题
+
+## 上下角标
+
+- 使用 `^ ^` 进行上角标标注。
+- 使用 `~ ~` 进行下角标标注。
+
+**输入**
+
+```md
+- 19^th^
+- H~2~O
+```
+
+**输出**
+
+- 19^th^
+- H~2~O
+
+## 自定义对齐
+
+**输入**
+
+````md
+::: left
+左对齐的内容
+:::
+
+::: center
+居中的内容
+:::
+
+::: right
+右对齐的内容
+:::
+````
+
+**输出**
+
+::: left
+左对齐的内容
+:::
+
+::: center
+居中的内容
+:::
+
+::: right
+右对齐的内容
+:::
+
+## 属性支持
+
+你可以使用特殊标记为 Markdown 元素添加属性。
+
+**为图片添加属性**
+
+这将为图片添加 一个 名为 `full-width` 的 class 属性，以及一个 `width` 属性，值为 `100%`。
+```md
+{.full-width width="100%"}
+```
+
+同时也支持其他属性:
+
+```md
+一个包含文字的段落。 {#p .a .b align=center customize-attr="content with spaces"}
+```
+
+这将被渲染为：
+
+```html
+<p id="p" class="a b" align="center" customize-attr="content with spaces">
+ 一个包含文字的段落。
+</p>
+```
+
+## 任务列表
+
+**输入**
+
+````md
+- [ ] 任务 1
+- [x] 任务 2
+- [ ] 任务 3
+````
+
+**输出**
+
+- [ ] 任务 1
+- [x] 任务 2
+- [ ] 任务 3
+
+## 脚注
+
+**输入**
+
+````md
+人生自古谁无死，留取丹心照汗青[^脚注1]。
+
+[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
+````
+
+**输出**
+
+人生自古谁无死，留取丹心照汗青[^脚注1]。
+
+[^脚注1]: 出自 宋·文天祥 **《过零丁洋》**
diff --git a/docs/notes/theme/guide/markdown-试验性.md b/docs/notes/theme/guide/markdown-试验性.md
new file mode 100644
index 00000000..c8ebf1c9
--- /dev/null
+++ b/docs/notes/theme/guide/markdown-试验性.md
@@ -0,0 +1,329 @@
+---
+title: 试验性
+author: pengzhanbo
+createTime: 2024/03/06 11:46:49
+permalink: /guide/markdown/experiment/
+---
+
+## twoslash <Badge type="tip" text="实验性" />
+
+为代码块添加支持 [TypeScript TwoSlash](https://www.typescriptlang.org/dev/twoslash/) 支持。
+在代码块内提供内联类型提示。
+
+该功能由 [shiki](https://shiki.style/) 和 [@shikijs/twoslash](https://shiki.style/packages/twoslash) 提供支持，并整合在 [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 中。
+
+> [!important]
+> 该功能当前仅在以下版本中通过可用性验证，在后续的所有的版本中均不能保证其可用性，请谨慎使用：
+> - [x] `vuepress@2.0.0-rc.0`
+> - [x] `vuepress@2.0.0-rc.2`
+> - [x] `vuepress@2.0.0-rc.7`
+> - [x] `vuepress@2.0.0-rc.8`
+
+### 概述
+
+[twoslash](https://shikijs.github.io/twoslash/) 是一种 `javascript` 和 `typescript` 标记语言。
+你可以编写一个代码示例来描述整个 `javascript` 项目。
+
+`twoslash` 将 **双斜杠** 作为 代码示例的预处理器。
+
+`twoslash` 使用与文本编辑器相同的编译器 API 来提供类型驱动的悬停信息、准确的错误和类型标注。
+
+### 功能预览
+
+````md
+```ts twoslash
+import { getHighlighterCore } from 'shiki/core'
+
+const highlighter = await getHighlighterCore({})
+// ^?
+
+
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+````
+
+将鼠标悬停在 `highlighter` 变量上查看效果：
+
+```ts twoslash
+import { getHighlighterCore } from 'shiki/core'
+
+const highlighter = await getHighlighterCore({})
+// ^?
+
+
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+
+::: tip
+`twoslash` 仅支持 `typescript` 和 `vue` 的 代码块。
+:::
+
+### 开启功能
+
+> [!warning]
+> 启用该功能需要对 `@vuepress/markdown` 包的源码进行修改，此操作具有一定的风险。
+>
+> 由于需要通过 `pnpm patch` 对 `@vuepress/markdown` 包进行补丁。因此，你需要使用
+> `pnpm` 作为你的项目的包管理器。
+
+#### 步骤一
+
+在项目根目录下，通过 `pnpm patch` 命令对 `@vuepress/markdown` 包进行补丁:
+
+```sh
+$ pnpm patch @vuepress/markdown --edit-dir _tmp/vuepress__markdown
+```
+
+该命令将会在你的项目根目录下生成一个 `_tmp/vuepress__markdown` 目录，该目录将会包含 `@vuepress/markdown` 包的源码。
+
+#### 步骤二
+
+修改 `@vuepress/markdown` 包的源码, 打开 `_tmp/vuepress__markdown/dist/index.js` 文件，
+找到 `270` 行，其内容如下：
+
+```ts
+const code = options.highlight?.(token.content, language.name, "") || md.utils.escapeHtml(token.content);
+```
+
+对其进行修改：
+
+```ts
+const code = options.highlight?.(token.content, language.name, "") || md.utils.escapeHtml(token.content); // [!code --]
+const code = options.highlight?.(token.content, language.name, info || "") || md.utils.escapeHtml(token.content); // [!code ++]
+```
+
+你可以直接复制上面的代码内容，然后粘贴到 `_tmp/vuepress__markdown/dist/index.js` 文件中替换 `248` 行。
+
+#### 步骤三
+
+将源码修改进行 补丁提交，执行下面的命令：
+
+```sh
+$ pnpm patch-commit '_tmp/vuepress__markdown'
+```
+
+此命令将会在你的项目根目录下生成一个 `patch` 目录，该目录将会包含 `@vuepress/markdown` 包的补丁，
+并提供 `patchedDependencies` 字段注册到你的项目中。
+
+之后你就可以选择 删除 `_tmp/vuepress__markdown` 目录了。
+
+
+#### 步骤四
+
+在 主题配置中，将 `twoslash` 选项打开。
+
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ shiki: { twoslash: true },
+ },
+ }),
+})
+```
+
+### 使用
+
+启用该功能后，你只需要在 原有的 markdown 代码块语法中，在代码语言声明后添加 `twoslash` 关键词即可：
+
+````md
+```ts twoslash // [!code highlight]
+const a = 1
+```
+````
+
+主题仅会对有 `twoslash` 关键词的代码进行编译处理。
+
+### 语法参考
+
+完整语法请参考 [ts-twoslasher](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher) 和 [shikijs-twoslash](https://shikijs.github.io/twoslash/)
+
+`twoslash` 将 **双斜杠** 视为代码示例的预处理器。
+因此，所有的标记都是在 `//` 之后添加的。
+
+常用的 `twoslash` 标记：
+
+#### `^?` {id=twoslash-hover}
+
+`^?` 用于突出显示类型，而无需用户进行悬停交互：
+
+````md
+```ts twoslash
+const a = 1
+// ^?
+```
+````
+
+```ts twoslash
+const a = 1
+// ^?
+ //
+```
+
+**需要注意的是，`^`必须正确指向需要突出显示类型的变量**
+
+#### `^|` {id=twoslash-list}
+
+`^|` 可以将展示代码编辑过程中的内容预测列表，如编辑器中的自动完成功能：
+
+````md
+```ts twoslash
+// @noErrors
+// @esModuleInterop
+import express from "express"
+const app = express()
+app.get("/", function (req, res) {
+ res.sen
+// ^|
+})
+app.listen(3000)
+```
+````
+
+```ts twoslash
+// @noErrors
+// @esModuleInterop
+import express from "express"
+const app = express()
+app.get("/", function (req, res) {
+ res.sen
+// ^|
+})
+app.listen(3000)
+ //
+ //
+ //
+```
+
+**需要注意的是，`^`必须正确指向需要进行内容预测的位置**
+
+这些类型提示并不是凭空而来的，它依赖于你的项目中的 `node_modules`。比如 `express`。
+你需要在项目中 安装 `@types/express` 才能使用这些类型提示。
+
+#### `@errors` {id=twoslash-errors}
+
+`@errors: <error code>` 显示代码是如何出现错误的：
+
+````md
+```ts twoslash
+// @errors: 2339
+const welcome = "Tudo bem gente?"
+const words = welcome.contains(" ")
+```
+````
+```ts twoslash
+// @errors: 2339
+const welcome = "Tudo bem gente?"
+const words = welcome.contains(" ")
+```
+
+你需要在 `@errors` 后面，声明对应的 `typescript` 错误码。
+
+::: note
+如果你不知道应该添加哪个 错误码，你可以先尝试直接编写好代码，然后等待编译失败，
+你应该能够在控制台中查看到相关的错误信息，然后在错误信息的 `description` 中找到对应的错误码。
+然后再将错误码添加到 `@errors` 中
+:::
+
+#### `---cut---` {id=twoslash-cut}
+
+`---cut---` 用于将代码分割, 被 `---cut---` 标记的，在其之前的代码将被忽略，不会显示：
+
+````md
+```ts twoslash
+const hi = 'hi'
+// ---cut---
+const msg = `${hi} words` as const
+// ^?
+```
+````
+
+```ts twoslash
+const hi = 'hi'
+// ---cut---
+const msg = `${hi} words` as const
+// ^?
+ //
+```
+
+#### 自定义输出信息 {id=twoslash-custom-message}
+
+`@log`, `@error`, `@warn` 和 `@annotate` 用于向用户输出不同级别的自定义信息
+
+````md
+```ts twoslash
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+````
+
+```ts twoslash
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+
+
+#### import_files {id=twoslash-import-files}
+
+`@filename: <filename>` 用于声明后续的代码将来自哪个文件，
+你可以在其他部分的代码中通过 `import` 导入该文件。
+
+````md
+```ts twoslash
+// @filename: sum.ts
+export function sum(a: number, b: number): number {
+ return a + b
+}
+
+// @filename: ok.ts
+import { sum } from "./sum"
+sum(1, 2)
+
+// @filename: error.ts
+// @errors: 2345
+import { sum } from "./sum"
+sum(4, "woops")
+```
+````
+
+```ts twoslash
+// @filename: sum.ts
+export function sum(a: number, b: number): number {
+ return a + b
+}
+
+// @filename: ok.ts
+import { sum } from "./sum"
+sum(1, 2)
+
+// @filename: error.ts
+// @errors: 2345
+import { sum } from "./sum"
+sum(4, "woops")
+```
+
+::: warning
+在本节中未提及的其他标记，由于未正式验证其是否可用，请谨慎使用。
+:::
diff --git a/docs/notes/vuepress-theme-plume/markdown增强.md b/docs/notes/theme/guide/markdown-进阶.md
similarity index 74%
rename from docs/notes/vuepress-theme-plume/markdown增强.md
rename to docs/notes/theme/guide/markdown-进阶.md
index b7ebc7af..bba14890 100644
--- a/docs/notes/vuepress-theme-plume/markdown增强.md
+++ b/docs/notes/theme/guide/markdown-进阶.md
@@ -1,181 +1,31 @@
---
-title: markdown增强
-createTime: 2022/05/14 10:43:53
+title: 高阶
author: pengzhanbo
-permalink: /note/vuepress-theme-plume/markdown-enhance/
+createTime: 2024/03/05 16:27:59
+permalink: /guide/markdown/advance/
---
-markdown 增强 由 [vuepress-plugin-md-enhance](https://vuepress-theme-hope.github.io/v2/md-enhance/zh) 提供支持。
-
-## 内容容器
-
-支持多种内容容器，更好的表达文章内容。
-
-1. tip 提示
-2. note 注释
-3. info 信息
-4. warning 警告
-5. danger 危险
-6. details 详情
-
-- 提示
- ``` md
- ::: tip 提示
- 提示内容
- :::
- ```
- ::: tip 提示
- 提示内容
- :::
-
-- 注释
- ``` md
- ::: note 注释
- 注释内容
- :::
- ```
- ::: note 注释
- 注释内容
- :::
-
-- 信息
- ``` md
- ::: info 信息
- 信息内容
- :::
- ```
- ::: info 信息
- 信息内容
- :::
-
-- 警告
- ``` md
- ::: warning 警告
- 警告内容
- :::
- ```
- ::: warning 警告
- 警告内容
- :::
-
-- 危险
- ``` md
- ::: caution 危险
- 危险内容
- :::
- ```
- ::: caution 危险
- 危险内容
- `markdown`
- :::
-
-- 详情
- ``` md
- ::: details 详情
- 详情信息
- :::
- ```
- ::: details 详情
- 详情信息
- :::
-
-- 重要
-
- ``` md
- ::: important 重要
- 重要内容
- :::
- ```
- ::: important 重要
- 重要内容
- :::
-
-## 自定义对齐
-
-- 左对齐
- ``` md
- ::: left
- 这是左对齐
- :::
- ```
- ::: left
- 这是左对齐
- :::
-- 右对齐
- ``` md
- ::: right
- 这是右对齐
- :::
- ```
- ::: right
- 这是右对齐
- :::
-- 居中
- ``` md
- ::: center
- 这是居中对齐
- :::
- ```
- ::: center
- 这是居中对齐
- :::
-
-## 任务列表
-
-``` md
-- [ ] todo1
-- [x] todo2
-```
-- [ ] todo1
-- [x] todo2
-
-## 标记
-
-``` md
-将这个内容进行 ==标记== ，变成高亮。
-```
-将这个内容进行 ==标记== ，变成高亮。
-
-## 代码块分组
-
-你需要在 外围使用`code-group` 容器，内部使用`code-group-item` 将代码块进行包裹。
-
-需要给 `code-group-item` 容器设置标题
-
-如果需要给先让某个选项卡被激活，在标题后面补充`:active`后缀。
-
-````md
-::: code-tabs
-
-@tab yarn
-```sh
-yarn version
-```
-
-
-@tab:active npm
-```sh
-npm version
-```
-:::
-
-
-````
-
-::: code-tabs
-@tab yarn
-``` sh
-yarn version
-```
-
-@tab:active npm
-``` sh
-npm version
-```
-:::
-
## 代码演示
+代码演示 默认不启用，你可以通过配置来启用它。
+
+::: code-tabs
+@tab .vuepress/config.ts
+```ts
+export default defineUserConfig{
+ theme: plumeTheme({
+ plugins: {
+ markdownEnhance: {
+ demo: true,
+ },
+ }
+ })
+}
+```
+:::
+
+### 语法
+
```` md
::: [类型]-demo 可选的标题文字
@@ -587,6 +437,103 @@ export default () => {
````
::::
-## 其他支持
+## 选项组
-更多支持请参考 [主题插件配置](/note/vuepress-theme-plume/plugins-config/#markdownenhance)
+让你的 Markdown 文件支持供选项卡。
+
+你需要将选项卡包装在 `tabs` 容器中。
+
+你可以在 `tabs` 容器中添加一个 id 后缀，该后缀将用作选项卡 id。
+所有具有相同 id 的选项卡将共享相同的切换事件。
+
+```md
+::: tabs#fruit
+
+<!-- 这里，fruit 将用作 id，它是可选的 -->
+
+<!-- 选项卡内容 -->
+
+:::
+```
+
+在这个容器内，你应该使用 `@tab` 标记来标记和分隔选项卡内容。
+
+在 `@tab` 标记后，你可以添加文本 `:active` 默认激活选项卡，之后的文本将被解析为选项卡标题。
+
+```md
+::: tabs
+
+@tab 标题 1
+
+<!-- tab 1 内容 -->
+
+@tab 标题 2
+
+<!-- tab 2 内容 -->
+
+@tab:active 标题 3
+
+<!-- tab 3 将会被默认激活 -->
+
+<!-- tab 3 内容 -->
+
+:::
+```
+
+默认情况下，标题将用作选项卡的值，但你可以使用 id 后缀覆盖它。
+
+```md
+::: tabs
+
+@tab 标题 1
+
+<!-- 此处，选项卡 1 的标题“标题 1”将用作值。 -->
+
+<!-- tab 1 内容 -->
+
+@tab 标题 2#值 2
+
+<!-- 这里，tab 2 的标题将是 “标题 2”，但它会使用 “值 2” 作为选项卡的值-->
+
+<!-- tab 2 内容 -->
+
+:::
+```
+
+你可以在每个选项卡中使用 Vue 语法和组件，并且你可以访问 value 和 isActive，
+表示选项卡的绑定值和选项卡是否处于激活状态。
+
+
+**输入**
+
+````
+::: tabs
+@tab npm
+
+npm 应该与 Node.js 被一同安装。
+
+@tab pnpm
+
+```sh
+corepack enable
+corepack use pnpm@8
+```
+
+:::
+````
+
+**输出**
+
+::: tabs
+@tab npm
+
+npm 应该与 Node.js 被一同安装。
+
+@tab pnpm
+
+```sh
+corepack enable
+corepack use pnpm@8
+```
+
+:::
diff --git a/docs/notes/theme/guide/seo.md b/docs/notes/theme/guide/seo.md
new file mode 100644
index 00000000..245264b1
--- /dev/null
+++ b/docs/notes/theme/guide/seo.md
@@ -0,0 +1,81 @@
+---
+title: SEO
+author: pengzhanbo
+createTime: 2024/03/02 14:46:25
+permalink: /guide/seo/
+---
+
+## 使用
+
+主题提供了开箱即用的配置，为 站点 启用 SEO 优化功能。
+要启用它，需要进行以下配置：
+
+```js
+export default defineUserConfig({
+ theme: plumeTheme({
+ hostname: 'http://your_site_url',
+ })
+})
+```
+
+## 指南
+
+主题会通过向网站 `<head>` 注入标签，让你的网站完全支持 [开放内容协议 OGP](https://ogp.me/)
+和 [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/)，以全面增强站点的搜索引擎优化性。
+
+默认情况下，插件会读取站点配置、主题配置与页面的 frontmatter 来尽可能自动生成。
+诸如站点名称，页面标题，页面类型，写作日期，最后更新日期，文章标签均会自动生成。
+
+## 默认的 OGP 生成逻辑
+
+| 属性名称 | 值 |
+| :----------------------: | :------------------------------------------------------------------------------------------------: |
+| `og:url` | `options.hostname` + `path` |
+| `og:site_name` | `siteConfig.title` |
+| `og:title` | `page.title` |
+| `og:description` | `page.frontmatter.description` \|\| 自动生成 (当插件选项中的 `autoDescription` 为 `true` 时) |
+| `og:type` | `"article"` |
+| `og:image` | `options.hostname` + `page.frontmatter.image` \|\| 页面的第一张图片\|\| 插件选项的 `fallbackImage` |
+| `og:updated_time` | `page.git.updatedTime` |
+| `og:locale` | `page.lang` |
+| `og:locale:alternate` | `siteData.locales` 包含的其他语言 |
+| `twitter:card` | `"summary_large_image"` (仅在找到图片时) |
+| `twitter:image:alt` | `page.title` (仅在找到图片时) |
+| `article:author` | `page.frontmatter.author` \|\| `options.author` |
+| `article:tag` | `page.frontmatter.tags` \|\| `page.frontmatter.tag` |
+| `article:published_time` | `page.frontmatter.date` \|\| `page.git.createdTime` |
+| `article:modified_time` | `page.git.updatedTime` |
+
+## 默认的 JSON-LD 生成逻辑
+
+| 属性名 | 值 |
+| :-------------: | :------------------------------------------------------------: |
+| `@context` | `"https://schema.org"` |
+| `@type` | `"NewsArticle"` |
+| `headline` | `page.title` |
+| `image` | 页面中的图片\|\| `options.hostname` + `page.frontmatter.image` |
+| `datePublished` | `page.frontmatter.date` \|\| `page.git.createdTime` |
+| `dateModified` | `page.git.updatedTime` |
+| `author` | `page.frontmatter.author` \|\| `options.author` |
+
+## SEO 介绍
+
+搜索引擎优化 (**S**earch **E**ngine **O**ptimization)，是一种透过了解搜索引擎的运作规则来调整网站，以及提高目的网站在有关搜索引擎内排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望透过各种形式来影响搜索引擎的排序，让自己的网站可以有优秀的搜索排名。 所谓“针对搜索引擎作最优化的处理”，是指为了要让网站更容易被搜索引擎接受。搜索引擎会将网站彼此间的内容做一些相关性的资料比对，然后再由浏览器将这些内容以最快速且接近最完整的方式，呈现给搜索者。搜索引擎优化就是通过搜索引擎的规则进行优化，为用户打造更好的用户体验，最终的目的就是做好用户体验。
+
+## 相关文档
+
+- [开放内容协议 OGP](https://ogp.me/) (**O**pen **G**raph **Pr**otocal)
+
+ 本插件完美支持该协议，会自动生成符合该协议的 `<meta>` 标签。
+
+- [JSON-LD 1.1](https://www.w3.org/TR/json-ld-api/)
+
+ 本插件会为文章类页面生成 NewsArticle 类标签。
+
+- [RDFa 1.1](https://www.w3.org/TR/rdfa-primer/)
+
+ RDFa 主要标记 HTML 结构。
+
+- [Schema.Org](https://schema.org/)
+
+ 结构标记的 Schema 定义站点
diff --git a/docs/notes/theme/guide/sitemap.md b/docs/notes/theme/guide/sitemap.md
new file mode 100644
index 00000000..8c05b7ce
--- /dev/null
+++ b/docs/notes/theme/guide/sitemap.md
@@ -0,0 +1,19 @@
+---
+title: 生成 sitemap
+author: pengzhanbo
+createTime: 2024/03/02 16:47:00
+permalink: /guide/sitemap/
+---
+
+## 使用
+
+主题提供了开箱即用的配置，为 站点生成 `sitemap.xml` 文件。
+要启用它，需要进行以下配置：
+
+```js
+export default defineUserConfig({
+ theme: plumeTheme({
+ hostname: 'http://your_site_url',
+ })
+})
+```
diff --git a/docs/notes/theme/guide/介绍.md b/docs/notes/theme/guide/介绍.md
new file mode 100644
index 00000000..7dcccd93
--- /dev/null
+++ b/docs/notes/theme/guide/介绍.md
@@ -0,0 +1,42 @@
+---
+title: 主题介绍
+author: pengzhanbo
+createTime: 2024/03/04 11:06:24
+permalink: /guide/intro/
+---
+
+## 介绍
+
+vuepress-theme-plume 是一个基于 VuePress 的主题。适用于 博客、文档 和 知识笔记 。
+
+VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) 。
+专为构建快速、以内容为中心的站点而设计。
+简而言之，VuePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。
+
+::: tip
+本主题 基于 [vuepress-next](https://github.com/vuepress/vuepress-next), 目前处于 RC 阶段。
+
+功能和API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
+:::
+
+## 优势
+
+与 vuepress 默认主题相比：
+- 大幅度优化了界面、交互，更具美观度，更好的用户体验。
+- 同时，还添加了大量的丰富实用的功能，如 代码分组、提示容器、任务列表、数学公式、代码演示、
+内容搜索、文章评论、加密 等。
+- 大幅度简化了配置，更易于使用，同时还保留了丰富灵活的配置项，满足个性化的需求。
+
+`plume` 主题尽可能的内置你可能需要的功能，以及搭建站点所需要的一般性配置，您无需关注这些细节。
+目的是，让您更专注于 内容的创作，更好的表达你的想法，享受 Markdown 增强语法带来的便利。
+
+## 功能
+
+- 💻 响应式布局，适配不同的屏幕尺寸
+- 📖 博客 & 文档
+- 🔗 自动生成文章永久链接
+- ⚖ 支持多语言
+- 🔑 支持 全站加密、部分加密
+- 👀 支持 搜索、文章评论
+- 👨💻 支持 浅色/深色 主题 （包括代码高亮）
+- 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
diff --git a/docs/notes/theme/guide/代码复制.md b/docs/notes/theme/guide/代码复制.md
new file mode 100644
index 00000000..5ba0de5c
--- /dev/null
+++ b/docs/notes/theme/guide/代码复制.md
@@ -0,0 +1,42 @@
+---
+title: 代码复制
+author: pengzhanbo
+createTime: 2024/03/04 09:59:29
+permalink: /guide/features/copy-code/
+---
+
+## 使用
+
+主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。
+
+默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。
+
+当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。
+
+## 效果
+
+### 代码块
+
+```js
+const a = 1
+
+export default a
+```
+
+### 代码组
+
+
+::: code-tabs
+@tab foo.js
+```js
+const a = 1
+
+export default a
+```
+@tab bar.js
+```js
+const b = 1
+
+export default b
+```
+:::
diff --git a/docs/notes/theme/guide/内容搜索.md b/docs/notes/theme/guide/内容搜索.md
new file mode 100644
index 00000000..28076551
--- /dev/null
+++ b/docs/notes/theme/guide/内容搜索.md
@@ -0,0 +1,232 @@
+---
+title: 内容搜索
+author: Plume Theme
+createTime: 2024/03/04 09:58:39
+permalink: /guide/features/content-search/
+---
+
+主题提供了两种方式支持 内容搜索。
+
+- 本地内容搜索
+- Algolia DocSearch
+
+注意，请勿同时配置使用两种方式，同时配置时，只有 本地内容搜索 生效。
+
+## 本地内容搜索
+
+本地内容搜索由 [@vuepress-plume/plugin-search](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-search) 插件提供支持。
+
+该插件使用 [minisearch](https://github.com/lucaong/minisearch) 进行内容搜索。
+
+### 启用
+
+主题默认 启用 本地内容搜索 功能。您也可以对其进行自定义配置。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ search: {
+ // more options
+ }
+ }
+ })
+})
+```
+
+该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。
+换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。
+
+然而，当你的站点包含大量页面时，搜索索引文件也会变得非常大，它可能会拖慢你的页面加载速度。在这种情况下，我们建议你使用更成熟的解决方案 - [Algolia DocSearch](#algolia-docsearch) 。
+
+
+## Algolia DocSearch
+
+使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
+
+### 启用
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ docsearch: {
+ // more options
+ }
+ }
+ })
+})
+```
+
+### 获取搜索索引
+
+你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。当你的索引成功创建后， DocSearch 团队会将 [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。
+
+或者，你也可以 [运行你自己的爬虫](https://docsearch.algolia.com/docs/run-your-own/) 来创建索引，然后使用你自己的 [appId](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#appId), [apiKey](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#apikey) 和 [indexName](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#indexname) 来配置该插件。
+
+以下是本主题使用的 爬虫配置示例, 你可以前往 [Algolia Crawler](https://crawler.algolia.com/admin/crawlers/)
+根据你的需求进行修改:
+
+```ts
+new Crawler({
+ appId: 'YOUR_APP_ID', // [!code highlight]
+ apiKey: 'YOUR_API_KEY', // [!code highlight]
+ rateLimit: 8,
+ startUrls: [
+ // 这是 Algolia 开始抓取网站的初始地址
+ // 如果你的网站被分为数个独立部分，你可能需要在此设置多个入口链接
+ 'https://YOUR_WEBSITE_URL/', // [!code highlight]
+ ],
+ renderJavaScript: false,
+ sitemaps: [
+ // 主题默认会生成 sitemap，这里需要替换为你的域名链接
+ 'https://YOUR_WEBSITE_URL/sitemap.xml', // [!code highlight]
+ ],
+ ignoreCanonicalTo: true,
+ discoveryPatterns: [
+ // 这是 Algolia 抓取 URL 的范围
+ 'https://YOUR_WEBSITE_URL/**', // [!code highlight]
+ ],
+ // 爬虫执行的计划时间，可根据文档更新频率设置
+ schedule: 'at 02:00 every 1 day',
+ actions: [
+ // 你可以拥有多个 action，特别是你在一个域名下部署多个文档时
+ {
+ // 使用适当的名称为索引命名
+ indexName: 'YOUR_INDEX_NAME', // [!code highlight]
+ // 索引生效的路径
+ pathsToMatch: ['https://YOUR_WEBSITE_URL/**'], // [!code highlight]
+ recordExtractor: ({ helpers }) => {
+ // vuepress-theme-plume 的选项
+ return helpers.docsearch({
+ recordProps: { // [!code highlight]
+ lvl1: '.plume-content h1', // [!code highlight]
+ content: '.plume-content p, .plume-content li', // [!code highlight]
+ lvl0: { // [!code highlight]
+ selectors: [ // [!code highlight]
+ '.sidebar-item.is-active p', // [!code highlight]
+ '.content-container .page-title', // [!code highlight]
+ ], // [!code highlight]
+ defaultValue: 'Documentation', // [!code highlight]
+ }, // [!code highlight]
+ lvl2: '.plume-content h2', // [!code highlight]
+ lvl3: '.plume-content h3', // [!code highlight]
+ lvl4: '.plume-content h4', // [!code highlight]
+ lvl5: '.plume-content h5', // [!code highlight]
+ }, // [!code highlight]
+ indexHeadings: true, // [!code highlight]
+ aggregateContent: true, // [!code highlight]
+ recordVersion: 'v3', // [!code highlight]
+ });
+ },
+ },
+ ],
+ initialIndexSettings: {
+ // 控制索引如何被初始化，这仅当索引尚未生成时有效
+ // 你可能需要在修改后手动删除并重新生成新的索引
+ YOUR_INDEX_NAME: { // [!code highlight]
+ attributesForFaceting: ['type', 'lang'], // [!code highlight]
+ attributesToRetrieve: [
+ 'hierarchy',
+ 'content',
+ 'anchor',
+ 'url',
+ 'url_without_anchor',
+ 'type',
+ ],
+ attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
+ attributesToSnippet: ['content:10'],
+ camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
+ searchableAttributes: [
+ 'unordered(hierarchy_radio_camel.lvl0)',
+ 'unordered(hierarchy_radio.lvl0)',
+ 'unordered(hierarchy_radio_camel.lvl1)',
+ 'unordered(hierarchy_radio.lvl1)',
+ 'unordered(hierarchy_radio_camel.lvl2)',
+ 'unordered(hierarchy_radio.lvl2)',
+ 'unordered(hierarchy_radio_camel.lvl3)',
+ 'unordered(hierarchy_radio.lvl3)',
+ 'unordered(hierarchy_radio_camel.lvl4)',
+ 'unordered(hierarchy_radio.lvl4)',
+ 'unordered(hierarchy_radio_camel.lvl5)',
+ 'unordered(hierarchy_radio.lvl5)',
+ 'unordered(hierarchy_radio_camel.lvl6)',
+ 'unordered(hierarchy_radio.lvl6)',
+ 'unordered(hierarchy_camel.lvl0)',
+ 'unordered(hierarchy.lvl0)',
+ 'unordered(hierarchy_camel.lvl1)',
+ 'unordered(hierarchy.lvl1)',
+ 'unordered(hierarchy_camel.lvl2)',
+ 'unordered(hierarchy.lvl2)',
+ 'unordered(hierarchy_camel.lvl3)',
+ 'unordered(hierarchy.lvl3)',
+ 'unordered(hierarchy_camel.lvl4)',
+ 'unordered(hierarchy.lvl4)',
+ 'unordered(hierarchy_camel.lvl5)',
+ 'unordered(hierarchy.lvl5)',
+ 'unordered(hierarchy_camel.lvl6)',
+ 'unordered(hierarchy.lvl6)',
+ 'content',
+ ],
+ distinct: true,
+ attributeForDistinct: 'url',
+ customRanking: [
+ 'desc(weight.pageRank)',
+ 'desc(weight.level)',
+ 'asc(weight.position)',
+ ],
+ ranking: [
+ 'words',
+ 'filters',
+ 'typo',
+ 'attribute',
+ 'proximity',
+ 'exact',
+ 'custom',
+ ],
+ highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
+ highlightPostTag: '</span>',
+ minWordSizefor1Typo: 3,
+ minWordSizefor2Typos: 7,
+ allowTyposOnNumericTokens: false,
+ minProximity: 1,
+ ignorePlurals: true,
+ advancedSyntax: true,
+ attributeCriteriaComputedByMinProximity: true,
+ removeWordsIfNoResults: 'allOptional',
+ },
+ },
+});
+```
+
+`recordProps` 部分的配置选项用于本主题进行索引的爬取配置。
+
+### 配置项
+
+完整配置请查看 [文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html#%E9%85%8D%E7%BD%AE%E9%A1%B9)
+
+### 配置示例
+
+以下是本主题使用的配置：
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ docsearch: {
+ appId: 'YOUR_APP_ID', // [!code highlight]
+ apiKey: 'YOUR_API_KEY', // [!code highlight]
+ indexName: 'YOUR_INDEX_NAME', // [!code highlight]
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/加密.md b/docs/notes/theme/guide/加密.md
new file mode 100644
index 00000000..cea739dd
--- /dev/null
+++ b/docs/notes/theme/guide/加密.md
@@ -0,0 +1,141 @@
+---
+title: 加密
+author: pengzhanbo
+createTime: 2024/03/04 15:58:48
+permalink: /guide/features/encryption/
+---
+
+## 加密
+
+在本主题中，支持 **全站加密** 和 **部分加密** 等多种灵活的加密方式。
+
+::: warning 提示
+由于 `vuepress` 是静态站点，其自身限制的原因，**加密** 仅仅只是 看起来 看不到内容，
+并且在 编译时，不再将 内容 预渲染到 `html` 中，但实际上 还是能够从 站点源文件 中获取到内容。
+因此，不建议将 **加密** 功能 认为是 安全可靠的。
+
+请尽量避免将 **加密功能** 应用于需要 **严格保密** 的内容 中。
+:::
+
+**已解锁的文章，仅在当前会话中可见。**
+
+## 启用加密功能
+
+在 主题配置中，添加 `encrypt` 选项。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ // more options...
+ }
+ })
+})
+```
+
+## 全站加密
+
+有些情况下，你可能 需要对 全站进行加密。
+因此，你可以通过 `encrypt.global` 选项配置全站加密。
+然后，通过配置 `encrypt.admin` 选项，设置一个或多个密码。
+
+```ts
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ global: true,
+ admin: ['123456'],
+ }
+ })
+})
+```
+
+## 部分加密
+
+大多数情况下，你可能只需需要 加密 某一篇文章、某一个目录 等。
+因此，你可以通过 `encrypt.rules` 选项配置部分加密。
+
+```ts
+export default defineUserConfig({
+ theme: themePlume({
+ encrypt: {
+ rules: {
+ // 可以是 md 文件的相对路径，对该文件加密
+ '前端/基础.md': '123456',
+ // 可以是 文件夹的路径，对该目录下所有文章加密
+ '/notes/vuepress-theme-plume/': '123456',
+ // 可以是 访问地址的请求路径，对该访问路径下所有文章加密
+ '/vuepress-theme-plume/': '123456',
+ // 可以是 具体的某个页面的请求路径，对该页面加密
+ '/article/f8dnci3/': '123456',
+ // 如果是 `^` 开头，则匹配该正则表达式的页面也会加密
+ '^/(a|b)/': '123456',
+ }
+ }
+ })
+})
+```
+
+`encrypt.rules` 的 **键** 将作为 匹配规则，**值** 将作为 该规则对应的密码，可以设置 一个或多个密码。
+
+:::tip 说明
+- 密码 必须是 普通的字符串。
+- 如果是 加密的是 整个目录，解锁时也是解锁整个目录，而不是解锁该目录下的某个文章。
+- `encrypt.admin` 也可用于解锁 **部分加密** 的页面。
+- 使用 `encrypt.admin` 解锁后，被认为是管理员访问，其它未解锁页面也默认解锁。
+:::
+
+## 相关配置
+
+以下配置支持在多语言配置中使用。
+
+### encryptGlobalText
+
+- **类型**： `string`
+- **默认值**： `'Only password can access this site'`
+- **说明**：
+
+ 全站加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
+
+### encryptPageText
+
+- **类型**： `string`
+- **默认值**： `'Only password can access this page'`
+- **说明**：
+
+ 部分加密时，提示信息。支持 HTML。如果你期望为访客提供获取密码的联系方式，你可能会需要这个配置。
+
+### encryptButtonText
+
+- **类型**： `string`
+- **默认值**： `'Confirm'`
+- **说明**： 确认按钮的文本
+
+### encryptPlaceholder
+
+- **类型**： `string`
+- **默认值**： `'Enter password'`
+- **说明**： 密码输入框的占位符
+
+### 示例
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ locales: {
+ '/': {
+ encryptButtonText: 'Confirm',
+ encryptPlaceholder: 'Enter password',
+ encryptGlobalText: 'Only password can access this site',
+ encryptPageText: 'Only password can access this page',
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/博客.md b/docs/notes/theme/guide/博客.md
new file mode 100644
index 00000000..7258ab2e
--- /dev/null
+++ b/docs/notes/theme/guide/博客.md
@@ -0,0 +1,90 @@
+---
+title: 博客
+author: pengzhanbo
+createTime: 2024/03/04 19:16:40
+permalink: /guide/blog/
+---
+
+## 概述
+
+主题默认启用 博客功能，通常您无需进行额外的配置。
+
+主题默认会将 `{sourceDir}` 目录下的，除了一些特定的目录（如 `notes` 目录将作为笔记所在目录），
+所有 md 文件作为博客文章。
+
+同时，主题会生成一个 链接地址为 `/blog/` 的 博客文章列表页。
+展示所有的博客文章，以及 博主的相关信息。
+
+
+## 国际化支持
+
+如果启用了 国际化，那么博客列表页将会 根据 不同的语言，展示对应语言目录下的博客列表。
+即 每个语言下的 文章列表 都是保持独立的。
+
+## 博主信息
+
+主题允许你展示博主的基本信息。
+
+::: center
+{style="max-width:250px;"}
+:::
+
+### 配置
+
+你可以通过 `avatar` 属性来设置博主头像等相关信息。
+
+::: code-tabs
+@tab .vuepress/config.ts
+```ts
+export default defineUserConfig({
+ theme: plumeTheme({
+ avatar: {
+ url: '/blogger.png',
+ name: 'Your name',
+ description: 'Your description',
+ circle: true, // 是否为圆形头像
+ }
+ })
+})
+```
+:::
+
+## 文章元数据
+
+你可以配置展示博客文章的元数据，如标题、作者、日期、标签等。这些数据通过 `frontmatter` 配置。
+
+```md
+---
+title: 文章标题
+createTime: 2024/01/01 00:00:00
+author: your name
+tags:
+ - tag1
+ - tag2
+---
+```
+
+其中，`title` / `createTime` / `author` 会在新建 md 文件时由主题自动填充，你可以随意修改它们。
+
+以下是在 博客文章中可用的 `frontmatter` 属性。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| ---------- | ------------------- | -------------------------- | -------------------- |
+| title | `string` | 默认自动填入文件名 | 文章标题 |
+| createTime | `string` | 当前时间 | 文章创建时间 |
+| author | `string` | 默认自动填入 `avatar.name` | 文章作者 |
+| tags | `string[]` | `[]` | 文章标签 |
+| sticky | `boolean \| number` | false | 是否置顶, 如果为数字，则数字越大，置顶越靠前 |
+| article | `boolean` | true | 是否在列表页中显示 |
+
+## 文章摘要
+
+如果你想要为文章添加摘要，你可以使用 `<!-- more -->` 注释来标记它。任何在此注释之前的内容会被视为摘要。
+
+## 标签页和归档页
+
+主题除了自动生成 **博客文章列表页** 以外，还会自动生成 **标签页** 和 **归档页**。
+
+标签页 可以根据 标签 筛选并展示 博客文章。
+
+归档页根据文章的创建时间进行归档。
diff --git a/docs/notes/theme/guide/友情链接页.md b/docs/notes/theme/guide/友情链接页.md
new file mode 100644
index 00000000..4e038526
--- /dev/null
+++ b/docs/notes/theme/guide/友情链接页.md
@@ -0,0 +1,44 @@
+---
+title: 友情链接页
+author: pengzhanbo
+createTime: 2024/03/03 22:44:28
+permalink: /guide/friend-links/
+---
+
+## 友情链接
+
+友情链接页 不会自动生成，但你可以根据需要，创建它。
+
+在你的 `{sourceDir}/` 目录下，创建 任意 `*.md` 文件，比如 `friends.md` 文件。
+然后在这个文件中，通过 `frontmatter` 配置它。
+
+::: code-tabs
+@tab friends.md
+```md
+---
+friends: true
+title: 友情链接
+description: 友情链接描述文本
+permalink: /friends/
+list:
+ -
+ name: pengzhanbo
+ link: https://github.com/pengzhanbo
+ avatar: https://github.com/pengzhanbo.png
+ desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+ -
+ name: pengzhanbo
+ link: https://github.com/pengzhanbo
+ avatar: https://github.com/pengzhanbo.png
+ desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+---
+```
+:::
+
+主题会根据 配置信息 生成友情链接页。 如果未配置 `permalink` ，默认为 `/friends/`。
+
+你需要自行将 友情链接页 的入口链接 配置到 `navbar` 的合适的位置中。
+
+### 配置
+
+查看 [文档](/config/frontmatter/friends/) 更多配置信息。
diff --git a/docs/notes/theme/guide/国际化.md b/docs/notes/theme/guide/国际化.md
new file mode 100644
index 00000000..f7c72dea
--- /dev/null
+++ b/docs/notes/theme/guide/国际化.md
@@ -0,0 +1,75 @@
+---
+title: 国际化
+author: pengzhanbo
+createTime: 2024/03/05 10:01:26
+permalink: /guide/international/
+---
+
+## 目录
+
+要使用内置的 i18n (国际化) 功能，需要创建类似于下面的目录结构：
+
+```
+docs/
+├─ es/
+│ ├─ foo.md
+├─ fr/
+│ ├─ foo.md
+├─ foo.md
+```
+
+## vuepress 配置
+
+在 `.vuepress/config.js` 中配置：
+
+```js
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ // 声明默认的语言
+ lang: 'en-US',
+ // 多语言下支持的各种语言 locales
+ locales: {
+ // 配置 不同 path 下的语言
+ '/': { lang: 'en-US', title: 'Blog' }, // default
+ '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
+ }
+})
+```
+
+## 主题配置
+
+在本主题中，同样使用 `locales` 配置项进行多语言配置。
+
+`locales` 支持 所有主题配置项。
+
+```js
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
+
+export default defineUserConfig({
+ lang: 'en-US',
+ locales: {
+ '/': { lang: 'en-US', title: 'Blog' }, // default
+ '/zh/': { lang: 'zh-CN', title: '博客' }, // 简体中文
+ },
+ theme: plumeTheme({
+ locales: {
+ '/': {
+ selectLanguageName: 'English',
+ navbar: [
+ { text: 'Home', link: '/' },
+ { text: 'Blog', link: '/blog/' },
+ ]
+ },
+ '/zh/': {
+ selectLanguageName: "简体中文",
+ navbar: [
+ { text: '首页', link: '/zh/' },
+ { text: '博客', link: '/zh/blog/' },
+ ]
+ }
+ }
+ })
+})
+```
diff --git a/docs/notes/theme/guide/安装与使用.md b/docs/notes/theme/guide/安装与使用.md
new file mode 100644
index 00000000..7e8dc910
--- /dev/null
+++ b/docs/notes/theme/guide/安装与使用.md
@@ -0,0 +1,177 @@
+---
+title: 安装/使用
+author: Plume Theme
+createTime: 2024/03/04 09:50:07
+permalink: /guide/quick-start/
+---
+
+## 依赖环境
+
+- [Node.js v18.16.0+](https://nodejs.org/)
+- [pnpm 8+](https://pnpm.io/zh/) 或 [Yarn 2+](https://yarnpkg.com/)
+
+::: info 提示
+- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 作为 peer-dependencies 。
+- 使用 [Yarn 2+](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
+:::
+
+## 安装
+
+使用本主题，你需要首先新建一个项目，并安装`vuepress@next`以及本主题
+
+### 步骤 1
+
+**创建一个新文件夹，并进入目录**
+
+``` sh
+mkdir my-blog
+cd my-blog
+```
+
+### 步骤 2
+
+**初始化项目**
+
+::: code-tabs
+@tab pnpm
+``` sh
+git init
+pnpm init
+```
+@tab yarn
+``` sh
+git init
+yarn init
+```
+@tab npm
+``` sh
+git init
+npm init
+```
+:::
+
+### 步骤 3
+
+**安装相关依赖**
+
+安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。
+
+::: code-tabs
+@tab pnpm
+```sh
+# 安装 vuepress
+pnpm add -D vuepress@next vue
+# 安装 主题和打包工具
+pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
+```
+@tab yarn
+``` sh
+# 安装 vuepress
+yarn add -D vuepress@next
+# 安装 主题和打包工具
+yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
+```
+
+@tab npm
+``` sh
+# 安装 vuepress
+npm i -D vuepress@next
+# 安装 主题和打包工具
+npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
+```
+:::
+
+### 步骤 4
+
+**在 `package.json` 中添加 `script`**
+
+::: code-tabs
+@tab package.json
+``` json
+{
+ "scripts": {
+ "dev": "vuepress dev docs",
+ "build": "vuepress build docs"
+ }
+}
+```
+:::
+
+`vuepress` 默认将文档源码放在 `docs` 目录下。
+
+### 步骤 5
+
+**将默认的临时目录和缓存目录添加到`.gitignore` 文件中**
+
+::: code-tabs
+@tab .gitignore
+``` txt
+node_modules
+.temp
+.cache
+```
+@tab sh
+``` sh
+echo 'node_modules' >> .gitignore
+echo '.temp' >> .gitignore
+echo '.cache' >> .gitignore
+```
+:::
+
+### 步骤 6
+
+**在 `.vuepress/config.{js,ts}` 中配置主题**
+
+::: code-tabs
+@tab .vuepress/config.js
+``` ts
+import { defineUserConfig } from 'vuepress'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ // 请不要忘记设置默认语言
+ lang: 'zh-CN',
+ theme: plumeTheme({
+ // more...
+ }),
+ bundler: viteBundler(),
+})
+```
+:::
+
+### 步骤 7
+
+**在 `docs` 目录下新建 `README.md` 文件**
+
+声明首页配置。
+::: code-tabs
+@tab README.md
+``` md
+---
+home: true
+---
+```
+:::
+
+### 步骤 8
+
+**在本地服务器启动你的文档站点**
+
+::: code-tabs
+@tab pnpm
+```sh
+pnpm dev
+```
+@tab yarn
+``` sh
+yarn dev
+```
+
+@tab npm
+``` sh
+npm run dev
+```
+:::
+
+ Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
diff --git a/docs/notes/theme/guide/知识笔记.md b/docs/notes/theme/guide/知识笔记.md
new file mode 100644
index 00000000..903aec5a
--- /dev/null
+++ b/docs/notes/theme/guide/知识笔记.md
@@ -0,0 +1,67 @@
+---
+title: 文档/知识笔记
+author: pengzhanbo
+createTime: 2024/03/04 15:45:34
+permalink: /guide/document/
+---
+
+## 概述
+
+在本主题满足了 Blog的基本功能后，期望能够 以 note 或者 book 的形式聚合文章，形式上类似于 vuepress 默认主题。
+同时也减少配置的复杂度。
+
+它能够让你以更加友好的方式，组织管理你的文档，或者 知识笔记。
+
+## 目录
+
+文档/知识笔记 默认存放在 `{sourceDir}/notes` 目录下。
+
+示例：
+
+```
+{sourceDir}/
+├─ notes/
+ ├─ typescript/
+ │ ├─ foo.md
+ ├─ rust/
+ │ ├─ foo.md
+```
+
+其中，`typescript` 和 `rust` 为目录名，各自独立保存与之相关的 markdown 文件。
+
+## 配置
+
+```js
+import { defineUserConfig } from 'vuepress'
+import { themePlume } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: themePlume({
+ notes: {
+ dir: '/notes/', // 声明所有笔记的目录
+ link: '/', // 声明所有笔记默认的链接前缀， 默认为 '/'
+ notes: [
+ {
+ dir: 'typescript', // 声明笔记的目录，相对于 `notes.dir`
+ link: '/typescript/', // 声明笔记的链接前缀
+ sidebar: [ // 配置侧边栏
+ {
+ text: '简介',
+ items: ['foo'] // 简化写法，主题会自动补全为 `foo.md`
+ }
+ ]
+ },
+ {
+ dir: 'rust',
+ link: '/rust/',
+ sidebar: [
+ { text: '简介', items: ['foo'] }
+ ]
+ }
+ ]
+ }
+ })
+})
+```
+
+主题会根据配置，为对应目录中的 md 文件，生成 永久链接，以及侧边栏。
diff --git a/docs/notes/theme/guide/组件.md b/docs/notes/theme/guide/组件.md
new file mode 100644
index 00000000..9a3ede75
--- /dev/null
+++ b/docs/notes/theme/guide/组件.md
@@ -0,0 +1,63 @@
+---
+title: 组件
+author: pengzhanbo
+createTime: 2024/03/06 09:42:42
+permalink: /guide/features/component/
+---
+
+## `<Badge />` <Badge type="tip" text="badge" />
+
+### Props
+
+- `type`
+ - 类型： `'info' | 'tip' | 'warning' | 'danger'`
+ - 默认值：`'tip'`
+- `text`
+ - 类型：`string`
+ - 默认值：`''`
+
+**输入：**
+
+```md
+- VuePress - <Badge type="info" text="v2" />
+- VuePress - <Badge type="tip" text="v2" />
+- VuePress - <Badge type="warning" text="v2" />
+- VuePress - <Badge type="danger" text="v2" />
+```
+
+**输出：**
+
+- VuePress - <Badge type="info" text="v2" />
+- VuePress - <Badge type="tip" text="v2" />
+- VuePress - <Badge type="warning" text="v2" />
+- VuePress - <Badge type="danger" text="v2" />
+
+## `<Iconify />`
+
+支持 iconify 所有图标，支持通过 icon name 加载图标，可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
+
+### Props
+
+- `name`
+ - 类型：`string`
+ - 默认值：`''`
+- `color`
+ - 类型：`string`
+ - 默认值：`'currentColor'`
+- `size`
+ - 类型：`string`
+ - 默认值：`'1em'`
+
+**输入：**
+
+```md
+- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
+- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
+- twitter - <Iconify name="skill-icons:twitter" size="2em" />
+```
+
+**输出：**
+
+- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
+- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
+- twitter - <Iconify name="skill-icons:twitter" size="2em" />
diff --git a/docs/notes/theme/guide/编写文章.md b/docs/notes/theme/guide/编写文章.md
new file mode 100644
index 00000000..67478124
--- /dev/null
+++ b/docs/notes/theme/guide/编写文章.md
@@ -0,0 +1,51 @@
+---
+title: 编写文章
+author: Plume Theme
+createTime: 2024/03/04 10:06:06
+permalink: /guide/write/
+---
+
+
+::: info 提示
+以下内容中，以 `sourceDir` 表示 项目中用于保存 `Markdown` 文件的目录。
+
+如 `package.json`的`scripts` 中配置的 `vuepress dev src`，则表示 `sourceDir` 为 `src` 目录
+:::
+
+## 约定
+
+使用本主题编写文章是一件很轻松的事情，你可以在 `sourceDir`目录中按照你的个人命名喜好新建任意名字的`Markdown`文件，
+主题将会自动帮你生成一个文章永久链接，并保存在文章的配置中，以便随时修改。
+
+对于 `sourceDir` 中的文件夹命名，主题有一套简单的约定。
+
+- 文件夹的名称将作为 `category` 即 __分类__。
+- 允许多级目录，子级目录将作为父目录对应的分类的子项。
+- 如果目录名称 在 [主题配置 notes](/vuepress-theme-plume/theme-config/#notes) 中声明用于 notes 文章管理，则默认不作为 分类目录。
+
+### 文件夹命名约定
+
+由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名
+``` ts
+const dir = /\d+\.[^]+/
+// 即 数字 + . + 分类名称
+// 如： 1.前端
+```
+数字将作为 __排序__ 的依据。 如果不带数字，则以默认的规则进行排序。
+
+__example:__
+``` txt
+ .{sourceDir}
+ - 1.前端
+ - 1.html
+ - 2.css
+ - 3.javascript
+ - 2.后端
+ - 运维
+```
+
+
+## 文章写作
+
+你可以使用 `markdown` 语法开始在 `sourceDir` 下新建 `Markdown` 文件，编写你自己的文章了，
+关于 markdown 扩展的功能支持，请查看 [这个文档](/guide/markdown/)。
diff --git a/docs/notes/theme/guide/自定义样式.md b/docs/notes/theme/guide/自定义样式.md
new file mode 100644
index 00000000..e59574fc
--- /dev/null
+++ b/docs/notes/theme/guide/自定义样式.md
@@ -0,0 +1,69 @@
+---
+title: 自定义样式
+author: pengzhanbo
+createTime: 2024/03/04 20:18:52
+permalink: /guide/custom-style/
+---
+
+
+## 主题定制
+
+支持自定义样式。
+
+该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。
+
+主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器。
+
+用户可以通过 [style 文件](#style-文件) 来添加额外的样式。
+
+## Style 文件
+
+Style 文件的路径是 `.vuepress/styles/index.scss` 。
+
+你可以在这里添加额外的样式，或者覆盖默认样式：
+
+``` scss
+:root {
+ scroll-behavior: smooth;
+}
+```
+
+你也可以利用它来覆盖默认主题的预定义 CSS 变量。
+
+以下是部分预定义变量， 完整列表请参考 [vars.scss](https://github.com/pengzhanbo/vuepress-theme-plume/blob/main/theme/src/client/styles/vars.scss)
+```scss
+:root {
+ /** 主题颜色 */
+ --vp-c-brand-1: #5086a1;
+ --vp-c-brand-2: #6aa1b7;
+ --vp-c-brand-3: #8cccd5;
+ --vp-c-brand-soft: rgba(131, 208, 218, 0.314);
+
+ /** 背景颜色 */
+ --vp-c-bg: #ffffff;
+ --vp-c-bg-alt: #f6f6f7;
+ --vp-c-bg-elv: #ffffff;
+ --vp-c-bg-soft: #f6f6f7;
+
+ /** 文本颜色 */
+ --vp-c-text-1: rgba(60, 60, 67);
+ --vp-c-text-2: rgba(60, 60, 67, 0.78);
+ --vp-c-text-3: rgba(60, 60, 67, 0.56);
+}
+
+.dark {
+ --vp-c-brand-1: #8cccd5;
+ --vp-c-brand-2: #6aa1b7;
+ --vp-c-brand-3: #5086a1;
+ --vp-c-brand-soft: rgba(131, 208, 218, 0.314);
+
+ --vp-c-bg: #1b1b1f;
+ --vp-c-bg-alt: #161618;
+ --vp-c-bg-elv: #202127;
+ --vp-c-bg-soft: #202127;
+
+ --vp-c-text-1: rgba(255, 255, 245, 0.86);
+ --vp-c-text-2: rgba(235, 235, 245, 0.6);
+ --vp-c-text-3: rgba(235, 235, 245, 0.38);
+}
+```
diff --git a/docs/notes/theme/guide/自定义首页.md b/docs/notes/theme/guide/自定义首页.md
new file mode 100644
index 00000000..d7322c76
--- /dev/null
+++ b/docs/notes/theme/guide/自定义首页.md
@@ -0,0 +1,517 @@
+---
+title: 自定义首页
+author: pengzhanbo
+createTime: 2024/03/02 10:44:03
+permalink: /guide/custom-home/
+---
+
+## 概述
+
+主题提供了十分灵活的方式来自定义首页。你可以根据你的需求来定制你的首页。
+
+主题通过 `frontmatter` 来定义你的首页。在 `sourceDir` 的 `README.md` 文件中，编写 `frontmatter`。
+
+::: code-tabs
+@tab README.md
+```md
+---
+home: true
+config:
+ - type: custom
+---
+```
+:::
+
+主题 遵循 流式布局的方式来渲染首页，将 首页 在 垂直方向上划分为一个个独立的区域，每个区域应用不同的组件。
+
+通过 `config` 属性，以 数组 的形式，可以定义多个区域。通过 `type` 字段，可以定义该区域的类型。
+主题内置了 `banner`， `hero`，`text-image`，`image-text`，`features`，`profile`，`custom` 等不同的类型，
+你可以随意组合使用它们，组装成你的自定义首页。
+如果它们均不满足你的需求，你也可以 编写自定义组件，来自定义你的首页。
+
+## 配置
+
+### home
+
+- 类型： `boolean`
+
+声明该页面是否为首页
+
+### config
+
+- 类型： `PlumeHomeConfig[]`
+- 默认值： `[]`
+
+根据数组的顺序定义页面的区域内容。
+
+```ts
+interface PlumeHomeConfigBase {
+ /**
+ * 该区域的类型，根据类型应用不同的组件
+ */
+ type: 'banner' | 'hero' | 'text-image' | 'image-text' | 'features' | 'profile' | 'custom' | string
+ /**
+ * 该区域是否占满全屏
+ */
+ full?: boolean
+ /**
+ * 该区域的背景图片
+ * 你可以定义在 浅色/暗色 模式下的背景图片
+ */
+ backgroundImage?: string | { light: string, dark: string }
+ /**
+ * 该区域的背景 定位方式
+ */
+ backgroundAttachment?: 'fixed' | 'local'
+}
+```
+
+## 区域类型
+
+### banner
+
+- 类型： `PlumeThemeHomeBanner`
+
+大屏 banner， 适用于放置在 首页的 首位。
+
+```ts
+interface PlumeThemeHomeBanner extends PlumeHomeConfigBase {
+ type: 'banner'
+ /**
+ * 背景大图
+ */
+ banner?: string
+ /**
+ * 取值范围： 0 - 1。配置首页 banner 大图的遮罩蒙版不透明度。
+ * 支持配置 浅色/深色 模式下 的不同值。当值为 0 时，不显示遮罩蒙版。
+ * 这在首页首屏大图比较亮时，可以适当使图片看起来暗一些。
+ */
+ bannerMask?: number | { light?: number, dark?: number }
+
+ hero?: {
+ name: string
+ tagline?: string
+ text?: string
+ actions?: {
+ theme?: 'brand' | 'alt'
+ text: string
+ link?: string
+ }
+ }
+}
+```
+
+**示例：**
+
+```md
+---
+home: true
+config:
+ -
+ type: banner
+ banner: https://file.mo7.cc/api/public/bz
+ bannerMask:
+ light: 0.1
+ dark: 0.3
+ hero:
+ name: 鹏展博
+ tagline: Front End Developer
+ text: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+ actions:
+ -
+ text: 我的博客
+ link: /blog/
+ theme: brand
+ -
+ text: Github
+ link: https://github.com/pengzhanbo
+ theme: alt
+---
+```
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-banner.png" />
+:::
+
+### hero
+
+- 类型： `PlumeThemeHomeHero`
+
+适用于 文档 类型站点，放置于 首位。
+
+```ts
+interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
+ type: 'hero'
+ hero: {
+ name: string
+ tagline?: string
+ text?: string
+ actions?: {
+ theme?: 'brand' | 'alt'
+ text: string
+ link?: string
+ }
+ }
+ /**
+ * 背景图片，"filter-blur" 为预设效果
+ */
+ background?: 'filter-blur' | string
+ /**
+ * 如果是非预设背景，可以设置背景图片的滤镜效果
+ */
+ filter?: string
+}
+```
+
+**示例**
+
+```md
+---
+home: true
+config:
+ -
+ type: hero
+ full: true
+ background: filter-blur
+ hero:
+ name: Theme Plume
+ tagline: Vuepress Next Theme
+ text: 一个简约的，功能丰富的 vuepress 文档&博客 主题
+ actions:
+ -
+ theme: brand
+ text: 快速开始 →
+ link: /
+ -
+ theme: alt
+ text: Github
+ link: https://github.com/pengzhanbo/vuepress-theme-plume
+---
+```
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-hero.png" />
+:::
+
+### features
+
+- 类型： `PlumeThemeHomeFeatures`
+
+适用于展示 特性、功能、等。
+
+```ts
+interface PlumeThemeHomeFeatures extends PlumeHomeConfigBase {
+ type: 'features'
+ title?: string
+ description?: string
+ features: PlumeThemeHomeFeature[]
+}
+
+interface PlumeThemeHomeFeature {
+ icon?: FeatureIcon
+ title: string
+ details?: string
+ link?: string
+ linkText?: string
+ rel?: string
+ target?: string
+}
+
+type FeatureIcon = string | {
+ src: string
+ alt?: string
+ width?: string
+ height?: string
+ wrap?: boolean
+} | {
+ light: string
+ dark: string
+ alt?: string
+ width?: string
+ height?: string
+ wrap?: boolean
+}
+```
+
+**示例**
+
+```md
+---
+home: true
+config:
+ -
+ type: features
+ features:
+ -
+ title: 响应式布局
+ icon: 💻
+ details: 适配移动设备，PC，平板
+ -
+ title: 博客 & 文档
+ icon: 📖
+ details: 无论是想写博客，或想写产品文档，或者两者兼顾
+ -
+ title: 开箱即用
+ icon: 🚀
+ details: 支持零配置即可使用，也支持丰富的自定义配置
+ -
+ title: 多语言
+ icon: ⚖
+ details: 内置了 中文/英文支持，还可以自定义添加更多的语言支持
+ -
+ title: 双色主题
+ icon: 👨💻
+ details: 支持 浅色/深色 主题，包括代码高亮
+ -
+ title: 插件
+ icon: 📦
+ details: 内置丰富的插件，一站式解决网站一般需求
+ -
+ title: 搜索、评论
+ icon: 🔍
+ details: 支持多种评论系统，支持本地搜索、Algolia搜索
+ -
+ title: 加密
+ icon: 🔒
+ details: 支持全站加密、部分加密（加密目录、加密文章）
+ -
+ title: Markdown 增强
+ icon: 📝
+ details: 支持 Markdown 语法，支持 代码块分组、提示容器、任务列表、数学公式、代码演示等
+---
+```
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-features.png" />
+:::
+
+
+### text-image | image-text
+
+- 类型： `PlumeThemeHomeTextImage`
+
+左右布局的 文本 和 图片。
+
+```ts
+interface PlumeThemeHomeTextImage extends PlumeHomeConfigBase {
+ type: 'text-image' | 'image-text'
+ image: PlumeThemeImage
+ width?: number | string
+ title?: string
+ description?: string
+ list: (string | { title?: string, description?: string })[]
+}
+
+type PlumeThemeImage =
+ | string
+ | { src: string, alt?: string }
+ | { dark: string, light: string, alt?: string }
+```
+
+**示例**
+
+```md
+---
+home: true
+config:
+ -
+ type: image-text
+ title: 功能
+ description: 内置丰富的功能，满足网站一般需求。
+ image: /images/plume-1.svg
+ list:
+ -
+ title: 文章信息
+ description: 为文章添加标签、分类、字数统计、阅读时间、写作日期等信息。
+ -
+ title: 评论
+ description: 支持 4 种评论系统，你可以自由选择符合你的需求的评论系统。
+ -
+ title: 搜索
+ description: 支持基于 minisearch 的本地搜索， 支持Algolia搜索。
+ -
+ title: 加密
+ description: 支持全站加密、部分加密（加密目录、加密文章）。
+ -
+ title: 代码复制
+ description: 一键复制代码块中的内容
+ -
+ type: text-image
+ title: 博客
+ description: 主题默认支持博客，生成你的个人博客。
+ image: /images/plume-2.svg
+ list:
+ -
+ title: 文章列表
+ description: 通过文章写作日期，自动排序并生成博客文章列表页。
+ -
+ title: 博主信息
+ description: 自定义名称、座右铭、头像，社交媒体链接。
+ -
+ title: 标签、归档
+ description: 自动生成标签页，为文章根据年份进行归档。
+---
+```
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-image-text.png" />
+:::
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-text-image.png" />
+:::
+
+### profile
+
+- 类型： `PlumeThemeHomeProfile`
+
+展示个人信息。
+
+```ts
+interface PlumeThemeHomeProfile extends PlumeHomeConfigBase {
+ type: 'profile'
+ name?: string
+ description?: string
+ avatar?: PlumeThemeImage
+ circle?: boolean
+}
+
+type PlumeThemeImage =
+ | string
+ | { src: string, alt?: string }
+ | { dark: string, light: string, alt?: string }
+```
+
+**示例**
+
+```md
+---
+home: true
+config:
+ -
+ type: profile
+ name: pengzhanbo
+ description: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+ avatar: /images/avatar.png
+---
+```
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-profile.png" />
+:::
+
+### custom
+
+- 类型： `PlumeThemeHomeCustom`
+
+自定义内容，在 `README.md` 的 文件中，编写的 markdown 内容，将会被插入到 对应的区域。
+
+```ts
+interface PlumeThemeHomeCustom extends PlumeHomeConfigBase {
+ type: 'custom'
+}
+```
+
+**示例**
+
+````md
+---
+home: true
+config:
+ -
+ type: custom
+---
+
+### 安装
+
+:::code-tabs
+@tab pnpm
+```sh
+pnpm add vuepress@next vuepress-theme-plume vue
+```
+@tab npm
+```sh
+npm install vuepress@next vuepress-theme-plume
+```
+@tab yarn
+```sh
+yarn add vuepress@next vuepress-theme-plume
+```
+:::
+````
+
+**效果**
+
+:::demo-wrapper img no-padding
+<img src="/images/custom-content.png" />
+:::
+
+## 自定义区域类型
+
+当主题内置的区域类型不足以满足你的需求时，你可以自定义区域类型。
+
+每一个自定义区域类型，本质上都是一个组件。
+
+一个 简单的实例如下：
+
+::: code-tabs
+@tab your-component.vue
+```vue
+<script setup lang="ts">
+import { HomeBox, type PlumeHomeConfigBase } from 'vuepress-theme-plume/client'
+
+const props = defineProps<PlumeHomeConfigBase & {
+ // 组件 props, frontmatter 中的属性将会传递给组件
+}>()
+</script>
+
+<template>
+ <HomeBox
+ :type="type"
+ :background-image="backgroundImage"
+ :background-attachment="backgroundAttachment"
+ :full="full"
+ >
+ <!-- 自定义你的内容 -->
+ <div>...</div>
+ </HomeBox>
+</template>
+```
+:::
+
+在 `.vuepress/client.ts` 在 `enhance` 钩子中添加 组件
+::: code-tabs
+@tab .vuepress/client.ts
+```ts
+import { defineClientConfig } from 'vuepress/client'
+import YourComponent from 'your-component.vue'
+
+export default defineClientConfig({
+ enhance({ app }) {
+ app.component('your-component', YourComponent)
+ },
+})
+```
+:::
+
+然后，你就可以在 `README.md` 中使用 `your-component` 了。
+
+```md
+---
+home: true
+config:
+ -
+ type: 'your-component'
+ # ...
+---
+```
diff --git a/docs/notes/theme/guide/评论.md b/docs/notes/theme/guide/评论.md
new file mode 100644
index 00000000..0d0f980f
--- /dev/null
+++ b/docs/notes/theme/guide/评论.md
@@ -0,0 +1,41 @@
+---
+title: 评论
+author: pengzhanbo
+createTime: 2024/03/04 11:58:59
+permalink: /guide/features/comments/
+---
+
+
+## 概述
+
+文章评论由 [vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 提供支持。
+
+在本主题中，通过以下字段进行配置：
+
+```ts
+// .vuepress/config.ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+ theme: plumeTheme({
+ plugins: {
+ comment: {
+ // comment options
+ }
+ }
+ })
+})
+```
+
+### 服务提供商
+
+[vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment2/zh) 支持
+`"Artalk“ | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
+
+你可以根据自己的需求进行配置。
+
+- `Giscus` 是一个基于 GitHub Discussion 的评论系统，启用简便。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/giscus.html)
+- `Waline` 是一个 需要后端的评论系统，安全性较高。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/waline.html)
+- `Twikoo` 一个简洁、安全、免费的静态网站评论系统，基于 腾讯云开发。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/twikoo.html)
+- `Artalk` 是一款简洁的自托管评论系统，你可以在服务器上轻松部署并置入前端页面中。[查看文档](https://plugin-comment2.vuejs.press/zh/guide/artalk.html)
diff --git a/docs/notes/theme/snippet/snippet-1.js b/docs/notes/theme/snippet/snippet-1.js
new file mode 100644
index 00000000..41715495
--- /dev/null
+++ b/docs/notes/theme/snippet/snippet-1.js
@@ -0,0 +1 @@
+export const a = 1
diff --git a/docs/notes/vuepress-plugin/caniuse/README.md b/docs/notes/vuepress-plugin/caniuse/README.md
deleted file mode 100644
index a37c0ab4..00000000
--- a/docs/notes/vuepress-plugin/caniuse/README.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: plugin-caniuse
-createTime: 2022/05/13 01:02:51
-author: pengzhanbo
-permalink: /note/vuepress-plugin/caniuse/
----
-
-项目地址： [vuepress-plugin-caniuse](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-caniuse)
-
-
-
-
-
-## 指南
-
-为你的 vuepress 站点，在编辑 技术文章时， 提供 嵌入 [can-i-use](https://caniuse.com/) WEB feature 各平台支持说明图标 的功能。
-
-方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。
-
-## 安装
-
-::: code-tabs
-@tab npm
-``` sh
-npm install @vuepress-plume/vuepress-plugin-caniuse
-```
-
-@tab:active yarn
-``` sh
-yarn add @vuepress-plume/vuepress-plugin-caniuse
-```
-
-@tab pnpm
-``` sh
-pnpm add @vuepress-plume/vuepress-plugin-caniuse
-```
-
-:::
-
-## 使用
-
-### Step1：添加插件
-
-将插件添加到你的 vuepress 项目的配置文件中：
-
-::: code-tabs
-@tab .vuepress/config.ts
-``` ts {2,6}
-import { defineUserConfig } from 'vuepress'
-import { caniusePlugin } from '@vuepress-plume/vuepress-plugin-caniuse'
-
-export default defineUserConfig({
- plugins: [
- caniusePlugin()
- ]
-})
-```
-
-@tab .vuepress/config.js
-``` js {1,5}
-const { caniusePlugin } = require('@vuepress-plume/vuepress-plugin-caniuse')
-
-module.exports = {
- plugins: [
- caniusePlugin()
- ]
-}
-```
-
-:::
-
-### Step2：在markdown中使用
-
-在你的 文章 markdown文件中，使用以下格式：
-
-``` md
-::: caniuse <feature>
-:::
-```
-
-__示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：__
-
-``` md
-::: caniuse css-matches-pseudo
-:::
-```
-效果：
-
-
-::: caniuse css-matches-pseudo
-:::
-
-## Method
-
-`caniusePlugin([options])`
-
-插件注册函数
-
-__options:__ `[CanIUsePluginOptions]`
-
-- `options.mode`: 配置 can-i-use 在 文章中的 嵌入模式, 默认： `image`
- - `image`： 嵌入 特性图表图片
- - `embed`: 嵌入 iframe， 实时的，可交互的模式
diff --git a/docs/notes/vuepress-plugin/netlify-functions/API.md b/docs/notes/vuepress-plugin/netlify-functions/API.md
deleted file mode 100644
index 6943f8d1..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/API.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: API
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/api/
----
-
-## netlifyFunctionsPlugin(options)
-
-在 vuepress 项目中使用， 或者 开发vuepress-theme时使用，提供 netlify-functions 开发时服务。
-
-该插件应该优先于其他有依赖该插件的其他插件之前调用。
-
-``` js
-netlifyFunctionsPlugin({
- sourceDirectory: '',
- destDirectory: '',
- proxyPrefix: '',
-})
-```
-
-### options
-
-__类型：__ `{ sourceDirectory: string, destDirectory: string, proxyPrefix: string }`
-
-- `options.sourceDirectory`:
-
- `functions` 开发时所在目录， 默认值： `app.dir.source('.vuepress/functions')`,
- 即，如果你的vuepress项目源码目录是 `src`， 那么 `sourceDirectory` 默认为 `src/.vuepress/functions/`
-
-- `options.destDirectory`:
-
- `functions` 构建后输出目录，默认值： `app.dir.dest('functions')`,
- 即，如果你的 vuepress项目配置的 `dest` 输出目录为 `docs`， 那么默认输出目录为 `docs/functions`,
- 一般来说，这个配置不需要手动修改。
-
-- `options.proxyPrefix`:
-
- 在开发环境中， `Netlify Functions` 服务的默认路径是 `/.netlify/functions/*`, 但这并不能保持开发环境和
- 生产部署环境一致，所以需要将路径重写。
-
- 默认值： `/api`
-
- 即 `^/api/*` 的请求会被转发到 `/.netlify/functions/*` ，
- 如, `functions/my_function.ts` ，则请求 `/api/my_function` 将会转发到 `/.netlify/functions/my_function`。
-
-
-
-## useNetlifyFunctionsPlugin(app, options)
-
-在开发 vuepress plugin 时使用，为插件提供 `netlify functiosn` 支持
-
-``` ts
-import { useNetlifyFunctionsPlugin } from '@vuepress-plume/vuepress-plugin-netlify-functions'
-
-const myPlugin = (): Plugin => {
- return (app: App) => {
- const {
- // 请求前缀, 默认 /api
- proxyPrefix,
- preparePluginFunctions,
- generatePluginFunctions
- } = useNetlifyFunctionsPlugin(app, {
- // 指定插件的functions目录，相关脚本在此目录中开发
- directory: path.resolve(__dirname, 'functions')
- })
- return {
- name: 'vuepress-plugin-myPlugin',
- onPrepared:() => preparePluginFunctions(),
- onGenerated: () => generatePluginFunctions(),
- }
- }
-}
-```
-
-### options
-
-__类型：__ `{ directory: string }`
-
-- `options.directory`
-
- 插件中的 functions 开发目录。
-
- 一般来说，它的值都设置为 `path.resolve(__dirname, 'functions')`
-
diff --git a/docs/notes/vuepress-plugin/netlify-functions/README.md b/docs/notes/vuepress-plugin/netlify-functions/README.md
deleted file mode 100644
index ea7df1bb..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: 指南
-createTime: 2022/05/13 01:28:38
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/
----
-
-项目地址： [vuepress-plugin-caniuse](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-netlify-functions)
-
-
-
-
-
-如果你的 vuepress 站点是部署在 netlify 的，而且希望能够使用netlify functions 来做 serverless。
-
-那么你可能需要本插件提供支持。
-
-本插件仅 提供 `Netlify Functions` 开发环境和 打包构建 支持，不提供具体的 `functions` 函数。
-
-- 你可以基于此插件 在你的 vuepress 项目中 自定义 `functions`
-- 也可以基于此插件作为你的 vuepress plugin 依赖，开发自定义 `functions` 提供给其他 vuepress项目使用。
-
-## 安装
-
-::: code-tabs
-@tab npm
-``` sh
-npm install @vuepress-plume/vuepress-plugin-netlify-functions
-```
-
-@tab yarn:active
-``` sh
-yarn add @vuepress-plume/vuepress-plugin-netlify-functions
-```
-
-@tab pnpm
-``` sh
-pnpm add @vuepress-plume/vuepress-plugin-netlify-functions
-```
-
-:::
diff --git a/docs/notes/vuepress-plugin/netlify-functions/functions开发指南.md b/docs/notes/vuepress-plugin/netlify-functions/functions开发指南.md
deleted file mode 100644
index 5b15a64e..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/functions开发指南.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: functions开发指南
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/develop-functions/
----
-
-## 说明
-
-### 在一个 vuepress 项目中
-
-在默认配置下，如果你 packages.json
-``` json
-{
- "scripts": {
- "serve": "vuepress dev src",
- "build": "vuepress build src"
- }
-}
-```
-即， 你的 `sourceDir` 为 `src` 目录， 那么，你的functions目录则为 `src/.vuepress/functions`。
-
-在这个目录下，直属的 `ts/js` 文件，均为一个个独立的 `function`， 不包括这个目录下的子目录。
-
-``` sh
-src/.vuepress/functions
-├─my_function.ts # 这是一个function 通过 /api/my_function 调用
-├─verify_phone.ts # 这是一个 function， 通过 /api/verify_phone 调用
-└─utils # 子目录中的不会被识别为function
- └─index.ts
-```
-
-### 在一个 vuepress plugin 项目中
-
-以官方仓库插件的基本组织结构为例
-``` sh
-src/node
-├─functions
-│ ├─my_function.ts # 这是一个function 通过 /api/my_function 调用
-│ ├─verify_phone.ts # 这是一个 function， 通过 /api/verify_phone 调用
-│ └─utils # 子目录中的不会被识别为function
-│ └─index.ts
-├─index.ts
-└─plugin.ts # 在这个文件中配置了 directory 为 path.resolve(__dirname, 'functions')
-```
-
-## 依赖
-
-如果你是使用 typescript 作为开发语言，那么可以引入 `@netlify/functions` 模块提供类型检查支持。
-
-如果你的 function 依赖其他的第三方模块，请在配置在项目`package.json` 的 `dependencies` 字段中作为生产依赖。
-
-如果你是通过插件提供 function，请在 插件的使用指南中 说明，你的插件function依赖了哪些第三方模块，
-提醒使用者安装这些依赖。
-
-## function
-
-`functions` 通过 导出一个 `handler` 函数 提供给 云函数服务调用。
-
-一个 function 的内容一般如下：
-
-- 异步函数
-
- 在异步函数中，支持直接返回一个对象作为 响应体报文
-
- ``` ts
- import { Handler } from '@netlify/functions'
- export const handler: Handler = async function (event, context) {
- // do something
- return {
- statusCode: 200,
- body: JSON.stringify({})
- }
- }
- ```
-
-- 非异步函数
-
- 在非异步函数中，通过 `callback` 函数参数返回响应体报文
-
- ``` ts
- import { Handler } from '@netlify/functions'
- export const handler: Handler = function (event, context, callback) {
- // do something
- callback{
- statusCode: 200,
- body: JSON.stringify({})
- })
- }
- ```
-
-## 示例
-
-[plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection)
-页面访问次数插件
diff --git a/docs/notes/vuepress-plugin/netlify-functions/介绍.md b/docs/notes/vuepress-plugin/netlify-functions/介绍.md
deleted file mode 100644
index 6f6ea714..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/介绍.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: 介绍
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/intro/
----
-
-## Why
-
-### Netlify
-
-[Netlify](https://www.netlify.com/) 是一个提供了免费部署静态站点的平台，可用于作为 `github page` 的替代工具。
-
-在 `Netlify` 上面部署站点也非常方便，可以直接使用 `github` 仓库进行 构建并部署，同时支持 自定义域名。
-
-还提供了 `Netlify Functions` 等工具，可以用于给站点提供 自定义云函数。
-
-### VuePress
-
-`vuepress` 是一个很方便的静态网站构建工具，使我们可以直接书写 markdown后，构建为一个高可用的静态站点。
-
-### 部署
-
-一般情况下，当我们不希望购买一个服务器用于部署我们的站点时，通常都会选择使用 `github page` 来进行免费部署。
-`Netlify` 是一种替代方案，而且当使用 `Netlify` 部署时，还可以利用 `Netlify Functions` 提供的云函数功能，
-使站点能够进行更为丰富的交互。
-
-### 场景
-
-通过 `Functions` 连接到 一些提供了 免费服务的 云存储服务，比如 `FireBase` ，`Lean Cloud` 等。
-虽然这些云存储服务提供了 Web 客户端直连服务的功能。但毕竟我们的站点源码是直接放在 `github`开源仓库中，
-我们不希望将 这些 云存储服务 提供的一些 鉴权信息 直接 保存在 仓库代码中，带来某些安全风险。
-
-在这种场景下，就可以借助 `Netlify Functions` ，将这些鉴权信息，作为 `环境变量` ，
-托管在 `Netlify Environment Variables` 中，然后通过 站点调用 `Functions` 来获取这些鉴权信息。
-或者进一步的，直接将 云存储服务的 连接、功能等，都在 `Netlify Functions` 中完成，
-站点再调用 `Functions` 接口， 获取返回的数据。
-
-有了 `Netlify Functions` 加上 一些 第三方的 云服务支持， 可以为我们的 vuepress 站点提供更强大的支持。
-
-
-## 如何整合？
-
-在基于以上的背景，下一步就是需要将 `Netlify Functions` 能够在 我们的 `Vuepress` 项目中进行 整合了。
-
-- 如何使 `Netlify Functions` 能够在本地开发环境中进行调试。
-- 如何将 已开发好的 `Functions` 作为 `vuepress plugin` 提供给 其他 `vuepress theme` 或 `vuepress` 站点中使用。
-
-### 开发环境
-
-本插件在 vuepress 的开发服务的基础上， 启动了一个 由 `netlify-cli` 提供的 服务，并将该服务通过代理的方式，
-代理到 vuepress开发服务上，统合开发环境。
-
-并且监听 functions 内容变更，实现热更新。
-
-### 打包
-
-在打包阶段， 生成一个 `netlify.toml` 配置文件，配置 functions 相关内容。
-
-并且将 所有 functions 添加在 vuepress 的构建包中。
-
-如何使用插件，请查看 [使用文档](/note/vuepress-plugin/netlify-functions/usage/)
diff --git a/docs/notes/vuepress-plugin/netlify-functions/使用.md b/docs/notes/vuepress-plugin/netlify-functions/使用.md
deleted file mode 100644
index 274204c7..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/使用.md
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: 使用
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/usage/
----
-
-## 安装
-
-::: code-tabs
-@tab npm
-``` sh
-npm install @vuepress-plume/vuepress-plugin-netlify-functions
-```
-
-@tab:active yarn
-``` sh
-yarn add @vuepress-plume/vuepress-plugin-netlify-functions
-```
-
-@tab pnpm
-``` sh
-pnpm add @vuepress-plume/vuepress-plugin-netlify-functions
-```
-:::
-
-## 在vuepress中使用
-
-
-### 添加插件
-
-在vuepress 的配置文件中 引入并 在 `plugins` 字段中添加插件。
-
-::: code-tabs
-@tab .vuepress/config.ts
-``` ts
-import { defineUserConfig } from 'vuepress'
-import { netlifyFunctionsPlugin } from '@vuepress-plume/vuepress-plugin-netlify-functions'
-export default defineUserConfig({
- //...
- plugins: [
- netlifyFunctionsPlugin(),
- ]
- // ...
-})
-```
-
-@tab .vuepress/config.js
-```js
-const { netlifyFunctionsPlugin } = require('@vuepress-plume/vuepress-plugin-netlify-functions')
-module.exports = {
- //...
- plugins: [
- netlifyFunctionsPlugin(),
- ]
- // ...
-}
-```
-
-:::
-
-### 编写 functions
-
-启动 vuepress 开发服务后， 就可以在你的 `.vuepress/functions/` 目录中，新建并开发你的 `function`
-
-[`functions` 开发指南](https://docs.netlify.com/functions/overview/)
-
-
-
-## 在 vuepress plugin 中使用
-
-### 添加插件钩子
-
-::: code-tabs
-@tab typescript
-``` ts
-import * as path from 'path'
-import { App } from '@vuepress/core'
-import { useNetlifyFunctionsPlugin } from '@vuepress-plume/vuepress-plugin-netlify-functions'
-
-const myPlugin = (): Plugin => {
- return (app: App) => {
- const {
- // 请求前缀, 默认 /api
- proxyPrefix,
- preparePluginFunctions,
- generatePluginFunctions
- } = useNetlifyFunctionsPlugin(app, {
- // 指定插件的functions目录，相关脚本在此目录中开发
- directory: path.resolve(__dirname, 'functions')
- })
- return {
- name: 'vuepress-plugin-myPlugin',
- onPrepared:() => preparePluginFunctions(),
- onGenerated: () => generatePluginFunctions(),
- }
- }
-}
-```
-
-@tab javascript
-``` js
-const path = require('path')
-const { useNetlifyFunctionsPlugin } = require('@vuepress-plume/vuepress-plugin-netlify-functions')
-
-const myPlugin = () => {
- return (app) => {
- const {
- // 请求前缀, 默认 /api
- proxyPrefix,
- preparePluginFunctions,
- generatePluginFunctions
- } = useNetlifyFunctionsPlugin(app, {
- // 指定插件的functions目录，相关脚本在此目录中开发
- directory: path.resolve(__dirname, 'functions')
- })
- return {
- name: 'vuepress-plugin-myPlugin',
- onPrepared:() => preparePluginFunctions(),
- onGenerated: () => generatePluginFunctions(),
- }
- }
-}
-```
-
-:::
-
-在你的插件开发目录，假如是以下结构：
-``` sh
-.
-└─src # 开发目录
- ├─shared
- └─node # node 端
- ├─functions # functions目录
- │ └─my_function.ts # functions脚本
- ├─plugin.ts
- └─index.ts
-```
-
-那么，就在你的 `src/node/functions` 目录下进行 functions 开发
-
-[`functions` 开发指南](https://docs.netlify.com/functions/overview/)
-
-如果你已经开发好了一个 `functions/my_function.ts` 的function。
-
-那么你可以在 client端，通过以下方式调用：
-
-``` ts
-async function fetchMyFunction() {
- const result = await fetch('/api/my_functions')
- // do something
-}
-```
-就像调用一个普通接口一个样简单。
-
-## 环境变量
-
-你可以在项目根目录中，新建一个 `.env` 文件，用于配置开发时环境变量
-
-::: warning
-这些环境变量仅用于开发环境时使用，部署生产时不会被加载。
-
-是用于在开发环境中 代替 `Netlify Environment Variables` 。
-在生产环境中，应该使用 `Netlify Environment Variables` 设置这些环境变量。
-
-如果你的 `.env` 文件中有比较私密的信息，建议将 `.env` 文件添加到 `.gitignore` 中，避免提交到 仓库中。
-:::
-
-::: code-tabs
-@tab .env
-```
-YOUR_ENV_VAR='your env var'
-```
-
-@tab functions/my_function.ts
-``` ts
-const YOUR_ENV_VAR = process.env.YOUR_ENV_VAR
-```
-
-:::
-
-
-## 示例
-
-如何使用本插件开发一个 提供 functions 的插件，这里提供了一个 例子：
-
-[plugin-page-collection](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-page-collection)
-
-可以参考此例子进行插件开发。
-
-该例子提供了以下功能：
-
-- 连接 `lean cloud`
-- 记录页面访问次数，并上报到 `lean cloud` 数据库。
-- 查询 当前页面访问次数，并提供组件嵌入到页面中。
diff --git a/docs/notes/vuepress-plugin/netlify-functions/功能.md b/docs/notes/vuepress-plugin/netlify-functions/功能.md
deleted file mode 100644
index 5d248cfa..00000000
--- a/docs/notes/vuepress-plugin/netlify-functions/功能.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: 功能
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-plugin/netlify-functions/feature/
----
-
-## 功能
-
-在启动 vuepress 开发环境后，`vuepress-plugin-netlify-functions` 插件会在 vuepress 开发服务中，
-启动一个 `netlify-functions` 服务，然后，将通过 vuepress 开发服务代理该服务。
-
-同时，启动对 `functions` 的文件监听，实现服务热更新，从而获得与 vuepress 开发服务环境一致的体验。
-
-## 服务
-
-考虑到通用性，本插件仅提供对于 `netlify functions` 的开发时和构建时支持，并不提供具体的 `functions`功能支持。
-一切`functions` 功能由插件使用者自定义。
-
-同时，还提供了给其他插件使用本插件的钩子，这使得多个插件之间或者主题，能够共享 本插件提供的基础服务。
diff --git a/docs/notes/vuepress-theme-plume/README.md b/docs/notes/vuepress-theme-plume/README.md
deleted file mode 100644
index 6ca1487e..00000000
--- a/docs/notes/vuepress-theme-plume/README.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: vuepress-theme-plume
-createTime: 2022/04/08 08:52:12
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/
-article: true
-sticky: true
----
-
-项目地址：[Vuepress-theme-plume](https://github.com/pengzhanbo/vuepress-theme-plume)
-
-
-
-
-__基于 `vuepress 2.0` 制作的 `Blog` 主题。__
-
-::: warning 提示
-
-基于 VuePress@v2, 仍处于 Beta 阶段。
-
-这意味着功能和API尚未固定，在未来的更新中仍有概率出现破坏更改。
-:::
-
-- [快速开始](/note/vuepress-theme-plume/quick-start/)
-- [配置](/note/vuepress-theme-plume/theme-config/)
-- [编写文章](/note/vuepress-theme-plume/write-article/)
-
-## 功能
-
-- 低配置化，安装后仅需少量的配置即可使用
-- markdown功能增强，支持 代码分组、嵌入代码demo、内容增强容器。
-- 支持 文章分类、标签、归档
-- 支持以文档形式整合同体系文章。
-- 支持搜索、评论
-- 自动生成文章永久链接
-
-## 安装
-
-::: code-tabs
-@tab yarn
-``` sh
-yarn add @vuepress-plume/vuepress-theme-plume
-```
-@tab npm
-``` sh
-npm i @vuepress-plume/vuepress-theme-plume
-```
-:::
-
-## 使用
-
-::: code-tabs
-@tab ts
-``` ts
-// .vuepress/config.ts
-import { defineUserConfig } from 'vuepress'
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-export default defineUserConfig({
- theme: themePlume({
- // more...
- })
-})
-```
-@tab js
-``` js
-// .vuepress/config.js
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-module.exports = {
- theme: themePlume({
- // more...
- })
-}
-```
-:::
-
-## 示例
-
-- [鹏展博 的个人博客](https://pengzhanbo.cn)
-
-## 作者的话
-
-### 背景
-开发本主题的原因，是在我个人学习 `vue@3`以及 `vite` 时，想做一个学习的笔记。
-
-在我之前使用的 vuepress1时，发现版本挺长时间没升级了，想顺手做下升级，发现 `vuepress@2` 已经出于 beta阶段，而且还是在`vue3` 和`vite` 等的基础上做的重构，而且还是使用 `typescript` 编写的代码。
-
-这刚好跟我的学习计划都撞上了，于是就开始阅读 `vuepress@2` 的相关源码，然后着手开始重构我的个人站点，并通过开发一款 主题的方式，熟悉 `vuepress2` 和 `vue3`的相关内容，简直是一举多得。
-
-当然也由于本主题是 学习过程中的作品， 很多内容在一开始并没有做完备的规划，仅是一个大概的想法，然后就进行了开发，所以截止到目前阶段，项目代码还没有进行比较严格的整理，稍显散乱；部分功能也还没有完善，出于开发中，可能在使用过程中出现一些意外情况。
-
-`vuepress`一直是我非常喜欢的一个静态文档站点制作工具，我用它在我工作中的不少项目中建立文档站点，以及编写自己的个人博客（虽然很懒经常没写...）。
-
-### 想法
-开发这个主题，我一开始的想法是希望做一个能够尽可能的少配置化的，能够更关注于写作的主题。不需要去配置 navbar、不需要去关注链接，不需要去关注配置文件中怎么去编排文章。能够仅仅通过一些简单的约定，根据目录以及文件名称，自动生成文章列表，以及自动生成文章的默认配置。
-
-以目前的进度，初期的想法基本都按照我的预期实现了，后续如果有新的想法，还会继续添加。
-
-在达到一个合适的阶段后，会将重点放在代码的整理上，希望能够让本主题也称为喜欢`vuepress`并考虑自行开发一个主题或者插件的人，给到一个项目示例的参考。
-
-::: tip 寄语
-欢迎各位使用本主题；
-
-也欢迎各位fork本主题后自行修改；
-
-也欢迎各位参考本主题，制作自己的主题。
-:::
diff --git a/docs/notes/vuepress-theme-plume/notes配置.md b/docs/notes/vuepress-theme-plume/notes配置.md
deleted file mode 100644
index 9185eb46..00000000
--- a/docs/notes/vuepress-theme-plume/notes配置.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: notes配置
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/notes-config/
----
-
-`notes` 功能，是为了在本主题满足了 Blog的基本功能后，期望能够 以 `note` 或者 `book` 的形式聚合文章而形成的，形式上类似于 `vuepress` 默认主题的功能。同时也减少了配置的复杂度。
-
-## 配置
-所有主题内部使用的插件， 均在 `notes` 字段中进行配置。
-``` js {3-5}
-module.exports = {
- themeConfig: {
- notes: {
- // this
- }
- }
-}
-```
-
-## 配置字段
-
-### dir
-
-- 类型: `string`
-- 默认值: `'_notes'`
-- 详情：所有notes存放的目录，该目录相对于`sourceDir`。
-
- 示例
- ```
- ├─ {sourceDir}
- │ ├─ _notes
- │ │ └─ typescript学习笔记
- │ └─ README.md
- ```
-
-### link
-
-- 类型： `string`
-- 默认值： `'/note/'`
-- 详情： 作为notes内的文章链接的前缀。自定义是请以 `'/'` 开头
-
-### notes
-
-- 类型： `PlumeThemeNotesItem[]`
-- 默认值： `[]`
-- 详情： note数组，配置多个 note
-
-#### `PlumeThemeNotesItem`
-``` ts
-interface PlumeThemeNotesItem {
- /**
- * note 标题
- */
- text: string
- /*
- * note 链接，相对于 前面配置的 link。
- * 如 /typescript-learn/ 映射到访问链接则为 /note//typescript-learn/
- */
- link: string
- /*
- * note 所在的目录，相对于 前面配置的 dir
- * 如 typescript 则实际路径为 {sourceDir}/_notes/typescript
- */
- dir: string
- /*
- * 当前 note 的sidebar配置
- */
- sidebar?: PlumeThemeSidebarConfigOptions | 'auto'
-}
-type PlumeThemeSidebarConfigOptions = (PlumeThemeNotesConfigItem | string)[]
-
-interface PlumeThemeNotesConfigItem {
- text: string
- link?: string
- children: PlumeThemeNotesConfigItem[]
-}
-```
-### notes\[index\].sidebar
-
-这个字段是用于配置当前 note 的 sidebar 左侧导航栏
-
-- 类型： `(PlumeThemeNotesConfigItem | string)[]`
-- 详情：
- - 如果子元素为字符串时，可以是相对于 dir目录的md文件路径，可以省略`.md`后缀，也可以是生成的文章，`frontmatter`中的
- `permalink`的链接， 如果为空，则表示当前文件夹下的 `README.md`文件
- - 如果子元素是`PlumeThemeNotesConfigItem`, 其中 `text` 表示 sidebar显示的文案，
- `link` 等价于 上一条 string 的规则。
- `children` 可以继续嵌套`(PlumeThemeNotesConfigItem | string)`
-
-## 示例
-
-在`_notes` 文件夹下用如下文件结构
-```
-_notes
-└── vuepress-theme-plume
- ├── README.md
- ├── note配置.md
- ├── 主题配置.md
- ├── 快速开始.md
- ├── 编写文章.md
- ├── 页面配置.md
- └── 主题插件配置.md
-```
-
-则可以进行如下配置：
-
-::: code-tabs
-@tab config.ts
-``` ts
-import { defineUserConfig } from 'vuepress'
-import type {PlumeThemeOptions } from '@vuepress-plume/vuepress-theme-plume'
-import notes from './notes.ts'
-export default defineUserConfig<PlumeThemeOptions>({
- themeConfig: {
- notes: {
- dir: '_notes',
- link: '/note/',
- notes,
- }
- }
-})
-```
-
-@tab notes.ts
-``` ts
-export default [
- {
- text: 'VuePress-theme-plume',
- dir: 'vuepress-theme-plume',
- link: '/vuepress-theme-plume',
- sidebar: [
- '',
- {
- text: '指南',
- children: [
- '快速开始',
- '编写文章',
- ]
- },
- {
- text: '配置',
- children: [
- {
- text: '主题配置',
- link: '主题配置',
- children: [
- '主题插件配置',
- 'notes配置',
- ]
- },
- '页面配置',
- ]
- },
- {
- text: '功能',
- children: []
- }
- ]
- }
-]
-```
-:::
-
-其效果 即为 本文档 左侧 sidebar 展示效果。
diff --git a/docs/notes/vuepress-theme-plume/主题插件配置.md b/docs/notes/vuepress-theme-plume/主题插件配置.md
deleted file mode 100644
index f8789b44..00000000
--- a/docs/notes/vuepress-theme-plume/主题插件配置.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: 主题插件配置
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/plugins-config/
----
-
-主题内置的使用的插件，扩展了主题的众多功能，你可以在这个 字段中， 实现对内部使用的各个插件的自定义配置。
-
-## 配置
-所有主题内部使用的插件， 均在 `themePlugins` 字段中进行配置。
-``` js {4-6}
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-module.exports = {
- theme: themePlume({
- themePlugins: {
- // this
- }
- })
-}
-```
-
-## 配置字段
-
-### caniuse
-
-关联插件： [@vuepress-plume/vuepress-plugin-caniuse](https://www.npmjs.com/package/@vuepress-plume/vuepress-plugin-caniuse)
-
-- 类型： `false | CanIUsePluginOptions`
-- 默认值： `{ mode: 'embed' }`
-- 详情：该插件支持在你的文章中嵌入 [can I use](https://caniuse.com/) 特性支持图表。
-
- 设置为 `false` 表示不启动该插件。
- - `caniuse.mode`: 图表嵌入模式， `embed`表示嵌入可交互式的图表， `image` 嵌入动态图片。
-- 配置示例：
- ``` js
- module.exports = {
- theme: themePlume({
- themePlugins: {
- caniuse: {
- mode: 'embed'
- },
- },
- }),
- }
- ```
-
-### externalLinkIcon
-
-关联插件： [@vuepress/plugin-external-link-icon](https://v2.vuepress.vuejs.org/zh/reference/plugin/external-link-icon.html)
-
-- 类型： `false | string`
-- 默认值： `''`
-- 详情： 该插件会为你 Markdown 内容中的外部链接添加一个图标，即 <ExternalLinkIcon />
-
- 一般来说你不需要对它进行配置
-
-### search
-
-网站内容搜索插件
-
-关联插件： [@vuepress/plugin-search](https://v2.vuepress.vuejs.org/zh/reference/plugin/search.html)
-
-详细介绍与配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/search.html)
-
-- 默认配置： `''`
-
-### docsearch
-
-使用 [Algolia DocSearch](https://docsearch.algolia.com/) 提供支持的网站内容搜索插件
-
-关联插件：[@vuepress/plugin-docsearch](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html)
-
-详细介绍与配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html)
-
-- 默认配置： `''`
-
-::: info 提示
-请勿 同时配置 `search` 和 `docsearch` ，两者的功能是类似的，且同时配置仅会使用优先使用 `search`。
-:::
-
-### prismjs
-
-代码块语法高亮插件
-
-关联插件： [@vuepress/plugin-prismjs](https://v2.vuepress.vuejs.org/zh/reference/plugin/prismjs.html)
-
-详细介绍与配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/prismjs.html)
-
-### nprogress
-
-页面切换时展示进度条。
-
-关联插件： [@vuepress/plugin-nprogress](https://v2.vuepress.vuejs.org/zh/reference/plugin/nprogress.html)
-
-详细介绍与配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/nprogress.html)
-
-### copyCode
-
-代码拷贝插件
-
-支持在代码块中进行代码复制
-
-关联插件：[vuepress-plugin-copy-code2](https://vuepress-theme-hope.github.io/v2/copy-code/)
-
-详细介绍与配置，请查阅[官方文档](https://vuepress-theme-hope.github.io/v2/copy-code/)
-
-- 默认配置：
- ``` js
- module.exports = {
- theme: themePlume({
- themePlugins: {
- copyCode: {
- selector: '.page-content div[class*="language-"] pre',
- locales: {
- '/': {
- copy: '复制成功',
- hint: '复制代码',
- },
- },
- },
- },
- }),
- }
- ```
-
-### markdownEnhance
-
-`Markdown` 功能扩展插件
-
-关联插件：[vuepress-plugin-md-enhance](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/)
-
-扩展支持：自定义容器、代码块分组、上下角标、自定义对齐、脚注、标记、任务列表、chart、流程图、代码演示 等功能。
-
-相关介绍及配置，请查阅 [官方文档](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/)
-
-- 默认配置：
- ``` js
- module.exports = {
- theme: themePlume({
- themePlugins: {
- markdownEnhance: {
- container: true, // 自定义容器 info note tip warning danger details
- codegroup: true, // 代码块分组
- align: true, // 自定义对齐
- mark: true, // 标记
- tasklist: true, // 任务列表
- demo: true, // 代码演示
- }
- }
- })
- }
- ```
-### comment
-
-评论插件
-
-关联插件： [vuepress-plugin-comment2](https://vuepress-theme-hope.github.io/v2/comment/zh/)
-
-支持使用 `giscus`、`twikoo`、`waline` 启用评论功能。
-
-相关介绍及配置，请查阅 [官方文档](https://vuepress-theme-hope.github.io/v2/comment/zh/)
-
-- 默认配置：`''`
diff --git a/docs/notes/vuepress-theme-plume/主题配置.md b/docs/notes/vuepress-theme-plume/主题配置.md
deleted file mode 100644
index 0ba8d031..00000000
--- a/docs/notes/vuepress-theme-plume/主题配置.md
+++ /dev/null
@@ -1,342 +0,0 @@
----
-title: 主题配置
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/theme-config/
----
-
-虽然本主题希望尽可能的少写配置，但还是有些配置是不可省略的，而且也是为了保证一定程度的可定制性。
-
-## 配置文件
-
-`Vuepress` 默认的配置文件是`.vuepress/config.ts`，可能你的项目配置如下，
-
-新建`.vuepress/config.ts`文件进行配置：
-```
-├─ {sourceDir}
-│ ├─ .vuepress
-│ │ └─ config.js
-│ └─ README.md
-├─ .gitignore
-└─ package.json
-```
-
-`VuePress` 支持的配置，请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/guide/configuration.html)
-
-在 `Vuepress@v2`中对于主题的配置，引入主题函数，在函数中进行配置
-::: code-tabs
-@tab ts
-``` ts {3,6-8}
-// .vuepress/config.ts
-import { defineUserConfig } from 'vuepress'
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-export default defineUserConfig({
- theme: themePlume({
- // more...
- })
-})
-```
-
-@tab js
-``` js {4-6}
-// .vuepress/config.js
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-module.exports = {
- theme: themePlume({
- // more...
- })
-}
-```
-
-:::
-
-
-## 配置
-
-### home
-
-- 类型： `false | NavLink`
-- 默认值： `{ text: '首页', link: '/' }`
-- 详情：
- 首页的路径， 它将被用于：
- - 导航栏中 logo的链接；
- - 404页面的 *返回首页* 的链接；
- - navbar 中 首页的链接。
-
-### logo
-
-- 类型: `false | string`
-- 默认值： `false`
-- 详情： 导航栏中的logo。
-
-### logoDark
-
-- 类型 `false | string`
-- 默认值： `false`
-- 详情： Dark模式下，导航栏中的logo。
-
-### darkMode
-
-- 类型： `boolean`
-- 默认值： `true`
-- 详情： 是否启用 dark模式
-
-### avatar
-
-- 类型： `PlumeThemeAvatar`
-- 默认值： `{}`
-- 详情：配置站点博主的个人信息
- - `avatar.url`: 头像地址，用于右侧博主信息展示
- - `avatar.name`: 名称， 用于右侧博主信息展示
- - `avatar.description`: 座右铭，个人描述，用于右侧博主信息展示
-- 示例：
- ``` ts
- export default {
- theme: themePlume({
- avatar: {
- url: '/avatar.jpg',
- name: '张三',
- description: '此处无银三百两，隔壁王二不曾偷',
- }
- })
- }
- ```
-
-### social
-
-- 类型： `false | PlumeThemeSocialOption`
-- 默认值： `false`
-- 详情： 个人社交信息配置。用于右侧博主信息展示，展示为社交图标。
- - `social.email`: 邮箱
- - `social.github`: 个人github地址
- - `social.QQ`: QQ账号
- - `social.weiBo`: 个人微博地址
- - `social.zhiHu`: 个人知乎地址
- - `social.facebook`: facebook地址
- - `social.twitter`: twitter 地址
- - `social.linkedin`: 领英 linkedin 地址
-- 示例：
- ``` ts
- export default {
- theme: themePlume({
- social: {
- email: 'me@email.com'，
- github: 'https://github.com/zhangsan',
- QQ: '123456789',
- }
- })
- }
- ```
-
-### article
-
-- 类型： `string`
-- 默认值： `/article/`
-- 详情： 文章链接前缀
-
-### tag
-
-- 类型： `NavLink`
-- 默认值： `{ text: '标签', link: '/tag/' }`
-- 详情： 标签页配置，与 navbar 配置
-
-### category
-
-- 类型： `NavLink`
-- 默认值： `{ text: '分类', link: '/category/ }`
-- 详情： 分类页配置，与 navbar 配置
-
-### archive
-
-- 类型： `NavLink`
-- 默认值： `{ text: '归档', link: '/timeline/' }`
-- 详情： 归档页配置，与 navbar 配置
-
-### navbar
-
-- 类型： `(NavbarItem | NavbarGroup | string)[]`
-- 默认值： `[]`
-- 详情： 导航栏配置。
-
- 为了配置导航栏元素，你可以将其设置为 导航栏数组 ，其中的每个元素是 `NavbarItem` 对象、 `NavbarGroup` 对象、或者字符串：
- - `NavbarItem` 对象应该有一个 text 字段和一个 link 字段，还有一个可选的 `activeMatch` 字段。
- - `NavbarGroup` 对象应该有一个 `text` 字段和一个 `children` 字段。 `children` 字段同样是一个 导航栏数组 。
- - 字符串应为目标页面文件的路径。它将会被转换为 `NavbarItem` 对象，将页面标题作为 `text` ，将页面路由路径作为 `link` 。
-- 示例1：
- ``` js
- module.exports = {
- theme: themePlume({
- navbar: [
- // NavbarItem
- {
- text: 'Foo',
- link: '/foo/',
- },
- // NavbarGroup
- {
- text: 'Group',
- children: ['/group/foo.md', '/group/bar.md'],
- },
- // 字符串 - 页面文件路径
- '/bar/README.md',
- ],
- }),
- }
- ```
-- 示例2：
- ``` js
- module.exports = {
- theme: themePlume({
- navbar: [
- // 嵌套 Group - 最大深度为 2
- {
- text: 'Group',
- children: [
- {
- text: 'SubGroup',
- children: ['/group/sub/foo.md', '/group/sub/bar.md'],
- },
- ],
- },
- // 控制元素何时被激活
- {
- text: 'Group 2',
- children: [
- {
- text: 'Always active',
- link: '/',
- // 该元素将一直处于激活状态
- activeMatch: '/',
- },
- {
- text: 'Active on /foo/',
- link: '/not-foo/',
- // 该元素在当前路由路径是 /foo/ 开头时激活
- // 支持正则表达式
- activeMatch: '^/foo/',
- },
- ],
- },
- ],
- }),
- }
- ```
-
-### footer
-
-- 类型： `false | { content: string; copyright: string }`
-- 默认值： `false`
-- 详情：页脚配置。
-
-### notes
-
-- 类型： `false | PlumeThemeNotesOptions`
-- 默认值： `{ link: '/note', dir: 'notes', notes: [] }`
-- 详情： 笔记配置， 笔记中的文章默认不会出现在首页文章列表
-
- 你可以将配置的notes 配置到 navbar中，以便浏览查看
-
-详细配置请查看 [此文档](/note/vuepress-theme-plume/notes-config/)
-
-### themePlugins
-
-- 类型：`PlumeThemePluginOptions`
-- 默认值： `{}`
-- 详情： 对主题内使用的插件进行自定义配置。
-
- 主题使用的插件默认已进行了配置，默认情况下不需要进行修改，如果需要使用到细致的定制化，请查阅
- [此文档](/note/vuepress-theme-plume/plugins-config/)
-
-
-## 完整示例
-
-::: code-tabs
-@tab ts
-``` ts
-import { defineUserConfig } from 'vuepress'
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-
-export default defineUserConfig({
- lang: 'zh-CN',
- locales: {
- '/': {
- lang: 'zh-CN',
- title: 'Theme Plume',
- description: 'The Theme for VuePress 2',
- },
- },
- dest: 'docs',
- head: [
- ['link', { rel: 'icon', href: '/g.gif' }],
- ['meta', { 'http-equiv': 'X-UA-Compatible', content: 'id=edg' }],
- ],
- theme: themePlume({
- logo: '/g.gif',
- darkMode: true,
- avatar: {
- name: 'theme plume',
- url: '/images/blogger.png',
- description: 'good good study, day day up !'
- },
- social: {
- email: 'me@email.com',
- github: 'https://github.com/me',
- QQ: '123456789',
- },
- navbar: [{ text: 'Theme-Plume', link: '/note/vuepress-theme-plume' }],
- notes: {
- dir: 'notes',
- link: '/note',
- },
- footer: {
- copyright: 'Copyright © 2022-present pengzhanbo',
- content: '',
- },
- }),
-})
-```
-
-@tab js
-``` js
-import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
-module.exports = {
- lang: 'zh-CN',
- locales: {
- '/': {
- lang: 'zh-CN',
- title: 'Theme Plume',
- description: 'The Theme for VuePress 2',
- },
- },
- dest: 'docs',
- head: [
- ['link', { rel: 'icon', href: '/g.gif' }],
- ['meta', { 'http-equiv': 'X-UA-Compatible', content: 'id=edg' }],
- ],
- theme: themePlume({
- logo: '/g.gif',
- darkMode: true,
- avatar: {
- name: 'theme plume',
- url: '/images/blogger.jpg',
- description: 'good good study, day day up !'
- },
- social: {
- email: 'me@email.com',
- github: 'https://github.com/me',
- QQ: '123456789',
- },
- navbar: [{ text: 'Theme-Plume', link: '/note/vuepress-theme-plume' }],
- notes: {
- dir: 'notes',
- link: '/note',
- },
- footer: {
- copyright: 'Copyright © 2022-present pengzhanbo',
- content: '',
- },
- }),
-}
-```
-
-:::
diff --git a/docs/notes/vuepress-theme-plume/基础功能.md b/docs/notes/vuepress-theme-plume/基础功能.md
deleted file mode 100644
index 89b8073d..00000000
--- a/docs/notes/vuepress-theme-plume/基础功能.md
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: 基础功能
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/basis-power/
----
-
-## 首页
-
-### 文章列表
-
-- 自动生成 文章列表，并支持文章分页功能。
-- 文章列表子项 支持显示
- - 标题
- - 作者
- - 分类
- - 标签
- - 创建时间
- - 文章内容截取
-
-### 右侧博主信息展示
-- 头像
-- 名称
-- 个人简介/座右铭
-- 个人社交账号信息
- - Email
- - github
- - 微博
- - 知乎
- - QQ
- - facebook
- - twitter
- - linkedin
-
-## 分类页
-
-根据 `${sourceDir}` 中的 文章所在目录，自动生成文章分类。
-
-并生成 分类页，可以根据分类查看文章。
-
-## 标签页
-
-支持配置 文章标签
-
-并生成 标签页， 可以根据 标签筛选文章。
-
-## 归档页
-
-根据文章创建时间，生成 文章归档页面。
-
-## 站内搜索
-
-支持站内搜索相关文章。
-
-## 深色模式
-
-支持深色模式
-
-## 主题定制
-
-支持自定义样式。
-
-该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。
-
-请查阅 [官方文档](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html)
-
-``` scss
-:root {
- // 主题颜色
- // brand color
- --c-brand: #0095d9;
- --c-brand-light: #2ca9e1;
-}
-```
-
-## 文章评论
-
-支持文章评论。
-
-## Badge
-
-- <Badge type="info" text="info" />
-- <Badge type="tip" text="Tip" />
-- <Badge type="warning" text="Warning" />
-- <Badge type="danger" text="Danger" />
-
-````md
-```js
-export default function foo() {
- console.log('foo'); // [\!code ++]
-}
-```
-````
diff --git a/docs/notes/vuepress-theme-plume/快速开始.md b/docs/notes/vuepress-theme-plume/快速开始.md
deleted file mode 100644
index 367ee0d2..00000000
--- a/docs/notes/vuepress-theme-plume/快速开始.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: 快速开始
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/quick-start/
----
-
-## 依赖环境
-
-- [Node.js v12+](https://nodejs.org/en/)
-- [Yarn v1 classic](https://classic.yarnpkg.com/en/)
-
-::: tip 提示
-- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要在 `.npmrc` 文件中设置 `shamefully-hoist=true` 。
-- 使用 [Yarn 2](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
-:::
-
-## 安装
-使用本主题，你需要首先新建一个项目，并安装`vuepress@next`以及本主题
-
-- __步骤1：__ 创建一个新文件夹，并进入目录
- ``` sh
- mkdir my-blog
- cd my-blog
- ```
-
-- __步骤2：__ 初始化项目
- ::: code-tabs
- @tab yarn
- ``` sh
- git init
- yarn init
- ```
-
- @tab npm
- ``` sh
- git init
- npm init
- ```
-
- :::
-
-- __步骤3：__ 安装相关依赖
-
- 安装 `vuepress@next`和`@vuepress-plume/vuepress-theme-plume`作为本地依赖。
-
- 如果你是希望将已有的项目进行升级，请从 `步骤5` 开始
- ::: code-tabs
- @tab yarn
- ``` sh
- yarn add -D vuepress@next @vuepress-plume/vuepress-theme-plume
- ```
-
- @tab npm
- ``` sh
- npm i -D vuepress@next @vuepress-plume/vuepress-theme-plume
- ```
-
- :::
-
-- __步骤4：__ 在`package.json`中添加`script`
-
- 比如，你希望项目中的`src`目录作为你的文章的写作目录：
- ``` json
- {
- "scripts": {
- "dev": "vuepress dev src",
- "build": "vuepress build src"
- }
- }
- ```
-- __步骤5：__ 将默认的临时目录和缓存目录添加到`.gitignore` 文件中
- ::: code-tabs
- @tab sh
- ``` sh
- echo 'node_modules' >> .gitignore
- echo '.temp' >> .gitignore
- echo '.cache' >> .gitignore
- ```
-
- @tab .gitignore
- ``` text
- node_modules
- .temp
- .cache
- ```
- :::
-
-- __步骤6：__ 在 `.vuepress/config.ts` 中配置主题
- ::: code-tabs
- @tab ts
- ``` ts {3,5-7}
- // .vuepress/config.ts
- import { defineUserConfig } from 'vuepress'
- import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
- export default defineUserConfig({
- theme: themePlume({
- // theme config
- })
- })
- ```
-
- @tab js
- ``` js {2,4-6}
- // .vuepress/config.js
- import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
- module.exports = {
- theme: themePlume({
- // theme config
- })
- }
- ```
-
- :::
-
-- __步骤7：__ 在`src` 目录下新建`README.md`文件
-
- 声明首页配置。
- ``` md
- ---
- home: true
- ---
- ```
-- __步骤8：__ 在本地服务器启动你的文档站点
- ::: code-tabs
- @tab yarn
- ``` sh
- yarn dev
- ```
-
- @tab npm
- ``` sh
- npm run dev
- ```
-
- :::
-
- Vuepress 会在 [http://localhost:8080](http://localhost:8080) 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。
-
- 现在，你应该已经有了一个简单可用的 VuePress Blog 网站。接下来，了解一下 [编写 Blog 文章](/note/vuepress-theme-plume/write-article/) 和 [主题配置](/note/vuepress-theme-plume/theme-config/) 的相关内容。
diff --git a/docs/notes/vuepress-theme-plume/编写文章.md b/docs/notes/vuepress-theme-plume/编写文章.md
deleted file mode 100644
index 873b1a61..00000000
--- a/docs/notes/vuepress-theme-plume/编写文章.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: 编写文章
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/write-article/
----
-
-::: info 注释
-- 以下内容中，以`sourceDir` 表示 项目中用于保存 `Markdown`文件的目录。
-
- 如 `package.json`的`scripts` 中 `vuepress dev src` 声明的`src`目录
-:::
-
-## 约定
-
-使用本主题编写文章是一件很轻松的事情，你可以在 `sourceDir`目录中按照你的个人命名喜好新建任意名字的`Markdown`文件，
-主题将会自动帮你生成一个文章永久链接，并保存在文章的配置中，以便随时修改。
-
-但对于 `sourceDir` 中的文件夹命名，主题有一套简单的约定。
-
-- 文件夹的名称将作为 `category` 即 __分类__。将会映射到 `navbar`作为分类的子项。
-- 允许多级目录，子级目录将作为父目录对应的分类的子项。
-- 如果目录名称 在 [主题配置 notes](/note/vuepress-theme-plume/theme-config/#notes) 中声明用于 notes 文章管理，则默认不作为 分类目录。
-
-### 文件夹命名约定
-
-由于文件夹名称将作为分类名称，且不在主题配置中进行排序配置，对于有排序需要的场景，使用以下规则进行命名
-``` ts
-const dir = /\d+\.[^]+/ // 即 数字 + dot + 分类名称
-```
-数字将作为 __排序__ 的依据。 如果不带数字，则以默认的规则进行排序。
-
-__example:__
-```
- .{sourceDir}
- - 1.前端
- - 1.html
- - 2.css
- - 3.javascript
- - 2.后端
- - 运维
-```
-
-## 博客首页
-在 `sourceDir` 目录新建`README.md` 文件，并写入以下内容即可。
-``` md
----
-home: true
----
-```
-主题会解析该文件，并插入 文章列表，以及相关内容。
-
-## 文章写作
-
-你可以使用 `markdown` 语法开始编写你自己的文章了，关于 markdown 扩展的功能支持，请查看 [这个文档](/note/vuepress-theme-plume/markdown-enhance/)。
diff --git a/docs/notes/vuepress-theme-plume/页面配置.md b/docs/notes/vuepress-theme-plume/页面配置.md
deleted file mode 100644
index 4713a448..00000000
--- a/docs/notes/vuepress-theme-plume/页面配置.md
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: 页面配置
-createTime: 2022/05/14 10:43:53
-author: pengzhanbo
-permalink: /note/vuepress-theme-plume/page-config/
----
-
-## 说明
-
-页面配置是为了能够以更细小的颗粒度控制单个页面的行为。
-
-在本主题中，当你启动本地服务器后，主题会在你新建 `markdown`文件时，自动在文件头部插入基本的配置，你可以随时修改它。
-
-`markdown`中的配置形式，如下所示：
-``` md
----
-title: 标题
-createTime: 2022/04/09 01:24:17
-author: You
-permalink: /note/vuepress-theme-plume/page-config/
-tags:
- - vuepress
----
-```
-配置内容是以 `YAML` 的格式进行书写的。
-
-## 配置字段
-
-### title
-
-- 类型： `string`
-- 默认值： `''`
-- 详情：
-
- 文章标题，启动本地服务器时，如果该字段为空，会根据当前文件名称自动生成。
-
-### createTime
-
-- 类型： `DateString` 格式 `yyyy/MM/dd hh:mm:ss`
-- 默认值： `''`
-- 详情：
-
- 文章创建时间，启动本地服务器时，如果该字段为空，会根据当前文件的创建时间自动生成
-
-### author
-
-- 类型： `string`
-- 默认值： `''`
-- 详情：
-
- 文章作者，启动本地服务器时，如果该字段为空，会根据当前项目`package.json`中的`author`字段生成
-
-### permalink
-
-- 类型： `string`
-- 默认值： `''`
-- 详情：
-
- 文章永久链接，启动本地服务器时，如果该字段为空，会根据默认规则生成。
-
- 在本主题中通过 `nanoid` 生成文章唯一链接。
-
-### tags
-
-- 类型: `string[]`
-- 默认值： `[]`
-- 详情：
-
- 文章标签，可配置多个
-- 示例：
- ``` md
- ---
- tags:
- - html
- - javascript
- ---
- ```
-### sticky
-
-- 类型： `boolean | number`
-- 默认值： `false`
-- 详情：
-
- 是否置顶当前文章。
-
- 当同时配置多篇文章置顶，如果值为number，则number越大的文章越靠前。
-
-### article
-
-- 类型： `boolean`
-- 默认值: `true`， 在`notes` 中的文章，默认值为 `false`
-- 详情：
-
- 是否将文章收录到 首页 文章列表
-
-## 首页配置字段
-
-### home
-
-- 类型： `boolean`
-- 默认值： `true`
-- 详情：
-
- 标记当前 md文件为博客首页，仅在 `{sourceDir}/README.md` 中配置即可
-
-### banner
-
-- 类型： `string`
-- 默认值： `''`
-- 详情
-
- 配置首页首屏大图
-
-
-### mobileBanner
-
-- 类型： `string`
-- 默认值：`''`
-- 详情
-
- 配置首页首屏，在移动端设备中使用的大图
-### motto
-
-- 类型： `string`
-- 默认值： `''`
-- 详情
-
- 座右铭，显示在首屏大图上
-
-``` md
----
-home: true
-banner: /images/big-banner.jpg
-motto: 世间的美好总是不期而遇，恬静而自然。
----
-```
diff --git a/docs/package.json b/docs/package.json
index 036d6fed..e9d9775e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -5,7 +5,7 @@
"scripts": {
"docs:build": "vuepress build --clean-cache",
"docs:clean": "rimraf .vuepress/.temp .vuepress/.cache .vuepress/dist",
- "docs:dev": "vuepress dev --clean-cache --clean-temp",
+ "docs:dev": "vuepress dev",
"docs:serve": "anywhere -s -h localhost -d .vuepress/dist"
},
"peerDependencies": {
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 00000000..76cbf02c
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,9 @@
+# prevent Netlify npm install
+
+[build]
+publish = "docs/.vuepress/dist"
+command = "pnpm install && pnpm build:package && pnpm docs:build"
+
+[build.environment]
+NODE_VERSION = "18"
+NPM_FLAGS = "--version"
diff --git a/package.json b/package.json
index bbce0499..7d9be2cb 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,9 @@
"pnpm": ">=7"
},
"scripts": {
- "build": "pnpm run build:package",
+ "build": "pnpm run clean && pnpm run build:package",
"build:package": "pnpm --filter=!vuepress-theme-plume-monorepo --filter=!docs --filter=!plugin-page-collection run -r --stream build",
+ "clean": "pnpm --filter=!vuepress-theme-plume-monorepo --filter=!docs --filter=!plugin-page-collection run -r --stream clean",
"dev": "concurrently \"pnpm run dev:package\" \"pnpm run docs\"",
"dev:package": "pnpm --filter=!vuepress-theme-plume-monorepo --filter=!docs --parallel dev",
"dev:theme": "concurrently \"pnpm --filter=vuepress-theme-plume dev\" \"pnpm run docs\"",
diff --git a/plugins/plugin-auto-frontmatter/package.json b/plugins/plugin-auto-frontmatter/package.json
index ba56dc35..5787a753 100644
--- a/plugins/plugin-auto-frontmatter/package.json
+++ b/plugins/plugin-auto-frontmatter/package.json
@@ -27,7 +27,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-baidu-tongji/package.json b/plugins/plugin-baidu-tongji/package.json
index 535d00b9..167db428 100644
--- a/plugins/plugin-baidu-tongji/package.json
+++ b/plugins/plugin-baidu-tongji/package.json
@@ -27,7 +27,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-blog-data/package.json b/plugins/plugin-blog-data/package.json
index aea89efd..de092bcb 100644
--- a/plugins/plugin-blog-data/package.json
+++ b/plugins/plugin-blog-data/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-caniuse/package.json b/plugins/plugin-caniuse/package.json
index e8c2630e..a705c90c 100644
--- a/plugins/plugin-caniuse/package.json
+++ b/plugins/plugin-caniuse/package.json
@@ -38,7 +38,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run ts",
+ "build": "pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"ts": "tsc -b tsconfig.build.json"
},
diff --git a/plugins/plugin-content-update/package.json b/plugins/plugin-content-update/package.json
index 9ef88efc..d1b905c2 100644
--- a/plugins/plugin-content-update/package.json
+++ b/plugins/plugin-content-update/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-copy-code/package.json b/plugins/plugin-copy-code/package.json
index a87c9f62..c0160ea7 100644
--- a/plugins/plugin-copy-code/package.json
+++ b/plugins/plugin-copy-code/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-iconify/package.json b/plugins/plugin-iconify/package.json
index d80ed62c..c65ba9a2 100644
--- a/plugins/plugin-iconify/package.json
+++ b/plugins/plugin-iconify/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-netlify-functions/package.json b/plugins/plugin-netlify-functions/package.json
index 039790b9..758ef89a 100644
--- a/plugins/plugin-netlify-functions/package.json
+++ b/plugins/plugin-netlify-functions/package.json
@@ -35,7 +35,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-notes-data/package.json b/plugins/plugin-notes-data/package.json
index 4a36de4b..827a0bb0 100644
--- a/plugins/plugin-notes-data/package.json
+++ b/plugins/plugin-notes-data/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-page-collection/package.json b/plugins/plugin-page-collection/package.json
index daee1cac..c056c4ee 100644
--- a/plugins/plugin-page-collection/package.json
+++ b/plugins/plugin-page-collection/package.json
@@ -25,7 +25,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-search/package.json b/plugins/plugin-search/package.json
index c98ec775..5dee6b60 100644
--- a/plugins/plugin-search/package.json
+++ b/plugins/plugin-search/package.json
@@ -31,7 +31,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-shikiji/package.json b/plugins/plugin-shikiji/package.json
index 60c91c54..4932631d 100644
--- a/plugins/plugin-shikiji/package.json
+++ b/plugins/plugin-shikiji/package.json
@@ -27,7 +27,7 @@
"lib"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
"ts": "tsc -b tsconfig.build.json"
diff --git a/plugins/plugin-shikiji/src/node/types.ts b/plugins/plugin-shikiji/src/node/types.ts
index 23e712dd..8120c080 100644
--- a/plugins/plugin-shikiji/src/node/types.ts
+++ b/plugins/plugin-shikiji/src/node/types.ts
@@ -48,7 +48,7 @@ export interface HighlighterOptions {
/**
* Setup Shikiji instance
*/
- shikiSetup?: (shikiji: Highlighter) => void | Promise<void>
+ shikiSetup?: (shiki: Highlighter) => void | Promise<void>
/**
* Fallback language when the specified language is not available.
*/
diff --git a/preview/plume.svg b/preview/plume.svg
new file mode 100644
index 00000000..62ee70c6
--- /dev/null
+++ b/preview/plume.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72">
+ <path fill="#5086a1" d="M42.334 49.147a29.945 29.945 0 0 1-19.338-8.151c-8.014-7.365-8.378-18.076-8.533-22.649l-.022-.627a2.904 2.904 0 0 1 3.457-2.951c17.005 3.355 21.695 16.324 22.056 17.4a49.543 49.543 0 0 1 3.574 15.922a1 1 0 0 1-.967 1.052c-.029.001-.106.004-.227.004" />
+ <path fill="#8cccd5" d="M44.436 55.316c-11.646 0-17.376-6.974-17.653-7.354a1 1 0 0 1 .262-1.424a11.103 11.103 0 0 1 12.774-1.574c-1.465-9.078 1.877-13.568 2.031-13.77a.998.998 0 0 1 .75-.39a.97.97 0 0 1 .78.325c8.944 9.771 8.793 16.532 7.908 19.691c-.034.14-1.062 4.092-4.772 4.406c-.711.062-1.405.09-2.08.09" />
+ <g fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
+ <path d="M55.184 57.69S34.96 45.877 23.097 24.206m22.131 30.096c-11.93.46-17.628-6.88-17.628-6.88" />
+ <path d="M40.528 42.483c-.56-7.195 2.116-10.679 2.116-10.679c8.834 9.654 8.406 16.162 7.681 18.747m-13.311-3.129a30.15 30.15 0 0 1-13.341-7.162c-8.072-7.419-8.067-18.241-8.232-22.577a1.903 1.903 0 0 1 2.264-1.932C34.694 19.103 39.02 32.528 39.02 32.528" />
+ </g>
+</svg>
diff --git a/docs/preview-blog.jpeg b/preview/preview-blog.jpeg
similarity index 100%
rename from docs/preview-blog.jpeg
rename to preview/preview-blog.jpeg
diff --git a/docs/preview-home.jpeg b/preview/preview-home.jpeg
similarity index 100%
rename from docs/preview-home.jpeg
rename to preview/preview-home.jpeg
diff --git a/docs/preview-note.jpeg b/preview/preview-note.jpeg
similarity index 100%
rename from docs/preview-note.jpeg
rename to preview/preview-note.jpeg
diff --git a/docs/preview-post.jpeg b/preview/preview-post.jpeg
similarity index 100%
rename from docs/preview-post.jpeg
rename to preview/preview-post.jpeg
diff --git a/readme.md b/readme.md
index d4290929..2291a41e 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,5 @@
<p align="center">
-<img src="/docs/plume.svg" width="200px" />
+<img src="/preview/plume.svg" width="200px" />
</p>
<h2 align="center">vuepress-theme-plume</h2>
@@ -62,27 +62,6 @@ __options__ : `PlumeThemeOptions`
- [我的个人博客](https://pengzhanbo.cn/)
-## 内置插件
-
-- [plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 使用 [`shikiji`](https://shikiji.netlify.app/) 来为 Markdown 代码块启用代码高亮。
-- [plugin-caniuse](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-caniuse) 在文档中使用 caniuse 提供的 web feature support list
-- [plugin-auto-frontmatter](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-auto-frontmatter) 在 md 文件中根据匹配规则自动生成 frontmatter
-- [plugin-notes-data](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-notes-data) 根据规则，将 md文件归类为 note，并生成 sidebar
-- [plugin-blog-data](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-blog-data) 根据规则，将md文件归类为 blog post，并生成 post list
-- [vuepress-plugin-mdEnhance](https://vuepress-theme-hope.github.io/v2/md-enhance/zh/) 增强markdown功能插件
-- [vuepress-plugin-comment](https://vuepress-theme-hope.github.io/v2/comment/zh/) 文章评论插件，支持 "giscus" | "twikoo" | "waline"
-- [vuepress-plugin-copy-code](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/packages/plugin-copy-code) 文章内代码块复制插件
-- [vuepress-plugin-medium-zoom](https://v2.vuepress.vuejs.org/zh/reference/plugin/medium-zoom.html) 图片预览插件
-- [vuepress-plugin-search](https://v2.vuepress.vuejs.org/zh/reference/plugin/search.html) 内容搜索插件
-- [vuepress-plugin-docsearch](https://v2.vuepress.vuejs.org/zh/reference/plugin/docsearch.html) Algolia docsearch 内容搜索插件
-- [vuepress-plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 主题调色板插件
-- [vuepress-plugin-seo](https://vuepress-theme-hope.github.io/v2/seo/zh/) seo 插件
-- [vuepress-plugin-sitemap](https://vuepress-theme-hope.github.io/v2/sitemap/zh/) 生成sitemap 插件
-
-## 非内置插件
-
-- [vuepress-plugin-netlify-functions](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-netlify-functions) 当站点部署在 netlify 时，希望使用 netlify functions 可选择此插件提供支持
-
### 注意
本主题基于 `vuepress 2` ，处于 RC 阶段。
@@ -97,16 +76,16 @@ __options__ : `PlumeThemeOptions`
**home page**
-
+
**blog page**
-
+
**post page**
-
+
**note page**
-
+
diff --git a/theme/package.json b/theme/package.json
index 37cea6d5..ec768dd2 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -43,7 +43,7 @@
"templates"
],
"scripts": {
- "build": "pnpm run clean && pnpm run copy && pnpm run ts",
+ "build": "pnpm run copy && pnpm run ts",
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
"copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png,woff2}\" lib",
"copy:watch": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png,woff2}\" lib -w",
diff --git a/theme/src/client/components/BackToTop.vue b/theme/src/client/components/BackToTop.vue
index 4a56e2c0..1dcdaf62 100644
--- a/theme/src/client/components/BackToTop.vue
+++ b/theme/src/client/components/BackToTop.vue
@@ -27,7 +27,7 @@ const stroke = computed(() =>
)
const mustHidden = computed(() => {
- return page.value.frontmatter.backToTop === false || page.value.frontmatter.home
+ return page.value.frontmatter.backToTop === false || (page.value.frontmatter.home && page.value.frontmatter.config && (page.value.frontmatter.config as any).length <= 1)
})
const show = computed(() => {
diff --git a/theme/src/client/components/Home/Home.vue b/theme/src/client/components/Home/Home.vue
index 82d81ccd..d78a3137 100644
--- a/theme/src/client/components/Home/Home.vue
+++ b/theme/src/client/components/Home/Home.vue
@@ -64,7 +64,7 @@ function resolveComponentName(type: string) {
v-for="(item, index) in config"
:key="item.type + index"
>
- <div :class="{ layout: index > 0 && item.type !== 'features' }">
+ <div :class="{ layout: index > 0 && item.type !== 'features' && item.type !== 'custom' }">
<component
:is="resolveComponentName(item.type)"
v-bind="item"
diff --git a/theme/src/client/components/Home/HomeHero.vue b/theme/src/client/components/Home/HomeHero.vue
index c7b004ca..87a32668 100644
--- a/theme/src/client/components/Home/HomeHero.vue
+++ b/theme/src/client/components/Home/HomeHero.vue
@@ -201,7 +201,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 714px;
height: 390px;
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
- background: #fe5;
+ background: var(--vp-c-yellow-3);
transform: translate(-50%, 0);
}
@@ -211,7 +211,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 1000px;
height: 450px;
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
- background: #e950d1;
+ background: var(--vp-c-red-3);
transform: translate(-50%, 0);
}
@@ -221,7 +221,7 @@ const actions = computed(() => hero.value.actions ?? [])
width: 1000px;
height: 450px;
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
- background: rgba(87, 80, 233);
+ background: var(--vp-c-purple-3);
transform: translate(-50%, 0);
}
diff --git a/theme/src/client/components/Home/HomeProfile.vue b/theme/src/client/components/Home/HomeProfile.vue
index 647e4b07..919d2c36 100644
--- a/theme/src/client/components/Home/HomeProfile.vue
+++ b/theme/src/client/components/Home/HomeProfile.vue
@@ -31,13 +31,9 @@ const profile = computed(() => {
>
<VImage v-if="profile.avatar" :image="profile.avatar" :class="{ circle: profile.circle }" />
- <h3 v-if="profile.name">
- {{ profile.name }}
- </h3>
+ <h3 v-if="profile.name" v-html="profile.name" />
- <p v-if="profile.description">
- {{ profile.description }}
- </p>
+ <p v-if="profile.description" v-html="profile.description" />
</HomeBox>
</template>
diff --git a/theme/src/client/components/Home/HomeTextImage.vue b/theme/src/client/components/Home/HomeTextImage.vue
index 2e83373b..19804a1e 100644
--- a/theme/src/client/components/Home/HomeTextImage.vue
+++ b/theme/src/client/components/Home/HomeTextImage.vue
@@ -80,6 +80,7 @@ const maxWidth = computed(() => {
.content-text h2 {
margin-top: 0;
+ margin-bottom: 12px;
}
.content-text ul {
@@ -87,6 +88,7 @@ const maxWidth = computed(() => {
}
.content-text .description {
+ margin: 12px 0 24px;
font-size: 16px;
font-weight: 500;
color: var(--vp-c-text-1);
@@ -102,6 +104,7 @@ const maxWidth = computed(() => {
.content-text ul p {
margin: 0;
+ font-weight: 400;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
@@ -112,13 +115,12 @@ const maxWidth = computed(() => {
@media (min-width: 768px) {
.content-image :deep(.plume-image) {
- max-width: 160px;
+ max-width: 180px;
margin: 0 48px;
}
.content-text {
flex: 1;
- width: 100%;
}
}
@@ -128,7 +130,7 @@ const maxWidth = computed(() => {
}
.content-image :deep(.plume-image) {
- max-width: 180px;
+ max-width: 220px;
margin: 0 96px;
}
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index 19b3bc27..d2e17d00 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -185,7 +185,7 @@ onContentUpdated(() => zoom?.refresh())
@media (min-width: 1440px) {
.plume-page:not(.has-sidebar) .content {
- max-width: 984px;
+ max-width: 784px;
}
.plume-page:not(.has-sidebar) .container {
diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue
index 5fb98c11..d7cc59de 100644
--- a/theme/src/client/components/PageMeta.vue
+++ b/theme/src/client/components/PageMeta.vue
@@ -12,6 +12,7 @@ import { useExtraBlogData } from '../composables/index.js'
import IconBooks from './icons/IconBooks.vue'
import IconClock from './icons/IconClock.vue'
import IconTag from './icons/IconTag.vue'
+import IconUser from './icons/IconUser.vue'
const page = usePageData<PlumeThemePageData>()
const matter = usePageFrontmatter<PlumeThemePostFrontmatter>()
@@ -33,7 +34,7 @@ const tags = computed(() => {
if (matter.value.tags) {
return matter.value.tags.slice(0, 4).map(tag => ({
name: tag,
- colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]],
+ colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]] ?? [],
}))
}
@@ -56,10 +57,14 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
<span v-if="index !== categoryList.length - 1" class="dot">›</span>
</template>
</div>
- <h1 v-if="page.isBlogPost" class="page-title" :class="{ padding: !hasMeta }">
+ <h1 class="page-title" :class="{ padding: !hasMeta }">
{{ page.title }}
</h1>
<div v-if="hasMeta" class="page-meta-wrapper">
+ <p v-if="matter.author" class="author">
+ <IconUser class="icon" />
+ <span>{{ matter.author }}</span>
+ </p>
<p v-if="readingTime.time" class="reading-time">
<IconBooks class="icon" />
<span>{{ readingTime.words }}</span>
@@ -144,14 +149,20 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
margin-right: 0.3rem;
}
+.page-meta-wrapper .author .icon,
+.page-meta-wrapper .author span {
+ color: var(--vp-c-text-2);
+ transition: color var(--t-color);
+}
+
.page-meta-wrapper .tag {
display: inline-block;
padding: 3px 5px;
margin-right: 6px;
font-size: 12px;
line-height: 1;
- color: var(--vp-tag-color);
- background-color: var(--vp-tag-bg-color);
+ color: var(--vp-tag-color, var(--vp-c-text-3));
+ background-color: var(--vp-tag-bg-color, var(--vp-c-default-soft));
border-radius: 3px;
}
@@ -168,10 +179,15 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
}
.page-meta-wrapper .create-time {
- flex: 1;
- justify-content: right;
min-width: 110px;
margin-right: 0;
text-align: right;
}
+
+@media (min-width: 768px) {
+ .page-meta-wrapper .create-time {
+ flex: 1;
+ justify-content: right;
+ }
+}
</style>
diff --git a/theme/src/client/components/icons/IconUser.vue b/theme/src/client/components/icons/IconUser.vue
new file mode 100644
index 00000000..52e89b3d
--- /dev/null
+++ b/theme/src/client/components/icons/IconUser.vue
@@ -0,0 +1,8 @@
+<template>
+ <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
+ <path
+ fill="currentColor"
+ d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"
+ />
+ </svg>
+</template>
diff --git a/theme/src/client/composables/blog.ts b/theme/src/client/composables/blog.ts
index 955b6317..94a45759 100644
--- a/theme/src/client/composables/blog.ts
+++ b/theme/src/client/composables/blog.ts
@@ -197,7 +197,7 @@ export function useTags() {
return Object.keys(tagMap).map(tag => ({
name: tag,
count: tagMap[tag] > 99 ? '99+' : tagMap[tag],
- colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]],
+ colors: extraData.value.tagsColorsPreset[extraData.value.tagsColors[tag]] ?? [],
}))
})
diff --git a/theme/src/client/index.ts b/theme/src/client/index.ts
index 37e36685..b499d7b3 100644
--- a/theme/src/client/index.ts
+++ b/theme/src/client/index.ts
@@ -5,6 +5,8 @@ export { default as plumeClientConfig } from './config.js'
export { default as Layout } from './layouts/Layout.vue'
export { default as NotFound } from './layouts/NotFound.vue'
+export { default as HomeBox } from './components/Home/HomeBox.vue'
+
export {
useDarkMode,
useThemeData,
diff --git a/theme/src/node/plugins.ts b/theme/src/node/plugins.ts
index 7e69e8d4..47b0fc00 100644
--- a/theme/src/node/plugins.ts
+++ b/theme/src/node/plugins.ts
@@ -107,8 +107,18 @@ export function setupPlugins(
...customContainers,
]
- if (options.readingTime !== false)
- plugins.push(readingTimePlugin(options.readingTime || {}))
+ if (options.readingTime !== false) {
+ plugins.push(readingTimePlugin({
+ locales: {
+ '/zh/': {
+ word: '$word字',
+ less1Minute: '小于1分钟',
+ time: '大约$time分钟',
+ },
+ },
+ ...options.readingTime,
+ }))
+ }
if (options.nprogress !== false)
plugins.push(nprogressPlugin())
@@ -183,7 +193,6 @@ export function setupPlugins(
align: true,
mark: true,
tasklist: true,
- demo: true,
attrs: true,
sup: true,
sub: true,
@@ -203,7 +212,6 @@ export function setupPlugins(
plugins.push(baiduTongjiPlugin(options.baiduTongji))
const hostname = resolveLocaleOptions(localeOptions, 'hostname')
-
if (options.sitemap !== false && hostname && isProd)
plugins.push(sitemapPlugin({ hostname }))
diff --git a/theme/src/node/setupPages.ts b/theme/src/node/setupPages.ts
index 08dd18f5..4382e66b 100644
--- a/theme/src/node/setupPages.ts
+++ b/theme/src/node/setupPages.ts
@@ -80,14 +80,20 @@ export function autoCategory(
options: PlumeThemeLocaleOptions,
) {
const pagePath = page.filePathRelative
+
if (page.frontmatter.type || !pagePath)
return
const locales = Object.keys(resolvedAppLocales(app))
const notesLinks: string[] = []
for (const [, locale] of locales.entries()) {
- const notes = options.locales?.[locale]?.notes
- if (notes && notes.link)
- notesLinks.push(path.join(locale, notes.link).replace(/\\+/g, '/'))
+ const config = options.locales?.[locale]?.notes
+ if (config && config.notes) {
+ notesLinks.push(
+ ...config.notes.map(
+ note => path.join(locale, config.link || '', note.link).replace(/\\+/g, '/'),
+ ),
+ )
+ }
}
if (notesLinks.some(link => page.path.startsWith(link)))
return
diff --git a/theme/src/shared/frontmatter.ts b/theme/src/shared/frontmatter.ts
index 5bc0ccc4..5a7af689 100644
--- a/theme/src/shared/frontmatter.ts
+++ b/theme/src/shared/frontmatter.ts
@@ -95,8 +95,6 @@ export interface PlumeThemeHomeProfile extends PlumeHomeConfigBase {
export interface PlumeThemeHomeCustom extends PlumeHomeConfigBase {
type: 'custom'
- backgroundImage?: string | { light: string, dark: string }
- backgroundAttachment?: 'fixed' | 'local'
}
/* =============================== Home end ==================================== */
