From 63e9186e11c05529e0f3b0938bc96ced4a5f2142 Mon Sep 17 00:00:00 2001
From: FXJ <fanxj@syscloud.cn>
Date: Mon, 6 Feb 2023 23:26:36 +0800
Subject: [PATCH] feat: add vitepress local search

---
 docs/.vitepress/sidebar.ts                   |  1 +
 docs/contributors.json                       |  3 +-
 docs/index.md                                | 11 +++
 docs/program/vitepress-local-search/index.md | 94 ++++++++++++++++++++
 4 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 docs/program/vitepress-local-search/index.md

diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts
index ac3a72e8..829bbd65 100644
--- a/docs/.vitepress/sidebar.ts
+++ b/docs/.vitepress/sidebar.ts
@@ -43,6 +43,7 @@ export default {
       items: [
         { text: '发布 npm 包', link: '/program/npm-package/' },
         { text: '给 VitePress 添加 algolia 搜索', link: '/program/vitepress-algolia/' },
+        { text: '给 VitePress 添加本地搜索功能', link: '/program/vitepress-local-search/' },
       ],
     },
     {
diff --git a/docs/contributors.json b/docs/contributors.json
index bb6782d5..69f29354 100644
--- a/docs/contributors.json
+++ b/docs/contributors.json
@@ -2,5 +2,6 @@
   "Chocolate1999",
   "HearLing",
   "holazz",
-  "egoist"
+  "egoist",
+  "fxzer"
 ]
diff --git a/docs/index.md b/docs/index.md
index 05d428e8..006da807 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -79,6 +79,17 @@ const members = [
       { icon: 'twitter', link: 'https://twitter.com/holazz1208' },
     ]
   },
+  {
+    avatar: 'https://www.github.com/fxzer.png',
+    name: 'fxzer',
+    title: 'Open Source Contributor',
+    links: [
+      { icon: 'github', link: 'https://github.com/fxzer' },
+      {
+       icon: { svg: icons.bilibili } ,link: "https://space.bilibili.com/228134791",
+      },
+    ]
+  },
 ]
 </script>
 
diff --git a/docs/program/vitepress-local-search/index.md b/docs/program/vitepress-local-search/index.md
new file mode 100644
index 00000000..395c658e
--- /dev/null
+++ b/docs/program/vitepress-local-search/index.md
@@ -0,0 +1,94 @@
+# VitePress添加本地搜索功能
+
+::: warning 踩坑历程
+
+折腾了三遍Algolia都没能添加上搜索功能，最后在找到了这个[issus](https://github.com/vuejs/vitepress/issues/670)里大佬提供的解决方案，成功添加上了本地搜索功能。
+
+:::
+
+### 安装插件
+
+```bash
+npm i vitepress-plugin-search markdown-it flexsearch -D
+```
+
+### 添加和配置插件
+
+::: warning 坑点
+1.[README](https://github.com/emersonbottero/vitepress-plugin-search#readme) 没写在哪个目录下存放`vite.config.ts`，依据经验放在根目录下不管用，放在`.vitepress`也不生效，最后挨个试才发现需要放在`docs`
+
+2.示例没有引入`flexSearchIndexOptions`，需要手动从`flexsearch`中引入
+
+3.引入后发现之前搜索框样式没了，需要在`.vitepress/theme/styles/index.css`下重新覆盖样式
+
+:::
+
+
+
+![image-20230205233032922](https://zerdocs.oss-cn-shanghai.aliyuncs.com/202302052330956.png)
+
+
+
+```typescript
+
+//vite.config.ts
+import { SearchPlugin } from "vitepress-plugin-search";
+import { defineConfig } from "vite";
+import flexSearchIndexOptions   from "flexsearch";
+//default options
+var options = {
+  ...flexSearchIndexOptions,
+  previewLength: 100,//搜索结果预览长度
+  buttonLabel: "搜索",
+  placeholder: "情输入关键词",
+};
+
+export default defineConfig({
+  plugins: [SearchPlugin(options)],
+});
+```
+
+
+
+### 样式覆盖
+
+```css
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  background: transparent;
+  transition: border-color 0.25s;
+}
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    background-color: var(--vp-c-bg-alt);
+  }
+}
+@media (max-width: 768px) {
+  .DocSearch-Button-Keys {
+    display: none;
+  }
+  .VPNavBarHamburger{
+    height: 32px !important;
+    width: 32px !important;
+    border-radius: 4px;
+  }
+}
+.DocSearch-Button:hover {
+  background-color: #f5f5f6;
+}
+
+```
+