initial commit

2026-04-23 10:58:13 +08:00 · 2022-03-13 06:14:05 +08:00 · 2022-03-13 06:14:05 +08:00 · 5c79656269
commit 5c79656269
96 changed files with 7299 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,13 @@
 # editorconfig.org
 root = true
 [*]
 indent_style = space
 indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 [*.md]
 trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,7 @@
 node_modules/
 .temp/
 lib/
 dist/
 !.vuepress/
 !.*.js
 example/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,68 @@
 module.exports = {
  root: true,
  extends: 'vuepress',
  globals: {
    __VUEPRESS_VERSION__: 'readonly',
    __VUEPRESS_DEV__: 'readonly',
    __VUEPRESS_SSR__: 'readonly',
    __VUE_HMR_RUNTIME__: 'readonly',
    __VUE_OPTIONS_API__: 'readonly',
    __VUE_PROD_DEVTOOLS__: 'readonly',
  },
  overrides: [
    {
      files: ['*.ts', '*.vue'],
      extends: 'vuepress-typescript',
      parserOptions: {
        project: ['tsconfig.json'],
      },
      rules: {
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-explicit-any': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-var-requires': 'off',
        'vue/component-tags-order': [
          'error',
          {
            order: ['script', 'template', 'style'],
          },
        ],
        'vue/multi-word-component-names': 'off',
      },
    },
    {
      files: ['*.vue'],
      globals: {
        defineEmits: 'readonly',
        defineProps: 'readonly',
      },
      rules: {
        // disable for setup script
        '@typescript-eslint/no-unused-vars': 'off',
      },
    },
    {
      files: ['clientAppEnhance.ts'],
      rules: {
        'vue/match-component-file-name': 'off',
      },
    },
    {
      files: ['**/__tests__/**/*.ts'],
      env: {
        jest: true,
      },
      rules: {
        '@typescript-eslint/explicit-function-return-type': 'off',
        'vue/one-component-per-file': 'off',
        'import/no-extraneous-dependencies': 'off',
      },
    },
    {
      files: ['docs/**'],
      rules: {
        'import/no-extraneous-dependencies': 'off',
      },
    },
  ],
 }
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1,10 @@
 * text eol=lf
 *.txt text eol=crlf
 *.png binary
 *.jpg binary
 *.jpeg binary
 *.ico binary
 *.tff binary
 *.woff binary
 *.woff2 binary
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,25 @@
 # VuePress files
 example/.vuepress/.temp/
 example/.vuepress/.cache/
 example/.vuepress/dist/
 # Dist files
 lib/
 # Test temp files
 **/__fixtures__/.temp/
 # Test coverage files
 coverage/
 # Node modules
 node_modules/
 # MacOS Desktop Services Store
 .DS_Store
 # Log files
 *.log
 # Typescript build info
 *.tsbuildinfo
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,8 @@
 /example
 /node_modules
 /src
 .editorconfig
 .eslint*
 .git*
 **/*.tsbuildinfo
 vuepress.config.js
--- a/example/1.前端/1.React/组件.md
+++ b/example/1.前端/1.React/组件.md
@ -0,0 +1,14 @@
 ---
 title: 组件
 createTime: 2022/03/06 09:41:52
 permalink: /post/yiobrmp0
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tags: 
  - react
  - 组件
 ---
 # React 组件4
--- a/example/1.前端/2.Vue/组件.md
+++ b/example/1.前端/2.Vue/组件.md
@ -0,0 +1,14 @@
 ---
 title: 组件
 createTime: 2022/03/06 09:41:26
 permalink: /post/zrd6axrp
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tag: 
  - Vue
 ---
 # 组件
 组件内容 组件 组件
--- a/example/1.前端/正则表达式.md
+++ b/example/1.前端/正则表达式.md
@ -0,0 +1,265 @@
 ---
 title: 正则表达式
 createTime: 2022/03/08 06:32:01
 permalink: /post/tjya08e9
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tags: 
  - javascript
 ---
 本文正则表达式基于`javascript`，不同的计算机语言对正则表达式的支持情况以及实现，语法不尽相同，不一定适用于其他语言。
 <!-- more -->
 ### 简介
 `正则表达式`，是一种文本模式（Regular Expression），是对字符串的一种匹配查找规则。可以方便的在某一文本字符串中，查找、定位、替换符合某种规则的字符串。
 比如说，我们想要找出一段文本中的手机号码，文本内容如下：
 ``` html
 name:Mark  tel:13800138000
 name:Jhon  tel:13800138888
 ```
 很明显，在这段文本中，手机号码是以 `tel:`开头，这符合一定的规则，这样我们可以通过正则表达式来书写这个规则，然后去查找匹配：
 ``` js
 var text = `name:Mark  tel:13800138000
 name:Jhon  tel:13800138888`;
 var result = text.match(/tel:(1\d{10})/);
 // ["tel:13800138000", "13800138000", index: 0, input: "tel:13800138000", groups: undefined]
 var tel = result[1];
 // 13800138000
 ``` 
 `/tel:(1\d{10})/` 便是所说的正则表达式。
 ### `RegExp`与字面量
 在`javascript`中，我们可以使用构造函数`RegExp` 创建正则表达式。
 `new RegExp(pattern[, flags])`
 ``` js
 var regExp = new RegExp('\\d', 'g');
 ```
 也可以通过 字面量的方式：
 ``` js
 var regExp = /\d/g;
 ```
 两种创建正则表达式适用的场景有些细微的不同，一般使用`new RegExp()`来创建动态的正则表达式，使用字面量创建静态的正则表达式。
 正则表达式字面量是提供了对正则表达式的编译，当正则表达式保持不变时，用字面量的方式创建正则表达式可以获得更好的性能。
 _以下讨论以正则表达式字面量来创建正则表达式_
 `正则表达式`一般由`元字符`和普通字符组成。
 ### 元字符
 元字符也叫特殊字符，是正则表达式规定的，对符合特定的单一的规则的字符的描述。
 | 字符 | 含义 |
 |:----:|-----|
 | \\ |在非特殊字符的前面加反斜杠，表示这个字符是特殊的，不能从字面上解释。比如在`\d`描述的不是一个普通的字符`d`,而是正则表达式中的数值`0-9`。<br/>如果在特殊字符前面加反斜杠，这表示将这个字符转义为普通字符，比如`?`在正则中有其特殊含义，前面加反斜杠\?，这可以将其转为普通的`?`。|
 |^|匹配文本开始的位置，如果开启了多行标志，也会匹配换行符后紧跟的位置。<br/>比如`^a`会匹配`abc`，但不会匹配到`bac`。|
 |$|匹配文本结束的位置，如果开启了多行标志，也会匹配换行符前紧跟的位置。<br/>比如`b$`会匹配`acb`,但不会匹配到`abc`。|
 |*|匹配前一个表达式0次到多次。<br/>比如，`ab*`会匹配到`abbbbbbc`中的`abbbbbb`,以及`acbbbbb`中的`a`。|
 |+|匹配前一个表达式1次到多次。<br/>比如，`ab+`会匹配到`abbbbbbc`中的`abbbbbb`,但不会匹配`acbbbbb`。|
 |?|匹配前一个表达式0次到1次。<br/>比如，`ab*`会匹配到`abbbbbbc`中的`ab`,以及`acbbbbb`中的`a`。|
 |.| 匹配除换行符之外的任何单个字符。|
 |x\|y| 匹配 x或者y。| 
 |\[xyz\]| 表示一个字符的集合。匹配集合中的任意一个字符。可以使用破折号`-`来指定一个字符范围。<br/>比如，`[0-4]`和`[01234]`，都可以匹配`4567`中的`4`。|
 |\[^xyz\]| 表示一个方向字符集合。匹配任意一个不包括在集合中的字符。可以使用破折号`-`来指定一个字符范围。<br/>比如，`[0-4]`和`[01234]`，都可以匹配`2345`中的`5`。|
 |{n}|n为一个整数，表示匹配前一个匹配项n次。<br/>比如`a{2}`不会匹配`abc`中的`a`，但会匹配`aaaabc`中的`aa`。|
 |{m,n}| m,n都是一个整数，匹配前一个匹配项至少发生了m次，最多发生了n次。<br/>当m，n值为0时，这个值被忽略，当n值不写，如`{1,}`表示1次到多次。当m值不写时，如`{,1}`表示0次到1次。|
 |(x)|匹配`x`并且捕获该匹配项。称为捕获括号，括号中的匹配项也称作子表达式。|
 |(?:x)| 匹配`x`但不捕获该匹配项。称为非捕获括号。|
 |x(?=y)| 匹配`x`且当`x`后面跟着`y`。称为正向肯定查找（正向前瞻）。|
 |x(?!y)| 匹配`x`且当`x`后面不跟着`y`。称为正向否定查找（负向前瞻）。|
 |[\b]|匹配一个退格(U+0008)。|
 |\b	|匹配一个词的边界。匹配的值的边界并不包含在匹配的内容中。|
 |\B|匹配一个非单词的边界。|
 |\d|匹配一个数字。等价于`[0-9]`。|
 |\D|匹配一个非数字。等价于`[^0-9]`。|
 |\n|匹配一个换行符 (U+000A)。|
 |\r|匹配一个回车符 (U+000D)。|
 |\s|匹配一个空白字符，包括空格、制表符、换页符和换行符。<br/>等价于`[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]`|
 |\S|匹配一个非空白字符。|
 |\t|匹配一个水平制表符 (U+0009)。|
 |\w|匹配一个单字字符（字母、数字或者下划线）。<br/> 等价于`[A-Za-z0-9_]`。|
 |\W|匹配一个非单字字符。|
 |\xhh|与代码 hh 匹配字符（两个十六进制数字）|
 |\uhhhh|与代码 hhhh 匹配字符（四个十六进制数字）。|
 上表在多数文章都会提及，但有一些注意的细节，下面我单独拎出来说说。
 1. __`[xyz]` 匹配集合中的任意一个字符__ <br/>
 这个字符集的元素，可以是普通字符，也可以是特殊字符，也可以用破折号`-`规定一个字符集范围。<br/>
 以匹配数字为例，可以写成`[0123456789]` ，也可以写成`[\d]`,也可以写成`[0-9]`。<br/>
 类似于`()`等特殊字符，在`[]`中有其作用，都特殊字符的作用一致，不能直接当做普通字符来使用，所以我们需要使用反斜杠`\`将其转义为普通字符，值得注意的是，上表的特殊字符中，星号`*`、小数点`.`在`[]`中并没有特殊用途，所以不需要做转义处理，当然，即使做了转义，也不会出现问题；而破折号`-`在`[]`中有其特殊作用，所以作为普通字符使用时，需要转义。
 2. __`?`：匹配前一个表达式0次到1次。__<br/>
 其实这里准确描述来说，匹配前一个表达式，且该表达式 __非任何量词 `*`、 `+`、`?` 或 `{}`__ ，匹配前一个表达式0次到1次。<br/>
 如果紧跟在 __非任何量词 `*`、 `+`、`?` 或 `{}`__ 的后面，将会使量词变为非贪婪的（匹配尽量少的字符）<br/>
 _贪婪与非贪婪匹配，我们在下文细说。_
 ### 等价字符
 正则表达式中，有不少特殊字符的写法，是等价的，也可以说是简写形式，下表的左右两边，都是等价的。
 |regExp|regExp|
 |--|--|
 |*|{0,}|
 |+|{1,}|
 |?|{0,1}|
 |\d|\[0-9\]|
 |\D|\[^0-9\]|
 |\w|\[a-zA-Z_\]|
 |\W|\[^a-zA-Z_\]|
 |\s|\[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\]|
 ### 贪婪模式与非贪婪
 __什么是贪婪模式？__
 贪婪是指正则表达式匹配时，是贪心的，会尽可能的匹配多的字符，主要体现在`量词特殊字符`：
 ``` js
 // 匹配一个到多个数字
 var r = /\d+/;
 var t1 = '12a';
 var t2 = '1234a';
 var t3 = 'a12b345';
 console.log(t1.match(r)[0]); // 12
 console.log(t2.match(r)[0]); // 1234
 console.log(t3.match(r)[0]); // 12
 ```
 `非贪婪`，即是让正则表达式匹配尽量少的字符。那么如何改变正则表达式的贪婪模式？
 __在量词特殊字符后面紧跟使用`?`__
 我们说说的量词包括`*`, `+`, `?`, `{m,n}`。那么紧跟了`?`，会有什么不同的表现呢？
 我们从例子来分析：
 ``` js 
 var r1 = /<div>.*<\/div>/;
 var r2 = /<div>.*?<\/div>/;
 var str = '<div>aaa</div>bbb<div></div>ccc';
 ```
 变量`r1`是贪婪匹配，得到的结果会是什么呢？
 ``` js
 console.log(str.match(r1)[0]);
 // <div>aaa</div>bbb<div></div>
 ```
 在这段字符串中，有两个`</div>`的匹配字符串，正则表达式在遇到第一个`</div>`匹配字符项时，同时满足了`/.*/`和`/<\/div>/`的匹配条件，优先作为`/.*/`的匹配值，在遇到第二个时，同样还是优先作为`/.*/`的匹配值，直到匹配的字符串`str`的结束，没有满足条件的匹配字符串，再把第二个`</div>`作为`/<\/div>/`的匹配值。最终得到了`<div>aaa</div>bbb<div></div>`的匹配结果。
 变量`r2`这是非贪婪匹配，得到的结果又会有所不同：
 ``` js
 console.log(str.match(r1)[0]);
 // <div>aaa</div>
 ```
 同样，两个`</div>`的匹配字符串，但实际非贪婪匹配模式，在匹配到第一个`</div>`，就不会再继续向下匹配字符串了。
 __也就是说，贪婪匹配是，在满足规则下，尽可能多的匹配更多的字符串，直到字符串结束或没有满足规则的字符串了；非贪婪匹配是，在满足规则下，尽可能少的匹配最少的字符串，一旦得到满足规则的字符串，就不再向下匹配。__
 1. `x*?`：尽可能少的匹配`x`，匹配的结果可以是0个`x`；
 2. `x+?`：尽可能少的匹配`x`，但匹配的结果至少有1个`x`；
 3. `x??`：尽可能少的匹配`x`, 匹配的结果可以是0个`x`，但最多可以有一个`x`；
 4. `x{m,n}?`：尽可能少的匹配`x`，但匹配的结果至少有m个`x`，最多可以有n个`x`；
 可能从字面来说，不好理解 `x??`, `x{m,n}?` ，来看一个例子就可以明白了：
 ``` js
 var s1 = '<div>aa</div>';
 var s2 = '<div>a</div>';
 var s3 = '<div></div>';
 var r1 = /<div>a??<\/div>/;
 console.log(r1.test(s1)); // false 
 console.log(r1.test(s2)); // true
 console.log(r1.test(s3)); // true
 ```
 ``` js
 var s1 = '<div>aaa</div>';
 var s2 = '<div>aa</div>';
 var s3 = '<div>aaaa</div>'
 var r1 = /<div>a{2,3}?<\/div>/;
 var r2 = /<div>a{2,3}?/;
 console.log(r1.test(s1)); // true
 console.log(r1.test(s2)); // true
 console.log(r1.test(s3)); // false
 console.log(s1.match(r2)[0]); // <div>aa
 console.log(s2.match(r2)[0]); // <div>aa
 console.log(s3.match(r2)[0]); // <div>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
 ```
--- a/example/2.学习笔记/typescript学习.md
+++ b/example/2.学习笔记/typescript学习.md
@ -0,0 +1,12 @@
 ---
 title: typescript学习
 createTime: 2022/03/06 09:47:02
 permalink: /post/upiqrep3
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tags: 
  - typescript
 ---
 # typescript 学习
--- a/example/2.学习笔记/呵呵.md
+++ b/example/2.学习笔记/呵呵.md
@ -0,0 +1,10 @@
 ---
 title: 呵呵
 createTime: 2022/03/07 05:16:12
 permalink: /post/zhervgal
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tags: 
  - notes
 ---
--- a/example/2.学习笔记/哈哈.md
+++ b/example/2.学习笔记/哈哈.md
@ -0,0 +1,12 @@
 ---
 title: 哈哈
 createTime: 2022/03/07 05:14:23
 permalink: /post/0ts9cam6
 author: pengzhanbo
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 tags: 
  - Vue
  - notes
 ---
--- a/example/3.杂谈/电影杂谈.md
+++ b/example/3.杂谈/电影杂谈.md
@ -0,0 +1,17 @@
 ---
 title: 电影杂谈
 author: pengzhanbo
 tags: 
  - 杂谈
  - 电影
 permalink: /post/zozx35d9
 createTime: 2022/03/06 09:47:13
 top: false
 type:   # original: 原创: reprint 转载  可为空不填
 ---
 呵呵呵呵
 <!-- more -->
 111
--- a/example/README.md
+++ b/example/README.md
@ -0,0 +1,3 @@
 ---
 home: true
 ---
--- a/example/public/avatar.gif
+++ b/example/public/avatar.gif
--- a/example/public/big-banner.jpg
+++ b/example/public/big-banner.jpg
--- a/package.json
+++ b/package.json
@ -0,0 +1,82 @@
 {
  "name": "@pengzhanbo/vuepress-theme-plume",
  "version": "1.0.0-beta.3",
  "description": "blog theme by vuepress2.x",
  "main": "lib/node/index.js",
  "types": "lib/node/index.d.ts",
  "files": [
    "lib",
    "templates",
    "tailwind.config.js"
  ],
  "keywords": [
    "vuepress-next",
    "vuepress",
    "vuepress-theme"
  ],
  "author": "pengzhanbo",
  "license": "MIT",
  "scripts": {
    "dev-watch": "yarn clean && concurrently \"yarn copy-watch\" \"yarn tsc-watch\"",
    "dev": "vuepress dev example --debug",
    "tsc": "tsc -b tsconfig.build.json",
    "tsc-watch": "tsc -b tsconfig.dev.json -w",
    "clean": "rimraf lib *.tsbuildinfo",
    "copy": "cpx \"src/**/*.{d.ts,vue,scss,css,html}\" lib",
    "copy-watch": "cpx \"src/**/*.{d.ts,vue,scss,css,html}\" lib -w",
    "build": "yarn clean & yarn tsc & yarn copy"
  },
  "prettier": "prettier-config-vuepress",
  "dependencies": {
    "@tailwindcss/typography": "^0.5.2",
    "@types/webpack-env": "^1.16.3",
    "@vuepress/client": "^2.0.0-beta.35",
    "@vuepress/core": "^2.0.0-beta.36",
    "@vuepress/plugin-active-header-links": "^2.0.0-beta.36",
    "@vuepress/plugin-back-to-top": "^2.0.0-beta.36",
    "@vuepress/plugin-container": "^2.0.0-beta.36",
    "@vuepress/plugin-git": "^2.0.0-beta.36",
    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.36",
    "@vuepress/plugin-nprogress": "^2.0.0-beta.36",
    "@vuepress/plugin-palette": "^2.0.0-beta.36",
    "@vuepress/plugin-prismjs": "^2.0.0-beta.36",
    "@vuepress/plugin-theme-data": "^2.0.0-beta.36",
    "@vuepress/shared": "^2.0.0-beta.35",
    "@vuepress/theme-default": "^2.0.0-beta.36",
    "@vuepress/utils": "^2.0.0-beta.35",
    "@vueuse/core": "^7.7.1",
    "autoprefixer": "^10.4.2",
    "chokidar": "^3.5.3",
    "concurrently": "^7.0.0",
    "cpx2": "^4.2.0",
    "dayjs": "^1.10.8",
    "eslint": "^8.10.0",
    "eslint-config-vuepress": "^3.5.0",
    "eslint-config-vuepress-typescript": "^2.5.0",
    "gray-matter": "^4.0.3",
    "json2yaml": "^1.1.0",
    "nanoid": "^3.3.1",
    "postcss": "^8.4.8",
    "postcss-at-rules-variables": "^0.3.0",
    "postcss-each": "^1.1.0",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.6",
    "postcss-preset-env": "^7.4.2",
    "postcss-simple-vars": "^6.0.3",
    "prettier": "^2.5.1",
    "prettier-config-vuepress": "^1.3.0",
    "rimraf": "^3.0.2",
    "sass": "^1.49.9",
    "tailwindcss": "^3.0.23",
    "typescript": "^4.6.2",
    "vue": "^3.2.31",
    "vue-router": "^4.0.13",
    "vuepress": "^2.0.0-beta.36"
  },
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "vuepress": ">=2.0.0-beta.36"
  }
 }
--- a/readme.md
+++ b/readme.md
@ -0,0 +1,81 @@
 # vuepress-theme-plume
 一款基于 [vuepress@next](https://github.com/vuepress/vuepress-next) 制作的简单的博客皮肤。
 ## 安装
 ``` sh
 npm i @pengzhanbo/vuepress-theme-plume
 # or yarn
 yarn add @pengzhanbo/vuepress-theme-plume
 ```
 ## 特性
 - 低配置化，仅需少量的vuepress配置即可使用
 - 通过目录约定生成栏目
 ## 配置
 ``` js
 // vuepress.config.{js, ts}
 // or {sourceDir}/.vuepress/config.{js, ts}
 export default {
  // ...
  theme: path.resolve(__dirname, './lib/node/index.js'),
  themeConfig: {
    // 首页头部大图
    bannerImg: '/big-banner.jpg',
    // 博主头像
    avatarUrl: '/avatar.gif',
    // 博主名称
    avatar: '未闻花名',
    github: 'https://github.com/',
    email: '_@outlook.com',
    description: '学习，生活，娱乐，我全都要',
  },
 }
 ```
 ## 编写文章
 在你的文档目录下，首先创建一个 `README.md` 文件
 ```
 ---
 home: true
 ---
 ```
 然后，创建其他的目录，格式如下
 ``` sh
 \d+\.[^]+
 ```
 比如:  `1.前端`， `2.web` 的形式
 主题会解析目录名称，分解为`{ type, name }` 的形式，并根据 type作为排序的依据。
 再在目录中创建并编写文章即可。
 建议首先启动 vuepress 本地开发环境后，再创建新文章
 首次创建，将会在文档头部自动生成文档配置。
 ``` md
 ---
 title: 组件
 createTime: 2022/03/06 09:41:52
 permalink: /post/yiobrmp0
 author: pengzhanbo
 tags: 
  - react
  - 组件
 ---
 ```
 - `title` 根据文档名称生成
 - `createTime` 根据文件创建时间生成
 - `author` 根据 package.json 中的字段生成
 - `permalink` 作为文章的永久链接，通过 nanoid 生成唯一链接，可自定义
 - `tags` 文章标签，自定义
 ## 说明
 - 由于 vuepress@next 目前尚在 beta开发阶段，随时可能发生变化，本主题可能在未来的版本中无法正常使用。
 - 在未来将会持续关注 vuepress@next 开发进度，持续更新维护本主题
 - 本主题尚处于开发阶段，目前仅实现了基础的blog功能，未来会继续添加更多的功能
 - 欢迎各位尝试使用 vuepress@next 和 本主题
--- a/src/client/clientAppEnhanceFiles.ts
+++ b/src/client/clientAppEnhanceFiles.ts
@ -0,0 +1,7 @@
 import { defineClientAppEnhance } from '@vuepress/client'
 import './styles/tailwind.css'
 import './styles/index.css'
 export default defineClientAppEnhance(({ app, router, siteData }) => {
  // do
 })
--- a/src/client/clientAppSetup.ts
+++ b/src/client/clientAppSetup.ts
@ -0,0 +1,6 @@
 import { defineClientAppSetup } from '@vuepress/client'
 // import { setupDarkMode } from './composables'
 import './styles/index.css'
 export default defineClientAppSetup(() => {
  // setupDarkMode()
 })
--- a/src/client/component/Archives.vue
+++ b/src/client/component/Archives.vue
@ -0,0 +1,32 @@
 <script lang="ts" setup>
 import * as dayjs from 'dayjs'
 import { useArchivesList } from '../composables/useArchives'
 const archivesList = useArchivesList()
 const format = (date: string | number | undefined): string => {
  return dayjs(date).format('MM-DD')
 }
 </script>
 <template>
  <div class="archives-list-wrapper">
    <h2>归档</h2>
    <div
      v-for="archives in archivesList"
      :key="archives.label"
      class="archives-list-container"
    >
      <h3>{{ archives.label }}</h3>
      <ul>
        <li
          v-for="post in archives.postList"
          :key="post.path"
          class="archives-item"
        >
          <span>[{{ format(post.frontmatter.createTime) }}]</span>
          <RouterLink :to="post.path">{{ post.title }}</RouterLink>
        </li>
      </ul>
    </div>
  </div>
 </template>
--- a/src/client/component/Category.vue
+++ b/src/client/component/Category.vue
@ -0,0 +1,18 @@
 <script lang="ts" setup>
 import CategoryGroup from '@theme/CategoryGroup.vue'
 import { useCategoryList } from '../composables'
 const categoryList = useCategoryList()
 </script>
 <template>
  <div class="category-wrapper">
    <div class="category-container">
      <h2 class="category-header">栏目</h2>
      <CategoryGroup
        v-for="(category, index) in categoryList"
        :key="index"
        :category="category"
      />
    </div>
  </div>
 </template>
--- a/src/client/component/CategoryGroup.vue
+++ b/src/client/component/CategoryGroup.vue
@ -0,0 +1,57 @@
 <script lang="ts" setup>
 import * as dayjs from 'dayjs'
 import type { Component } from 'vue'
 import { h, withDefaults } from 'vue'
 import type { CategoryItem } from '../composables'
 interface Props {
  category: CategoryItem
  head: number
 }
 const props = withDefaults(defineProps<Props>(), {
  head: 2,
 })
 const format = (date: string | undefined): string => {
  return dayjs(date).format('YYYY-MM-DD')
 }
 const getCount = (category: CategoryItem, count = 0): number => {
  count += category.postList.length
  if (category.children.length > 0) {
    category.children.forEach((child) => {
      count += child.postList.length
    })
  }
  return count
 }
 const TitleFnComponent = (): Component => {
  const head = props.head > 4 ? 4 : props.head
  return h(`h${head}`, { id: props.category.label }, [
    props.category.label,
    h('span', `(${getCount(props.category)})`),
  ])
 }
 </script>
 <template>
  <div class="category-group-wrapper">
    <TitleFnComponent />
    <ul>
      <li
        v-for="post in category.postList"
        :key="post.path"
        class="category-group-item"
      >
        <span class="mr-5">[{{ format(post.frontmatter.createTime) }}]</span>
        <RouterLink :to="post.path">{{ post.title }}</RouterLink>
      </li>
    </ul>
    <CategoryGroup
      v-for="cate in category.children"
      :key="'' + head + cate.type"
      :category="cate"
      :head="head + 1"
    />
  </div>
 </template>
--- a/src/client/component/Home.vue
+++ b/src/client/component/Home.vue
@ -0,0 +1,21 @@
 <script lang="ts" setup>
 import PostList from '@theme/PostList.vue'
 import RightSideBar from '@theme/RightSideBar.vue'
 import { withBase } from '@vuepress/client'
 import { ref } from 'vue'
 import { useThemeData } from '../composables/useThemeData'
 const themeData = useThemeData()
 const bannerStyle = ref({
  'background-image': `url(${withBase(themeData.value.bannerImg)})`,
 })
 </script>
 <template>
  <div class="home-wrapper">
    <div class="home-banner" :style="bannerStyle"></div>
    <div class="home-container">
      <PostList class="flex-1" />
      <RightSideBar></RightSideBar>
    </div>
  </div>
 </template>
--- a/src/client/component/Icon.vue
+++ b/src/client/component/Icon.vue
@ -0,0 +1,57 @@
 <script lang="ts" setup>
 import { computed, withDefaults } from 'vue'
 interface Props {
  type: 'user' | 'folder' | 'clock' | 'github' | 'email' | 'tag'
  size: 'sm' | 'md' | 'xs'
 }
 const props = withDefaults(defineProps<Props>(), {
  type: 'user',
  size: 'md',
 })
 const sizeList = { sm: 'w-4 h-4', md: 'w-6 h-6', xs: 'w-8 h-8' }
 const className = computed(() => {
  return sizeList[props.size] || sizeList.sm
 })
 </script>
 <template>
  <span class="inline-block">
    <svg
      :class="className"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        v-if="type === 'user'"
        fill-rule="evenodd"
        d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
        clip-rule="evenodd"
      ></path>
      <path
        v-if="type === 'folder'"
        d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
      ></path>
      <path
        v-if="type === 'clock'"
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
        clip-rule="evenodd"
      ></path>
      <path
        v-if="type === 'github'"
        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
      />
      <path
        v-if="type === 'email'"
        d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"
      />
      <path
        v-if="type === 'tag'"
        fill-rule="evenodd"
        d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z"
        clip-rule="evenodd"
      ></path>
    </svg>
  </span>
 </template>
--- a/src/client/component/NavBar.vue
+++ b/src/client/component/NavBar.vue
@ -0,0 +1,41 @@
 <script lang="ts" setup>
 import { useSiteData, withBase } from '@vuepress/client'
 import { ref } from 'vue'
 const siteData = useSiteData()
 const navListRaw = [
  { label: '首页', link: '/' },
  { label: '栏目', link: '/category/' },
  { label: '标签', link: '/tags/' },
  { label: '归档', link: '/archives/' },
 ]
 const navList = ref(
  navListRaw.map(({ label, link }) => ({
    label,
    link: withBase(link),
  }))
 )
 </script>
 <template>
  <div class="navbar-wrapper">
    <div class="flex items-center">
      <!-- <div class="blog-logo">
        <img src="" />
      </div> -->
      <div class="blog-title">
        <h3>{{ siteData.title }}</h3>
      </div>
    </div>
    <div class="flex items-center">
      <RouterLink
        v-for="nav in navList"
        :key="nav.link"
        :to="nav.link"
        class="nav-link"
      >
        <span>{{ nav.label }}</span>
      </RouterLink>
    </div>
  </div>
 </template>
--- a/src/client/component/Post.vue
+++ b/src/client/component/Post.vue
@ -0,0 +1,16 @@
 <script lang="ts" setup>
 import { usePageData } from '@vuepress/client'
 import type { PlumeThemePageData } from '../../shared'
 import PostMeta from './PostMeta.vue'
 const post = usePageData<PlumeThemePageData>()
 </script>
 <template>
  <main class="post-wrapper">
    <div class="post-container">
      <PostMeta :post="post" type="post" />
      <main class="post-content">
        <Content />
      </main>
    </div>
  </main>
 </template>
--- a/src/client/component/PostList.vue
+++ b/src/client/component/PostList.vue
@ -0,0 +1,41 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { usePostIndex } from '../composables/usePostIndex'
 import PostMeta from './PostMeta.vue'
 const postIndex = usePostIndex()
 const router = useRouter()
 const route = useRoute()
 const postList = computed(() => {
  const tag = route.query.tag as string
  if (route.path === '/tags/' && tag) {
    return postIndex.value.filter((post) =>
      post.frontmatter.tags?.includes(tag)
    )
  }
  return postIndex.value
 })
 const linkTo = (path: string): void => {
  router.push({ path })
 }
 </script>
 <template>
  <div class="post-list">
    <section
      v-for="post in postList"
      :key="post.path"
      class="post-list-item"
      @click="linkTo(post.path)"
    >
      <PostMeta :post="post" type="postItem"></PostMeta>
      <div v-if="post.excerpt" class="mt-3">
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="post-list-excerpt" v-html="post.excerpt"></div>
      </div>
    </section>
  </div>
 </template>
--- a/src/client/component/PostMeta.vue
+++ b/src/client/component/PostMeta.vue
@ -0,0 +1,64 @@
 <script lang="ts" setup>
 import * as dayjs from 'dayjs'
 import { computed, withDefaults } from 'vue'
 import type { PostItemIndex } from '../../shared'
 import Icon from './Icon.vue'
 const props = withDefaults(
  defineProps<{
    post: PostItemIndex
    type: 'post' | 'postItem'
  }>(),
  {}
 )
 const tags = computed(() => {
  return (props.post.frontmatter.tags || []).filter((_, i) => i < 4)
 })
 const formatDate = (date: number | Date | string | undefined): string => {
  return dayjs(date).format('YYYY-MM-DD')
 }
 // const getTags = (post: PostItemIndex): string[] => {
 //   const tags = post.frontmatter.tags || []
 //   return tags.splice(0, 4)
 // }
 </script>
 <template>
  <div class="post-meta">
    <h2 v-if="type === 'postItem'">
      {{ post.title }}
    </h2>
    <h1 v-else>{{ post.title }}</h1>
  </div>
  <div
    class="post-meta-profile"
    :class="post.excerpt || type === 'post' ? 'post-meta-profile-border' : ''"
  >
    <div class="post-author">
      <Icon type="user" size="sm" class="mr-1"></Icon>
      <span>{{ post.frontmatter.author }}</span>
    </div>
    <div class="post-category">
      <Icon type="folder" size="sm" class="mr-1"></Icon>
      <template v-for="(cate, index) in post.category" :key="cate.type">
        <span>
          {{ cate.name }}
        </span>
        <span v-if="index < post.category.length - 1"> / </span>
      </template>
    </div>
    <div v-if="tags && tags.length > 0" class="post-tags">
      <Icon type="tag" size="sm" class="mr-1"></Icon>
      <template v-for="(tag, index) in tags" :key="tag">
        <span>{{ tag }}</span>
        <span v-if="index < tags.length - 1">、</span>
      </template>
    </div>
    <div class="post-createtime">
      <Icon type="clock" size="sm" class="mr-1"></Icon>
      <span>{{ formatDate(post.frontmatter.createTime) }}</span>
    </div>
  </div>
 </template>
--- a/src/client/component/RightSideBar.vue
+++ b/src/client/component/RightSideBar.vue
@ -0,0 +1,35 @@
 <script lang="ts" setup>
 import Icon from '@theme/Icon.vue'
 import TagSidebar from '@theme/TageSidebar.vue'
 import { withBase } from '@vuepress/client'
 import { computed } from 'vue'
 import { useThemeData } from '../composables/useThemeData'
 const themeData = useThemeData()
 const avatarUrl = computed(() => {
  return withBase(themeData.value.avatarUrl)
 })
 </script>
 <template>
  <div class="right-sidebar-wrapper">
    <div class="profile-wrapper">
      <img :src="avatarUrl" alt="" />
      <div class="profile-link">
        <a v-if="themeData.github" :href="themeData.github" target="_blank"
          ><Icon type="github" size="xs" />
        </a>
        <a
          v-if="themeData.email"
          :href="'mailto:' + themeData.email"
          target="_blank"
          ><Icon type="email" size="xs" />
        </a>
      </div>
      <h3>{{ themeData.avatar }}</h3>
      <p v-if="themeData.description">
        {{ themeData.description }}
      </p>
    </div>
    <TagSidebar></TagSidebar>
  </div>
 </template>
--- a/src/client/component/TageSidebar.vue
+++ b/src/client/component/TageSidebar.vue
@ -0,0 +1,40 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { TagsItem } from '../composables/useTages'
 import { useTags } from '../composables/useTages'
 const tagList = useTags()
 const show = ref(false)
 const maxCount = ref(10)
 const triggerShow = (): void => {
  show.value = !show.value
 }
 const getLink = (tag: TagsItem): string => {
  return '/tags/?tag=' + encodeURIComponent(tag.tag)
 }
 </script>
 <template>
  <div class="tags-sidebar-wrapper">
    <h3>标签</h3>
    <div class="tags-sidebar-container">
      <RouterLink
        v-for="(tag, index) in tagList"
        v-show="index < maxCount || show"
        :key="tag.tag"
        :to="getLink(tag)"
      >
        <span>{{ tag.tag }}</span>
        <span>({{ tag.count }})</span>
      </RouterLink>
      <span
        v-if="tagList.length >= maxCount"
        class="tags-more"
        @click="triggerShow"
      >
        {{ show ? '隐藏' : '更多' }}
      </span>
    </div>
  </div>
 </template>
--- a/src/client/component/Tags.vue
+++ b/src/client/component/Tags.vue
@ -0,0 +1,14 @@
 <script lang="ts" setup>
 import PostList from '@theme/PostList.vue'
 import TagSidebar from '@theme/TageSidebar.vue'
 </script>
 <template>
  <div class="tags-wrapper">
    <div class="tags-container">
      <PostList class="flex-1" />
      <div class="right-sidebar-container">
        <TagSidebar></TagSidebar>
      </div>
    </div>
  </div>
 </template>
--- a/src/client/component/ToggleDarkModeButton.vue
+++ b/src/client/component/ToggleDarkModeButton.vue
@ -0,0 +1,57 @@
 <script setup lang="ts">
 import { useDarkMode, useThemeLocaleData } from '../composables'
 const themeLocale = useThemeLocaleData()
 const isDarkMode = useDarkMode()
 const toggleDarkMode = (): void => {
  isDarkMode.value = !isDarkMode.value
 }
 </script>
 <template>
  <button
    class="toggle-dark-button"
    :title="themeLocale.toggleDarkMode"
    @click="toggleDarkMode"
  >
    <svg
      v-show="!isDarkMode"
      class="icon"
      focusable="false"
      viewBox="0 0 32 32"
    >
      <path
        d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
        fill="currentColor"
      />
      <path
        d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z"
        fill="currentColor"
      />
      <path d="M2 15.005h5v2H2z" fill="currentColor" />
      <path
        d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
        fill="currentColor"
      />
      <path d="M15 25.005h2v5h-2z" fill="currentColor" />
      <path
        d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
        fill="currentColor"
      />
      <path d="M25 15.005h5v2h-5z" fill="currentColor" />
      <path
        d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
        fill="currentColor"
      />
      <path d="M15 2.005h2v5h-2z" fill="currentColor" />
    </svg>
    <svg v-show="isDarkMode" class="icon" focusable="false" viewBox="0 0 32 32">
      <path
        d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
        fill="currentColor"
      />
    </svg>
  </button>
 </template>
--- a/src/client/component/ToggleSidebarButton.vue
+++ b/src/client/component/ToggleSidebarButton.vue
@ -0,0 +1,24 @@
 <script setup lang="ts">
 import { useThemeLocaleData } from '../composables'
 defineEmits(['toggle'])
 const themeLocale = useThemeLocaleData()
 </script>
 <template>
  <div
    class="toggle-sidebar-button"
    :title="themeLocale.toggleSidebar"
    aria-expanded="false"
    role="button"
    tabindex="0"
    @click="$emit('toggle')"
  >
    <div class="icon" aria-hidden="true">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
 </template>
--- a/src/client/composables/index.ts
+++ b/src/client/composables/index.ts
@ -0,0 +1,7 @@
 export * from './useDarkMode'
 export * from './useNavLink'
 export * from './useResolveRouteWithRedirect'
 export * from './useScrollPromise'
 export * from './useSidebarItems'
 export * from './useThemeData'
 export * from './useCategoryList'
--- a/src/client/composables/useArchives.ts
+++ b/src/client/composables/useArchives.ts
@ -0,0 +1,34 @@
 import * as dayjs from 'dayjs'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import type { PostItemIndex } from '../../shared'
 import { usePostIndex } from './usePostIndex'
 export interface ArchivesItem {
  label: string | number
  postList: PostItemIndex[]
 }
 export type Archives = ArchivesItem[]
 export type ArchivesRef = Ref<Archives>
 const ArchivesListRaw: Archives = []
 usePostIndex().value.forEach((post) => {
  const createTime = dayjs(post.frontmatter.createTime)
  const year = createTime.year()
  let current = ArchivesListRaw.find((arch) => arch.label === year)
  if (!current) {
    current = {
      label: year,
      postList: [],
    }
    ArchivesListRaw.push(current)
  }
  current.postList.push(post)
 })
 export const archivesList: ArchivesRef = ref(ArchivesListRaw)
 export const useArchivesList = (): ArchivesRef => archivesList
--- a/src/client/composables/useCategoryList.ts
+++ b/src/client/composables/useCategoryList.ts
@ -0,0 +1,61 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import type { PostItemIndex } from '../../shared'
 import { usePostIndex } from './usePostIndex'
 export interface CategoryItem {
  label: string
  type: string | number
  children: CategoryList
  postList: PostItemIndex[]
 }
 export type CategoryList = CategoryItem[]
 export type CategoryListRef = Ref<CategoryList>
 const categoriesRaw: CategoryList = []
 usePostIndex().value.forEach((post) => {
  const category = post.category
  let index = 1
  let cate = category[0]
  let first = categoriesRaw.find((c) => c.type === cate.type)
  if (!first) {
    first = {
      label: cate.name,
      type: cate.type,
      children: [],
      postList: [],
    }
    categoriesRaw.push(first)
  }
  if (category.length === 1) {
    first.postList.push(post)
  }
  let children = first.children
  while ((cate = category[index])) {
    let current = children.find((c) => c.type === cate.type)
    if (!current) {
      current = {
        label: cate.name,
        type: cate.type,
        children: [],
        postList: [],
      }
    }
    children.push(current)
    children = current.children
    if (index === category.length - 1) {
      current.postList.push(post)
    }
    index++
  }
 })
 export const categoryList: CategoryListRef = ref(
  categoriesRaw.sort((left, right) => {
    return left.type > right.type ? 1 : -1
  })
 )
 export const useCategoryList = (): CategoryListRef => categoryList
--- a/src/client/composables/useDarkMode.ts
+++ b/src/client/composables/useDarkMode.ts
@ -0,0 +1,66 @@
 import { usePreferredDark, useStorage } from '@vueuse/core'
 import { computed, inject, onMounted, onUnmounted, provide, watch } from 'vue'
 import type { InjectionKey, WritableComputedRef } from 'vue'
 import { useThemeLocaleData } from '.'
 export type DarkModeRef = WritableComputedRef<boolean>
 export const darkModeSymbol: InjectionKey<DarkModeRef> = Symbol('')
 /**
 * Inject dark mode global computed
 */
 export const useDarkMode = (): DarkModeRef => {
  const isDarkMode = inject(darkModeSymbol)
  if (!isDarkMode) {
    throw new Error('useDarkMode() is called without provider.')
  }
  return isDarkMode
 }
 /**
 * Create dark mode ref and provide as global computed in setup
 */
 export const setupDarkMode = (): void => {
  const themeLocale = useThemeLocaleData()
  const isDarkPreferred = usePreferredDark()
  const darkStorage = useStorage('vuepress-color-scheme', 'auto')
  const isDarkMode = computed<boolean>({
    get() {
      // disable dark mode
      if (!themeLocale.value.darkMode) {
        return false
      }
      // auto detected from prefers-color-scheme
      if (darkStorage.value === 'auto') {
        return isDarkPreferred.value
      }
      // storage value
      return darkStorage.value === 'dark'
    },
    set(val) {
      if (val === isDarkPreferred.value) {
        darkStorage.value = 'auto'
      } else {
        darkStorage.value = val ? 'dark' : 'light'
      }
    },
  })
  provide(darkModeSymbol, isDarkMode)
  updateHtmlDarkClass(isDarkMode)
 }
 export const updateHtmlDarkClass = (isDarkMode: DarkModeRef): void => {
  const update = (value = isDarkMode.value): void => {
    // set `class="dark"` on `<html>` element
    const htmlEl = window?.document.querySelector('html')
    htmlEl?.classList.toggle('dark', value)
  }
  onMounted(() => {
    watch(isDarkMode, update, { immediate: true })
  })
  onUnmounted(() => update())
 }
--- a/src/client/composables/useNavLink.ts
+++ b/src/client/composables/useNavLink.ts
@ -0,0 +1,23 @@
 import type { NavLink } from '../../shared'
 import { useResolveRouteWithRedirect } from './useResolveRouteWithRedirect'
 declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
 }
 /**
 * Resolve NavLink props from string
 *
 * @example
 * - Input: '/README.md'
 * - Output: { text: 'Home', link: '/' }
 */
 export const useNavLink = (item: string): NavLink => {
  const resolved = useResolveRouteWithRedirect(item)
  return {
    text: resolved.meta.title || item,
    link: resolved.name === '404' ? item : resolved.fullPath,
  }
 }
--- a/src/client/composables/usePostIndex.ts
+++ b/src/client/composables/usePostIndex.ts
@ -0,0 +1,16 @@
 import { postIndex as postListRaw } from '@internal/postIndex.js'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 import type { PostIndex } from '../../shared'
 export type PostIndexRef = Ref<PostIndex>
 export const postIndex: PostIndexRef = ref(postListRaw)
 export const usePostIndex = (): PostIndexRef => postIndex
 if ((import.meta as any).hot) {
  __VUE_HMR_RUNTIME__.updatePostIndex = (data: PostIndex) => {
    postIndex.value = data
  }
 }
--- a/src/client/composables/useResolveRouteWithRedirect.ts
+++ b/src/client/composables/useResolveRouteWithRedirect.ts
@ -0,0 +1,28 @@
 import { isFunction, isString } from '@vuepress/shared'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 /**
 * Resolve a route with redirection
 */
 export const useResolveRouteWithRedirect = (
  ...args: Parameters<Router['resolve']>
 ): ReturnType<Router['resolve']> => {
  const router = useRouter()
  const route = router.resolve(...args)
  const lastMatched = route.matched[route.matched.length - 1]
  if (!lastMatched?.redirect) {
    return route
  }
  const { redirect } = lastMatched
  const resolvedRedirect = isFunction(redirect) ? redirect(route) : redirect
  const resolvedRedirectObj = isString(resolvedRedirect)
    ? { path: resolvedRedirect }
    : resolvedRedirect
  return useResolveRouteWithRedirect({
    hash: route.hash,
    query: route.query,
    params: route.params,
    ...resolvedRedirectObj,
  })
 }
--- a/src/client/composables/useScrollPromise.ts
+++ b/src/client/composables/useScrollPromise.ts
@ -0,0 +1,22 @@
 export interface ScrollPromise {
  wait(): Promise<void> | null
  pending: () => void
  resolve: () => void
 }
 let promise: Promise<void> | null = null
 let promiseResolve: (() => void) | null = null
 const scrollPromise: ScrollPromise = {
  wait: () => promise,
  pending: () => {
    promise = new Promise((resolve) => (promiseResolve = resolve))
  },
  resolve: () => {
    promiseResolve?.()
    promise = null
    promiseResolve = null
  },
 }
 export const useScrollPromise = (): ScrollPromise => scrollPromise
--- a/src/client/composables/useSidebarItems.ts
+++ b/src/client/composables/useSidebarItems.ts
@ -0,0 +1,179 @@
 import { usePageData, usePageFrontmatter } from '@vuepress/client'
 import type { PageHeader } from '@vuepress/client'
 import type { PageFrontmatter } from '@vuepress/shared'
 import {
  isArray,
  isPlainObject,
  isString,
  resolveLocalePath,
 } from '@vuepress/shared'
 import { computed, inject, provide } from 'vue'
 import type { ComputedRef, InjectionKey } from 'vue'
 import { useRoute } from 'vue-router'
 import type {
  PlumeThemeData,
  PlumeThemePostPageFrontmatter,
  ResolvedSidebarItem,
  SidebarConfigArray,
  SidebarConfigObject,
  SidebarItem,
 } from '../../shared'
 import { useNavLink, useThemeLocaleData } from '.'
 export type SidebarItemsRef = ComputedRef<ResolvedSidebarItem[]>
 export const sidebarItemsSymbol: InjectionKey<SidebarItemsRef> =
  Symbol('sidebarItems')
 /**
 * Inject sidebar items global computed
 */
 export const useSidebarItems = (): SidebarItemsRef => {
  const sidebarItems = inject(sidebarItemsSymbol)
  if (!sidebarItems) {
    throw new Error('useSidebarItems() is called without provider.')
  }
  return sidebarItems
 }
 /**
 * Create sidebar items ref and provide as global computed in setup
 */
 export const setupSidebarItems = (): void => {
  const themeLocale = useThemeLocaleData()
  const frontmatter = usePageFrontmatter<PlumeThemePostPageFrontmatter>()
  const sidebarItems = computed(() =>
    resolveSidebarItems(frontmatter.value, themeLocale.value)
  )
  provide(sidebarItemsSymbol, sidebarItems)
 }
 /**
 * Resolve sidebar items global computed
 *
 * It should only be resolved and provided once
 */
 export const resolveSidebarItems = (
  frontmatter: PageFrontmatter<PlumeThemePostPageFrontmatter>,
  themeLocale: PlumeThemeData
 ): ResolvedSidebarItem[] => {
  // get sidebar config from frontmatter > themeConfig
  const sidebarConfig = frontmatter.sidebar ?? themeLocale.sidebar ?? 'auto'
  const sidebarDepth = frontmatter.sidebarDepth ?? themeLocale.sidebarDepth ?? 2
  // resolve sidebar items according to the config
  if (frontmatter.home || sidebarConfig === false) {
    return []
  }
  if (sidebarConfig === 'auto') {
    return resolveAutoSidebarItems(sidebarDepth)
  }
  if (isArray(sidebarConfig)) {
    return resolveArraySidebarItems(sidebarConfig, sidebarDepth)
  }
  if (isPlainObject(sidebarConfig)) {
    return resolveMultiSidebarItems(sidebarConfig, sidebarDepth)
  }
  return []
 }
 /**
 * Util to transform page header to sidebar item
 */
 export const headerToSidebarItem = (
  header: PageHeader,
  sidebarDepth: number
 ): ResolvedSidebarItem => ({
  text: header.title,
  link: `#${header.slug}`,
  children: headersToSidebarItemChildren(header.children, sidebarDepth),
 })
 export const headersToSidebarItemChildren = (
  headers: PageHeader[],
  sidebarDepth: number
 ): ResolvedSidebarItem[] =>
  sidebarDepth > 0
    ? headers.map((header) => headerToSidebarItem(header, sidebarDepth - 1))
    : []
 /**
 * Resolve sidebar items if the config is `auto`
 */
 export const resolveAutoSidebarItems = (
  sidebarDepth: number
 ): ResolvedSidebarItem[] => {
  const page = usePageData()
  return [
    {
      text: page.value.title,
      children: headersToSidebarItemChildren(page.value.headers, sidebarDepth),
    },
  ]
 }
 /**
 * Resolve sidebar items if the config is an array
 */
 export const resolveArraySidebarItems = (
  sidebarConfig: SidebarConfigArray,
  sidebarDepth: number
 ): ResolvedSidebarItem[] => {
  const route = useRoute()
  const page = usePageData()
  const handleChildItem = (
    item: ResolvedSidebarItem | SidebarItem | string
  ): ResolvedSidebarItem => {
    let childItem: ResolvedSidebarItem
    if (isString(item)) {
      childItem = useNavLink(item)
    } else {
      childItem = item as ResolvedSidebarItem
    }
    if (childItem.children) {
      return {
        ...childItem,
        children: childItem.children.map((item) => handleChildItem(item)),
      }
    }
    // if the sidebar item is current page and children is not set
    // use headers of current page as children
    if (childItem.link === route.path) {
      // skip h1 header
      const headers =
        page.value.headers[0]?.level === 1
          ? page.value.headers[0].children
          : page.value.headers
      return {
        ...childItem,
        children: headersToSidebarItemChildren(headers, sidebarDepth),
      }
    }
    return childItem
  }
  return sidebarConfig.map((item) => handleChildItem(item))
 }
 /**
 * Resolve sidebar items if the config is a key -> value (path-prefix -> array) object
 */
 export const resolveMultiSidebarItems = (
  sidebarConfig: SidebarConfigObject,
  sidebarDepth: number
 ): ResolvedSidebarItem[] => {
  const route = useRoute()
  const sidebarPath = resolveLocalePath(sidebarConfig, route.path)
  const matchedSidebarConfig = sidebarConfig[sidebarPath] ?? []
  return resolveArraySidebarItems(matchedSidebarConfig, sidebarDepth)
 }
