105 lines
3.3 KiB
Markdown
105 lines
3.3 KiB
Markdown
---
|
||
gitea: none
|
||
include_toc: true
|
||
---
|
||
|
||
|
||
官网产品页面的代码，基本思路是：
|
||
|
||
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： https://git.alicorns.co.jp/xuejiahao/website-products/commit/8dd1e3c34f4633f8fae7f3ade0513b6c6c1f1822
|
||
|
||
1. `main.tsx`
|
||
```diff
|
||
createRoot(document.getElementById("root")!).render( # <---- 检查必须是 #root
|
||
<StrictMode>
|
||
- <BrowserRouter>
|
||
+ <BrowserRouter basename="alisurvey"> # <---- 需要和项目文件夹名一致
|
||
<App />
|
||
<Toaster />
|
||
</BrowserRouter>
|
||
```
|
||
|
||
2. `vite.config.ts`
|
||
```diff
|
||
-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`
|
||
```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"
|
||
},
|
||
```
|
||
|
||
## 可用的 AI 生成网站的工具：
|
||
|
||
1. [字节的扣子空间 Coze](https://space.coze.cn/expert/10000)
|
||
2. [lovable.dev](https://lovable.dev/) - 大量使用需要付费，源码无法下载
|
||
3. [readdy.ai](https://readdy.ai/) - 大量使用需要付费，源码无法下载 |