72 lines
1.9 KiB
Markdown
72 lines
1.9 KiB
Markdown
# website-products
|
||
|
||
官网产品页面的代码
|
||
|
||
> 目前都使用 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` 下
|
||
- 在 `固定ページ` 中创建页面，使用 `ショートコード` 引入
|
||
- `[react_app app_name="alisurvey"]`
|
||
- 其中 `app_name` 是文件夹的名字
|
||
|
||
|
||
|
||
# 开发事项
|
||
|
||
当 coze 生成了 react 代码之后，需要做一些修改：
|
||
|
||
## 1. 修改 baseUrl
|
||
|
||
> 参考这个 commit： https://git.alicorns.co.jp/xuejiahao/website-products/commit/98dac11ece9c262b24376a3ff1227731b0ff96fd
|
||
|
||
1. `main.tsx`
|
||
```diff
|
||
createRoot(document.getElementById("root")!).render( # <---- 检查必须是 #root
|
||
<StrictMode>
|
||
- <BrowserRouter>
|
||
+ <BrowserRouter basename={import.meta.env.BASE_URL}>
|
||
<App />
|
||
<Toaster />
|
||
</BrowserRouter>
|
||
```
|
||
|
||
2. `vite.config.ts`
|
||
```diff
|
||
export default defineConfig({
|
||
plugins: getPlugins()
|
||
+ base: '/alisurvey', # <---- 需要和项目文件夹名一致
|
||
});
|
||
```
|
||
|
||
## 2. 修改 pnpm 为 npm [可选]
|
||
|
||
- `package.json`
|
||
```diff
|
||
"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"
|
||
},
|
||
``` |