今天很开心，VibeCoding迈出了一大步，上了一个全新的台阶
正文共： 3480字 2图
预计阅读时间： 9分钟
# 数字游民9527 官方网站
一个现代化、响应式的个人品牌网站，支持动态内容管理。
## 🌟 项目特点
- ✅ **响应式设计** - 完美适配PC端和移动端
- ✅ **日间/夜间模式** - 自动跟随系统设置，可手动切换
- ✅ **中英文双语** - 支持中英文切换
- ✅ **动态内容管理** - 后台可配置项目、产品、社区信息
- ✅ **炫酷交互效果** - 平滑动画、音效反馈、震动反馈
- ✅ **SEO优化** - 良好的搜索引擎优化
- ✅ **快捷导航** - 侧边栏快捷导航，返回顶部按钮
- ✅ **性能优化** - 懒加载、防抖、CDN加速
## 📁 项目结构
digital-nomad-9527/
├── index.html # 主页
├── css/
│ └── style.css # 样式文件
├── js/
│ └── main.js # 前端交互逻辑
├── admin/
│ ├── login.html # 后台登录页
│ ├── dashboard.html # 后台管理页面
│ └── admin.js # 后台管理逻辑
├── api/
│ ├── config.php # 数据库配置
│ ├── projects.php # 项目管理API
│ ├── products.php # 产品管理API
│ ├── communities.php # 社区管理API
│ └── auth.php # 登录验证API
├── database.sql # 数据库初始化脚本
└── README.md # 说明文档
## 🚀 部署步骤
### 第一步：上传文件到服务器
1. 将整个项目文件夹上传到宝塔面板的网站根目录
2. 确保文件权限正确（755）
### 第二步：配置数据库
1. 在宝塔面板中创建MySQL数据库
- 数据库名：`xxx`
- 用户名：`root`（或自定义）
- 密码：设置一个安全的密码
2. 打开phpMyAdmin，选择刚创建的数据库
3. 导入 `database.sql` 文件
- 点击"导入"标签
- 选择 `database.sql` 文件
- 点击"执行"
### 第三步：配置数据库连接
编辑 `api/config.php` 文件，修改数据库配置：
```php
define('DB_HOST', 'xxx');
define('DB_NAME', 'xxx');
define('DB_USER', 'root'); // 修改为你的数据库用户名
define('DB_PASS', 'your_password'); // 修改为你的数据库密码
### 第四步：配置网站域名
1. 在宝塔面板中绑定你的域名
2. 设置网站根目录为项目文件夹
3. 开启SSL证书（推荐使用Let's Encrypt免费证书）
### 第五步：测试网站
1. 访问你的域名，查看前端页面是否正常显示
2. 访问 `你的域名/admin/login.html` 进入后台管理
3. 使用默认账号登录：
- 用户名：`xxx`
- 密码：`xxx`
### 第六步：修改管理员密码（重要！）
1. 编辑 `api/auth.php` 文件
2. 找到以下代码：
```php
$adminUsername = 'xxx';
$adminPassword = password_hash('xxx', PASSWORD_DEFAULT);
3. 修改为你的用户名和密码：
```php
$adminUsername = 'your_username';
$adminPassword = password_hash('your_new_password', PASSWORD_DEFAULT);
## 📝 使用说明
### 前端功能
- **主题切换**：点击右上角月亮/太阳图标切换日间/夜间模式
- **语言切换**：点击右上角语言图标切换中英文
- **快捷导航**：左侧圆点导航可快速跳转到各个区块
- **返回顶部**：滚动页面后会出现返回顶部按钮
### 后台管理
1. **实践项目管理**
- 添加、编辑、删除实践过的网赚项目
- 支持分类：流量分成、CPS、虚拟商品、定制服务、付费课程
2. **产品展示管理**
- 添加、编辑、删除开发的产品
- 支持大类：网站、小程序、自媒体账号、付费课程
- 支持类型：AI工具、测试类应用、小游戏、实用工具等
- 可上传Logo和二维码
3. **社区交流管理**
- 添加、编辑、删除交流群和社区
- 支持类别：垂直领域交流群、社区
- 支持类型：免费、付费
- 可上传Logo和二维码
## 🎨 自定义修改
### 修改个人信息
编辑 `index.html` 文件中的以下部分：
1. **头像**：替换 Hero Section 中的头像图片URL
2. **个人介绍**：修改 About Section 中的文字内容
3. **标签**：修改 Hero Section 中的技能标签
### 修改配色方案
编辑 `css/style.css` 文件中的CSS变量：
```css
:root {
--accent-primary: #3b82f6; /* 主色调 */
--accent-secondary: #8b5cf6; /* 辅助色 */
}
### 添加新的内容区块
在 `index.html` 中添加新的 `<section>` 标签，并在 `css/style.css` 中添加相应样式。
## 🔧 技术栈
-**前端**：HTML5 + CSS3 + JavaScript
-**CSS框架**：Tailwind CSS 3.0+
-**图标库**：Font Awesome 6.4.0
-**动画库**：AOS (Animate On Scroll)
-**后端**：PHP 7.4+
-**数据库**：MySQL 5.7+
## 📱 浏览器兼容性
- Chrome (推荐)
- Firefox
- Safari
- Edge
- 移动端浏览器
## ⚠️ 注意事项
1.**安全性**
- 务必修改默认管理员密码
- 定期备份数据库
- 使用HTTPS加密连接
2.**性能优化**
- 图片建议使用WebP格式
- Logo图片建议尺寸：80x80px
- 二维码图片建议尺寸：200x200px
3.**图片存储**
- 可以使用云存储服务（阿里云OSS、腾讯云COS等）
- 或者上传到网站的 `uploads/` 目录
## 🐛 常见问题
### 1. 数据库连接失败
- 检查 `api/config.php` 中的数据库配置是否正确
- 确认MySQL服务是否正常运行
- 检查数据库用户权限
### 2. 后台无法登录
- 确认是否已执行 `database.sql` 初始化脚本
- 检查 `api/auth.php` 中的账号密码配置
- 清除浏览器缓存和Cookie
### 3. 前端页面显示空白
- 检查浏览器控制台是否有JavaScript错误
- 确认CDN资源是否正常加载
- 检查网络连接
### 4. 图片无法显示
- 确认图片URL是否正确
- 检查图片是否可以正常访问
- 确认服务器防火墙设置
## 📞 技术支持
如有问题，欢迎通过以下方式联系：
- 加入OPC俱乐部交流群
- 关注"数字游民9527"公众号
## 📄 许可证
本项目仅供个人学习和使用。
---
**通过 AI + Vibecoding 构建** 🚀
如果你能看到这里，非常感谢你的耐心阅读。
浙公网安备 33010602011771号