FeHelper/website/README.md

FeHelper 官网

这是 FeHelper Chrome/Edge 浏览器扩展的官方网站。

项目特点

• 🎨 现代化设计: 采用渐变色彩和流畅动画，展现"重磅发布"的视觉效果
• 📱 完全响应式: 适配各种设备屏幕，提供一致的用户体验
• ⚡ 性能优化: 使用系统字体，无外部字体依赖，加载速度极快
• 🎯 功能直观: 通过HTML+CSS可视化展示各工具功能，无需截图
• 🔗 实时数据: 自动获取GitHub的stars和forks数据
• 🌏 国内友好: 所有资源均可在国内环境正常访问

技术实现

字体策略

• 系统字体栈: 使用高质量的系统字体，包含中英文完整支持
• 字体回退: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif
• 无外部依赖: 完全避免Google Fonts等外部字体服务，确保国内访问稳定

可视化演示

• JSON工具: 代码高亮显示
• 差异对比: 颜色标识增删改
• 代码压缩: 动态显示压缩率
• 二维码: CSS绘制二维码图案
• API调试: 模拟请求响应状态

交互效果

• 标签切换: 工具分类展示
• 滚动动画: Intersection Observer API
• 悬停效果: 3D变换和阴影
• 视差滚动: 背景图案动画
• 计数动画: GitHub数据动效

文件结构

website/
├── index.html              # 主页面 (498行)
├── css/
│   └── style.css          # 样式文件 (1267行)
├── js/
│   └── script.js          # 交互脚本 (394行)
├── img/                    # 图标资源
│   ├── favicon.ico         # 网站图标
│   ├── fe-16.png          # 16x16 FeHelper图标
│   ├── fe-48.png          # 48x48 FeHelper图标
│   └── fe-128.png         # 128x128 FeHelper图标
└── README.md              # 项目说明

本地开发

1. 克隆项目到本地
2. 进入website目录

3. 启动本地服务器：

   python3 -m http.server 8000
   

4. 打开浏览器访问 http://localhost:8000

浏览器支持

• Chrome 60+
• Edge 79+
• Firefox 60+
• Safari 12+

部署

可以部署到任何静态网站托管服务：

• GitHub Pages
• Netlify
• Vercel
• 腾讯云静态网站托管
• 阿里云OSS静态网站

更新记录

v2.2 (2024-12-19)

• 📊 更新真实数据：GitHub 5.3K stars, 1.3K forks, Chrome Store 200K+ 用户
• 🦊 新增Firefox浏览器支持和下载选项
• 📖 添加"关于FeHelper"时间线，展示13年发展历程
• 🔗 更新所有浏览器商店链接和评分数据
• ✨ 优化GitHub数据获取逻辑，提供真实默认值

v2.1 (2024-12-19)

• 🎨 添加FeHelper官方图标到网站
• 🔖 更新favicon和多尺寸图标
• ✨ 替换导航栏、页脚、徽章等位置的图标
• 🚀 增强品牌视觉识别度

v2.0 (2024-12-19)

• ✅ 移除Google Fonts依赖，改用系统字体
• ✅ 优化国内访问体验
• ✅ 提升页面加载速度
• ✅ 增强字体显示兼容性

v1.0 (2024-12-19)

• 🎉 初始版本发布
• 🎨 现代化渐变设计
• 📱 响应式布局适配
• 🔧 功能工具可视化展示
• 📊 GitHub数据集成

许可证

MIT License - 详见 LICENSE 文件