OSS 指南

快速开始

我为你的网站创建了一个全新的开源工具推荐页面，具有以下特性：

✨ 主要功能

1. 现代化界面 - 采用卡片式设计，响应式布局
2. GitHub 集成 - 自动获取项目 Stars、Forks、Issues 等数据
3. 智能搜索 - 支持按名称和描述搜索工具
4. 分类筛选 - 按工具类别快速筛选
5. 相关文章 - 自动关联你博客中的相关文章
6. 多语言支持 - 完整的中英文双语支持
7. 暗色模式 - 完美适配暗色主题

📱 响应式设计

• 桌面端：3 列网格布局，丰富的悬停效果
• 平板端：2 列布局，优化的触摸体验
• 手机端：单列布局，大按钮适合触摸

🔧 技术特点

• 纯客户端渲染 - 无需服务器端支持
• API 限流 - 智能限制 GitHub API 调用频率
• 错误处理 - 优雅处理网络错误和数据异常
• 加载状态 - 友好的加载提示和空状态

文件说明

核心文件

• layouts/pages/oss.html - 页面模板
• assets/scss/layouts/_oss.scss - 页面样式
• data/zh/oss.yaml - 中文工具数据
• data/en/oss.yaml - 英文工具数据

内容文件

• content/zh/oss/_index.md - 中文页面配置
• content/en/oss/_index.md - 英文页面配置

翻译文件

• i18n/zh.yaml - 中文界面翻译
• i18n/en.yaml - 英文界面翻译

如何使用

1. 访问页面

启动 Hugo 开发服务器后，访问：

• 中文版：http://localhost:1313/zh/oss/
• 英文版：http://localhost:1313/en/oss/

2. 添加新工具

编辑 data/zh/oss.yaml 文件，添加新工具：

- name: 工具名称
  description: 详细描述
  category: 分类名称
  url: https://官方网站
  github: owner/repository

3. 自定义样式

修改 assets/scss/layouts/_oss.scss 来自定义页面外观。

4. 添加新分类

只需在 YAML 文件中使用新的 category 值，系统会自动识别并添加到筛选器中。

开发建议

维护工具列表

1. 定期更新 - 检查工具链接有效性
2. 添加新工具 - 关注开源社区热门项目
3. 分类整理 - 保持分类体系的一致性
4. 描述优化 - 确保描述准确且有吸引力

性能优化

1. 图片优化 - 使用 GitHub 头像缓存
2. API 调用 - 合理控制请求频率
3. 搜索优化 - 使用防抖减少计算

功能扩展建议

1. 收藏功能 - 允许用户收藏喜欢的工具
2. 评分系统 - 添加工具评分和评论
3. 使用统计 - 跟踪工具的访问次数
4. 推荐算法 - 基于用户兴趣推荐工具

故障排除

常见问题

Q: GitHub 数据不显示？ A: 检查网络连接，确认 GitHub API 未达到限制

Q: 搜索功能不工作？ A: 打开浏览器开发者工具检查 JavaScript 错误

Q: 页面样式异常？ A: 清除浏览器缓存，确认 SCSS 编译正常

调试技巧

在浏览器控制台中运行：

// 查看加载的工具数据
console.log(window.toolsData);

// 查看当前筛选状态
console.log(document.getElementById('categoryFilter').value);

反馈与改进

这个工具页面为你的网站添加了专业的开源工具展示功能，帮助访问者发现有用的开源项目，同时也展示了你在技术社区的参与度和专业性。

如果需要进一步的定制或功能扩展，可以基于现有代码进行修改和完善。