EchoCraft 产品官网主题
专为独立开发者和小型团队打造的 Halo 2.0 产品官网主题
✨ 为什么选择 EchoCraft?
🎯 专为产品展示而生
EchoCraft 不是一个通用博客主题,而是专门为独立开发者、小型团队和SaaS 产品打造的产品官网解决方案。
无论您是发布:
- 🖥️ Mac/Windows 桌面应用
- 🧩 Chrome/Edge 浏览器插件
- 🔌 Halo 插件 - 完美展示您开发的 Halo 生态插件
- 🎨 Halo 主题 - 为您的 Halo 主题作品打造专属展示页
- 📦 WordPress 主题/插件 - 同样适用于 WP 生态产品展示
- ☁️ SaaS 服务 - 订阅制产品的理想展示方案
- 📱 移动端 App - iOS/Android 应用推广页面
EchoCraft 都能帮您快速搭建专业的产品展示站点,让您的作品脱颖而出!
🤖 AI 一键配置(重磅特性)
告别繁琐的手动配置,让 AI 帮您完成主题设置!
EchoCraft 深度集成 AI 智能配置功能,只需简单描述您的产品和需求,AI 将自动为您:
- 智能生成首页内容 - 根据您的产品描述,自动生成产品轮播、功能介绍、FAQ 等内容
- 自动匹配配色方案 - 分析您的品牌色彩,推荐最适合的主题配色
- 一键填充示例数据 - 快速生成专业的产品展示内容,无需从零开始
- 智能优化 SEO 设置 - 自动生成关键词、描述等 SEO 元信息
使用方式:
- 进入 Halo 后台 → 主题设置 → AI 配置助手
- 输入您的产品名称、简介、核心功能等基本信息
- 点击「AI 一键生成」,等待几秒钟
- 预览生成的配置,确认后一键应用
💡 提示:AI 配置功能需要配合 EchoCraft 驱动插件使用,插件提供 AI 配置所需的 API 接口。
⚡ 极致轻量,性能卓越
- 打包体积仅 ~520KB,首屏加载飞快
- 按需加载,文章页面独立加载 TOC 插件
- 零冗余代码,每一行都经过精心优化
- Lighthouse 性能评分 90+
🔍 SEO & GEO 友好
- 语义化 HTML 结构,搜索引擎友好
- 自动生成 Open Graph 和 Twitter Card 元标签
- 结构化数据支持,提升搜索结果展示
- 响应式图片,自动适配不同设备
- 完善的 meta 信息配置
🏠 首页功能模块
首页采用模块化设计,您可以在后台自由调整各模块的显示顺序。
🎠 产品轮播展示(Hero Section)
首屏产品轮播是访客的第一印象:
- 纯原生实现 - 无任何第三方轮播库依赖,基于 Alpine.js 原生实现
- 多产品轮播 - 展示多个产品,自动/手动切换,流畅动画
- 炫酷光晕效果 - 9 种光晕颜色可选(绿色、青色、蓝色、紫色等)
- 徽章标签 - NEW、HOT、SALE 等标签吸引眼球
- 双按钮 CTA - 主按钮(下载/购买)+ 次按钮(了解更多)
- 响应式布局 - 大图展示,移动端完美适配
- 零依赖轻量 - 不引入 Swiper、Slick 等重型库,极致精简
📋 产品详情介绍(Product Details)
深度展示产品功能,让用户全面了解您的产品:
- 标签式导航 - 清理、卸载、加速等功能分类展示
- 功能截图 - 高清产品截图,16:9 自动裁剪
- 特性列表 - 每个功能最多 4 个亮点展示
- 行动按钮 - 每个功能模块独立 CTA
- 交替背景 - 多个区块自动交替背景色,视觉层次分明
🏷️ 促销组合包(Promotion Bundles)
提升转化率的利器:
- 产品组合 - 多产品打包销售,提高客单价
- 价格对比 - 原价/现价对比,突出优惠力度
- 折扣标签 - 70% OFF、限时 5 折等醒目标识
- 多货币支持 - CNY、USD、EUR、GBP、JPY 等
- 授权说明 - 清晰展示授权类型和数量
❓ 常见问题(FAQ Accordion)
减少用户疑虑,提升信任度:
- 手风琴交互 - 点击展开/收起,节省空间
- 两种风格 - 箭头风格 / 加号风格可选
- 无限问答 - 支持添加任意数量的 Q&A
- 富文本答案 - 答案支持换行和格式化
📰 热门文章(Popular Posts)
内容营销,提升 SEO:
- 自动获取 - 自动展示最新/热门文章
- 数量可控 - 3-12 篇文章自由设置
- 卡片布局 - 封面图 + 标题 + 摘要
- 查看全部 - 一键跳转归档页面
📦 产品页面
产品详情页(Product Page)
为每个产品打造专属展示页面:
- Hero 区域 - 大图展示 + 产品描述 + CTA 按钮
- 产品分类 - 软件工具、Chrome 插件、SaaS 服务等
- 图片画廊 - 多图展示,支持标题说明
- 特性卡片 - 功能亮点并排展示
- 定价方案 - 单个价格或多方案对比
- 支持原价/优惠价对比
- 优惠截止时间倒计时
- 高亮推荐方案
- 多货币类型
- 信任指标 - 系统兼容性、版本号等
- 免费/付费 - 自动切换下载/购买按钮
产品列表页(Product List)
完美适配 Halo 产品管理插件:
- API 对接 - 自动获取产品管理插件数据
- 分页加载 - 支持自定义每页数量(3-24)
- 特性卡片 - 页面顶部展示产品特性
- 响应式网格 - 自动适配不同屏幕尺寸
- 产品卡片 - 封面图 + 名称 + 描述 + 价格
📝 文章系统
标准文章页
- 文章目录(TOC) - 自动生成,平滑滚动定位
- 移动端抽屉 - 目录在移动端以抽屉形式展示
- 代码高亮 - 支持多种编程语言
- 版权声明 - 可配置 CC 协议
- 评论系统 - 集成 Halo 评论组件
GitHub 风格文章
- 使用
github-markdown-css渲染 - 适合技术文档和教程类内容
- 代码块样式与 GitHub 一致
🎨 12 种精美配色
一键切换,支持跟随系统自动切换明暗模式。
亮色主题
| Light | Rouhe | Cupcake | Bumblebee | CMYK | Mint |
|---|---|---|---|---|---|
| 浅色 | 柔和 | 纸杯蛋糕 | 大黄蜂 | 印刷四色 | 薄荷 |
暗色主题
| Dark | Business | Halloween | Forest | Sunset | Coffee |
|---|---|---|---|---|---|
| 深色 | 商务 | 万圣节 | 森林 | 日落 | 咖啡 |
🛠️ 技术栈
| 技术 | 版本 | 说明 |
|---|---|---|
| Vite | 7.x | 现代前端构建工具 |
| Tailwind CSS | 4.x | 原子化 CSS 框架 |
| daisyUI | 5.4.7 | Tailwind CSS 组件库 |
| Alpine.js | 3.x | 轻量级 JavaScript 框架 |
| Iconify | - | 统一图标解决方案 |
| tocbot | 4.x | 文章目录生成 |
📦 安装
- 从官网下载最新版本的主题包(
.zip文件) - 进入 Halo 后台 → 主题管理
- 点击「安装主题」→「本地上传」
- 选择下载的主题包并上传
🔧 生产环境调试
主题内置了开发者工具保护功能,在生产环境下默认禁止打开浏览器控制台。如果您需要在线上环境调试:
配置调试密钥
- 进入 Halo 后台 → 主题设置 → 开发设置
- 设置「调试密钥」,例如:
my-secret-key - 保存设置
使用调试模式
在浏览器地址栏添加 ?debug=你的密钥 参数:
https://your-site.com?debug=my-secret-key
成功启用后,控制台会显示「🔧 调试模式已启用」。调试状态保存在当前会话中。
⚠️ 请妥善保管调试密钥,避免泄露。
🗺️ 路线图
我们正在积极开发以下功能:
| 状态 | 功能 | 说明 |
|---|---|---|
| 🔲 | Halo 商城适配 | 支持 Halo 商业版商城 |
| 🔲 | 用户评价模块 | 展示真实用户评价和评分 |
| 🔲 | 数据统计展示 | 用户数、下载量、好评率等 |
| 🔲 | 关于我们页面 | 团队介绍、发展历程模板 |
| 🔲 | 更多页面模板 | 定价页、对比页、更新日志页 |
| 🔲 | 多语言支持 | i18n 国际化 |
📋 系统要求
- Halo >= 2.22.3
👨💻 作者
webjing


