Table of Contents

• 文件说明
• 基本配置
• 产品页面
• 流程
• 开发事项
• 1. 修改 baseUrl
• 2. 修改 pnpm 为 npm [可选]
• 可用的 AI 生成网站的工具：

官网产品页面的代码，基本思路是：

1. 创建一个空白的 template page-react-template.php，不使用当前的模板
2. 使用 plugin 的短代码方式，动态配置产品名称，来定位到指定目录下的文件

目前都使用 coze 生成页面，但是 coze 的代码几乎都是 react 的，目前只有 react app 的操作事项

文件说明

基本配置

./react-product-loader/

• 用于在 wordpress 中引入 react 页面的 pluigin
  • 因为使用 coze 生成的代码几乎都是 react 的
• 放置在 plugin 文件夹下
  • wp-content/plugin/react-product-loader

./page-react-template.php

• 用于展示产品的模板页面，不使用官网默认的模板
• 放置在当前使用的模板下面：
  • wp-content/themes/skyline-wp

产品页面

• 产品的页面放在 wp-content/products/react-apps 下

流程

1. 运行 npm run build
2. 将生成的 dist/static/assets 下的 index-....js 和 index-....css 放到 wordpress 中
   • 放在 wp-content/products/react-apps 目录下
3. 在 wordpress 「固定ページ」中创建页面，使用 ショートコード 引入
   • 输入 [react_app app_name="alisurvey"]
     • 其中 app_name （这里是 alisurvey）是项目文件夹名字（与下面开发事项提到的 baseUrl 也一样）
4. 设置使用的模板名称为： React Product Template

index.html 不需要导入，所以页面 meta、descirption 之类都在「固定ページ」中设置

开发事项

当 coze 生成了 react 代码之后，需要做一些修改

1. 修改 baseUrl

参考这个 commit： 8dd1e3c34f

1. main.tsx

createRoot(document.getElementById("root")!).render(  # <---- 检查必须是 #root
  <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="alisurvey">         # <---- 需要和项目文件夹名一致
      <App />
      <Toaster />
    </BrowserRouter>

2. vite.config.ts

-export default defineConfig({
-  plugins: getPlugins()
-});
+export default defineConfig(({ command }) => ({
+  plugins: getPlugins(),
+  base: command === 'build' 
+    ? '/wp-content/products/react-apps/alisurvey/' # <---- 存放到 wordpress 的路径，末尾需要 /
+    : '/alisurvey'                                 # <---- 本地用，需要和项目文件夹名一致
+}));

2. 修改 pnpm 为 npm [可选]

• package.json

  "scripts": {
    "dev:client": "vite --host --port 3000",
-    "dev": "pnpm dev:client",
+    "dev": "npm run dev:client",
    "build:client": "vite build --outDir dist/static",
-    "build": "rm -rf dist && pnpm build:client && cp package.json dist && touch dist/build.flag"
+    "build": "rm -rf dist && npm run build:client && cp package.json dist && touch dist/build.flag"
  },

可用的 AI 生成网站的工具：

1. 字节的扣子空间 Coze
2. lovable.dev - 大量使用需要付费，源码无法下载
3. readdy.ai - 大量使用需要付费，源码无法下载