如何在Docusaurus中对接数据库以实现无需GitHub提交的内置编辑器功能

我完全懂你的需求——不想每次改内容都走GitHub提交的流程，而是直接在生产网站上用内置编辑器修改，内容实时存在数据库里并立刻展示。Docusaurus默认是静态生成框架，确实和这个需求有点“天然冲突”，但咱们可以通过两种思路实现，而且不用搭建复杂的全栈应用，下面给你详细拆解：

方案一：客户端动态加载内容（实时生效） #

这个方案的核心是让Docusaurus页面在浏览器加载时，从数据库拉取最新内容，而非依赖build时生成的静态文件。步骤如下：

1. 搭建极简后端接口
   不用写复杂的后端，选轻量方案就行：比如用Express写几个简单接口（GET取内容、POST存内容），或者直接用Supabase/Firebase这种BaaS服务，直接调用它们的数据库API，连后端代码都省了。数据库选MongoDB、PostgreSQL甚至SQLite（单服务器部署场景）都可以，重点是能快速增删改查页面内容。

2. 在Docusaurus中创建动态页面/组件
   你可以创建自定义React页面，或者在MDX中嵌入动态组件，通过React的useEffect在客户端异步拉取数据库内容并渲染。比如：

   import React, { useState, useEffect } from 'react';
   import ReactMarkdown from 'react-markdown'; // 用来解析Markdown内容
   
   export default function DynamicDocPage({ slug }) {
     const [pageContent, setPageContent] = useState('');
   
     useEffect(() => {
       // 调用你的接口获取对应slug的页面内容
       fetch(`/api/get-content?slug=${slug}`)
         .then(res => res.json())
         .then(data => setPageContent(data.markdownContent));
     }, [slug]);
   
     return (
       <div className="container padding-top--lg">
         <ReactMarkdown>{pageContent}</ReactMarkdown>
       </div>
     );
   }
   

   用react-markdown解析Markdown内容比直接用dangerouslySetInnerHTML更安全，也能更好兼容Docusaurus的样式。

3. 添加内置编辑器组件
   在需要编辑的页面上加一个编辑器（比如用Tiptap、Draft.js，甚至简单的Markdown编辑器组件），点击“保存”时调用后端的提交接口，把编辑后的内容存入数据库。记得加权限控制——比如只有登录后的管理员才能看到编辑器，避免恶意修改，最简单的方式是用JWT验证或者第三方OAuth（比如GitHub登录）。

方案二：数据库触发静态重建（半实时，性能更优） #

如果你的内容不需要毫秒级实时生效，能接受几分钟的延迟，这个方案更贴合Docusaurus的静态生成特性，页面加载速度也更快：

1. 同样需要后端接口存内容
   和方案一一样，先做一个接收编辑器内容并写入数据库的接口。

2. 设置内容更新触发重建
   当数据库内容更新时，自动触发Docusaurus的build和部署流程：

   • 比如用GitHub Actions：当数据库内容变更时，调用GitHub的API触发Action，拉取最新的数据库内容（可以写个脚本从数据库导出成Markdown文件），然后执行npm run build并部署。
   • 或者用Vercel/Netlify的部署API：在后端接口里，当内容保存成功后，调用Vercel的部署接口，触发重新构建。
     这样用户编辑内容后，等部署完成（一般几分钟），新内容就会以静态页面的形式展示，不用手动提交GitHub。

关键注意事项 #

• 搜索功能适配：Docusaurus默认的搜索是build时生成静态索引的，如果用方案一的动态内容，默认搜索搜不到。可以换成Algolia搜索，或者自己实现前端搜索逻辑，把数据库里的内容加到搜索索引中。
• 权限控制不能少：编辑器一定要加身份验证，不然任何人都能修改你的网站内容，这是重中之重。
• 数据库选型：优先选BaaS服务（Supabase、Firebase），能帮你省掉大部分后端运维工作，快速上手。

备注：内容来源于stack exchange，提问作者Noorain Tahir