@talknote/create-talknote-h5 0.1.3 → 0.1.5

package/bin/create-talknote-h5.js

@@ -10,6 +10,16 @@ const SPECIAL_FILE_NAMES = {
   _gitignore: '.gitignore',
   _npmrc: '.npmrc',
 };
+const SKIP_ENTRY_NAMES = new Set([
+  'node_modules',
+  '.umi',
+  '.umi-production',
+  '.mfsu',
+  'dist',
+  'coverage',
+  '.DS_Store',
+  '.eslintcache',
+]);
 
 function printUsageError(message) {
   process.stderr.write(`Error: ${message}\n${USAGE}\n`);
@@ -35,6 +45,9 @@ function removeTree(targetPath) {
 
 function copyTemplateEntries(sourceDirectory, targetDirectory) {
   for (const entry of fs.readdirSync(sourceDirectory, { withFileTypes: true })) {
+    if (SKIP_ENTRY_NAMES.has(entry.name)) {
+      continue;
+    }
     const targetName = SPECIAL_FILE_NAMES[entry.name] || entry.name;
     const sourcePath = path.join(sourceDirectory, entry.name);
     const targetPath = path.join(targetDirectory, targetName);
@@ -117,6 +130,7 @@ if (require.main === module) {
 }
 
 module.exports = {
+  SKIP_ENTRY_NAMES,
   copyTemplateEntries,
   main,
   removeTree,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Create a Talknote Alita H5 project.",
   "license": "MIT",
   "private": false,

package/template/.agents/skills/add-h5-page/SKILL.md

@@ -0,0 +1,116 @@
+---
+name: add-h5-page
+description: >-
+  Adds Alita H5 pages using convention files plus runtime layout in src/routes.ts
+  (tabBar, header, or blank). Use when creating a page, adding a route, choosing
+  layout, configuring headerProps, adding a TabBar item, or avoiding notch
+  occlusion on blank layout (vibe-element safe-area-view).
+---
+
+# Add H5 page
+
+Paths are relative to the Alita app root (`src/`, `config/`). In the createTalknoteH5 scaffold that is `template/`.
+
+Do **not** put pages in `config/routes.ts` or `config/config.ts`. Layout is runtime: `src/routes.ts` (HMR). Page files are convention: `src/pages/<name>/index.tsx`.
+
+## Choose layout
+
+| Need | `layout` | `headerProps` | Also |
+|------|----------|---------------|------|
+| Bottom tabs (home, list, …) | `tabBar` | set → Header; omit → no Header | add `navItems` in `src/components/TabBar/index.tsx` |
+| Title + back, no bottom bar (detail, form, settings) | `header` | required (`title`; `showBack` defaults true) | — |
+| Custom chrome (chat, camera, full-screen) | `blank` | omit | page owns header/back; wrap content with `vibe-element="safe-area-view"` `vibe-edges="top"` |
+
+Unlisted paths default to **`tabBar`**. Always register the path in `src/routes.ts`.
+
+Do not import layout components from `src/routes.ts` (circular). Layout map stays in `src/layouts/index.tsx`.
+
+Do not wrap the page in Header/TabBar yourself for `tabBar` / `header`. For `blank`, the page may render its own header.
+
+## Steps
+
+1. Pick layout from the table. Ask if chrome is unclear.
+2. Add `src/pages/<name>/index.tsx` (and `index.less` if needed). Path is `/<name>`. Index page is `src/pages/index/` → `/`. Nested: `src/pages/foo/bar/` → `/foo/bar`.
+3. Append an entry to `routes` in `src/routes.ts` (see snippets). Do not put `**/` inside block comments (it closes `/*`).
+4. If `layout: 'tabBar'` **and** it is a root tab: add `{ path, text, icon }` to `navItems`. Do not add secondary pages (chat, detail) to TabBar.
+5. Optional keepalive: add a regex in `config/config.ts` `keepalive`. Requires **restart**.
+6. **Restart `yarn dev`** after adding/removing a page file (convention scan). Changing only `src/routes.ts` does not.
+
+## `src/routes.ts` snippets
+
+Tab with Header (like `/`, `/list`):
+
+```ts
+{
+  path: '/order',
+  layout: 'tabBar',
+  headerProps: { title: 'Orders', showBack: false },
+},
+```
+
+Tab, no Header:
+
+```ts
+{ path: '/feed', layout: 'tabBar' },
+```
+
+Detail (Header only):
+
+```ts
+{
+  path: '/order-detail',
+  layout: 'header',
+  headerProps: { title: 'Order detail' },
+},
+```
+
+Immersive (`blank`, like `/xiaozhi-chat`):
+
+```ts
+{ path: '/xiaozhi-chat', layout: 'blank' },
+```
+
+`headerProps` fields: `title`, `showBack`, `extra`, `onBack`. Prefer `title` / `showBack` in the route table. Custom back belongs in the page (blank) or via Header `onBack` (`@/utils/goBack` already used by `Header`).
+
+## Blank layout: notch / safe area
+
+For `blank` layout, keep content out of the notch / status bar. Put `vibe-element="safe-area-view"` and `vibe-edges="top"` on the content container.
+
+Do not add these on `tabBar` / `header` pages: `Header` already has `vibe-element="header"`, and the native container applies the top safe area.
+
+```tsx
+export default function TestPage() {
+  return (
+    <div style={{ backgroundColor: '#fff' }}>
+      <div vibe-element="safe-area-view" vibe-edges="top">
+        …
+      </div>
+    </div>
+  );
+}
+```
+
+If a `blank` page already has a custom header with `vibe-element="header"`, still put `safe-area-view` on the **outer content container** (see `packages/xiaozhi-chat/XiaozhiChatPage.tsx`).
+
+## Page file
+
+```tsx
+import React from 'react';
+import styles from './index.less';
+
+export default function OrderPage() {
+  return <div className={styles.page}>…</div>;
+}
+```
+
+- Default export a component. Use `alita` for `useNavigate` / `useLocation` / `useSearchParams`.
+- Do not use antd-mobile `NavBar` for the app header; chrome is `Header` + layouts.
+- `blank` pages that need a back control: implement it in the page (see `src/pages/xiaozhi-chat/index.tsx`).
+- Theme tokens live in `src/theme/variables.css` (`--color-primary`, spacing, radius).
+
+## Do not
+
+- Do not edit `src/layouts/index.tsx` just to add a page.
+- Do not add `routes` to `config/config.ts`.
+- Do not expect `config/*.ts` (except watching `config.ts`) or new page files to hot-reload.
+- Do not put a new layout name in `routes.ts` without adding it to `layoutMap` in `src/layouts/index.tsx`.

package/template/.eslintrc.js

@@ -5,6 +5,8 @@ module.exports = {
     'no-use-before-define': ['warn', { functions: true, classes: true, variables: true }],
     'global-require': 'off',
     'no-empty': ['warn', { allowEmptyCatch: false }],
+    // 原生容器识别的自定义属性，需原样写在 DOM 上
+    'react/no-unknown-property': ['error', { ignore: ['vibe-element', 'vibe-edges'] }],
   },
   parserOptions: {
     ecmaVersion: 12,

package/template/README.md

@@ -1,153 +1,179 @@
-<h1 align="center">Alita Pro</h1>
+# 智在记录 H5
 
-帮助你快速使用 alita, 基于Umi 的移动端开发框架
+面向「智在记录」APP 内嵌 H5 的 Alita 工程（基于 Umi）。提供移动端适配、约定式路由、运行时布局、开发代理和统一请求封装，用于在 APP WebView 中承载业务页面。
+
+## 技术栈
+
+- **框架**：Alita 3（Umi）
+- **UI**：antd-mobile 5、lucide-react
+- **包管理**：Yarn
+- **Node**：>= 18
+
+## 目录结构
 
 ```
+├── config/
+│   ├── config.ts          # 工程配置（keepalive、代理、API_PREFIX 等）
+│   └── proxy.ts           # 开发环境接口代理
+├── scripts/
+│   └── dev.js             # yarn dev 启动脚本，可注入代理地址
+├── src/
+│   ├── pages/             # 约定式页面：src/pages/<name>/index.tsx → /<name>
+│   ├── layouts/           # 运行时布局（tabBar / header / blank + SSO 闸门）
+│   ├── components/        # Header、TabBar 等
+│   ├── routes.ts          # 路由布局与 SSO 开关
+│   ├── services/          # 接口定义
+│   ├── utils/request.ts   # 统一请求（前缀、解包）
+│   └── theme/             # 主题 CSS 变量
+└── packages/              # 本地子包（内置问小智聊天 xiaozhi-chat）
+```
+
+## 启动
+
+```bash
 yarn
 yarn dev
 ```
 
-### 首页
-
-![image](https://user-images.githubusercontent.com/11746742/179654827-2ca22b45-0ec9-471e-8238-9bfa56d864a0.png)
+浏览器打开终端提示的本地地址即可。`yarn start` 与 `yarn dev` 相同。
 
-### 列表页
+常用脚本：
 
-列表页支持滚动加载更多，固定头部，状态保持
+| 命令 | 说明 |
+|------|------|
+| `yarn dev` | 开发服务 |
+| `yarn build` | 生产构建，产物在 `dist/` |
+| `yarn format` | Prettier 格式化 |
+| `yarn eslint` | ESLint 检查 |
 
-![image](https://user-images.githubusercontent.com/11746742/179654907-585061f1-02cc-464e-ac75-c6ae12b2c666.png)
+新增或删除 `src/pages/**/index.tsx` 后需要**重启** `yarn dev`（约定式路由扫描）。只改 `src/routes.ts` 会热更新，不必重启。
 
+## 代理服务
 
-### 关于尺寸标注
+开发时浏览器请求同源 `/server/*`，由 `config/proxy.ts` 转发到后端，并去掉 `/server` 前缀：
 
-100% 宽为 750px，可在蓝湖等工具中将标准改为 750px，这样可以直接使用标注的尺寸用于 caa class 中的尺寸，最终运行会根据手机适配，将 px 自动转为对应的 rem 值。
+```
+前端：GET /server/nes/oauth2/ticketLogin
+实际：GET {DEV_SERVER}nes/oauth2/ticketLogin
+```
 
-值得注意的是，写在内联样式 style 中的 px 值不会被转化，需要手动写明 rem 单位，直接将 px 值除于 100 即可，如 750px，在 style 中应该写为 7.5rem
+目标地址优先级：
 
-### 关于路由
+1. 命令行传入的地址（`scripts/dev.js` 写入 `process.env.DEV_SERVER`）
+2. 环境变量 / `.env.local` 中的 `DEV_SERVER`
+3. `config/proxy.ts` 里的 `DEFAULT_DEV_SERVER`
 
-采用约定式路由，只有 `src/pages/**/index.tsx` 会被识别成路由，可使用 npx alita g pages name 来新增页面。
+```bash
+# 使用 .env.local 或默认地址
+yarn dev
 
-> Q: 为什么仅 index.tsx 会被识别成路由？如果我想要嵌套的路由，如 hello/hero 我该怎么办？
-> A: 仅 index.tsx 被识别成路由，会让整个文件结构变得很干净，在移动端上不需要嵌套路由，一般短位链接优势更大
+# 本次启动临时指定后端
+yarn dev http://127.0.0.1:8000
 
-### 自带头部
+# 指定代理地址，并改本地端口
+yarn dev http://127.0.0.1:8000 --port 8081
+```
 
-可在 `src/app.tsx#L24` 中配置
+长期改本地后端：在项目根新建 `.env.local`（已 gitignore， 不会提交到仓库影响他人）：
 
-```tsx
-const titleList: TitleListItem[] = [
-  {
-    pagePath: '/',
-    title: '首页',
-  },
-  {
-    pagePath: '/list',
-    title: '列表',
-  },
-];
+```bash
+DEV_SERVER=http://127.0.0.1:8000
 ```
 
-也可以在页面中独立配置
-
-```tsx
-import { setPageNavBar, useLocation } from 'alita';
-import { LeftOutline } from 'antd-mobile-icons';
-import { useEffect } from 'react';
-
-const location = useLocation();
-useEffect(() => {
-  setPageNavBar({
-    pagePath: location.pathname,
-    navBar: {
-      mode: 'dark',
-      pageTitle: '首页动态标题',
-      pageBackground: '#fff',
-      back: '返回',
-      icon: <LeftOutline />,
-      leftContent: <div>首页</div>,
-      rightContent: <div>详情</div>,
-      onLeftClick: (navigate) => {
-        navigate(-1);
-      },
-      hideNavBar: false,
-    },
-  });
-}, []);
-```
+增加代理规则时，在 `config/proxy.ts` 按同样结构追加 path → `{ target, changeOrigin, pathRewrite }`。
 
-> 关闭默认 NavBar 上述 hideNavBar 配置改为 hideNavBar: true
-
-### 底部 Tabs
-
-可在 `src/app.tsx#L42` 中配置
-
-```tsx
-const tabList: TabBarListItem[] = [
-  {
-    pagePath: '/',
-    text: '首页',
-    iconPath: HomeGary,
-    selectedIconPath: HomeBlue,
-    title: '首页',
-    iconSize: '',
-    badge: '',
-  },
-  {
-    pagePath: '/list',
-    text: '列表',
-    iconPath: ListGary,
-    selectedIconPath: ListBlue,
-    title: '列表',
-    iconSize: '',
-    badge: '',
-  },
-];
-```
+**注意：**
 
-也可以在页面中独立配置
-
-```tsx
-import { setTabBarList, useLocation } from 'alita';
-import { useEffect } from 'react';
-
-const location = useLocation();
-useEffect(() => {
-  setTabBarList({
-    pagePath: location.pathname,
-    text: '首页',
-    iconSize: '18px',
-    badge: '12',
-    onPress: () => {
-      navigate(location.pathname, { replace: true });
-      return '';
-    },
-    remove: false,
-  });
-}, []);
-```
+- 代理**只在** `yarn dev` 生效，不会打进生产包。线上由容器 / 网关转发。
+- 改 `config/proxy.ts` 或 `.env.local` 后需要重启 dev。
+- 生产构建不走本文件。
 
-> 关闭 app.ts 中已经配置好的 Tab ，上述 remove 配置改为 remove: true
+### 接口前缀 `API_PREFIX`
 
-### 格式化
+业务请求默认带前缀 `/server/nes`（见 `config/config.ts` 的 `define` 与 `src/utils/request.ts`）。开发态该前缀命中 `/server` 代理；需要改前缀时：
 
-```
-yarn format
+```bash
+API_PREFIX=/server/nes yarn dev
 ```
 
-### 构建
+## 请求
 
+业务接口走 `src/utils/request.ts` 的 `request` / `get` / `post`，不要直接用 `alita` 的 `request`。
+
+```ts
+import { get, post, request } from '@/utils/request';
+
+// 默认：拼 API_PREFIX，并按 NES 信封解包 resultObject
+const data = await post('/oauth2/ticketLogin', { ticket });
+
+// 不拼前缀、不解包
+await request('/api/hello', { method: 'POST', prefix: false, unwrap: false });
 ```
-yarn build
+
+请求会带 cookie（`credentials: 'include'`）。在 APP 内还会通过 `@talknote/h5-bridge` 注入原生 header / token（见 `src/app.tsx`）。
+
+## 路由与布局
+
+页面文件是约定式的：只有 `src/pages/**/index.tsx` 会成为路由。
+
+| 页面文件 | 访问路径 |
+|----------|----------|
+| `src/pages/index/index.tsx` | `/` |
+| `src/pages/list/index.tsx` | `/list` |
+| `src/pages/foo/bar/index.tsx` | `/foo/bar` |
+
+布局**不写**在 `config/config.ts`，而在 `src/routes.ts`（运行时，可 HMR）：
+
+| `layout` | 场景 | `headerProps` |
+|----------|------|----------------|
+| `tabBar` | 首页、列表等带底栏 | 有则出 Header，省略则无顶栏 |
+| `header` | 详情、表单、设置 | 必填（`title`；`showBack` 默认 true） |
+| `blank` | 聊天、全屏、自定义顶栏 | 省略；页面自己管顶栏 |
+
+未登记的路径默认 **`blank`**。底栏 Tab 还需在 `src/components/TabBar/index.tsx` 的 `navItems` 里加一项。
+
+```ts
+// src/routes.ts
+{
+  path: '/order',
+  layout: 'tabBar',
+  headerProps: { title: '订单', showBack: false },
+},
+{
+  path: '/order-detail',
+  layout: 'header',
+  headerProps: { title: '订单详情' },
+},
+{ path: '/xiaozhi-chat', layout: 'blank' },
 ```
 
-### 调试工具
+`blank` 页面内容需避开刘海 / 状态栏：在内容容器上加 `vibe-element="safe-area-view"` 和 `vibe-edges="top"`。`tabBar` / `header` 不用加，Header 已带 `vibe-element="header"`。
+
+需要离开后仍保留滚动位置等状态时，把路由正则加到 `config/config.ts` 的 `keepalive`，然后**重启** dev。
+
+## SSO 登录
 
-在 `config/config.ts` 中增加配置
+APP 内首次进入会走 ticket 登录（`window.vibeNoteBridge.getAuthTicket` → `POST /oauth2/ticketLogin`），由 `SSOLoginLayout` 闸门控制。
 
+开关在 `src/routes.ts`：
+
+```ts
+export const ssoLoginEnabled = false; // true 时必须在 APP 内才能进入
 ```
-aconsole: {
-    console: {},
-    inspx: {},
-},
-```
+
+本地浏览器调试请保持 `false`。在 APP 外且开关为 `true` 时会提示「请在智在记录APP里访问」。
+
+## 尺寸与主题
+
+设计稿宽度按 **750px**。写在 class / less 里的 `px` 会转成 rem；写在内联 `style` 里的 `px` **不会**转换，需手写 rem（数值 ÷ 100），例如 `750px` → `7.5rem`。
+
+主题 token 在 `src/theme/variables.css`（`--color-primary`、间距、圆角等），优先用变量，不要硬编码颜色。
+
+## 调试
+
+开发态默认开启 `aconsole`（`config/config.ts`）：
+
+- **console**：vConsole
+- **inspx**：布局标尺
+
+不需要时把对应配置删掉或注释即可。

package/template/_gitignore

@@ -13,9 +13,6 @@ yarn-error.log
 
 /coverage
 .idea
-yarn.lock
-package-lock.json
-pnpm-lock.yaml
 *bak
 
 

package/template/config/config.ts

@@ -1,16 +1,61 @@
+/**
+ * Alita 工程配置（基于 Umi）
+ *
+ * 本文件是项目入口配置，`yarn dev` / `yarn build` 都会读取。
+ * 代理规则单独放在 ./proxy.ts，仅开发环境生效。
+ *
+ * 更多配置：https://alitajs.com/docs/config
+ */
+import path from 'path';
 import { defineConfig } from 'alita';
 import proxy from './proxy';
 
 export default defineConfig({
+  // 应用类型。h5 会启用移动端适配（750 设计稿 → rem）
   appType: 'h5',
+
+  // 需要缓存的路由正则；匹配的页面离开后状态会保留
   keepalive: [/list/],
+
+  // 资源路径(默认使用hash模式，设置为./，适配在不同环境的网关)
+  publicPath: process.env.PUBLIC_PATH || './',
+
+  // 路由模式，使用hash，url带#
+  history: {
+    type: 'hash',
+  },
+
+  // 开发态调试面板：console 为 vConsole，inspx 为布局标尺
   aconsole: {
     console: {},
     inspx: {},
   },
+
+  // 开发代理，见 ./proxy.ts；生产构建不会打进产物
   proxy,
-  mobileLayout: 'mobile5',
-  mfsu: {},
-  hash: false,
-  npmClient: ''
+
+  // 关闭 Alita 约定式 mobileLayout。页面约定式路由；布局见 src/routes.ts（运行时）
+  mobileLayout: false,
+  conventionLayout: true,
+
+  // 关闭框架注入到 #root 的页面 loading（ant-spin）
+  preloadding: false,
+
+  mfsu: {
+    esbuild: true,
+  },
+  npmClient: 'yarn',
+  esbuildMinifyIIFE: true,
+
+  // 开启 hash 模式，让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
+  hash: true,
+
+  define: {
+    'process.env.API_PREFIX': process.env.API_PREFIX || '/server/nes',
+  },
+
+  // 本地子包源码直引，保证 less / 图片可被主工程编译
+  alias: {
+    '@talknote/xiaozhi-chat': path.join(__dirname, '../packages/xiaozhi-chat'),
+  },
 });

package/template/config/proxy.ts

@@ -1,39 +1,36 @@
-const BASE_URL = 'http://172.21.72.205:10000/';
+/**
+ * 开发环境接口代理（仅 `yarn dev` / `alita dev` 生效）
+ *
+ * 浏览器请求 `/server/xxx` 会被转发到后端，并去掉 `/server` 前缀：
+ *   前端：GET /server/foo
+ *   实际：GET {DEV_SERVER}foo
+ *
+ * 目标地址优先级：
+ *   1. process.env.DEV_SERVER（.env.local / 环境变量；命令行地址由 scripts/dev.js 注入）
+ *   2. 下方 DEFAULT_DEV_SERVER
+ *
+ * 用法（与 scripts/dev.js 配合）：
+ *   yarn dev                              # 走 .env.local / 默认 DEV_SERVER
+ *   yarn dev http://1.2.3.4:10000         # 临时改代理地址
+ *   yarn dev http://1.2.3.4:10000 --port 8081
+ *
+ * 说明：
+ *   - 改本地地址：在 .env.local 写 DEV_SERVER=http://...
+ *   - 加新代理：按同样结构再写一条 path → { target, changeOrigin, pathRewrite }
+ *   - 生产环境不走本文件，接口由容器/网关转发
+ */
+const DEFAULT_DEV_SERVER = 'http://10.10.179.140:8058/eco-oppo/server/';
 
-const DEV_URL = process.env.BASE_URL || `${BASE_URL}`;
+const DEV_SERVER = process.env.DEV_SERVER || `${DEFAULT_DEV_SERVER}`;
+
+if (process.env.NODE_ENV === 'development') {
+  console.log('[dev] API服务地址: ', DEV_SERVER);
+}
 
 export default {
-  '/portal': {
-    target: BASE_URL,
-    changeOrigin: true,
-  },
   '/server': {
-    target: DEV_URL,
+    target: DEV_SERVER,
     changeOrigin: true,
     pathRewrite: { '^/server': '' },
   },
-  '/app': {
-    target: DEV_URL,
-    changeOrigin: true,
-    // pathRewrite: { '^/app': '' },
-  },
-  '/login': {
-    target: DEV_URL,
-    changeOrigin: true,
-    // pathRewrite: { '^/login': '' },
-  },
-  '/lcdp': {
-    target: `${DEV_URL}`,
-    changeOrigin: true,
-  },
-  '/img': {
-    target: BASE_URL,
-    changeOrigin: true,
-    pathRewrite: { '^/img': '' },
-  },
-  '/engine': {
-    target: BASE_URL,
-    changeOrigin: true,
-    pathRewrite: { '^/engine': 'engine' },
-  },
 };

package/template/docker/nginx/error_page.conf

@@ -0,0 +1,51 @@
+# 自定义错误页面，避免在响应体中出现 nginx 字眼, 满足一些现场的安全扫描需要
+
+error_page 301 /301.html;
+error_page 400 /400.html;
+error_page 404 /404.html;
+error_page 405 /405.html;
+error_page 413 /413.html;
+error_page 500 /500.html;
+error_page 502 /502.html;
+error_page 503 /503.html;
+error_page 504 /504.html;
+location /301.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>301 Moved Permanently</title></head><body><center><h1>301 Moved Permanently</h1></center></body></html>";
+}
+location /400.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>400 Bad Request</title></head><body><center><h1>400 Bad Request</h1></center></body></html>";
+}
+location /404.html {
+  add_header 'Content-Type' 'text/html';
+  try_files $uri @404_fallback;
+}
+location @404_fallback {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>404 Not Found</title></head><body><center><h1>404 Not Found</h1></center></body></html>";
+}
+location /405.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>405 Not Allowed</title></head><body><center><h1>405 Not Allowed</h1></center></body></html>";
+}
+location /413.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>413 Request Entity Too Large</title></head><body><center><h1>413 Request Entity Too Large</h1></center></body></html>";
+}
+location /500.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>500 Internal Server Error</title></head><body><center><h1>500 Internal Server Error</h1></center></body></html>";
+}
+location /502.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>502 Bad Gateway</title></head><body><center><h1>502 Bad Gateway</h1></center></body></html>";
+}
+location /503.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>503 Service Unavailable</title></head><body><center><h1>503 Service Unavailable</h1></center></body></html>";
+}
+location /504.html {
+  add_header 'Content-Type' 'text/html';
+  return 200 "<html><head><title>504 Gateway Timeout</title></head><body><center><h1>504 Gateway Timeout</h1></center></body></html>";
+}