--- a/src/client/composables/useTages.ts
+++ b/src/client/composables/useTages.ts
@ -0,0 +1,34 @@
 import type { Ref } from 'vue'
 import { ref } from 'vue'
 import { usePostIndex } from './usePostIndex'
 export type TagsItem = {
  tag: string
  count: number
 }
 export type Tags = TagsItem[]
 export type TagsRef = Ref<Tags>
 const tagsObj: Record<string, number> = {}
 usePostIndex().value.forEach((post) => {
  ;(post.frontmatter.tags || []).forEach((t) => {
    if (!tagsObj[t]) {
      tagsObj[t] = 1
    } else {
      tagsObj[t] += 1
    }
  })
 })
 const tagsRaw: Tags = Object.keys(tagsObj)
  .map((key) => ({
    tag: key,
    count: tagsObj[key],
  }))
  .sort((left, right) => (left.count <= right.count ? 1 : -1))
 export const tags: TagsRef = ref(tagsRaw)
 export const useTags = (): TagsRef => tags
--- a/src/client/composables/useThemeData.ts
+++ b/src/client/composables/useThemeData.ts
@ -0,0 +1,14 @@
 import {
  useThemeData as _useThemeData,
  useThemeLocaleData as _useThemeLocaleData,
 } from '@vuepress/plugin-theme-data/lib/client'
 import type {
  ThemeDataRef,
  ThemeLocaleDataRef,
 } from '@vuepress/plugin-theme-data/lib/client'
 import type { PlumeThemeData } from '../../shared'
 export const useThemeData = (): ThemeDataRef<PlumeThemeData> =>
  _useThemeData<PlumeThemeData>()
 export const useThemeLocaleData = (): ThemeLocaleDataRef<PlumeThemeData> =>
  _useThemeLocaleData<PlumeThemeData>()
