141 lines
4.5 KiB
Markdown
141 lines
4.5 KiB
Markdown
# 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 (天气信息)
|
||
|
||
## 📱 使用方法
|
||
|
||
1. **克隆项目**：
|
||
```bash
|
||
git clone [项目地址]
|
||
cd [项目目录]
|
||
```
|
||
|
||
2. **启动本地服务器**：
|
||
```bash
|
||
# 使用Python
|
||
python -m http.server 8000
|
||
|
||
# 或使用Node.js
|
||
npx http-server -p 8000
|
||
```
|
||
|
||
3. **访问网站**：
|
||
打开浏览器访问 `http://localhost:8000`
|
||
|
||
## 🤝 贡献指南
|
||
|
||
欢迎提交问题和改进建议！
|
||
|
||
1. Fork 本项目
|
||
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 开启 Pull Request
|
||
|
||
## 📄 许可证
|
||
|
||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
|
||
|
||
## 👨💻 作者
|
||
|
||
**exyone** - 全栈开发工程师
|
||
|
||
- 邮箱：exyone.dev@icloud.com
|
||
- 备用邮箱：me.exyone@yandex.com
|
||
|
||
## 🙏 致谢
|
||
|
||
- 感谢所有开源项目的贡献者
|
||
- 感谢提供API服务的平台
|
||
- 感谢所有支持者和用户
|
||
|
||
---
|
||
|
||
⭐ 如果这个项目对你有帮助，请给它一个星标！ |