From 321f94818761a37f9dc07ca4a8714c94d5d122d4 Mon Sep 17 00:00:00 2001
From: ikenxuan <2066855608@qq.com>
Date: Wed, 24 Jul 2024 00:55:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8@shikijs/vitepress-tw?=
 =?UTF-8?q?oslash=E5=9C=A8=E4=BB=A3=E7=A0=81=E5=9D=97=E4=B8=AD=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=B1=BB=E5=9E=8B=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.ts      | 10 +++++++-
 docs/.vitepress/theme/index.ts | 13 +++++++---
 docs/utils/Renderer.md         |  2 +-
 docs/utils/YamlEditor.md       | 18 ++++++-------
 docs/utils/common.md           |  2 +-
 docs/utils/karin.md            | 10 ++++----
 docs/utils/logger.md           |  2 +-
 docs/utils/redis.md            |  2 +-
 docs/utils/segment.md          | 47 +++++++++++++++++-----------------
 package.json                   |  3 +++
 10 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5241660..01fd4ce 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -21,6 +21,10 @@ import {
   PageProperties,
   PagePropertiesMarkdownSection
 } from '@nolebase/vitepress-plugin-page-properties/vite'
+// 缩略图模糊哈希生成
+import { ThumbnailHashImages } from '@nolebase/vitepress-plugin-thumbnail-hash/vite'
+// 代码块内的代码类型提示
+import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 export default defineConfig({
   lang: 'zh-CN',
@@ -49,10 +53,15 @@ export default defineConfig({
       // 行内链接预览
       md.use(InlineLinkPreviewElementTransform)
     },
+    codeTransformers: [
+      transformerTwoslash()
+    ]
   },
   vite: {
     plugins: [
+      ThumbnailHashImages(),
       GitChangelog({
+        maxGitLogCount: 2000,
         // 要获取git日志的仓库
         repoURL: () => 'https://github.com/KarinJS/Karin',
       }),
@@ -69,7 +78,6 @@ export default defineConfig({
       PageProperties(),
       PagePropertiesMarkdownSection({
         excludes: [
-          'toc.md',
           'index.md',
         ],
       }),
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 251a8ee..54b45cb 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,6 @@
 import DefaultTheme from 'vitepress/theme'
 import mediumZoom from 'medium-zoom'
-import { onMounted, watch, nextTick, h } from 'vue'
+import { type Plugin, onMounted, watch, nextTick, h } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import 'vitepress-markdown-timeline/dist/theme/index.css'
 import './style/index.css'
@@ -29,6 +29,7 @@ import {
 } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
 // 快速复制当前页的url
 import Share from './components/Share.vue'
+// 卡片
 import Ncard from './components/Ncard.vue'
 // 页面属性
 import {
@@ -39,16 +40,20 @@ import '@nolebase/vitepress-plugin-page-properties/client/style.css'
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css'
 // 页面底部评论
 import giscusTalk from 'vitepress-plugin-comment-with-giscus'
+// 代码块内的代码类型提示
+import TwoslashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import '@shikijs/vitepress-twoslash/style.css'
 
 export default {
   extends: DefaultTheme,
   enhanceApp ({ app }) {
     app.component('NCard', Ncard)
-    app.use(NolebaseGitChangelogPlugin)
-    app.use(NolebaseInlineLinkPreviewPlugin)
+    app.use(TwoslashFloatingVue as Plugin)
+    app.use(NolebaseGitChangelogPlugin as Plugin)
+    app.use(NolebaseInlineLinkPreviewPlugin as Plugin)
     app.use(NolebasePagePropertiesPlugin<{
       progress: number
-    }>(), {
+    }>() as Plugin, {
       properties: {
         'zh-CN': [
           {
diff --git a/docs/utils/Renderer.md b/docs/utils/Renderer.md
index cf23d98..7f2fc42 100644
--- a/docs/utils/Renderer.md
+++ b/docs/utils/Renderer.md
@@ -1,6 +1,6 @@
 # Renderer
 
-```js
+```js twoslash
 import { Renderer } from '#Karin'
 ```
 # 正在编写中，咕咕咕~
diff --git a/docs/utils/YamlEditor.md b/docs/utils/YamlEditor.md
index ad4cda5..b7724fb 100644
--- a/docs/utils/YamlEditor.md
+++ b/docs/utils/YamlEditor.md
@@ -14,7 +14,7 @@
 
 ### 导入和实例化
 
-```js
+```js twoslash
 import { YamlEditor } from 'node-karin'
 
 // 创建一个 YamlEditor 实例，指定文件路径
@@ -27,7 +27,7 @@ const yamlEditor = new YamlEditor('./path/to/your/file.yaml')
 
 ### 获取 YAML 中的值
 
-```js
+```js twoslash
 // 获取指定路径的值，路径用点号分隔
 const value = yamlEditor.get('root.child.key')
 
@@ -42,7 +42,7 @@ if (value === false) {
 
 ### 设置 YAML 中的值
 
-```js
+```js twoslash
 // 设置指定路径的值
 yamlEditor.set('root.child.key', 'newValue')
 ```
@@ -51,7 +51,7 @@ yamlEditor.set('root.child.key', 'newValue')
 
 ### 向 YAML 中添加新值
 
-```js
+```js twoslash
 // 向指定路径添加新值
 yamlEditor.add('root.newPath', 'newValue')
 ```
@@ -60,7 +60,7 @@ yamlEditor.add('root.newPath', 'newValue')
 
 ### 删除 YAML 中的值
 
-```js
+```js twoslash
 // 删除指定路径的值
 const success = yamlEditor.del('root.child.key')
 
@@ -75,7 +75,7 @@ if (success) {
 
 ### 向 YAML 中的数组添加新元素
 
-```js
+```js twoslash
 // 向指定路径的数组添加新元素
 yamlEditor.append('root.array', 'newElement', true) // 在数组开头添加
 
@@ -86,7 +86,7 @@ yamlEditor.append('root.array', 'newElement') // 在数组末尾添加
 
 ### 检查指定路径的键是否存在
 
-```js
+```js twoslash
 // 向指定路径的数组添加新元素
 yamlEditor.has('a.b.c') // true
 yamlEditor.has('x.y.z') // false
@@ -96,7 +96,7 @@ yamlEditor.has('x.y.z') // false
 
 ### 查询指定路径中是否包含指定的值
 
-```js
+```js twoslash
 // 查询指定路径中是否包含指定的值
 yamlEditor.hasVal('a.b.c', 'val') // true
 yamlEditor.hasVal('x.y.z', 'val') // false
@@ -106,7 +106,7 @@ yamlEditor.hasVal('x.y.z', 'val') // false
 
 ### 保存文件
 
-```js
+```js twoslash
 // 保存修改后的 YAML 文件
 yamlEditor.save()
 ```
diff --git a/docs/utils/common.md b/docs/utils/common.md
index 16696d3..84ac410 100644
--- a/docs/utils/common.md
+++ b/docs/utils/common.md
@@ -1,6 +1,6 @@
 # common
 
-```js
+```js twoslash
 import { common } from 'node-karin'
 
 /** 休眠函数 延迟5秒 */
diff --git a/docs/utils/karin.md b/docs/utils/karin.md
index 799776c..2df0114 100644
--- a/docs/utils/karin.md
+++ b/docs/utils/karin.md
@@ -2,7 +2,7 @@
 
 通过使用别名，开发者可以更简洁地引入所需的模块，无需指定完整的路径。
 
-```js
+```js twoslash
 // 不建议这么做！
 import segment from 'node_modules/node-karin/lib/bot/segment.js'
 import plugin from 'node_modules/node-karin/lib/plugins/plugin.js'
@@ -23,28 +23,28 @@ import { segment, Plugin } from 'node-karin'
 
 - ## `APP`
 
-    ```js
+    ```js twoslash
     import { App } from 'node-karin'
     // ...
     ```
 
 - ## `Bot`
 
-    ```js
+    ```js twoslash
     import { Bot } from 'node-karin'
     // ...
     ```
 
 - ## `Cfg`
 
-    ```js
+    ```js twoslash
     import { Cfg } from 'node-karin'
     // ...
     ```
 
 - ## `plugin`
 
-    ```js
+    ```js twoslash
     import { Plugin } from 'node-karin'
     // ...
     ```
diff --git a/docs/utils/logger.md b/docs/utils/logger.md
index 5c010d0..22b5d43 100644
--- a/docs/utils/logger.md
+++ b/docs/utils/logger.md
@@ -1,6 +1,6 @@
 # logger
 
-```js
+```js twoslash
 import { logger } from 'node-karin'
 
 /** 打印trace日志 */
diff --git a/docs/utils/redis.md b/docs/utils/redis.md
index 620af9e..4cc3701 100644
--- a/docs/utils/redis.md
+++ b/docs/utils/redis.md
@@ -1,6 +1,6 @@
 # redis
 
-```js
+```js twoslash
 import { redis } from 'node-karin'
 
 /** 存储一个键值对 */
diff --git a/docs/utils/segment.md b/docs/utils/segment.md
index c570a83..e481ee0 100644
--- a/docs/utils/segment.md
+++ b/docs/utils/segment.md
@@ -12,7 +12,7 @@
 以下所有的示例都假设你已经导入了 `segment` 模块。
 :::
 
-```js
+```js twoslash
 import { segment } from 'node-karin'
 ```
 
@@ -34,7 +34,7 @@ karin对于多媒体资源的标准化处理，遵循以下规则：
 
 ## 文本 text
 
-```js
+```js twoslash
 const text = segment.text('Hello, world!')
 console.log(text)
 ```
@@ -54,7 +54,7 @@ console.log(text)
 键入的 ID 必须为数字
 :::
 
-```js
+```js twoslash
 const face = segment.face(1)
 console.log(face)
 ```
@@ -109,7 +109,7 @@ console.log(image)
 遵循 [**多媒体资源标准**](#多媒体资源标准)
 :::
 
-```js
+```js twoslash
 const record = segment.record('https://example.com/record.mp3')
 console.log(record)
 ```
@@ -129,7 +129,7 @@ console.log(record)
 遵循 [**多媒体资源标准**](#多媒体资源标准)
 :::
 
-```js
+```js twoslash
 const video = segment.video('https://example.com/video.mp4')
 console.log(video)
 ```
@@ -149,7 +149,7 @@ console.log(video)
 开发者只需要关注uid字段即可
 :::
 
-```js
+```js twoslash
 const at = segment.at('abc1234567890', '1234567890')
 console.log(at)
 ```
@@ -168,7 +168,7 @@ console.log(at)
 
 关于这部分，见[mirai](https://github.com/mamoe/mirai/blob/f5eefae7ecee84d18a66afce3f89b89fe1584b78/mirai-core/src/commonMain/kotlin/net.mamoe.mirai/message/data/HummerMessage.kt#L49)
 
-```js
+```js twoslash
 const poke = segment.poke(1, -1, 1)
 console.log(poke)
 ```
@@ -186,7 +186,7 @@ console.log(poke)
 
 ## 链接分享 share
 
-```js
+```js twoslash
 const share = segment.share('https://example.com/share', '分享标题', '分享描述', '图片 URL')
 console.log(share)
 ```
@@ -205,7 +205,7 @@ console.log(share)
 
 ## 推荐好友或群 contact
 
-```js
+```js twoslash
 const contact = segment.contact('qq', '12345')
 console.log(contact)
 ```
@@ -222,7 +222,7 @@ console.log(contact)
 
 ## 位置 location
 
-```js
+```js twoslash
 const location = segment.location('121.527328', '31.21515', '上海市浦东新区', '内容描述')
 console.log(location)
 ```
@@ -241,7 +241,7 @@ console.log(location)
 
 ## 音乐分享 music
 
-```js
+```js twoslash
 const music = segment.music('qq', '12345')
 console.log(music)
 ```
@@ -258,7 +258,7 @@ console.log(music)
 
 ## 自定义音乐分享 customMusic
 
-```js
+```js twoslash
 const customMusic = segment.customMusic('https://example.com/music.mp3', 'https://example.com/music.mp3', '标题', '内容描述', 'https://example.com/image.jpg')
 console.log(customMusic)
 ```
@@ -278,7 +278,7 @@ console.log(customMusic)
 
 ## 回复 reply
 
-```js
+```js twoslash
 const reply = segment.reply('1234567890')
 console.log(reply)
 ```
@@ -294,7 +294,7 @@ console.log(reply)
 
 ## 发送res_id合并转发 forward
 
-```js
+```js twoslash
 const forward = segment.forward('abs1234567890')
 console.log(forward)
 ```
@@ -310,7 +310,7 @@ console.log(forward)
 
 ## 合并转发自定义节点 node
 
-```js
+```js twoslash
 const node = segment.node('1234567890', 'karin', [segment.text('Hello, world!')])
 console.log(node)
 ```
@@ -333,7 +333,7 @@ console.log(node)
 
 ## xml
 
-```js
+```js twoslash
 const xml = segment.xml('<xml>...</xml>', 'id')
 console.log(xml)
 ```
@@ -350,7 +350,7 @@ console.log(xml)
 
 ## JSON
 
-```js
+```js twoslash
 const json = segment.json('JSON 内容')
 console.log(json)
 ```
@@ -409,7 +409,7 @@ rows和button的键入值一致，且比较复杂，请查看最下方的 [**构
 
 ::: details 点我查看输出示例
 
-```js:line-numbers {1}
+```js :line-numbers {1}
  {
   type: 'rows',
   rows: [
@@ -502,7 +502,7 @@ rows和button的键入值一致，且比较复杂，请查看最下方的 [**构
 
 ::: details 点我查看输出示例
 
-```js:line-numbers {1}
+```js :line-numbers {1}
 {
   type: 'button',
   buttons: [
@@ -565,7 +565,7 @@ rows和button的键入值一致，且比较复杂，请查看最下方的 [**构
 
 ### 跳转按钮
 
-```js:line-numbers {1}
+```js  twoslash
 // 快速构建
 segment.rows({ link: 'https://example.com' })
 
@@ -580,12 +580,11 @@ segment.rows({
   role: ['用户ID1', '用户ID2'], // 设置后，只有这些用户可以点击，与admin互斥 （仅频道可用）
   tips: '指令提示' // 客户端不支持本 action 的时候，弹出的 toast 文案
 })
-
 ```
 
 ### 回调按钮
 
-```js:line-numbers
+```js twoslash
 // 快速构建
 segment.rows({ type: 1, text: '回调按钮'})
 
@@ -601,12 +600,11 @@ segment.rows({
   role: ['用户ID1', '用户ID2'], // 设置后，只有这些用户可以点击，与admin互斥 （仅频道可用）
   tips: '指令提示' // 客户端不支持本 action 的时候，弹出的 toast 文案
 })
-
 ```
 
 ### 指令按钮
 
-```js:line-numbers
+```js twoslash
 // 快速构建
 segment.rows({ text: '指令按钮' })
 
@@ -624,3 +622,4 @@ segment.rows({
   role: ['用户ID1', '用户ID2'], // 设置后，只有这些用户可以点击，与admin互斥 （仅频道可用）
   tips: '指令提示' // 客户端不支持本 action 的时候，弹出的 toast 文案
 })
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 8ef62fd..efa70c2 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,15 @@
     "@nolebase/vitepress-plugin-inline-link-preview": "^2.2.2",
     "@nolebase/vitepress-plugin-meta": "^2.2.2",
     "@nolebase/vitepress-plugin-page-properties": "^2.2.2",
+    "@nolebase/vitepress-plugin-thumbnail-hash": "^2.2.2",
+    "@shikijs/vitepress-twoslash": "^1.11.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^10.11.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-mathjax3": "^4.3.2",
     "markdown-it-task-lists": "^2.1.1",
     "medium-zoom": "^1.1.0",
+    "vite": "^5.3.4",
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-codeblocks-fold": "^1.2.28",
     "vitepress-plugin-comment-with-giscus": "^1.1.15",