--- a/src/client/layouts/404.vue
+++ b/src/client/layouts/404.vue
@ -0,0 +1,8 @@
 <script lang="ts" setup>
 import { useSiteData } from '@vuepress/client'
 console.log(useSiteData())
 </script>
 <template>
  <div>404</div>
 </template>
--- a/src/client/layouts/Layout.vue
+++ b/src/client/layouts/Layout.vue
@ -0,0 +1,31 @@
 <script lang="ts" setup>
 import Archives from '@theme/Archives.vue'
 import Category from '@theme/Category.vue'
 import Home from '@theme/Home.vue'
 import NavBar from '@theme/NavBar.vue'
 import Post from '@theme/Post.vue'
 import Tags from '@theme/Tags.vue'
 import { usePageData, usePageFrontmatter } from '@vuepress/client'
 import type {
  PlumeThemePageData,
  PlumeThemePageFrontmatter,
 } from '../../shared'
 const pageData = usePageData<PlumeThemePageData>()
 const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
 const layout = {
  category: Category,
  archives: Archives,
  tags: Tags,
 }
 </script>
 <template>
  <div class="theme-container">
    <NavBar />
    <Home v-if="frontmatter.home" />
    <Post v-if="pageData.isPost" />
    <Component :is="layout[frontmatter.pageType]" v-if="frontmatter.pageType" />
  </div>
 </template>
