? 意派 Epub360 零代码 H5 制作教程：2025 最新模板推荐与互动设计指南
? 2025 年意派 Epub360 核心功能升级亮点
2025 年意派 Epub360 迎来了多项关键功能更新，为零代码 H5 制作带来了全新体验。平台针对用户痛点进行了深度优化，比如抽奖转盘的中英文奖项自适应显示，中文 4 字 / 行、英文 8 字符 / 行的智能排版，让活动设计更加美观专业。微信拍照界面新增 “拖动或双指缩放旋转图片” 提示，大大降低了用户操作门槛，提升互动体验。
SVG 代码输入框支持内容自动撑高，保留下拉操作功能，让代码编辑更便捷高效。音视频组件新增暂停触发器，可在暂停播放时触发事件，拓展了交互场景，比如视频暂停时弹出优惠券弹窗，提升用户参与度。时间轴组件的优化尤为突出，支持 GIF 图片替换、滑动速度控制和锚点固定，配合关键帧可实现多画面变速效果，让动态设计更加灵活。
素材库支持批量管理，回收站可批量删除或复原素材，大大提升了资源管理效率。加载页背景图新增四种适配模式，包括缩放以填充、缩放以适合、撑满和平铺，确保 H5 在不同设备上都能完美显示。红包插件可配置每分钟发放数量，满足不同活动规模的需求，无论是小型精准活动还是大型流量把控都能轻松应对。
? 零代码入门：从注册到基础操作
注册意派 Epub360 账号非常简单，访问官网点击 “免费注册”，填写邮箱、密码、昵称即可完成。新用户还能免费领取 3 款优质 H5 模板，涵盖趣味测试、抽奖活动等类型，直接复用快速上手。
登录后进入工作台，界面简洁直观。左侧是组件库，包括基础元素、互动组件、表单等；右侧是属性设置面板，可调整元素样式、动画效果和交互逻辑；中间是画布区域，支持拖拽操作，实时预览设计效果。
上传素材时，点击 “素材库” 上传图片、视频、音频等资源，支持批量操作。例如制作企业宣传 H5，可上传公司 logo、产品图片、宣传视频等，方便后续调用。
基础动画设置可通过选中元素，在属性面板中添加入场、出场、强调动画，支持路径动画、序列帧动画等高级效果。比如让产品图片从屏幕下方滑动进入，配合淡入效果，增强视觉吸引力。
? 2025 年最新模板推荐与行业应用
? 企业宣传类模板
- 《品牌虚拟展馆》：采用横长图和手绘插画，模拟线下展厅场景，用户可浏览店铺分布、休息区、试衣间等，点击商品查看详情并加入购物车，适用于电商品牌推广。
- 《企业年度报告》：整合数据图表、动态时间轴和视频，清晰展示企业发展历程、业绩成果和未来规划，适合上市公司和大型企业。
? 营销活动类模板
- 《惊喜抽盲盒》：用户点击 “GO” 按钮抽取盲盒，中奖后可保存带二维码的分享海报，实现二次传播引流，常用于节日促销和用户拉新。
- 《优惠计算器》：帮助用户快速计算满减、折扣等优惠，提升下单转化率，适用于双 11、618 等大型促销活动。
? 教育互动类模板
- 《党史知识竞赛》：包含随机测试题、表单登记和成绩排行榜，支持每天答题打卡，适用于学校、政府机构的红色文化传播。
- 《招生宣传 H5》：结合动画视频和互动测试，展示学校特色课程、师资力量和校园环境，吸引潜在学生和家长。
? 游戏娱乐类模板
- 《端午节接粽子》：使用碰撞检测组件，用户通过滑动屏幕接住掉落的粽子，得分越高奖励越丰厚，适合节日营销和品牌互动。
- 《互动视频 H5》：支持分支剧情设计，用户点击不同选项触发不同结局，增强沉浸感，适用于影视宣传和品牌故事讲述。
? 互动设计进阶技巧与案例解析
? 盲盒交互设计
以《宝龙高质量发展秘诀》为例，用户滑动长页面寻找 6 处盲盒宝藏，点开可查看企业发展策略，找到两个以上即可参与红包抽奖。设计要点包括：
- 插画场景设计要突出主题，色彩鲜艳吸引眼球。
- 盲盒位置分布需合理，避免过于密集或分散。
- 抽奖逻辑通过参数变量实现，中奖概率可灵活调整。
? 时间轴动画应用
时间轴组件可实现多元素协同动画，例如制作产品发布时间线：
- 添加时间轴组件，设置滑动速度和锚点固定。
- 在时间轴上添加关键帧，设置元素的位置、大小、透明度等属性。
- 配合触发器控制时间轴播放，实现点击按钮切换不同阶段的内容。
? 碰撞检测与小游戏制作
以《端午节接粽子》为例，步骤如下：
- 添加粽子元素和接住区域，设置飞出动画。
- 插入碰撞检测组件，绑定粽子和接住区域为碰撞元素。
- 碰撞时触发得分增加和动画播放，实现游戏核心机制。
? 微信生态深度整合
意派 Epub360 支持调用微信高级接口，如拍照、录音、身份认证等。例如制作《诗歌盲盒》，用户拍照上传作品后，可生成专属海报并分享到朋友圈，实现社交传播。
? SEO 优化：让 H5 内容更易被搜索
? 语义化标签使用
在 H5 页面中合理使用
? 标题与描述优化
为每个页面设置独立的
</code> 和 <code><meta name="description"></code>，标题控制在 60 字以内，关键词靠前；描述简洁说明内容，控制在 160 字左右。例如电商 H5 首页标题可设为 “XX 新品发布｜创新科技，极致体验”，描述突出产品亮点和促销信息。</div><br>
<h3>?️ 图片与文字优化</h3><br>
<div>所有图片添加 <code>alt</code> 属性，准确描述内容，避免堆砌关键词。例如产品图的 <code>alt</code> 可写 “XX 品牌智能手表正面展示，圆形表盘设计”。文字内容避免全部用图片替代，尤其是核心信息，确保搜索引擎可抓取。</div><br>
<h3>⚡ 加载速度优化</h3><br>
<div>压缩图片使用 WebP 格式，合理使用懒加载延迟加载非首屏资源，减少 JS 请求。首屏加载时间控制在 2 秒以内，可通过 Lighthouse 工具检测优化效果。</div><br>
<h2>? 常见问题与解决方案</h2><br>
<h3>❓ 如何解决编辑器卡顿问题？</h3><br>
<div>如果添加新表单组件时编辑器卡顿，可尝试关闭不必要的后台程序，或升级到更高版本浏览器。意派 Epub360 已针对此问题进行优化，添加第 7 个左右组件时卡顿现象已大幅减少。</div><br>
<h3>❓ 如何实现复杂的交互逻辑？</h3><br>
<div>通过参数变量和触发器组合，可实现逻辑判断和流程控制。例如在答题 H5 中，答对题目时参数变量加 1，达到一定分数触发抽奖功能。</div><br>
<h3>❓ 如何在手机端完美适配？</h3><br>
<div>使用编辑器新增的画布功能，宽度保持不变，上下各增加 36px，适应大屏手机。加载页背景图选择 “缩放以填充” 或 “缩放以适合” 模式，确保内容不被遮挡。</div><br>
<h3>❓ 如何进行数据统计与分析？</h3><br>
<div>意派 Epub360 支持精细化事件统计，可获取按钮点击次数、页面停留时间等数据。企业版还可绑定自有域名，实现用户行为深度分析，助力营销决策。</div><br>
<h2>? 学习资源与社区支持</h2><br>
<div>意派 Epub360 官网提供详细的教程文档和视频课程，涵盖从入门到高级的所有操作技巧。例如《时间轴动画组件公测教程》详细讲解了如何使用时间轴实现复杂动画效果。</div><br>
<div>官方社区聚集了众多设计师和开发者，用户可在社区中分享作品、交流经验，还能获取最新的模板资源和行业动态。此外，平台定期举办线上直播和线下培训，帮助用户快速提升技能。</div><br>
<div>新用户注册后可免费体验基础功能，专业版和企业版提供更多高级组件和增值服务，如绑定独立域名、小程序嵌入 H5 等，满足不同规模企业的需求。</div><br>
<div>通过以上教程，即使没有代码基础，也能快速掌握意派 Epub360 的核心功能，制作出专业级的 H5 作品。无论是企业宣传、营销活动还是教育互动，意派 Epub360 都能为你提供一站式解决方案，助力品牌传播和用户增长。</div><br>
<div>该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具。</div><br>
</div> </div>
<!-- 标签和分享 -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center pt-8 mt-8 border-t border-gray-200 dark:border-gray-700">
<div class="mb-4 md:mb-0">
<span class="text-gray-700 dark:text-gray-300 mr-2">标签：</span>
<span class="news-tag bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full text-sm">AI资讯</span>
</div>
<div class="flex space-x-3">
<span class="text-gray-700 dark:text-gray-300">分享：</span>
<a href="javascript:void(0)" onclick="shareToWeChat()" class="social-share w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center text-blue-600 dark:text-blue-400">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('意派 Epub360 零代码 H5 制作教程：2025 最新模板推荐与互动设计指南', window.location.href)" class="social-share w-10 h-10 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-400">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="javascript:void(0)" onclick="shareToTwitter('意派 Epub360 零代码 H5 制作教程：2025 最新模板推荐与互动设计指南', window.location.href)" class="social-share w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="javascript:void(0)" onclick="copyLink()" class="social-share w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center text-green-600 dark:text-green-400">
<i class="fa-solid fa-link"></i>
</a>
</div>
</div>
</div>
<!-- 上一篇/下一篇 -->
<div class="flex flex-col md:flex-row justify-between gap-6 mb-8">
<a href="/ai/MsKz6cvRtcSH17FNBvzhi9YjtdzQwWeOqTQ0dJbUqyA.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5">
<div class="flex items-center">
<i class="fa-solid fa-arrow-left text-gray-500 dark:text-gray-400 mr-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-1">上一篇</p>
<h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">百度网站收录提交入口 及各平台提交入口</h3>
</div>
</div>
</a>
<a href="/ai/1KzAw96bFd81N8MpEiLvuyxMlGCicYpqJQNBAxG8fXi.html" class="card group flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-5">
<div class="flex items-center text-right flex-row-reverse">
<i class="fa-solid fa-arrow-right text-gray-500 dark:text-gray-400 ml-3 group-hover:text-blue-600 dark:group-hover:text-blue-400"></i>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-1">下一篇</p>
<h3 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 line-clamp-2">AI 生成 PPT 模板免费平台 2025 最新：无需设计基础在线制作商务汇报幻灯片怎么选？</h3>
</div>
</div>
</a>
</div>
<!-- 评论区 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white">用户评论 (0)</h3>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center">
<i class="fa-solid fa-pen mr-2"></i> 发表评论
</button>
</div>
<div class="space-y-6">
<!-- 暂无评论 -->
<div class="text-center py-8">
<i class="fa-regular fa-comments text-5xl text-gray-300 dark:text-gray-600 mb-4"></i>
<p class="text-gray-500 dark:text-gray-400">暂无评论，快来发表第一条评论吧！</p>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<div class="w-full lg:w-1/4">
<!-- 网站信息 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mr-4">
<i class="fa-solid fa-robot text-white text-xl"></i>
</div>
<div>
<h3 class="font-bold text-gray-800 dark:text-white">AI导航</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">AI资源与工具导航</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-sm">
汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。关注前沿AI技术发展与实际应用案例。
</p>
<div class="flex space-x-3 mt-4">
<a href="javascript:void(0)" onclick="shareToTwitter('意派 Epub360 零代码 H5 制作教程：2025 最新模板推荐与互动设计指南', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('意派 Epub360 零代码 H5 制作教程：2025 最新模板推荐与互动设计指南', window.location.href)" class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-400">
<i class="fa-brands fa-weibo"></i>
</a>
</div>
</div>
<!-- 热门资讯排行榜 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6 mb-8">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">热门资讯榜</h3>
<div class="space-y-4">
<!-- 排行项目 1 -->
<a href="/ai/ivkNGQMsss2KrjewJHyz06bOEmQiTJ8jGTi83CiLiXu.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
1 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
学术诚信提升方案：茅茅虫区块链技 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 977次阅读
</p>
</div>
</a>
<!-- 排行项目 2 -->
<a href="/ai/DPFT5tV6Tcl8ih5j24evYm2rU6o6gVAZR7y0dGAdHAs.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
2 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
茅茅虫论文助手使用攻略：AI 一 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 398次阅读
</p>
</div>
</a>
<!-- 排行项目 3 -->
<a href="/ai/pFtwTzGaKneKrwvigviIN6FhIUegOVaekKxUsOOv0Pm.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-700 to-amber-800 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
3 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
党政机关如何选 AI 公文工具？ </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 441次阅读
</p>
</div>
</a>
<!-- 排行项目 4 -->
<a href="/ai/8WClZl97uUzV10ygj6SHGMe3129ok8lLnhV4AXxRi4g.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
4 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
茅茅虫助手全流程解析：从开题到答 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 451次阅读
</p>
</div>
</a>
<!-- 排行项目 5 -->
<a href="/ai/RfGcglzbDbX05q0niVf5UI6DNqMOr6tMf2ujJWUethS.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
5 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
如何用茅茅虫生成摘要提纲？分段式 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 541次阅读
</p>
</div>
</a>
<!-- 排行项目 6 -->
<a href="/ai/FMNW30wniasAozli5uR6qy9TjaQulx5ohz4W9BKfnVC.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
6 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
艺术家如何用 Ai Concep </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 900次阅读
</p>
</div>
</a>
<!-- 排行项目 7 -->
<a href="/ai/TEx5eaOPAaUbo5naVbK9zkzZIJLWH3OKz9BmP0UKw08.html" class="flex items-center group">
<div class="w-8 h-8 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-white font-bold mr-3 group-hover:scale-110 transition">
7 </div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
Ai Concept Gener </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm flex items-center mt-1">
<i class="fa-solid fa-eye mr-1"></i> 583次阅读
</p>
</div>
</a>
<!-- 查看全部按钮 -->
<!-- <div class="pt-4">
<a href="news.php" class="text-blue-600 dark:text-blue-400 hover:underline text-sm flex items-center">
查看全部热门资讯 <i class="fa-solid fa-arrow-right ml-2 text-xs"></i>
</a>
</div> -->
</div>
</div>
<!-- 推荐资讯 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-card dark:shadow-card-dark p-6">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">推荐阅读</h3>
<div class="space-y-5">
<!-- 推荐项目 -->
<a href="/ai/wIBU497pwUqXXlXcsNL5htfJkCb5z7Fh1o99PrPFrSg.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/121ef2c9c1e8e86c5fa9f9dba633f421.jpg"
alt="商务汇报 PPT 怎么制作？Pi - 智能演示文档多终端适配技巧分享"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
商务汇报 PPT 怎么制作？P </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/xX2I95Bn9DDWWWNPPr95ZS6Nq5uKn1FnbkMa8LqWRiU.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/06/63c03889c92da4e957491c256757739c.jpg"
alt="天翼云国家队云服务商实力：息壤平台支撑数字化转型攻略"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
天翼云国家队云服务商实力：息壤 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/5h7aiViintc9BGbICJM1bpvEe9mzUSMkU7BGmiF3eGY.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/07/fc4f2d2af6e3175be01db461a0a0de0a.jpg"
alt="欧洲刑警 188 伙伴实时更新！勒索软件解密工具 2025 新版免费获取"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
欧洲刑警 188 伙伴实时更新 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/Q6aKoOn1DeAHkZ7sJjACX7M3W0Rb39TrvWaFCmxGWLe.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/06/93153347289ad59bd3b57e9bcbd5d0c8.jpg"
alt="中国国家地理网如何获取自然生态解析？旅游攻略与文化遗产探索指南"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
中国国家地理网如何获取自然生态 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
<!-- 推荐项目 -->
<a href="/ai/I34ofbpBNNfasWKqDLXORZo3JoBS3IREKUeZsP44hV6.html" class="group flex items-start">
<div class="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 mr-4">
<img src="https://cdn.yyp.net/wp-content/uploads/2025/06/56617e2816ce55604ee632bdbccc8c5e.jpg"
alt="Earthworm 学习平台功能全解：自定义资料 + 模拟考试系统升级"
class="w-full h-full object-cover group-hover:scale-105 transition">
</div>
<div>
<h4 class="font-semibold text-gray-800 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition line-clamp-2">
Earthworm 学习平台功 </h4>
<p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
<i class="fa-solid fa-calendar-days mr-1"></i> 2025-07-18 </p>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 mt-16 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
<i class="fa-solid fa-robot text-white text-xl"></i>
</div>
<span class="text-xl font-bold text-gray-800 dark:text-white ml-2">AI导航</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm">
汇聚全球最优质的人工智能工具与资源，助力您的创新之旅。
</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">快速链接</h3>
<ul class="space-y-2">
<li><a href="/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">首页</a></li>
<li><a href="/hotsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">热门工具</a></li>
<li><a href="/newsites/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">最新资源</a></li>
<li><a href="/ai/" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">Ai资讯</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">热门分类</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">对话AI</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">图像生成</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">编程开发</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition">视频处理</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">订阅更新</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
获取最新AI工具和资源推荐
</p>
<div class="flex">
<input
type="email"
placeholder="您的邮箱地址"
class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition">
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 dark:text-gray-500 text-sm">
© 2023 AI导航. 保留所有权利。
</p>
<p class="text-gray-500 dark:text-gray-500 text-sm">
<a href="http://beian.miit.gov.cn/" rel="nofollow">ICP备案：豫B2-20110008-14</a>
</p>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="javascript:void(0)" onclick="shareToWeChat()" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio">
<i class="fa-brands fa-weixin"></i>
</a>
<a href="javascript:void(0)" onclick="shareToWeibo('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transitio">
<i class="fa-brands fa-weibo"></i>
</a>
<a href="javascript:void(0)" onclick="shareToTwitter('AI导航', window.location.href)" class="text-gray-500 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 transition">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</div>
</div>
</footer>
<script src="/staticai/qrcode.min.js"></script>
<script>
// 分享功能
function shareToWeChat() {
// 获取当前页面URL
const url = window.location.href;
// 创建二维码容器
const qrModal = document.createElement('div');
qrModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
const qrContainer = document.createElement('div');
qrContainer.className = 'bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg max-w-sm w-full relative';
// 创建标题
const title = document.createElement('h3');
title.className = 'text-xl font-bold text-gray-800 dark:text-white mb-4 text-center';
title.textContent = '微信扫码分享';
// 创建关闭按钮
const closeBtn = document.createElement('button');
closeBtn.className = 'absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200';
closeBtn.innerHTML = '<i class="fa-solid fa-times"></i>';
closeBtn.onclick = () => document.body.removeChild(qrModal);
// 创建QR码容器
const qrBox = document.createElement('div');
qrBox.className = 'flex justify-center items-center mb-4';
// 提示文字
const hint = document.createElement('p');
hint.className = 'text-center text-gray-600 dark:text-gray-400 text-sm';
hint.textContent = '请使用微信"扫一扫"扫描上方二维码';
// 组装DOM
qrContainer.appendChild(title);
qrContainer.appendChild(qrBox);
qrContainer.appendChild(hint);
qrContainer.appendChild(closeBtn);
qrModal.appendChild(qrContainer);
document.body.appendChild(qrModal);
// 检查QRCode库是否已加载
if (typeof QRCode === 'function') {
// 使用QRCode.js生成二维码
try {
new QRCode(qrBox, {
text: url,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
} catch (e) {
// 如果生成二维码失败，回退到使用图片形式
qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`;
}
} else {
// 如果QRCode库未加载，使用外部API生成二维码图片
qrBox.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}" width="200" height="200" alt="二维码">`;
}
// 点击模态框背景关闭
qrModal.addEventListener('click', function(e) {
if (e.target === qrModal) {
document.body.removeChild(qrModal);
}
});
}
function shareToWeibo(title, url) {
const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
window.open(weiboUrl, '_blank', 'width=700,height=500');
}
function shareToTwitter(title, url) {
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`;
window.open(twitterUrl, '_blank', 'width=700,height=500');
}
// 深色模式切换
const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
// 初始化主题
if (localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && prefersDarkScheme.matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
themeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
});
// 移动端菜单切换
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileNav = document.getElementById('mobile-nav');
mobileMenuButton.addEventListener('click', () => {
mobileNav.classList.toggle('open');
});
// 处理系统主题变化
prefersDarkScheme.addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
});
</script>
</body>
</html> <script>
function copyLink() {
const url = window.location.href;
// 使用现代API复制到剪贴板
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url)
.then(() => {
showNotification('链接已复制到剪贴板');
})
.catch(err => {
console.error('无法复制链接: ', err);
fallbackCopyLink(url);
});
} else {
fallbackCopyLink(url);
}
}
function fallbackCopyLink(text) {
// 创建临时输入框
const input = document.createElement('input');
input.style.position = 'fixed';
input.style.opacity = 0;
input.value = text;
document.body.appendChild(input);
input.select();
// 尝试复制
try {
const successful = document.execCommand('copy');
if (successful) {
showNotification('链接已复制到剪贴板');
} else {
showNotification('复制失败，请手动复制链接', 'error');
}
} catch (err) {
console.error('无法复制链接: ', err);
showNotification('复制失败，请手动复制链接', 'error');
}
// 移除临时元素
document.body.removeChild(input);
}
function showNotification(message, type = 'success') {
// 创建通知元素
const notification = document.createElement('div');
notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : 'bg-red-500'} transition-all duration-300 transform translate-y-full opacity-0`;
notification.textContent = message;
document.body.appendChild(notification);
// 显示通知
setTimeout(() => {
notification.style.transform = 'translateY(0)';
notification.style.opacity = '1';
}, 10);
// 3秒后隐藏通知
setTimeout(() => {
notification.style.transform = 'translateY(full)';
notification.style.opacity = '0';
// 动画结束后移除元素
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
</script>
</body>
</html>