完整推送：毕业设计网站框架及部署配置
This commit is contained in:
337
DEPLOYMENT.md
Normal file
337
DEPLOYMENT.md
Normal file
@@ -0,0 +1,337 @@
|
||||
# 🚀 网站部署指南 - solarark.net/g2026/g4/
|
||||
|
||||
## ✅ 已完成的优化
|
||||
|
||||
### 1. 路径配置
|
||||
- ✅ 添加了 `<base href="/g2026/g4/">` 标签
|
||||
- ✅ 所有资源使用相对路径（css/style.css, js/main.js）
|
||||
- ✅ 创建了 `.htaccess` 配置文件
|
||||
|
||||
### 2. SEO 优化
|
||||
- ✅ 添加了完整的 meta 标签
|
||||
- ✅ 设置了 Open Graph 社交分享标签
|
||||
- ✅ 添加了关键词和描述
|
||||
|
||||
### 3. 兼容性
|
||||
- ✅ 设置了 viewport 响应式meta标签
|
||||
- ✅ 添加了 IE 兼容性设置
|
||||
- ✅ UTF-8 字符编码
|
||||
|
||||
---
|
||||
|
||||
## 📋 部署步骤
|
||||
|
||||
### 方式一：通过 Git 推送（推荐）
|
||||
|
||||
```bash
|
||||
# 1. 确保所有更改已提交
|
||||
git add .
|
||||
git commit -m "优化部署配置：添加base路径、SEO标签和.htaccess"
|
||||
|
||||
# 2. 推送到 Gitea
|
||||
git push origin main
|
||||
```
|
||||
|
||||
### 方式二：直接上传到服务器
|
||||
|
||||
如果服务器支持 FTP/SFTP：
|
||||
1. 连接至 solarark.net 服务器
|
||||
2. 进入 `/g2026/g4/` 目录
|
||||
3. 上传所有文件：
|
||||
```
|
||||
├── index.html
|
||||
├── css/
|
||||
│ └── style.css
|
||||
├── js/
|
||||
│ └── main.js
|
||||
├── images/
|
||||
├── .htaccess
|
||||
└── README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 测试清单
|
||||
|
||||
### 本地测试
|
||||
在推送前，先在本地测试：
|
||||
|
||||
```bash
|
||||
# 方法1：直接打开
|
||||
# 在浏览器中打开 file:///d:/my_website/index.html
|
||||
|
||||
# 方法2：使用本地服务器（推荐）
|
||||
# VS Code 安装 Live Server 插件
|
||||
# 右键 index.html → Open with Live Server
|
||||
```
|
||||
|
||||
### 在线测试
|
||||
|
||||
访问以下地址进行测试：
|
||||
|
||||
1. **主页面**
|
||||
```
|
||||
https://solarark.net/g2026/g4/
|
||||
```
|
||||
|
||||
2. **检查资源加载**
|
||||
- 按 F12 打开开发者工具
|
||||
- 查看 Console 是否有错误
|
||||
- 查看 Network 标签确认所有资源加载成功（状态码 200）
|
||||
|
||||
3. **测试导航功能**
|
||||
- ✅ 点击导航栏各链接，确认平滑滚动
|
||||
- ✅ 滚动页面，确认导航高亮正常
|
||||
- ✅ 移动端测试汉堡菜单
|
||||
|
||||
4. **响应式测试**
|
||||
- 桌面端（1920px+）
|
||||
- 平板端（768px - 1024px）
|
||||
- 手机端（< 768px）
|
||||
|
||||
5. **跨浏览器测试**
|
||||
- Chrome / Edge
|
||||
- Firefox
|
||||
- Safari
|
||||
- 手机浏览器
|
||||
|
||||
---
|
||||
|
||||
## 🔍 常见问题排查
|
||||
|
||||
### 问题1：CSS/JS 文件加载失败（404错误）
|
||||
|
||||
**原因**：路径配置不正确
|
||||
|
||||
**解决方案**：
|
||||
```html
|
||||
<!-- 检查 <base> 标签是否正确 -->
|
||||
<base href="/g2026/g4/">
|
||||
|
||||
<!-- 或者使用绝对路径 -->
|
||||
<link rel="stylesheet" href="/g2026/g4/css/style.css">
|
||||
<script src="/g2026/g4/js/main.js"></script>
|
||||
```
|
||||
|
||||
### 问题2：图片不显示
|
||||
|
||||
**原因**：图片路径错误或未上传
|
||||
|
||||
**解决方案**：
|
||||
```html
|
||||
<!-- 确保图片已上传到服务器 -->
|
||||
<!-- 检查路径 -->
|
||||
<img src="images/your-image.jpg" alt="描述">
|
||||
|
||||
<!-- 或使用绝对路径 -->
|
||||
<img src="/g2026/g4/images/your-image.jpg" alt="描述">
|
||||
```
|
||||
|
||||
### 问题3：导航跳转不正确
|
||||
|
||||
**原因**：锚点链接与 base 标签冲突
|
||||
|
||||
**解决方案**：
|
||||
已在 JavaScript 中处理，确保平滑滚动正常工作。
|
||||
|
||||
### 问题4：样式错乱
|
||||
|
||||
**原因**：CSS 文件未正确加载
|
||||
|
||||
**检查步骤**：
|
||||
1. F12 → Network 标签
|
||||
2. 刷新页面
|
||||
3. 查找 style.css，确认状态码为 200
|
||||
4. 如果是 404，检查路径
|
||||
|
||||
---
|
||||
|
||||
## 📱 移动端优化检查
|
||||
|
||||
### 必须测试的项目
|
||||
|
||||
- [ ] 汉堡菜单能正常展开/收起
|
||||
- [ ] 导航链接点击后能关闭菜单
|
||||
- [ ] 卡片布局变为单列
|
||||
- [ ] 文字大小适中，无需缩放
|
||||
- [ ] 图片自适应容器宽度
|
||||
- [ ] 触摸滑动流畅
|
||||
|
||||
### iOS Safari 特殊处理
|
||||
|
||||
如果遇到 iOS Safari 显示问题，在 CSS 中添加：
|
||||
```css
|
||||
/* iOS Safari 优化 */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.hero {
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 艺术设计效果保证
|
||||
|
||||
### 视觉一致性检查
|
||||
|
||||
1. **色彩显示**
|
||||
- ✅ 莫兰迪苔绿色 (#8A9B7E) 正确显示
|
||||
- ✅ 背景暖灰色 (#F5F5F2) 均匀
|
||||
- ✅ 文字对比度足够
|
||||
|
||||
2. **字体渲染**
|
||||
- ✅ 中文显示清晰
|
||||
- ✅ 字号层级分明
|
||||
- ✅ 行距舒适（1.8倍）
|
||||
|
||||
3. **阴影效果**
|
||||
- ✅ 卡片弥散阴影柔和
|
||||
- ✅ 悬停时阴影加深
|
||||
- ✅ 无锯齿或模糊
|
||||
|
||||
4. **动画流畅度**
|
||||
- ✅ 卡片入场动画 0.6s
|
||||
- ✅ 过渡效果 cubic-bezier
|
||||
- ✅ 无卡顿或闪烁
|
||||
|
||||
---
|
||||
|
||||
## 🔧 服务器配置检查
|
||||
|
||||
### Apache 服务器（.htaccess 已配置）
|
||||
|
||||
确保服务器启用了以下模块：
|
||||
- mod_rewrite（URL重写）
|
||||
- mod_deflate（Gzip压缩）
|
||||
- mod_expires（缓存控制）
|
||||
|
||||
### Nginx 服务器
|
||||
|
||||
如果使用 Nginx，创建 `nginx.conf`：
|
||||
```nginx
|
||||
location /g2026/g4/ {
|
||||
try_files $uri $uri/ /g2026/g4/index.html;
|
||||
|
||||
# Gzip 压缩
|
||||
gzip on;
|
||||
gzip_types text/css application/javascript;
|
||||
|
||||
# 缓存设置
|
||||
location ~* \.(jpg|jpeg|png|gif|webp)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public";
|
||||
}
|
||||
|
||||
location ~* \.(css|js)$ {
|
||||
expires 1M;
|
||||
add_header Cache-Control "public";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 性能优化建议
|
||||
|
||||
### 已完成
|
||||
- ✅ CSS 变量统一管理
|
||||
- ✅ Intersection Observer 懒加载
|
||||
- ✅ 流畅的 CSS 动画
|
||||
|
||||
### 建议添加
|
||||
|
||||
1. **图片优化**
|
||||
```bash
|
||||
# 使用 WebP 格式
|
||||
# 压缩图片体积
|
||||
# 添加 lazy loading
|
||||
<img src="image.webp" loading="lazy" alt="描述">
|
||||
```
|
||||
|
||||
2. **代码压缩**
|
||||
```bash
|
||||
# 压缩 CSS
|
||||
cssnano style.css > style.min.css
|
||||
|
||||
# 压缩 JS
|
||||
terser main.js -o main.min.js
|
||||
```
|
||||
|
||||
3. **CDN 加速**（可选）
|
||||
- 将静态资源托管到 CDN
|
||||
- 提高全球访问速度
|
||||
|
||||
---
|
||||
|
||||
## 🌐 最终验证
|
||||
|
||||
### 访问测试
|
||||
|
||||
在不同网络环境下测试：
|
||||
- [ ] 校园网
|
||||
- [ ] 家庭宽带
|
||||
- [ ] 移动数据
|
||||
- [ ] 海外网络（如有）
|
||||
|
||||
### 设备测试
|
||||
|
||||
- [ ] Windows + Chrome
|
||||
- [ ] Mac + Safari
|
||||
- [ ] iPhone + Safari
|
||||
- [ ] Android + Chrome
|
||||
- [ ] iPad + Safari
|
||||
|
||||
### 功能测试
|
||||
|
||||
- [ ] 所有导航链接有效
|
||||
- [ ] 平滑滚动正常
|
||||
- [ ] 移动端菜单工作
|
||||
- [ ] 卡片动画触发
|
||||
- [ ] 表格数据显示完整
|
||||
|
||||
---
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如果遇到问题：
|
||||
|
||||
1. **检查浏览器控制台**（F12）
|
||||
- 查看红色错误信息
|
||||
- 截图保存
|
||||
|
||||
2. **检查网络请求**
|
||||
- Network 标签查看所有资源
|
||||
- 确认状态码都是 200
|
||||
|
||||
3. **清除缓存**
|
||||
```
|
||||
Ctrl + Shift + Delete (Windows)
|
||||
Cmd + Shift + Delete (Mac)
|
||||
```
|
||||
|
||||
4. **联系老师或技术支持**
|
||||
- 提供错误截图
|
||||
- 说明使用的设备和浏览器
|
||||
- 提供访问 URL
|
||||
|
||||
---
|
||||
|
||||
## ✨ 部署完成检查表
|
||||
|
||||
- [x] 添加 `<base href="/g2026/g4/">`
|
||||
- [x] 优化 SEO meta 标签
|
||||
- [x] 创建 .htaccess 配置文件
|
||||
- [x] 检查所有资源路径
|
||||
- [ ] 推送到 Gitea
|
||||
- [ ] 上传到 solarark.net 服务器
|
||||
- [ ] 访问 https://solarark.net/g2026/g4/ 测试
|
||||
- [ ] 多设备测试通过
|
||||
- [ ] 多浏览器测试通过
|
||||
- [ ] 通知老师验收
|
||||
|
||||
---
|
||||
|
||||
**祝你的毕业设计展示圆满成功！** 🎓✨
|
||||
|
||||
*最后更新：2026年*
|
||||
Reference in New Issue
Block a user