--- a/src/client/shim.d.ts
+++ b/src/client/shim.d.ts
@ -0,0 +1,5 @@
 declare module '*.vue' {
  import type { ComponentOptions } from 'vue'
  const comp: ComponentOptions
  export default comp
 }
--- a/src/client/styles/archives.css
+++ b/src/client/styles/archives.css
@ -0,0 +1,34 @@
 .archives-list-wrapper {
  @apply w-full max-w-6xl m-auto pt-20;
  & .archives-list-container {
    @apply p-5 bg-white rounded-md mb-5 shadow-sm;
  }
  & h2 {
    @apply text-slate-800 text-4xl py-5 pl-5 bg-white shadow-sm rounded-md mb-5;
  }
  & h3,h4 {
    @apply text-2xl pb-4 text-slate-500;
    & span {
      @apply ml-3 ;
    }
  }
  & .archives-item {
    @apply flex justify-start items-center;
    @apply h-9 text-xl text-slate-400;
    & span {
      @apply mr-5;
    }
    & a {
      @apply text-slate-500 font-bold transition-all;
      @apply hover:underline hover:text-slate-600;
    }
  }
 }
--- a/src/client/styles/arrow.css
+++ b/src/client/styles/arrow.css
@ -0,0 +1,24 @@
@custom-media --min-viewprot (min-width: 719px);
@media (--min-viewprot) {
  ::-webkit-scrollbar{
    width:6px;
    height:5px;
  }
  ::-webkit-scrollbar-track-piece{
    background-color:rgba(0,0,0,.15);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:vertical{
    height:5px;
    background-color:rgba(0,0,0,.28);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:horizontal{
    width:5px;
    background-color:rgba(0,0,0,.28);
    border-radius: 3px;
  }
 }
--- a/src/client/styles/category.css
+++ b/src/client/styles/category.css
@ -0,0 +1,52 @@
 .category-wrapper {
  @apply pt-20;
  & .category-container {
    @apply w-full max-w-6xl m-auto shadow-sm mb-10;
  }
  & .category-header {
    @apply text-slate-800 text-4xl py-5 pl-5 bg-white shadow-sm rounded-md mb-5;
  }
 }
 .category-group-wrapper {
  @apply pt-5 pl-5 bg-white shadow-sm rounded-md mb-5 pr-5 pb-5;
  & & {
    @apply shadow-none mb-0;
  }
  & h2 {
    @apply text-3xl pb-4 mb-3;
    & span {
      @apply ml-5;
    }
  }
  & h3,h4 {
    @apply text-2xl pb-4 text-slate-500;
    & span {
      @apply ml-3 ;
    }
  }
  & h5, h6 {
    @apply text-xl pb-3;
    & span {
      @apply ml-2;
    }
  }
  & .category-group-item {
    @apply flex justify-start items-center;
    @apply h-9 text-xl text-slate-400;
    & a {
      @apply text-slate-500 font-bold transition-all;
      @apply hover:underline hover:text-slate-600;
    }
  }
 }
--- a/src/client/styles/code-group.css
+++ b/src/client/styles/code-group.css
@ -0,0 +1,69 @@
 /* @import '_variables'; */
 /**
 * code-group
 */
 .code-group__nav {
  margin-top: 0.85rem;
  /* // 2 * margin + border-radius of <pre> tag */
  margin-bottom: calc(-1.7rem - 6px);
  padding-bottom: calc(1.7rem - 6px);
  padding-left: 10px;
  padding-top: 10px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: var(--code-bg-color);
 }
 .code-group__ul {
  margin: auto 0;
  padding-left: 0;
  display: inline-flex;
  list-style: none;
 }
 .code-group__nav-tab {
  border: 0;
  padding: 5px;
  cursor: pointer;
  background-color: transparent;
  font-size: 0.85em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
 }
 .code-group__nav-tab:focus {
  outline: none;
 }
 .code-group__nav-tab:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.9);
 }
 .code-group__nav-tab-active {
  border-bottom: var(--c-brand) 1px solid;
 }
