页面模块创建规范
适用范围:奇点CMS 全部前台页面、后台管理页面、导航菜单及任何新增功能模块。 本规范为强制性要求,新增代码与数据均须遵守;历史遗留数据在触碰时必须一并修正。
一、图标使用规范(强制)
1.1 禁止事项
| 禁止类型 | 示例 | 说明 |
|---|---|---|
| Emoji 图标 | 📖 🎬 🏠 🔥 | 跨平台渲染不一致(Windows/Android/iOS 显示效果差异大),无法统一控制颜色、尺寸,禁止用于导航、按钮、菜单、卡片等任何 UI 图标场景 |
| HTML 实体图标 | 📖 📖 | 本质仍是 emoji/特殊字符,同样禁止 |
| 纯文本充当图标 | [图]、*、· 等 | 禁止 |
1.2 允许事项
图标只允许以下两种方式:
- FontAwesome 图标(推荐用于界面内固定图标)
```html <i class="fa-solid fa-book"></i> ```
- 图片图标(用于可配置的图标,如导航链接 icon 字段)
- 外部图片:必须以
http://或https://开头的图片 URL - 本地图片:必须位于
uploads/或assets/目录下,且扩展名为png / jpg / jpeg / gif / webp / svg / ico
```html <img src="assets/images/nav-novel.png" alt="" style="width:16px;height:16px;"> ```
1.3 各层强制执行情况
图标规则不依赖人工自觉,已在代码层强制:
| 层级 | 位置 | 机制 |
|---|---|---|
| 输入校验 | admin/nav-links.php → isValidIconUrl() | 保存导航时服务端校验 icon 字段,emoji/文本图标直接拒绝并提示错误 |
| 数据存储 | nav_links.icon | 只允许存入空串或合法图片 URL(由输入校验层保证) |
| 渲染过滤 | includes/header.php → navIconUrl() | 前台渲染导航时二次过滤:非图片 URL 的 icon 一律不渲染,即使数据库中存在脏数据也不会显示 emoji |
| 后台列表 | admin/nav-links.php | 列表页与前台同一规则,非法 icon 不展示 |
| 样式层(全站 CSS) | assets/css/*.css + assets/fonts/emoji-blank.woff2 | 全部 5 个 CSS 文件(style/content/agent/drama/video)内置「Emoji 禁用规则」:用空白字体接管 U+1F000–1FAFF emoji 区段,并以同名 @font-face 覆盖系统 emoji 字体回退链。任何页面内容混入 emoji(如 📖🏠🎬)时浏览器渲染为不可见;✓ ✗ ❌ ✅ ★ 等普通符号不在覆盖区段,不受影响 |
新增任何带图标配置的功能模块时,必须复制上述"校验 + 存储 + 渲染"三层防护,不得只做前端提示。
二、新页面/新模块创建步骤
- 建表(如需数据存储)
- 在
database.sql中同步补充建表语句与默认数据,保证全新安装可用。 - 字段使用
utf8mb4字符集;图标类字段只存 URL,不存字符图标。
- 建页面
- 前台页面:根目录
xxx.php,头部require_once __DIR__ . '/includes/header.php';,尾部引入includes/footer.php。 - 后台页面:
admin/xxx.php,头部require_once __DIR__ . '/header.php';,尾部引入admin/footer.php。 - 所有用户输入输出必须经过
e()转义;SQL 一律使用db()预处理参数绑定。
- 表单与校验
- 所有 POST 操作必须校验 CSRF(
csrfVerify()/csrfToken())。 - 服务端必须做白名单校验(枚举字段用
in_array(..., true),图标用isValidIconUrl()类函数),不信任前端。 - 校验失败给出明确中文错误提示,成功后用
redirect('xxx.php?msg=...')防重复提交。
- 入口接入
- 导航入口通过后台"导航管理"(
admin/nav-links.php)配置,不硬编码进模板。 - 需要图标的入口按第一章规范提供图片 URL 或留空。
- 样式与资源
- 样式写入
assets/css/对应文件,不大量内联;静态资源放assets/,用户上传内容放uploads/。
- 文档与验证
- 涉及数据库结构或后台功能变化时,更新
docs/下相关文档。 - 提交前用
php -l检查语法,并在浏览器实际验证前后台页面。
三、历史数据处理
- 2026-09-28 已清理
nav_links表中的 emoji 图标(id=5「小说」的📖)。 - 排查存量脏数据可执行:
```sql SELECT id, name, icon FROM nav_links WHERE icon <> '' AND icon NOT REGEXP '^(https?://|/?(uploads|assets)/)'; ```
查询结果非空即说明仍存在非法图标,应清空或替换为合法图片 URL。