第三个功能

docusaurus.config.js

@@ -82,6 +82,10 @@ module.exports = {
         {
           type: 'custom-back-to-top',
           position: 'right'
+        },
+        {
+          type: 'custom-qa-button',
+          position: 'right'
         }
       ],
     },

src/components/QAButtonNavbarItem.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export default function QAButtonNavbarItem() {
+  return (
+    <BrowserOnly>
+      {() => {
+        const history = require('@docusaurus/router').useHistory();
+        return (
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+            <button
+              onClick={() => history.push('/qa')}
+              style={{
+                fontSize: 14,
+                padding: '0 16px',
+                background: '#466aff',
+                color: '#fff',
+                borderRadius: 4,
+                height: 32,
+                lineHeight: '32px',
+                border: 'none',
+                cursor: 'pointer',
+                display: 'inline-block',
+                margin: '0 8px',
+                boxSizing: 'border-box',
+              }}
+            >
+              疑问解答
+            </button>
+          </div>
+        );
+      }}
+    </BrowserOnly>
+  );
+} 

src/pages/qa.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+const wechatGroups = [
+  { img: '/img/question/wechat1.png', label: '微信技术交流答疑群1' },
+  { img: '/img/question/wechat2.png', label: '微信技术交流答疑群2' },
+];
+
+const qqGroups = [
+  { img: '/img/question/qq1.png', label: 'QQ技术交流答疑群1' },
+  { img: '/img/question/qq2.png', label: 'QQ技术交流答疑群2' },
+];
+
+export default function QA() {
+  return (
+    <div style={{
+      minHeight: '100vh',
+      background: 'linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%)',
+      padding: '0 0 48px 0',
+    }}>
+      <div style={{
+        maxWidth: 1000,
+        margin: '0 auto',
+        padding: '40px 24px 24px 24px',
+      }}>
+        <h1 style={{ textAlign: 'center', fontSize: 32, fontWeight: 700, marginBottom: 40, color: '#2d3a4b', letterSpacing: 2 }}>疑问解答与交流群</h1>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 32, justifyContent: 'center', marginBottom: 48 }}>
+          <div style={{ flex: '1 1 320px', background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px rgba(70,106,255,0.08)', padding: 32, minWidth: 320 }}>
+            <h2 style={{ textAlign: 'center', color: '#466aff', fontSize: 22, marginBottom: 24 }}>微信交流群</h2>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: 24 }}>
+              {wechatGroups.map((g, i) => (
+                <div key={i} style={{ textAlign: 'center' }}>
+                  <img src={g.img} alt={g.label} style={{ width: 120, height: 120, borderRadius: 12, marginBottom: 8, boxShadow: '0 2px 8px rgba(70,106,255,0.10)' }} />
+                  <div style={{ fontSize: 15, color: '#2d3a4b' }}>{g.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div style={{ flex: '1 1 320px', background: '#fff', borderRadius: 16, boxShadow: '0 4px 24px rgba(70,106,255,0.08)', padding: 32, minWidth: 320 }}>
+            <h2 style={{ textAlign: 'center', color: '#466aff', fontSize: 22, marginBottom: 24 }}>QQ交流群</h2>
+            <div style={{ display: 'flex', justifyContent: 'center', gap: 24 }}>
+              {qqGroups.map((g, i) => (
+                <div key={i} style={{ textAlign: 'center' }}>
+                  <img src={g.img} alt={g.label} style={{ width: 120, height: 120, borderRadius: 12, marginBottom: 8, boxShadow: '0 2px 8px rgba(70,106,255,0.10)' }} />
+                  <div style={{ fontSize: 15, color: '#2d3a4b' }}>{g.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div style={{
+          background: '#fff',
+          borderRadius: 16,
+          boxShadow: '0 4px 24px rgba(70,106,255,0.08)',
+          padding: 32,
+          maxWidth: 600,
+          margin: '0 auto',
+          textAlign: 'center',
+        }}>
+          <h2 style={{ color: '#466aff', fontSize: 22, marginBottom: 24 }}>官网论坛</h2>
+          <a
+            href="https://forum.gitlink.org.cn/forums"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: 'inline-block',
+              background: '#466aff',
+              color: '#fff',
+              borderRadius: 6,
+              padding: '12px 40px',
+              fontSize: 18,
+              textDecoration: 'none',
+              fontWeight: 600,
+              boxShadow: '0 2px 8px rgba(70,106,255,0.10)',
+              letterSpacing: 1,
+            }}
+          >
+            访问官网论坛
+          </a>
+        </div>
+        <div style={{ textAlign: 'center', marginTop: 56 }}>
+          <img src="/img/gitlink.png" alt="GitLink Logo" style={{ width: 80, opacity: 0.12 }} />
+        </div>
+      </div>
+    </div>
+  );
+} 

src/theme/NavbarItem/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import NavbarItem from '@theme-original/NavbarItem';
 import PdfExportNavbarItem from '../../components/PdfExportNavbarItem';
 import PdfBackToTopNavbarItem from '../../components/PdfBackToTopNavbarItem';
+import QAButtonNavbarItem from '../../components/QAButtonNavbarItem';
 
 export default function NavbarItemWrapper(props) {
   if (props.type === 'custom-pdf-export') {
@@ -10,5 +11,8 @@ export default function NavbarItemWrapper(props) {
   if (props.type === 'custom-back-to-top') {
     return <PdfBackToTopNavbarItem />;
   }
+  if (props.type === 'custom-qa-button') {
+    return <QAButtonNavbarItem />;
+  }
   return <NavbarItem {...props} />;
-} 
+}