@media (max-width: $MQMobileNarrow) {
  .code-group__nav {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    border-radius: 0;
  }
 }
 /**
 * code-group-item
 */
 .code-group-item {
  display: none;
 }
 .code-group-item__active {
  display: block;
 }
 .code-group-item > pre {
  background-color: orange;
 }
--- a/src/client/styles/code.css
+++ b/src/client/styles/code.css
@ -0,0 +1,265 @@
 /* @import '_variables'; */
 /* =============================== */
 /* Forked and modified from prismjs/themes/prism-tomorrow.css */
 code[class*='language-'],
 pre[class*='language-'] {
  color: #ccc;
  background: none;
  font-family: var(--font-family-code);
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  background-color: none;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
 }
 /* Code blocks */
 pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
 }
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
  background: #2d2d2d;
 }
 /* Inline code */
 :not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
 }
 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
  color: #999;
 }
 .token.punctuation {
  color: #ccc;
 }
 .token.tag,
 .token.attr-name,
 .token.namespace,
 .token.deleted {
  color: #ec5975;
 }
 .token.function-name {
  color: #6196cc;
 }
 .token.boolean,
 .token.number,
 .token.function {
  color: #f08d49;
 }
 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
  color: #f8c555;
 }
 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
  color: #cc99cd;
 }
 .token.string,
 .token.char,
 .token.attr-value,
 .token.regex,
 .token.variable {
  color: #7ec699;
 }
 .token.operator,
 .token.entity,
 .token.url {
  color: #67cdcc;
 }
 .token.important,
 .token.bold {
  font-weight: bold;
 }
 .token.italic {
  font-style: italic;
 }
 .token.entity {
  cursor: help;
 }
 .token.inserted {
  color: #3eaf7c;
 }
 /* =============================== */
 .post-content{
  pre,
  pre[class*='language-'] {
    line-height: 1.4;
    padding: 1.3rem 1.5rem;
    margin: 0.85rem 0;
    border-radius: 6px;
    overflow: auto;
    code {
      color: #fff;
      padding: 0;
      background-color: transparent;
      border-radius: 0;
      overflow-wrap: unset;
      line-height: 1.77;
      -webkit-font-smoothing: auto;
      -moz-osx-font-smoothing: auto;
    }
  }
  .line-number {
    font-family: var(--font-family-code);
  }
 }
 div[class*='language-'] {
  position: relative;
  background-color: var(--code-bg-color);
  border-radius: 6px;
  &::before {
    position: absolute;
    z-index: 3;
    top: 0.8em;
    right: 1em;
    font-size: 0.75rem;
    color: var(--code-ln-color);
  }
  pre,
  pre[class*='language-'] {
    background: transparent !important;
    position: relative;
    z-index: 1;
  }
  .highlight-lines {
    user-select: none;
    padding-top: 1.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;
    .highlight-line {
      background-color: var(--code-hl-bg-color);
    }
  }
  &:not(.line-numbers-mode) {
    .line-numbers {
      display: none;
    }
  }
  &.line-numbers-mode {
    .highlight-lines .highlight-line {
      position: relative;
      &::before {
        content: ' ';
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        display: block;
        width: var(--code-ln-wrapper-width);
        height: 100%;
      }
    }
    pre {
      margin-left: var(--code-ln-wrapper-width);
      padding-left: 1rem;
      vertical-align: middle;
    }
    .line-numbers {
      position: absolute;
      top: 0;
      width: var(--code-ln-wrapper-width);
      text-align: center;
      color: var(--code-ln-color);
      padding-top: 1.25rem;
      line-height: 1.4;
      br {
        user-select: none;
      }
      .line-number {
        position: relative;
        z-index: 3;
        user-select: none;
        font-size: 0.85em;
        line-height: 0;
      }
    }
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: var(--code-ln-wrapper-width);
      height: 100%;
      border-radius: 6px 0 0 6px;
      border-right: 1px solid var(--code-hl-bg-color);
    }
  }
 }
@each $lang in c, cpp, cs, css, dart, docker, fs, go, html, java, js, json, kt, less, makefile, md, php, py, rb, rs, sass, scss, sh, styl, ts, toml, vue, yml {
  div[class*='language-'].ext-$(lang) {
    &:before {
      content: '$(lang)';
    }
  }
 }
 /* narrow mobile */
@media (max-width: 419px) {
  .post-content {
    div[class*='language-'] {
      margin: 0.85rem -1.5rem;
      border-radius: 0;
    }
  }
 }
--- a/src/client/styles/home.css
+++ b/src/client/styles/home.css
@ -0,0 +1,40 @@
 .home-wrapper {
  @apply w-full min-h-screen pt-14;
  & .home-banner {
    @apply flex justify-center items-center h-80 m-0 bg-gray-200 bg-no-repeat bg-cover bg-top;
  }
 }
 .home-container {
  @apply flex justify-start items-start w-full max-w-6xl m-auto pt-5;
 }
 .right-sidebar-wrapper {
  @apply  ml-5 w-80;
  & .profile-wrapper {
    @apply bg-white shadow-sm hover:shadow-md transition-shadow p-5 rounded-md mb-5;
    & .profile-link {
      @apply flex justify-center items-center pt-3;
    }
    & img {
      @apply w-2/3 m-auto;
    }
    & a {
      @apply mx-2 text-slate-500;
    }
    & h3 {
      @apply text-center pt-3;
    }
    & p {
      @apply pt-2 text-gray-500 text-center;
    }
  }
 }
--- a/src/client/styles/index.css
+++ b/src/client/styles/index.css
@ -0,0 +1,14 @@
@import 'vars';
@import 'vars-dark';
@import './normalize';
@import './arrow';
@import './navBar';
@import './home';
@import './post';
@import './category';
@import './archives';
@import './tags';
@import './code';
@import './code-group';
--- a/src/client/styles/navBar.css
+++ b/src/client/styles/navBar.css
@ -0,0 +1,7 @@
 .navbar-wrapper {
  @apply fixed top-0 left-0 w-full h-14 bg-white shadow-md z-50 flex justify-between items-center px-10;
  & .nav-link {
    @apply ml-8 text-slate-600 font-bold;
  }
 }
--- a/src/client/styles/normalize.css
+++ b/src/client/styles/normalize.css
@ -0,0 +1,177 @@
 html,
 body {
  padding: 0;
  margin: 0;
  @apply bg-gray-100;
  transition: background-color var(--t-color);
 }
 html.dark {
  color-scheme: dark;
 }
 body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  color: var(--c-text);
 }
 *,
 *::after,
 *::before {
  box-sizing: border-box;
 }
 a {
  font-weight: 500;
  color: var(--c-text-accent);
  text-decoration: none;
  overflow-wrap: break-word;
 }
 p a code {
  font-weight: 400;
  color: var(--c-text-accent);
 }
 kbd {
  font-family: var(--font-family-code);
  color: var(--c-text);
  background: var(--c-bg-lighter);
  border: solid 0.15rem var(--c-border-dark);
  border-bottom: solid 0.25rem var(--c-border-dark);
  border-radius: 0.15rem;
  padding: 0 0.15em;
 }
 code {
  font-family: var(--font-family-code);
  color: var(--c-text-lighter);
  padding: 0.25rem 0.5rem;
  margin: 0;
  font-size: 0.85em;
  border-radius: 3px;
  overflow-wrap: break-word;
  transition: background-color var(--t-color);
 }
 blockquote {
  font-size: 1rem;
  color: var(--c-text-quote);
  border-left: 0.2rem solid var(--c-border-dark);
  margin: 1rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  & > p {
    margin: 0;
  }
 }
 ul,
 ol {
  padding-left: 1.2em;
 }
 strong {
  font-weight: 600;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  font-weight: 600;
  line-height: 1.25;
  &:focus-visible {
    outline: none;
  }
  &:hover .header-anchor {
    opacity: 1;
  }
 }
 h1 {
  font-size: 2.2rem;
 }
 h2 {
  font-size: 1.65rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--c-border);
  transition: border-color var(--t-color);
 }
 h3 {
  font-size: 1.35rem;
 }
 h4 {
  font-size: 1.15rem;
 }
 h5 {
  font-size: 1.05rem;
 }
 h6 {
  font-size: 1rem;
 }
 a.header-anchor {
  font-size: 0.85em;
  float: left;
  margin-left: -0.87em;
  padding-right: 0.23em;
  margin-top: 0.125em;
  opacity: 0;
  &:hover {
    text-decoration: none;
  }
  &:focus-visible {
    opacity: 1;
  }
 }
 p,
 ul,
 ol {
  line-height: 1.7;
 }
 hr {
  border: 0;
  border-top: 1px solid var(--c-border);
 }
 table {
  border-collapse: collapse;
  margin: 1rem 0;
  display: block;
  overflow-x: auto;
  transition: border-color var(--t-color);
 }
 tr {
  border-top: 1px solid var(--c-border-dark);
  transition: border-color var(--t-color);
  &:nth-child(2n) {
    background-color: var(--c-bg-light);
    transition: background-color var(--t-color);
  }
 }
 th,
 td {
  padding: 0.6em 1em;
  border: 1px solid var(--c-border-dark);
  transition: border-color var(--t-color);
 }
