你直接把下面这段提示词发给我,基本就能一次生成适合你 WordPress 环境的版本
请帮我创建一个可直接用于 WordPress 文章中的互动 SVG 动画。
我的 WordPress 编辑器把代码分成三个独立区域:
1. HTML
2. CSS
3. JavaScript
请严格按照“三栏分离”的方式输出,并同时打包成 3 个 txt 文件。
【内容要求】
主题:一个“鹈鹕骑自行车”的 2D SVG 动画
风格:精致、柔和、扁平插画风、有设计感
要求所有画面尽量使用 SVG 绘制,不依赖外部图片、字体或第三方 JS 库。
【WordPress 兼容要求,非常重要】
HTML 栏:
- 只能放 HTML 和 SVG
- 不要包含 <!DOCTYPE html>
- 不要包含 <html>、<head>、<body>
- 不要包含 <style>
- 不要包含 <script>
- 整个组件必须包在一个独立容器中,例如:
<div class="pelican-widget">...</div>
- 所有 id 和 class 使用专属前缀,例如 pbc-,避免和 WordPress 主题冲突
- 不要依赖 WordPress 页面本身的 body class
CSS 栏:
- 只输出纯 CSS
- 不要带 <style> 标签
- 所有 CSS 必须限定在组件容器内部,例如:
.pelican-widget ...
- 不要使用 body、html、:root 等全局选择器修改整站样式
- 必须适配桌面和手机
- 不要影响 WordPress 文章中的其他元素
JavaScript 栏:
- 只输出纯 JavaScript
- 不要带 <script> 标签
- JavaScript 要适合 WordPress 前台运行
- 页面 HTML 可能比 JS 晚出现,所以不能只依赖 DOMContentLoaded
- 请使用简单可靠的初始化方式:
查找 .pelican-widget,如果还不存在,则 setTimeout 后继续尝试
- 初始化成功后给组件设置:
data-pbc-ready="true"
- 避免复杂的 MutationObserver、ResizeObserver、多实例重命名、动态 Map 等机制,除非确实必要
- 某个 SVG 小节点不存在时,不要导致整个动画停止
- 查询元素后先判断是否存在,再操作
- 尽量控制 JS 代码较短
- JavaScript 尽量使用 ASCII 字符
- JS 中的中文文本请优先写成 Unicode 转义,例如:
"\u6b63\u5728\u60a0\u95f2\u515c\u98ce"
以避免 WordPress 保存时出现 Invalid or unexpected token
- 不使用第三方库
- 初始化成功后执行:
console.log("PELICAN_OK")
- 不要使用 unload 事件
【动画要求】
需要实现:
- 自行车两个轮子持续旋转
- 踏板旋转
- 鹈鹕双腿跟随踏板踩动
- 鹈鹕身体有轻微上下起伏
- 地面向后移动
- 云朵缓慢移动
- 海浪轻微移动
- 围巾随风摆动
- 偶尔眨眼
交互控件:
- 暂停 / 继续
- 骑行速度调节 0.5× ~ 2×
- 晴天 / 黄昏切换
- 手机端也可以点击操作
【启动提示】
HTML 中可以加入一条提示,例如:
“交互尚未启动:请确认 CSS 和 JavaScript 已分别粘贴并保存。”
但是:
- JS 成功初始化后必须设置 data-pbc-ready="true"
- CSS 必须在 data-pbc-ready="true" 后自动隐藏这条提示
- 不允许出现“动画已经运行,但错误提示仍然显示”的情况
【健壮性】
请特别避免下面这些问题:
- WordPress 后台预览正常,发布到前台后不运行
- Uncaught SyntaxError: Invalid or unexpected token
- 因为一个 SVG id 没找到导致整个 JS 停止
- 动画正常但“交互尚未启动”提示仍显示
- JavaScript 和其他 WordPress 插件发生变量名冲突
- CSS 污染 WordPress 主题
- 页面里有多个组件时产生重复初始化
JavaScript请放在 IIFE 中,例如:
(function () {
...
})();
并在组件初始化后设置一个标记,防止重复初始化。
【输出格式】
请最终给我:
01-HTML.txt
02-CSS.txt
03-JavaScript.txt
另外再生成:
preview.html
preview.html 用于本地浏览器测试,需要把上述 HTML、CSS、JavaScript 合并进去。
最后打包成一个 ZIP 文件让我下载。
生成完成前请自行检查:
- HTML/SVG 结构是否完整
- JavaScript 是否存在语法错误
- 所有查询到的 SVG 节点是否做了空值保护
- data-pbc-ready 是否会正确设置
- 启动提示是否会正确隐藏
- 暂停、速度、黄昏三个交互是否能工作
原创文章,作者:开心电脑网,如若转载,请注明出处。