exyone的荒野小站
一个现代化的个人网站，集成了多种实用工具和小组件，采用响应式设计，提供优秀的用户体验。
🌟 项目特色
- 现代化设计：采用毛玻璃效果和渐变背景，视觉效果出色
- 响应式布局：完美适配桌面端和移动端设备
- 组件化架构：模块化设计，便于维护和扩展
- 丰富功能：集成多种实用工具和小组件
- 动态壁纸：每日自动更新必应壁纸背景
🛠️ 功能模块
主要页面
- 首页：集成多种实用小组件的仪表板
- 关于页面：个人简介、技术栈和联系方式
- 友好网站：精选网站导航和分类
- 404页面：自定义错误页面
实用小组件
- 时钟组件：数字时钟和模拟时钟
- 日历组件：显示当前日期和月份
- 待办事项：任务管理工具
- 笔记组件：快速记录想法
- 搜索组件：快速搜索引擎
- 计算器：基础数学计算
- 天气组件：显示天气信息
- 名言组件：每日一句名言
- 倒计时组件：重要日期提醒
- 个人资料：个人信息展示
🎨 设计特点
- 毛玻璃效果：使用backdrop-filter实现现代化视觉效果
- 文字描边：增强文字可读性
- 动画效果：流畅的过渡和交互动画
- 响应式设计：自适应不同屏幕尺寸
- 深色主题：护眼的深色界面设计
📁 项目结构
├── 404.html # 404错误页面
├── README.md # 项目说明文档
├── about.html # 关于页面
├── friendwebsite.html # 友好网站页面
├── index.html # 首页
├── assets/ # 静态资源
│ ├── css/ # 样式文件
│ │ └── style.css # 主样式文件
│ ├── images/ # 图片资源
│ │ └── QRCode/ # 付款二维码
│ ├── js/ # JavaScript文件
│ │ ├── component-loader.js # 组件加载器
│ │ ├── topbar.js # 顶部导航栏脚本
│ │ └── wallpaper.js # 壁纸加载脚本
│ └── videos/ # 视频资源
├── components/ # 组件目录
│ ├── topbar/ # 顶部导航栏组件
│ │ ├── nav-links.html # 导航链接
│ │ └── quick-links.html # 快速链接
│ └── widgets/ # 小组件
│ ├── analog-clock.html # 模拟时钟
│ ├── calculator.html # 计算器
│ ├── calendar.html # 日历
│ ├── clock.html # 数字时钟
│ ├── countdown.html # 倒计时
│ ├── notes.html # 笔记
│ ├── profile.html # 个人资料
│ ├── quotes.html # 名言
│ ├── search.html # 搜索
│ ├── todo.html # 待办事项
│ └── weather.html # 天气
└── public/ # 公共文件
🚀 技术栈
-
前端技术：
- HTML5 语义化标签
- CSS3 现代样式和动画
- JavaScript ES6+ 特性
- 响应式设计 (Flexbox & Grid)
- 毛玻璃效果 (backdrop-filter)
-
API集成：
- 一言API (名言获取)
- 必应壁纸API (每日壁纸)
- 天气API (天气信息)
📱 使用方法
-
克隆项目：
git clone [项目地址] cd [项目目录] -
启动本地服务器：
# 使用Python python -m http.server 8000 # 或使用Node.js npx http-server -p 8000 -
访问网站： 打开浏览器访问
http://localhost:8000
🤝 贡献指南
欢迎提交问题和改进建议！
- Fork 本项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
📄 许可证
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
👨💻 作者
exyone - 全栈开发工程师
🙏 致谢
- 感谢所有开源项目的贡献者
- 感谢提供API服务的平台
- 感谢所有支持者和用户
⭐ 如果这个项目对你有帮助，请给它一个星标！