--- a/src/client/styles/post.css
+++ b/src/client/styles/post.css
@ -0,0 +1,57 @@
 .post-wrapper {
  @apply pt-20;
  & .post-container {
    @apply w-full max-w-6xl p-12 pt-0 m-auto bg-white shadow-sm mb-10;
  }
  & .post-content {
    @apply prose prose-lg prose-gray max-w-none mt-10;
  }
 }
 .post-meta {
  @apply flex pb-2;
  & h2 {
    @apply flex-1 pr-5 border-none;
  }
  & h1 {
    @apply flex-1 pr-5 pt-9 mb-5;
  }
  &-profile {
    @apply flex justify-start text-base text-gray-400;
    &-border {
      @apply border-b border-gray-200 pb-3;
    }
    & .post-author {
      @apply flex items-center mr-5;
    }
    & .post-category {
      @apply flex items-center mr-5;
    }
    & .post-createtime {
      @apply flex items-center;
    }
    & .post-tags {
      @apply flex items-center mr-5;
    }
  }
 }
 .post-list {
  &-item {
    @apply bg-white mb-5 shadow-sm hover:shadow-md transition-shadow p-5 rounded-md cursor-pointer;
  }
  &-excerpt {
    @apply prose prose-lg max-w-none;
  }
 }
--- a/src/client/styles/tags.css
+++ b/src/client/styles/tags.css
@ -0,0 +1,35 @@
 .tags-sidebar-wrapper {
  @apply bg-white shadow-sm hover:shadow-md transition-shadow p-5 rounded-md mb-5;
  & h3 {
    @apply border-b border-gray-300 pb-3 text-slate-500 text-xl;
  }
  & .tags-sidebar-container {
    @apply pt-3 -mx-3;
    & a {
      @apply inline-block px-3 py-2 bg-slate-400 text-white ml-3 mt-3 leading-4 rounded-sm;
      & span:last-of-type {
        @apply ml-1;
      }
    }
    & .tags-more {
      @apply inline-block px-3 py-2 text-slate-400 ml-3 mt-3 leading-4 rounded-sm cursor-pointer;
    }
  }
 }
 .tags-wrapper {
  @apply w-full min-h-screen pt-14;
 }
 .tags-container {
  @apply flex justify-start items-start w-full max-w-6xl m-auto pt-5;
  .right-sidebar-container {
    @apply  ml-5 w-80;
  }
 }
--- a/src/client/styles/tailwind.css
+++ b/src/client/styles/tailwind.css
@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/src/client/styles/vars-dark.css
+++ b/src/client/styles/vars-dark.css
@ -0,0 +1,46 @@
 html.dark {
  /* // brand colors */
  --c-brand: #3aa675;
  --c-brand-light: #349469;
  /* // background colors */
  --c-bg: #22272e;
  --c-bg-light: #2b313a;
  --c-bg-lighter: #262c34;
  /* // text colors */
  --c-text: #adbac7;
  --c-text-light: #96a7b7;
  --c-text-lighter: #8b9eb0;
  --c-text-lightest: #8094a8;
  /* // border colors */
  --c-border: #3e4c5a;
  --c-border-dark: #34404c;
  /* // custom container colors */
  --c-tip: #318a62;
  --c-warning: #ceab00;
  --c-warning-bg: #7e755b;
  --c-warning-title: #ceac03;
  --c-warning-text: #362e00;
  --c-danger: #940000;
  --c-danger-bg: #806161;
  --c-danger-title: #610000;
  --c-danger-text: #3a0000;
  --c-details-bg: #323843;
  /* // code blocks vars */
  --code-hl-bg-color: #363b46;
 }
 /* // plugin-docsearch */
 html.dark .DocSearch {
  --docsearch-logo-color: var(--c-text);
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
    0 2px 2px 0 rgba(3, 4, 9, 0.3);
  --docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);
  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 }
--- a/src/client/styles/vars.css
+++ b/src/client/styles/vars.css
@ -0,0 +1,134 @@
 :root {
  /* // brand colors */
  --c-brand: #0099CC;
  --c-brand-light: #0099FF;
  /* // background colors */
  --c-bg: #ffffff;
  --c-bg-light: #f3f4f5;
  --c-bg-lighter: #eeeeee;
  --c-bg-navbar: var(--c-bg);
  --c-bg-sidebar: var(--c-bg);
  --c-bg-arrow: #cccccc;
  /* // text colors */
  --c-text: #2c3e50;
  --c-text-accent: var(--c-brand);
  --c-text-light: #3a5169;
  --c-text-lighter: #4e6e8e;
  --c-text-lightest: #6a8bad;
  --c-text-quote: #999999;
  /* // border colors */
  --c-border: #eaecef;
  --c-border-dark: #dfe2e5;
  /* // custom container colors */
  --c-tip: #42b983;
  --c-tip-bg: var(--c-bg-light);
  --c-tip-title: var(--c-text);
  --c-tip-text: var(--c-text);
  --c-tip-text-accent: var(--c-text-accent);
  --c-warning: #e7c000;
  --c-warning-bg: #fffae3;
  --c-warning-title: #ad9000;
  --c-warning-text: #746000;
  --c-warning-text-accent: var(--c-text);
  --c-danger: #cc0000;
  --c-danger-bg: #ffe0e0;
  --c-danger-title: #990000;
  --c-danger-text: #660000;
  --c-danger-text-accent: var(--c-text);
  --c-details-bg: #eeeeee;
  /* // badge component colors */
  --c-badge-tip: var(--c-tip);
  --c-badge-warning: var(--c-warning);
  --c-badge-danger: var(--c-danger);
  /* // transition vars */
  --t-color: 0.3s ease;
  --t-transform: 0.3s ease;
  /* // code blocks vars */
  --code-bg-color: #282c34;
  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
  --code-ln-color: #9e9e9e;
  --code-ln-wrapper-width: 3.5rem;
  /* // font vars */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  /* // layout vars */
  --navbar-height: 3.6rem;
  --navbar-padding-v: 0.7rem;
  --navbar-padding-h: 1.5rem;
  --sidebar-width: 20rem;
  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
  --content-width: 740px;
  --homepage-width: 960px;
 }
 /* // plugin-back-to-top */
 .back-to-top {
  --back-to-top-color: var(--c-brand);
  --back-to-top-color-hover: var(--c-brand-light);
 }
 /* // plugin-docsearch */
 .DocSearch {
  --docsearch-primary-color: var(--c-brand);
  --docsearch-text-color: var(--c-text);
  --docsearch-highlight-color: var(--c-brand);
  --docsearch-muted-color: var(--c-text-quote);
  --docsearch-container-background: rgba(9, 10, 17, 0.8);
  --docsearch-modal-background: var(--c-bg-light);
  --docsearch-searchbox-background: var(--c-bg-lighter);
  --docsearch-searchbox-focus-background: var(--c-bg);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
  --docsearch-hit-color: var(--c-text-light);
  --docsearch-hit-active-color: var(--c-bg);
  --docsearch-hit-background: var(--c-bg);
  --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
  --docsearch-footer-background: var(--c-bg);
 }
 /* // plugin-external-link-icon */
 .external-link-icon {
  --external-link-icon-color: var(--c-text-quote);
 }
 /* // plugin-medium-zoom */
 .medium-zoom-overlay {
  --medium-zoom-bg-color: var(--c-bg);
 }
 /* // plugin-nprogress */
 #nprogress {
  --nprogress-color: var(--c-brand);
 }
 /* // plugin-pwa-popup */
 .pwa-popup {
  --pwa-popup-text-color: var(--c-text);
  --pwa-popup-bg-color: var(--c-bg);
  --pwa-popup-border-color: var(--c-brand);
  --pwa-popup-shadow: 0 4px 16px var(--c-brand);
  --pwa-popup-btn-text-color: var(--c-bg);
  --pwa-popup-btn-bg-color: var(--c-brand);
  --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
 }
 /* // plugin-search */
 .search-box {
  --search-bg-color: var(--c-bg);
  --search-accent-color: var(--c-brand);
  --search-text-color: var(--c-text);
  --search-border-color: var(--c-border);
  --search-item-text-color: var(--c-text-lighter);
  --search-item-focus-bg-color: var(--c-bg-light);
 }
--- a/src/client/utils/index.d.ts
+++ b/src/client/utils/index.d.ts
@ -0,0 +1,3 @@
 export * from './isActiveSidebarItem';
 export * from './resolveEditLink';
 export * from './resolveRepoType';
--- a/src/client/utils/index.js
+++ b/src/client/utils/index.js
@ -0,0 +1,3 @@
 export * from './isActiveSidebarItem';
 export * from './resolveEditLink';
 export * from './resolveRepoType';
--- a/src/client/utils/index.ts
+++ b/src/client/utils/index.ts
@ -0,0 +1,3 @@
 export * from './isActiveSidebarItem'
 export * from './resolveEditLink'
 export * from './resolveRepoType'
