如何在Docusaurus 2中为每个页面添加反馈表单React组件

一、具体配置实现步骤 #

1. 先创建你的React反馈组件 #

在项目的src/components/目录下新建FeedbackForm.js文件，写好你的表单逻辑，示例代码如下：

import React, { useState } from 'react';

const FeedbackForm = () => {
  const [feedbackContent, setFeedbackContent] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里替换成你的实际提交逻辑，比如发送到后端API
    console.log('用户反馈:', feedbackContent);
    setIsSubmitted(true);
    setTimeout(() => setIsSubmitted(false), 3000);
  };

  return (
    <div style={{ padding: '2rem 4rem', borderTop: '1px solid #eaecef', marginTop: '3rem' }}>
      <h3>页面反馈</h3>
      {isSubmitted ? (
        <p style={{ color: '#28a745' }}>感谢你的反馈，我们会认真查看！</p>
      ) : (
        <form onSubmit={handleSubmit}>
          <textarea
            value={feedbackContent}
            onChange={(e) => setFeedbackContent(e.target.value)}
            placeholder="请写下你对这个页面的意见或建议..."
            style={{ width: '100%', minHeight: '100px', marginBottom: '1rem', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px' }}
            required
          />
          <button type="submit" style={{ padding: '0.6rem 1.2rem', backgroundColor: '#007bff', color: '#fff', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
            提交反馈
          </button>
        </form>
      )}
    </div>
  );
};

export default FeedbackForm;

2. 通过自定义全局布局组件实现全页面挂载 #

Docusaurus支持通过覆写主题布局组件，把你的表单全局插入到所有页面底部：
在src/theme/目录下新建Layout.js文件（如果已有则直接修改），代码如下：

import React from 'react';
// 导入官方默认的Layout组件
import Layout from '@theme/Layout';
// 导入你刚才写的反馈表单组件
import FeedbackForm from '../components/FeedbackForm';

export default function CustomLayout(props) {
  return (
    <Layout {...props}>
      {/* 保留原页面内容 */}
      {props.children}
      {/* 在页面内容之后插入反馈表单 */}
      <FeedbackForm />
    </Layout>
  );
}

这样所有使用默认Layout的页面（包括文档、博客、自定义页面）底部都会自动显示这个反馈表单。

3. 可选：仅在特定页面类型显示 #

如果只想让表单出现在文档页面（而非博客或自定义页面），可以通过路由判断来控制：
修改CustomLayout.js代码：

import React from 'react';
import Layout from '@theme/Layout';
import FeedbackForm from '../components/FeedbackForm';
import { useLocation } from '@docusaurus/router';

export default function CustomLayout(props) {
  const location = useLocation();
  // 仅在路径以/docs/开头的页面显示表单
  const shouldShowForm = location.pathname.startsWith('/docs/');

  return (
    <Layout {...props}>
      {props.children}
      {shouldShowForm && <FeedbackForm />}
    </Layout>
  );
}

二、其他用户的常见实现方式 #

• 覆写页脚组件挂载：如果不想改动全局布局，也可以自定义页脚组件，把表单加到页脚上方。创建src/theme/Footer.js，导入官方默认Footer并插入表单：

import React from 'react';
import Footer from '@theme-original/Footer';
import FeedbackForm from '../components/FeedbackForm';

export default function CustomFooter(props) {
  return (
    <>
      <FeedbackForm />
      <Footer {...props} />
    </>
  );
}

• 单页面手动引入：如果不需要全局显示，部分用户会在单个Markdown文档里直接引入组件，写法是先在文档顶部导入组件，再在页面末尾插入：

---
title: 某篇文档
---

import FeedbackForm from '@site/src/components/FeedbackForm';

// 文档内容...

<FeedbackForm />

• 集成第三方表单工具：不少开发者会直接用Typeform、Google Forms等工具，把生成的嵌入代码放到自定义React组件里，省去自己写提交逻辑的麻烦，适合快速上线的场景。

内容的提问来源于stack exchange，提问作者Russ Urquhart