diff --git a/.dumi/theme/comment.ts b/.dumi/theme/comment.ts
deleted file mode 100644
index baee61a..0000000
--- a/.dumi/theme/comment.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { IApi } from 'dumi';
-
-export default (api: IApi) => {
-  api.describe({
-    key: 'valine',
-    config: {
-      schema(joi) {
-        return joi.object();
-      },
-    },
-  });
-  const { valine = {} } = api.userConfig;
-  const { appId, appKey, el = '#vcomments' } = valine || {};
-  api.logger.log('insert Valine');
-
-  const valineScript = () => {
-    return `
-    (function(){
-        var script = document.createElement('script');
-        var m = document.getElementsByTagName('script')[0];
-        script.src = '//unpkg.com/valine/dist/Valine.min.js';
-        script.async = 'async';
-
-        script.addEventListener('load', function () {
-          new Valine({
-              el: '${el}',
-              appId: '${appId}',
-              appKey: '${appKey}'
-          })
-        }, false);
-    
-        m.parentNode.insertBefore(script, m)
-    })();
-  `;
-  };
-
-  api.addHTMLScripts(() => [
-    {
-      content: valineScript(),
-    },
-  ]);
-};
diff --git a/.dumi/theme/layout.tsx b/.dumi/theme/layout.tsx
index 8a025d1..d74af8a 100644
--- a/.dumi/theme/layout.tsx
+++ b/.dumi/theme/layout.tsx
@@ -5,6 +5,7 @@ import Navbar from 'dumi-theme-default/src/components/Navbar';
 import SideMenu from 'dumi-theme-default/src/components/SideMenu';
 import SlugList from 'dumi-theme-default/src/components/SlugList';
 import SearchBar from 'dumi-theme-default/src/components/SearchBar';
+import { ValineComment } from 'dumi';
 import Notice from './Notice';
 import './style/layout.less';
 
@@ -117,7 +118,7 @@ const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
                 {updatedTime}
               </span>
             </div>
-            <div id="vcomments"></div>
+            <ValineComment location={location} />
           </>
         )}
         {(showHero || showFeatures) && meta.footer && (
diff --git a/.dumi/theme/plugin-valine/Comment.tpl b/.dumi/theme/plugin-valine/Comment.tpl
new file mode 100644
index 0000000..fb5c55d
--- /dev/null
+++ b/.dumi/theme/plugin-valine/Comment.tpl
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import Valine from 'valine';
+
+export function ValineComment({ location }) {
+    const { pathname } = location;
+
+    useEffect(() => {
+        import('valine').then(Valine => {
+            console.log(Valine)
+            new Valine.default({
+                el: '{{{ el }}}',
+                appId: '{{{ appId }}}',
+                appKey: '{{{ appKey }}}'
+            })
+        })
+    }, [pathname])
+
+    return (
+        <div id="vcomments"/>
+    )
+}
diff --git a/.dumi/theme/plugin-valine/index.ts b/.dumi/theme/plugin-valine/index.ts
new file mode 100644
index 0000000..d027726
--- /dev/null
+++ b/.dumi/theme/plugin-valine/index.ts
@@ -0,0 +1,52 @@
+import { IApi } from 'dumi';
+import { join } from 'path';
+import { readFileSync } from 'fs';
+
+export default (api: IApi) => {
+  const {
+    paths,
+    utils: { Mustache, winPath, lodash },
+  } = api;
+
+  api.describe({
+    key: 'valine',
+    config: {
+      default: {
+        el: '#vcomments',
+        appId: '',
+        appKey: '',
+      },
+      schema(joi) {
+        return joi.object({
+          el: joi.string(),
+          appId: joi.string(),
+          appKey: joi.string(),
+        });
+      },
+    },
+  });
+
+  // 生成临时文件
+  api.onGenerateFiles(async () => {
+    // Comment.tsx
+    const selectLang = readFileSync(join(__dirname, 'Comment.tpl'), 'utf-8');
+
+    const { appId, appKey, el = '#vcomments' } = api.userConfig.valine;
+
+    api.writeTmpFile({
+      path: 'plugin-valine/Comment.tsx',
+      content: Mustache.render(selectLang, {
+        el: el,
+        appId: appId,
+        appKey: appKey,
+      }),
+    });
+  });
+
+  api.addUmiExports(() => {
+    return {
+      exportAll: true,
+      source: `../plugin-valine/Comment`,
+    };
+  });
+};
diff --git a/.umirc.ts b/.umirc.ts
index effa12c..9e66d11 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -91,7 +91,7 @@ export default defineConfig({
     appId: 'Ke6Uq74Gi6sdTxcDu4nJ6sdw-MdYXbMMI',
     appKey: 'VtFD26towQ1JQxB9tLHd8odg',
   },
-  plugins: ['./.dumi/theme/comment.ts'],
+  plugins: ['./.dumi/theme/plugin-valine/index.ts'],
   exportStatic: {},
   // more config: https://d.umijs.org/config
 });
diff --git a/docs/guide/faq.md b/docs/guide/faq.md
index d7ed5d7..5ac839a 100644
--- a/docs/guide/faq.md
+++ b/docs/guide/faq.md
@@ -8,8 +8,8 @@ order: 4
 
 遇到解决不了的问题，先删除`homebrew`目录再重新运行脚本安装。
 
-- x86 上安装目录： /usr/local/Homebrew/
-- arm 上安装目录： /opt/homebrew
+- x86 上安装目录： `/usr/local/Homebrew/`
+- arm 上安装目录： `/opt/homebrew`
 
 ## M1 芯片 Mac 如何安装
 
diff --git a/package.json b/package.json
index 335cb24..f9d98c1 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.5.0",
-    "antd": "^4.13.1"
+    "antd": "^4.13.1",
+    "valine": "^1.4.14"
   }
 }