--- a/src/client/utils/isActiveSidebarItem.ts
+++ b/src/client/utils/isActiveSidebarItem.ts
@ -0,0 +1,34 @@
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import type { ResolvedSidebarItem } from '../../shared'
 const normalizePath = (path: string): string =>
  decodeURI(path)
    .replace(/#.*$/, '')
    .replace(/(index)?\.(md|html)$/, '')
 const isActiveLink = (
  link: string,
  route: RouteLocationNormalizedLoaded
 ): boolean => {
  if (route.hash === link) {
    return true
  }
  const currentPath = normalizePath(route.path)
  const targetPath = normalizePath(link)
  return currentPath === targetPath
 }
 export const isActiveSidebarItem = (
  item: ResolvedSidebarItem,
  route: RouteLocationNormalizedLoaded
 ): boolean => {
  if (item.link && isActiveLink(item.link, route)) {
    return true
  }
  if (item.children) {
    return item.children.some((child) => isActiveSidebarItem(child, route))
  }
  return false
 }
--- a/src/client/utils/resolveEditLink.ts
+++ b/src/client/utils/resolveEditLink.ts
@ -0,0 +1,64 @@
 import {
  isLinkHttp,
  removeEndingSlash,
  removeLeadingSlash,
 } from '@vuepress/shared'
 import { resolveRepoType } from './resolveRepoType'
 import type { RepoType } from './resolveRepoType'
 export const editLinkPatterns: Record<Exclude<RepoType, null>, string> = {
  GitHub: ':repo/edit/:branch/:path',
  GitLab: ':repo/-/edit/:branch/:path',
  Gitee: ':repo/edit/:branch/:path',
  Bitbucket:
    ':repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default',
 }
 const resolveEditLinkPatterns = ({
  docsRepo,
  editLinkPattern,
 }: {
  docsRepo: string
  editLinkPattern?: string
 }): string | null => {
  if (editLinkPattern) {
    return editLinkPattern
  }
  const repoType = resolveRepoType(docsRepo)
  if (repoType !== null) {
    return editLinkPatterns[repoType]
  }
  return null
 }
 export const resolveEditLink = ({
  docsRepo,
  docsBranch,
  docsDir,
  filePathRelative,
  editLinkPattern,
 }: {
  docsRepo: string
  docsBranch: string
  docsDir: string
  filePathRelative: string | null
  editLinkPattern?: string
 }): string | null => {
  if (!filePathRelative) return null
  const pattern = resolveEditLinkPatterns({ docsRepo, editLinkPattern })
  if (!pattern) return null
  return pattern
    .replace(
      /:repo/,
      isLinkHttp(docsRepo) ? docsRepo : `https://github.com/${docsRepo}`
    )
    .replace(/:branch/, docsBranch)
    .replace(
      /:path/,
      removeLeadingSlash(`${removeEndingSlash(docsDir)}/${filePathRelative}`)
    )
 }
--- a/src/client/utils/resolveRepoType.ts
+++ b/src/client/utils/resolveRepoType.ts
@ -0,0 +1,11 @@
 import { isLinkHttp } from '@vuepress/shared'
 export type RepoType = 'GitHub' | 'GitLab' | 'Gitee' | 'Bitbucket' | null
 export const resolveRepoType = (repo: string): RepoType => {
  if (!isLinkHttp(repo) || /github\.com/.test(repo)) return 'GitHub'
  if (/bitbucket\.org/.test(repo)) return 'Bitbucket'
  if (/gitlab\.com/.test(repo)) return 'GitLab'
  if (/gitee\.com/.test(repo)) return 'Gitee'
  return null
 }
--- a/src/node/createBlogPage.ts
+++ b/src/node/createBlogPage.ts
@ -0,0 +1,18 @@
 import { createPage } from '@vuepress/core'
 import type { App } from 'vuepress'
 import { navbarList } from '../shared'
 export const createBlogPage = async (app: App): Promise<void> => {
  const pagePromise = navbarList.map((nav) => {
    return createPage(app, {
      path: nav.link,
      frontmatter: {
        title: nav.label,
        ...nav.frontmatter,
      },
      content: '',
    })
  })
  const pageList = await Promise.all(pagePromise)
  pageList.forEach((page) => app.pages.push(page))
 }
--- a/src/node/extendsPage.ts
+++ b/src/node/extendsPage.ts
@ -0,0 +1,23 @@
 import type { Page } from '@vuepress/core'
 import type { PlumeThemePageData } from '../shared'
 import { pageFilter } from './utils/pageFilter'
 let uuid = 100
 export const extendsPage = (page: Page<PlumeThemePageData>): void => {
  if (!pageFilter(page)) return
  const pagePath = page.filePathRelative
  const category = pagePath
    ?.split('/')
    .slice(0, -1)
    .map((category) => {
      const match = category.match(/^(\d+?)?(?:\.?)([^]+)$/) || []
      return {
        type: Number(match[1]) || uuid++,
        name: match[2],
      }
    })
  page.data.category = category || []
  page.data.sort = parseInt(page.slug.split('.')[0]) || -1
  page.data.isPost = true
  page.slug = page.slug?.replace(/^\d+\./, '')
 }
--- a/src/node/formatFrontmatter.ts
+++ b/src/node/formatFrontmatter.ts
@ -0,0 +1,99 @@
 import * as os from 'os'
 import type { App } from '@vuepress/core'
 import { fs, path } from '@vuepress/utils'
 import { isBoolean, isNumber } from '@vueuse/core'
 import * as chokidar from 'chokidar'
 import * as dayjs from 'dayjs'
 import * as matter from 'gray-matter'
 import * as json2yaml from 'json2yaml'
 import { customAlphabet } from 'nanoid'
 import type { MarkdownFile } from './utils/readFileList'
 import { readFileList } from './utils/readFileList'
 const prefix = '/post/'
 const nanoid = customAlphabet('134567890abcdefghijklmnopqrstuvwxyz', 8)
 const matterTask = {
  title: ({ filePath }: MarkdownFile, title: string): string | undefined => {
    if (title) return title
    return path
      .basename(filePath)
      .replace(/^\d+\./, '')
      .replace(path.extname(filePath), '')
  },
  createTime: ({ createTime }: MarkdownFile, formatTime: string) => {
    if (formatTime) return formatTime
    return dayjs(createTime).format('YYYY/MM/DD hh:mm:ss')
  },
  permalink: (_, permalink: string) => {
    if (permalink) return permalink
    return prefix + nanoid() + '  # 文章永久链接，自动生成，可自行配置'
  },
  author: (_, author: string) => {
    if (author) return author
    const pkg = require(path.join(process.cwd(), 'package.json'))
    return pkg.author
  },
  top: (_, top: boolean) => {
    if (isBoolean(top)) return top
    return false
  },
  type: (_, type: string) => {
    if (type) return type
    return ' ' + ' # original: 原创: reprint 转载  可为空不填'
  },
  sort: (_, sort: string) => {
    if (isNumber(parseInt(sort))) return sort
    return 0
  },
 }
 function formatMarkdown(file: MarkdownFile): string {
  const { data, content } = matter(file.content)
  Object.keys(matterTask).forEach((key) => {
    const value = matterTask[key](file, data[key])
    data[key] = value ?? data[key]
  })
  return (
    json2yaml
      .stringify(data)
      .replace(/\n\s{2}/g, '\n')
      .replace(/"/g, '') +
    '---' +
    os.EOL +
    content
  )
 }
 export const globFormatFrontmatter = (sourceDir: string): void => {
  const files = readFileList(sourceDir)
  files.forEach((file) => {
    const content = formatMarkdown(file)
    fs.writeFileSync(file.filePath, content, 'utf-8')
  })
 }
 export const watchNewMarkdown = (app: App, watchers): void => {
  const watcher = chokidar.watch(['**/*.md', '!README.md', '!readme.md'], {
    cwd: app.options.source,
    ignoreInitial: true,
  })
  watcher.on('add', (filePath, stat) => {
    const basename = path.basename(filePath)
    const extname = path.extname(basename)
    const name = basename.replace(extname, '')
    filePath = path.join(app.options.source, filePath)
    if (extname !== '.md' && extname !== '.MD') return
    if (/readme/i.test(name)) return
    stat = stat || fs.statSync(filePath)
    const file: MarkdownFile = {
      filePath,
      content: '',
      createTime:
        stat.birthtime.getFullYear() !== 1970 ? stat.birthtime : stat.atime,
    }
    const content = formatMarkdown(file)
    fs.writeFileSync(filePath, content, 'utf-8')
  })
  watchers.push(watcher)
 }
--- a/src/node/index.ts
+++ b/src/node/index.ts
@ -0,0 +1,5 @@
 import { blogTheme } from './theme'
 export * from './theme'
 export default blogTheme
--- a/src/node/preparedPostIndex.ts
+++ b/src/node/preparedPostIndex.ts
@ -0,0 +1,78 @@
 import type { App, Page } from '@vuepress/core'
 import * as chokidar from 'chokidar'
 import * as dayjs from 'dayjs'
 import type {
  PlumeThemePageData,
  PlumeThemePostPageFrontmatter,
  PostIndex,
 } from '../shared'
 import { pageFilter } from './utils/pageFilter'
 const HMR_CODE = `
 if (import.meta.webpackHot) {
  import.meta.webpackHot.accept()
  if (__VUE_HMR_RUNTIME__.updatePostIndex) {
    __VUE_HMR_RUNTIME__.updatePostIndex(postIndex)
  }
 }
 if (import.meta.hot) {
  import.meta.hot.accept(({ postIndex, ...other }) => {
    __VUE_HMR_RUNTIME__.updatePostIndex(postIndex)
    console.log('other', other)
  })
 }
 `
 export const preparedPostIndex = async function (app: App): Promise<string> {
  const postListIndex: PostIndex = (app.pages as Page<PlumeThemePageData>[])
    .filter((page) => {
      return pageFilter(page)
    })
    .map((page) => {
      return {
        title: page.title,
        path: page.path,
        frontmatter:
          page.frontmatter as unknown as PlumeThemePostPageFrontmatter,
        excerpt: page.excerpt,
        category: page.data.category || [],
      }
    })
    .sort((left, right) => {
      const leftTime = dayjs(left.frontmatter.createTime).unix()
      const rightTime = dayjs(right.frontmatter.createTime).unix()
      return leftTime < rightTime ? 1 : -1
    })
  const topPostIndex = postListIndex.findIndex((post) => !!post.frontmatter.top)
  if (topPostIndex !== -1) {
    postListIndex.unshift(postListIndex.splice(topPostIndex, 1)[0])
  }
  let content = `
 export const postIndex = ${JSON.stringify(postListIndex, null, 2)}
  `
  // inject HMR code
  if (app.env.isDev) {
    content += HMR_CODE
  }
  return app.writeTemp('internal/postIndex.js', content)
 }
 export const watchPostIndex = (app: App, watchers): void => {
  const watcher = chokidar.watch('pages/**/*', {
    cwd: app.dir.temp(),
    ignoreInitial: true,
  })
  watcher.on('add', () => {
    preparedPostIndex(app)
  })
  watcher.on('change', () => {
    preparedPostIndex(app)
  })
  watcher.on('unlink', () => {
    preparedPostIndex(app)
  })
  watchers.push(watcher)
 }
--- a/src/node/theme.ts
+++ b/src/node/theme.ts
@ -0,0 +1,101 @@
 import type { Theme, ThemeConfig } from '@vuepress/core'
 import { fs, path } from '@vuepress/utils'
 import { createBlogPage } from './createBlogPage'
 import { extendsPage } from './extendsPage'
 import { globFormatFrontmatter, watchNewMarkdown } from './formatFrontmatter'
 import { preparedPostIndex, watchPostIndex } from './preparedPostIndex'
 import { resolveActiveHeaderLinksPluginOptions } from './utils'
 export interface BlogThemeOption extends ThemeConfig {
  a?: string
 }
 export const blogTheme: Theme<BlogThemeOption> = (
  { themePlugins = {}, ...localeOptions },
  app
 ) => {
  if (app.options.bundler.endsWith('vite')) {
    // eslint-disable-next-line import/no-extraneous-dependencies
    app.options.bundlerConfig.viteOptions = require('vite').mergeConfig(
      app.options.bundlerConfig.viteOptions,
      {
        css: {
          postcss: {
            plugins: [
              // require('postcss-simple-vars'),
              require('postcss-each'),
              require('postcss-import')({
                plugins: [
                  require('postcss-at-rules-variables'),
                  require('postcss-import'),
                ],
              }),
              require('tailwindcss/nesting'),
              require('tailwindcss')(
                path.resolve(__dirname, '../../tailwind.config.js')
              ),
              require('postcss-preset-env')({
                stage: 0,
                features: {
                  'nesting-rules': false,
                  'custom-media-queries': true,
                },
              }),
              require('autoprefixer'),
            ],
          },
        },
      }
    )
  }
  globFormatFrontmatter(app.options.source)
  return {
    name: '@pengzhanbo/vuepress-theme-blog',
    templateBuild: path.resolve(__dirname, '../template/index.build.html'),
    layouts: path.resolve(__dirname, '../client/layouts'),
    clientAppEnhanceFiles: path.resolve(
      __dirname,
      '../client/clientAppEnhanceFiles.js'
    ),
    clientAppSetupFiles: path.resolve(__dirname, '../client/clientAppSetup.js'),
    // use alias to make all components replaceable
    alias: Object.fromEntries(
      fs
        .readdirSync(path.resolve(__dirname, '../client/component'))
        .filter((file) => file.endsWith('.vue'))
        .map((file) => [
          `@theme/${file}`,
          path.resolve(__dirname, '../client/component', file),
        ])
    ),
    onInitialized: async (app) => {
      await createBlogPage(app)
    },
    onPrepared: (app) => {
      preparedPostIndex(app)
    },
    onWatched: (app, watchers) => {
      watchPostIndex(app, watchers)
      watchNewMarkdown(app, watchers)
    },
    extendsPage,
    plugins: [
      [
        '@vuepress/active-header-links',
        resolveActiveHeaderLinksPluginOptions(themePlugins),
      ],
      ['@vuepress/prismjs', themePlugins.prismjs !== false],
      ['@vuepress/nprogress', themePlugins.nprogress !== false],
      [
        '@vuepress/medium-zoom',
        {
          selector: '.post-content > img, .post-content :not(a) > img',
          zoomOptions: {},
          // should greater than page transition duration
          delay: 300,
        },
      ],
      ['@vuepress/theme-data', { themeData: localeOptions }],
    ],
  }
 }
--- a/src/node/utils/index.d.ts
+++ b/src/node/utils/index.d.ts
@ -0,0 +1 @@
 export * from './resolveActiveHeaderLinksPluginOptions';
--- a/src/node/utils/index.js
+++ b/src/node/utils/index.js
@ -0,0 +1 @@
 export * from './resolveActiveHeaderLinksPluginOptions';
--- a/src/node/utils/index.ts
+++ b/src/node/utils/index.ts
@ -0,0 +1 @@
 export * from './resolveActiveHeaderLinksPluginOptions'
--- a/src/node/utils/pageFilter.ts
+++ b/src/node/utils/pageFilter.ts
@ -0,0 +1,5 @@
 import type { Page } from '@vuepress/core'
 export function pageFilter(page: Page): boolean {
  return !!page.pathInferred && !!page.filePath && !page.frontmatter.home
 }
--- a/src/node/utils/readFileList.ts
+++ b/src/node/utils/readFileList.ts
@ -0,0 +1,37 @@
 import { fs, path } from '@vuepress/utils'
 export interface MarkdownFile {
  filePath: string
  content: string
  createTime: Date
 }
 export function readFileList(
  sourceDir: string,
  fileList: MarkdownFile[] = []
 ): MarkdownFile[] {
  const files = fs.readdirSync(sourceDir)
  files.forEach((file) => {
    const filePath = path.join(sourceDir, file)
    const stat = fs.statSync(filePath)
    if (stat.isDirectory()) {
      if (file !== '.vuepress') readFileList(filePath, fileList)
    } else {
      const extname = path.extname(file)
      const basename = path.basename(file).replace(extname, '')
      if (
        (extname === '.md' || extname === '.MD') &&
        basename !== 'README' &&
        basename !== 'readme'
      ) {
        fileList.push({
          filePath,
          content: fs.readFileSync(filePath, 'utf-8'),
          createTime:
            stat.birthtime.getFullYear() !== 1970 ? stat.birthtime : stat.atime,
        })
      }
    }
  })
  return fileList
 }
--- a/src/node/utils/resolveActiveHeaderLinksPluginOptions.ts
+++ b/src/node/utils/resolveActiveHeaderLinksPluginOptions.ts
@ -0,0 +1,20 @@
 import type { ActiveHeaderLinksPluginOptions } from '@vuepress/plugin-active-header-links'
 // import type { DefaultThemePluginsOptions } from '../../shared'
 /**
 * Resolve options for @vuepress/plugin-active-header-links
 */
 export const resolveActiveHeaderLinksPluginOptions = (
  themePlugins
 ): ActiveHeaderLinksPluginOptions | boolean => {
  if (themePlugins?.activeHeaderLinks === false) {
    return false
  }
  return {
    headerLinkSelector: 'a.sidebar-item',
    headerAnchorSelector: '.header-anchor',
    // should greater than page transition duration
    delay: 300,
  }
 }
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@ -0,0 +1,5 @@
 export * from './nav'
 export * from './options'
 export * from './page'
 export * from './post'
 export * from './navbar'
--- a/src/shared/nav.ts
+++ b/src/shared/nav.ts
@ -0,0 +1,57 @@
 /**
 * Base nav item, displayed as text
 */
 export interface NavItem {
  text: string
  ariaLabel?: string
 }
 /**
 * Base nav group, has nav items children
 */
 export interface NavGroup<T> extends NavItem {
  children: T[]
 }
 /**
 * Props for `<AutoLink>`
 */
 export interface NavLink extends NavItem {
  link: string
  rel?: string
  target?: string
  activeMatch?: string
 }
 /**
 * Navbar types
 */
 // user config
 export type NavbarItem = NavLink
 export type NavbarGroup = NavGroup<NavbarGroup | NavbarItem | string>
 export type NavbarConfig = (NavbarItem | NavbarGroup | string)[]
 // resolved
 export type ResolvedNavbarItem = NavbarItem | NavGroup<ResolvedNavbarItem>
 /**
 * Sidebar types
 */
 // user config
 export type SidebarItem = NavItem & Partial<NavLink>
 export type SidebarGroup = SidebarItem &
  NavGroup<SidebarItem | SidebarGroup | string>
 export type SidebarGroupCollapsible = SidebarGroup & {
  collapsible?: boolean
 }
 export type SidebarConfigArray = (
  | SidebarItem
  | SidebarGroupCollapsible
  | string
 )[]
 export type SidebarConfigObject = Record<string, SidebarConfigArray>
 export type SidebarConfig = SidebarConfigArray | SidebarConfigObject
 // resolved
 export type ResolvedSidebarItem = SidebarItem &
  Partial<NavGroup<ResolvedSidebarItem>> & {
    collapsible?: boolean
  }
--- a/src/shared/navbar.ts
+++ b/src/shared/navbar.ts
@ -0,0 +1,11 @@
 export interface NavbarItemOption {
  label: string
  link: string
  frontmatter: Record<string, any>
 }
 export const navbarList: NavbarItemOption[] = [
  { label: '栏目', link: '/category/', frontmatter: { pageType: 'category' } },
  { label: '标签', link: '/tags/', frontmatter: { pageType: 'tags' } },
  { label: '归档', link: '/archives/', frontmatter: { pageType: 'archives' } },
 ]
--- a/src/shared/options.ts
+++ b/src/shared/options.ts
@ -0,0 +1,283 @@
 import type { ThemeData } from '@vuepress/plugin-theme-data'
 import type { LocaleData } from '@vuepress/shared'
 import type { NavbarConfig, SidebarConfig } from './nav'
 export interface PlumeThemePluginsOptions {
  bannerImg: string
  avatarUrl: string
  avatar: string
  github?: string
  email?: string
  description: string
  /**
   * Enable @vuepress/plugin-active-header-links or not
   */
  // activeHeaderLinks?: boolean
  /**
   * Enable @vuepress/plugin-back-to-top or not
   */
  // backToTop?: boolean
  /**
   * Enable @vuepress/plugin-container or not
   */
  // container?: {
  //   tip?: boolean
  //   warning?: boolean
  //   danger?: boolean
  //   details?: boolean
  //   codeGroup?: boolean
  //   codeGroupItem?: boolean
  // }
  /**
   * Enable @vuepress/plugin-external-link-icon or not
   */
  // externalLinkIcon?: boolean
  /**
   * Enable @vuepress/plugin-git or not
   */
  // git?: boolean
  /**
   * Enable @vuepress/plugin-medium-zoom or not
   */
  // mediumZoom?: boolean
  /**
   * Enable @vuepress/plugin-nprogress or not
   */
  // nprogress?: boolean
  /**
   * Enable @vuepress/plugin-prismjs or not
   */
  // prismjs?: boolean
 }
 export type PlumeThemeLocaleOptions = PlumeThemeData
 export type PlumeThemeData = ThemeData<PlumeThemeLocaleData>
 export interface PlumeThemeLocaleData extends LocaleData {
  /**
   * Home path of current locale
   *
   * Used as the link of back-to-home and navbar logo
   */
  home?: string
  /**
   * Navbar config
   *
   * Set to `false` to disable navbar in current locale
   */
  navbar?: false | NavbarConfig
  /**
   * Navbar logo config
   *
   * Logo to display in navbar
   */
  logo?: null | string
  /**
   * Navbar logo config for dark mode
   *
   * Logo to display in navbar in dark mode
   */
  logoDark?: null | string
  /**
   * Navbar dark mode button config
   *
   * Enable dark mode switching and display a button in navbar or not
   */
  darkMode?: boolean
  /**
   * Navbar repository config
   *
   * Used for the repository link of navbar
   */
  repo?: null | string
  /**
   * Navbar repository config
   *
   * Used for the repository text of navbar
   */
  repoLabel?: string
  /**
   * Navbar language selection config
   *
   * Text of the language selection dropdown
   */
  selectLanguageText?: string
  /**
   * Navbar language selection config
   *
   * Aria label of of the language selection dropdown
   */
  selectLanguageAriaLabel?: string
  /**
   * Navbar language selection config
   *
   * Language name of current locale
   *
   * Displayed inside the language selection dropdown
   */
  selectLanguageName?: string
  /**
   * Sidebar config
   *
   * Set to `false` to disable sidebar in current locale
   */
  sidebar?: 'auto' | false | SidebarConfig
  /**
   * Sidebar depth
   *
   * - Set to `0` to disable all levels
   * - Set to `1` to include `<h2>`
   * - Set to `2` to include `<h2>` and `<h3>`
   * - ...
   *
   * The max value depends on which headers you have extracted
   * via `markdown.extractHeaders.level`.
   *
   * The default value of `markdown.extractHeaders.level` is `[2, 3]`,
   * so the default max value of `sidebarDepth` is `2`
   */
  sidebarDepth?: number
  /**
   * Page meta - edit link config
   *
   * Whether to show "Edit this page" or not
   */
  editLink?: boolean
  /**
   * Page meta - edit link config
   *
   * The text to replace the default "Edit this page"
   */
  editLinkText?: string
  /**
   * Page meta - edit link config
   *
   * Pattern of edit link
   *
   * @example ':repo/edit/:branch/:path'
   */
  editLinkPattern?: string
  /**
   * Page meta - edit link config
   *
   * Use `repo` config by default
   *
   * Set this config if your docs is placed in a different repo
   */
  docsRepo?: string
  /**
   * Page meta - edit link config
   *
   * Set this config if the branch of your docs is not 'main'
   */
  docsBranch?: string
  /**
   * Page meta - edit link config
   *
   * Set this config if your docs is placed in sub dir of your `docsRepo`
   */
  docsDir?: string
  /**
   * Page meta - last updated config
   *
   * Whether to show "Last Updated" or not
   */
  lastUpdated?: boolean
  /**
   * Page meta - last updated config
   *
   * The text to replace the default "Last Updated"
   */
  lastUpdatedText?: string
  /**
   * Page meta - contributors config
   *
   * Whether to show "Contributors" or not
   */
  contributors?: boolean
  /**
   * Page meta - contributors config
   *
   * The text to replace the default "Contributors"
   */
  contributorsText?: string
  /**
   * Custom block config
   *
   * Default title of TIP custom block
   */
  tip?: string
  /**
   * Custom block config
   *
   * Default title of WARNING custom block
   */
  warning?: string
  /**
   * Custom block config
   *
   * Default title of DANGER custom block
   */
  danger?: string
  /**
   * 404 page config
   *
   * Not Found messages for 404 page
   */
  notFound?: string[]
  /**
   * 404 page config
   *
   * Text of back-to-home link in 404 page
   */
  backToHome?: string
  /**
   * A11y text for external link icon
   */
  openInNewWindow?: string
  /**
   * A11y text for dark mode toggle button
   */
  toggleDarkMode?: string
  /**
   * A11y text for sidebar toggle button
   */
  toggleSidebar?: string
 }
--- a/src/shared/page.ts
+++ b/src/shared/page.ts
@ -0,0 +1,41 @@
 import type { GitPluginPageData } from '@vuepress/plugin-git'
 import type { NavLink, SidebarConfig } from './nav'
 import type { CategoryItem } from './post'
 export interface PlumeThemePageData extends GitPluginPageData {
  filePathRelative: string | null
  category: CategoryItem[]
  sort: number
  isPost: boolean
 }
 export interface PlumeThemePageFrontmatter {
  home?: boolean
  navbar?: boolean
  pageClass?: string
  pageType?: string
 }
 export interface PlumeThemeHomePageFrontmatter
  extends PlumeThemePageFrontmatter {
  home: true
 }
 export interface PlumeThemePostPageFrontmatter
  extends PlumeThemePageFrontmatter {
  home?: false
  editLink?: boolean
  editLinkPattern?: string
  lastUpdated?: boolean
  contributors?: boolean
  sidebar?: 'auto' | false | SidebarConfig
  sidebarDepth?: number
  prev?: string | NavLink
  next?: string | NavLink
  createTime: string
  author: string
  top: boolean
  type: string
  sort: number | string
  tags: string[]
 }
--- a/src/shared/post.ts
+++ b/src/shared/post.ts
@ -0,0 +1,17 @@
 import type { PageFrontmatter } from 'vuepress'
 import type { PlumeThemePostPageFrontmatter } from './page'
 export interface CategoryItem {
  type: number | string
  name: string
 }
 export interface PostItemIndex {
  title: string
  path: string
  frontmatter: PageFrontmatter<PlumeThemePostPageFrontmatter>
  excerpt: string
  category: CategoryItem[]
 }
 export type PostIndex = PostItemIndex[]
--- a/src/template/index.build.html
+++ b/src/template/index.build.html
@ -0,0 +1,33 @@
 <!DOCTYPE html>
 <html lang="{{ lang }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress {{ version }}">
    <style>
      :root {
        --c-bg: rgba(0, 0, 0, 0.15);
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <!-- <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
 			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
 				document.documentElement.classList.toggle('dark', true);
 			}
    </script> -->
    <!--vuepress-ssr-head-->
    <!--vuepress-ssr-resources-->
    <!--vuepress-ssr-styles-->
  </head>
  <body>
    <div id="app"><!--vuepress-ssr-app--></div>
    <!--vuepress-ssr-scripts-->
  </body>
 </html>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,10 @@
 const path = require('path')
 module.exports = {
  content: ['./lib/**/*.{vue,html,css,ts,tsx,js,jsx}'].map((_) =>
    path.join(__dirname, _)
  ),
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
 }
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -0,0 +1,18 @@
 {
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": false,
    "lib": ["DOM", "ES2020"],
    "moduleResolution": "node",
    "newLine": "lf",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": false,
    "strict": true,
    "strictNullChecks": true,
    "target": "ES2018"
  }
 }
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@ -0,0 +1,8 @@
 {
  "extends": "./tsconfig.base.json",
  "references": [
    { "path": "./tsconfig.esm.json" },
    { "path": "./tsconfig.cjs.json" }
  ],
  "files": []
 }
--- a/tsconfig.cjs.json
+++ b/tsconfig.cjs.json
@ -0,0 +1,9 @@
 {
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "CommonJS",
    "rootDir": "./src",
    "outDir": "./lib"
  },
  "include": ["./src/node", "./src/shared"]
 }
