add local search

docusaurus.config.js

@@ -215,6 +215,16 @@ const config = {
       },
     },
   },
+
+  themes: [
+    [
+      require.resolve("@easyops-cn/docusaurus-search-local"),
+      {
+        // `hashed` is recommended as long-term-cache of index file is possible.
+        hashed: true,
+      },
+    ],
+  ],
 };
 
 module.exports = config;

package.json

@@ -19,6 +19,7 @@
     "@docusaurus/module-type-aliases": "2.4.1",
     "@docusaurus/plugin-client-redirects": "^2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
+    "@easyops-cn/docusaurus-search-local": "^0.35.0",
     "@mdx-js/react": "^1.6.22",
     "@tailwindcss/typography": "^0.5.9",
     "@tsconfig/docusaurus": "^1.0.5",

src/css/custom.css

@@ -18,6 +18,9 @@ html[data-theme="dark"] {
   --ifm-navbar-item-padding-horizontal: 0;
   --ifm-navbar-height: theme("height.24");
   --ifm-toc-border-color: transparent;
+  --ifm-navbar-search-input-background-color: theme("colors.gray.600");
+  --search-local-hit-background: theme("colors.dark2");
+  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="%23E5E6E6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
 }
 
 body {
@@ -66,3 +69,8 @@ body {
   width: 123px;
   height: 48px;
 }
+
+.navbar__search-input,
+input[type="search"] {
+  outline-color: var(--ifm-color-primary-dark);
+}