给龙脉暖通伙伴看的 — 文件命名为什么很重要
图片用中文命名南富森门店尊睿…jpg
上传后URL变成
200+个%XX编码字符
写入 <img src> 后
代码行超长、易截断
发给AI后对话
窗口直接卡死
媒体库搜不到
几千张图靠肉眼翻
🔌 URL 乱码
中文文件名被浏览器编码成一长串 %E5%8D%97%E5%AF%8C%E6%A3%AE...，链接不可读、不可手打、不可调试。
🤖 AI 对话卡死
把含中文图片名的 HTML 代码发给 AI 分析时，200+ 字符的 URL 编码超出消息限制，AI 无法解析，整个协作中断。
🔍 媒体库无法检索
WordPress 媒体库搜索框打中文找不到、打拼音也找不到，几千张图全靠肉眼翻，团队协作效率极低。
📎 跨平台兼容差
不同操作系统/浏览器对中文 URL 处理不一致，部分环境直接 404 或乱码显示。
❌ 中文图片 → HTML 引用
✅ 英文图片 → HTML 引用
想象你在 WordPress 这个”大房子”里，开了一个独立的小窗口。这个窗口里运行的是一个完全独立的 HTML 页面——它有自己的 JS、自己的 CSS、自己的逻辑。就像一个国中国，里面的代码不会和外面的 WordPress 代码打架。
一句话：iframe 就是在 WordPress 页面里嵌入了一个独立的小浏览器，用来运行那些 WordPress 编辑器无法正常运行的 HTML 代码（如图片滑块、计算器、交互式对比表等）。
🔒 1. 隔离冲突：让代码不打架
AI 生成的 HTML 代码直接粘贴到 WordPress 时，JS/CSS 与主题插件产生冲突。表现为：滑块卡住不滑动、按钮点不动、样式全乱、页面空白。用 iframe 后，HTML 在独立沙盒运行，所有冲突全部绕过。
🧩 2. 独立运行：不受任何干扰
iframe 里的代码完全自给自足。CSS 变量、JS 全局变量、事件监听器全部封装在 iframe 沙盒内，不会被 WordPress 全局样式或插件脚本覆盖。
🔄 3. 方便替换：改文件不改页面
需要更新内容时，只需在媒体库中替换 HTML 文件（重新上传同名覆盖），WordPress 页面本身不用动。所有引用该 iframe 的页面自动更新，省去反复编辑页面、重新发布的操作。
| 方式A：直接粘贴代码到 WordPress | → | ✅ 正常 → 继续用方式A |
| 出现以下任一问题： 滑块不滑动 / 按钮无反应 / 样式全乱 / 页面空白 |
→ | 改用方式B：上传 HTML + iframe 引用 |
判断口诀：粘贴能用就粘贴，粘贴翻车就上传
方式B 三步走：① 英文命名 HTML → ② 上传媒体库 → ③ 页面嵌入 iframe 代码
- ✓ 修改方便：后台直接编辑代码，无需重新上传文件
- ✓ 即时生效：保存即更新，不需要操作媒体库
- ⚠ 兼容风险：复杂 JS/CSS 可能与主题插件冲突
- ✓ 完全隔离：代码独立运行，不受 WordPress 任何干扰
- ✓ 稳定可靠：滑块/按钮/动画全部正常运行
- ⚠ 更新略慢：改内容需重新上传文件到媒体库
文件用中文命名韩超-三联供水模块调试.html
文件名更长
编码后200+乱码字符
src 里全是%XX
代码完全不可读
发给AI后
对话窗口卡死
重新上传也无效
只能从根上改正
❌ 中文 HTML → iframe 引用
✅ 英文 HTML → iframe 引用
| 问题 | 中文命名后果 | 英文命名效果 |
|---|---|---|
| URL 乱码 | iframe src 被编码为 %E9%9F%A9%E8%B6%85…，不可读、不可手打 | URL 清晰可读，易于调试和分享 |
| AI 卡死 | 代码发给 AI 分析时编码错乱，AI 输出异常或直接卡死 | AI 正常解析，可快速定位问题 |
| iframe 失效 | 乱码 URL 导致 iframe 加载失败，页面直接空白 | 100% 可靠加载，无兼容问题 |
| 无法调试 | 浏览器开发者工具中 URL 不可识别，排查困难 | Network 面板中文件名一目了然 |
| 团队协作 | 同事无法直观理解文件用途，交接困难 | 规范命名语义清晰，一看就懂 |
| 📍 地点 | 小区地址/门店代码（2-4 字母拼音首字母缩写）或 gw（官网 — 公司网站层面的文档） |
| 👤 人物 | 客户：姓氏拼音首字母 + ls（老师），如 zls（张老师）；公司级文档：lmnt 或 lmntgs |
| 🛠 事件 | 业务动作的拼音首字母缩写，以主设备为核心 |
| ➕ 可选 | 末尾追加英文全称关键词（如 -iframe, -slider, -namingrule），方便在媒体库中搜索 |
WordPress 媒体库上传文件后会自动记录上传时间戳，在后台可以按时间排序和筛选。所以文件名中不必再重复写时间，保持简洁即可。如需时间信息，直接查看媒体库的上传日期。
方便在 WordPress 媒体库中快速检索。例如追加
-iframe 后，搜索 “iframe” 即可找到所有用 iframe 方式发布的 HTML 文件；追加 -namingrule 后，搜索 “namingrule” 即可找到所有命名规范相关文档。这是给未来自己留的”搜索后门”。
| 地点全称 | 代码 | 说明 |
|---|---|---|
| 南富森 | nfs | nán fù sēn |
| 北富森 | bfs | běi fù sēn |
| 西门店 | xmd | xī mén diàn |
| 华兴滨江 | hx | huá xīng |
| 官网（公司级） | gw | guān wǎng — 公司网站层面的文档 |
| 类型 | 代号规则 | 示例 |
|---|---|---|
| 客户 | 姓氏拼音首字母 + ls（老师） | zls（张老师）、lls（李老师）、hls（韩老师） |
| 龙脉暖通公司 | lmnt 或 lmntgs | 公司级文档（如命名规范、工作流程等） |
| ❌ 旧/错误命名 | ✅ 新/正确命名 | 说明 |
|---|---|---|
| 南富森门店尊睿全效三联供调试水模块实景图_规范版.jpg | nfs-zls-slgsmktz.jpg | 南富森-张老师-三联供水模块调试 |
| 壁挂安装步骤-底部固定.jpg | nfs-zls-bgazdbgd.jpg | 南富森-张老师-壁挂安装底部固定 |
| 微信图片_20260426145646_250_31.png | nfs-zls-20260426.png | 如需保留日期 |
| 张伟冷凝炉安装调试完成.jpg | nfs-zls-lndztswc.jpg | 南富森-张老师-冷凝炉调试完成 |
| 李芳地暖打压测试.jpg | bfs-lls-dndycs.jpg | 北富森-李老师-地暖打压测试 |
| 韩超舒享一拖五160双风扇.jpg | hx-hls-sxsfs-160ytw.jpg | 华兴-韩老师-舒享双风扇一拖五 |
| 龙脉暖通文件命名规范.html | gw-lmnt-mmgz.html | 官网-龙脉暖通-命名规则 |
| 命名规范含iframe说明.html | gw-lmnt-mmgz-iframe.html | 追加 -iframe 关键词方便搜索 |
| 规则项 | 要求 |
|---|---|
| 🔁 分隔符 | 统一使用中划线 -，禁止下划线 _、空格或其他符号 |
| 📜 字符集 | 仅限小写英文字母 + 数字 + 中划线；禁止中文、空格、特殊符号 |
| 📍 地点代码 | 2-4 字母的拼音首字母缩写；公司级文档用 gw |
| 👤 人物代号 | 客户：姓氏首字母 + ls（固定 3 字符）；公司级用 lmnt |
| 🛠 事件关键词 | 业务动作的拼音首字母缩写，以主设备为核心 |
| 📏 总长度 | 控制在 50 字符以内（含扩展名） |
| 🔍 英文关键词（可选） | 末尾追加英文全称关键词，如 -iframe -slider -namingrule，方便媒体库检索 |
微信图片_xxx.jpg）· 直接上传手机默认名（IMG_20260609.jpg）· 文件名中有空格 · 混用中划线和下划线 · 上传后再改文件名（会导致已发布链接失效）
拍照或
AI 生成文件
按规范重命名地点-人物-事件.扩展名
拖入 WordPress
媒体库
复制 URL
写入页面/代码
关键步骤在第 2 步 — 上传前在电脑上先重命名为规范格式，一劳永逸
适用：简单交互、代码短、无冲突
适用：复杂交互、代码长、方式A冲突
上传前必须在电脑上按规范重命名为英文格式
【地点-人物-事件.扩展名】
末尾可选追加英文关键词方便搜索
媒体库自动记录上传时间
文件名中无需重复
先试方式A（直接粘贴）
出问题 → 换方式B（上传+iframe）
已上传的中文文件继续使用
即日起新文件强制执行
中文命名 = AI卡死 = 不可修复
没有例外