--- a/tsconfig.dev.json
+++ b/tsconfig.dev.json
@ -0,0 +1,15 @@
 {
  "extends": "./tsconfig.base.json",
  "references": [
    { "path": "./tsconfig.esm.json" },
    { "path": "./tsconfig.cjs.json" }
  ],
  "files": [],
  "watchOptions": {
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriority",
    "synchronousWatchDirectory": true,
    "excludeDirectories": ["**/node_modules", "./lib", "./example"],
  }
 }
--- a/tsconfig.esm.json
+++ b/tsconfig.esm.json
@ -0,0 +1,14 @@
 {
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "ES2020",
    "rootDir": "./src",
    "outDir": "./lib",
    "types": ["@vuepress/client/types", "webpack-env", "vite/client"],
    "paths": {
      "@theme/*": ["./src/client/component/*"],
      "@internal/*": ["./example/.vuepress/.temp/internal/*"],
    },
  },
  "include": ["./src/client", "./src/shared"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
 {
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "baseUrl": "./",
    "module": "ES2020",
    "types": ["@vuepress/client/types", "webpack-env", "vite/client"],
    "paths": {
      "@theme/*": ["./src/client/component/*"],
      "@internal/*": ["./example/.vuepress/.temp/internal/*"],
    },
  },
  "include": ["./src/**/*", "./vuepress.config.ts"],
  "exclude": ["node_modules", ".temp", "lib", "dist"]
 }
--- a/vuepress.config.ts
+++ b/vuepress.config.ts
@ -0,0 +1,22 @@
 import * as path from 'path'
 import { defineUserConfig } from 'vuepress'
 import type { DefaultThemeOptions } from 'vuepress'
 export default defineUserConfig<DefaultThemeOptions>({
  lang: 'zh',
  title: '示例博客',
  description: '热爱生活',
  dest: 'docs',
  temp: 'example/.vuepress/.temp',
  cache: 'example/.vuepress/.cache',
  public: 'example/public',
  theme: path.resolve(__dirname, './lib/node/index.js'),
  themeConfig: {
    bannerImg: '/big-banner.jpg', // 1200x300
    avatarUrl: '/avatar.gif',
    avatar: '未闻花名',
    github: 'https://github.com/',
    email: '_@outlook.com',
    description: '学习，生活，娱乐，我全都要',
  },
 })
--- a/yarn.lock
+++ b/yarn.lock
		`@ -0,0 +1 @@`
							`export * from './resolveActiveHeaderLinksPluginOptions';`