diff --git a/components/Comment.js b/components/Comment.js
index 60f32537..c75ff12f 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router'
 import Tabs from '@/components/Tabs'
 import { ReactCusdis } from 'react-cusdis'
 import { useGlobal } from '@/lib/global'
+import { WalineComponent } from './WalineComponent'
 
 const GitalkComponent = dynamic(
   () => {
@@ -40,6 +41,10 @@ const Comment = ({ frontMatter }) => {
     <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
 
+        { BLOG.COMMENT_WALINE_SERVER_URL && (<div key='Waline'>
+            <WalineComponent/>
+        </div>) }
+
         {BLOG.COMMENT_VALINE_APP_ID && (<div key='Valine' name='reply'>
             <ValineComponent path={frontMatter.id}/>
         </div>)}
diff --git a/components/WalineComponent.js b/components/WalineComponent.js
new file mode 100644
index 00000000..1f9a1602
--- /dev/null
+++ b/components/WalineComponent.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { init } from '@waline/client'
+import BLOG from '@/blog.config'
+
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+export const WalineComponent = (props) => {
+  const walineInstanceRef = React.useRef(null)
+  const containerRef = React.createRef()
+
+  React.useEffect(() => {
+    walineInstanceRef.current = init({
+      ...props,
+      el: containerRef.current,
+      serverURL: BLOG.COMMENT_WALINE_SERVER_URL
+    })
+
+    return () => walineInstanceRef.current?.destroy()
+  }, [])
+
+  React.useEffect(() => {
+    walineInstanceRef.current?.update(props)
+  }, props)
+
+  return <div ref={containerRef} />
+}
diff --git a/package.json b/package.json
index ceae6563..3750b293 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "notion-next",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "homepage": "https://github.com/tangly1024/NotionNext.git",
   "license": "MIT",
   "repository": {
@@ -51,6 +51,7 @@
     "valine": "^1.4.18"
   },
   "devDependencies": {
+    "@waline/client": "^2.5.1",
     "autoprefixer": "^10.2.5",
     "eslint": "^7.26.0",
     "eslint-config-next": "^11.0.0",
diff --git a/pages/_app.js b/pages/_app.js
index 3554446b..e4205758 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -11,6 +11,9 @@ import '@/styles/notion.css' //  重写部分样式
 import 'prismjs/themes/prism-tomorrow.min.css'
 import 'react-notion-x/build/third-party/equation.css'
 
+// waline 评论插件
+import '@waline/client/dist/waline.css'
+
 import dynamic from 'next/dynamic'
 import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'