yangyuqing/new-site

Fork 0

Files

yangyuqing f0cbbb0ae7 完整推送：毕业设计网站框架及部署配置

2026-06-02 16:30:13 +08:00

6.7 KiB

Raw Blame History

🚀 网站部署指南 - 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 推送（推荐）

# 1. 确保所有更改已提交
git add .
git commit -m "优化部署配置：添加base路径、SEO标签和.htaccess"

# 2. 推送到 Gitea
git push origin main

方式二：直接上传到服务器

如果服务器支持 FTP/SFTP：

连接至 solarark.net 服务器
进入 /g2026/g4/ 目录

上传所有文件：

├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
├── .htaccess
└── README.md

🧪 测试清单

本地测试

在推送前，先在本地测试：

# 方法1：直接打开
# 在浏览器中打开 file:///d:/my_website/index.html

# 方法2：使用本地服务器（推荐）
# VS Code 安装 Live Server 插件
# 右键 index.html → Open with Live Server

在线测试

访问以下地址进行测试：

主页面
```
https://solarark.net/g2026/g4/
```
检查资源加载
- 按 F12 打开开发者工具
- 查看 Console 是否有错误
- 查看 Network 标签确认所有资源加载成功（状态码 200）
测试导航功能
- ✅ 点击导航栏各链接，确认平滑滚动
- ✅ 滚动页面，确认导航高亮正常
- ✅ 移动端测试汉堡菜单
响应式测试
- 桌面端（1920px+）
- 平板端（768px - 1024px）
- 手机端（< 768px）
跨浏览器测试
- Chrome / Edge
- Firefox
- Safari
- 手机浏览器

🔍 常见问题排查

问题1：CSS/JS 文件加载失败（404错误）

原因：路径配置不正确

解决方案：

<!-- 检查 <base> 标签是否正确 -->
<base href="/g2026/g4/">

<!-- 或者使用绝对路径 -->
<link rel="stylesheet" href="/g2026/g4/css/style.css">
<script src="/g2026/g4/js/main.js"></script>

问题2：图片不显示

原因：图片路径错误或未上传

解决方案：

<!-- 确保图片已上传到服务器 -->
<!-- 检查路径 -->
<img src="images/your-image.jpg" alt="描述">

<!-- 或使用绝对路径 -->
<img src="/g2026/g4/images/your-image.jpg" alt="描述">

问题3：导航跳转不正确

原因：锚点链接与 base 标签冲突

解决方案：已在 JavaScript 中处理，确保平滑滚动正常工作。

问题4：样式错乱

原因：CSS 文件未正确加载

检查步骤：

F12 → Network 标签
刷新页面
查找 style.css，确认状态码为 200
如果是 404，检查路径

📱 移动端优化检查

必须测试的项目

汉堡菜单能正常展开/收起
导航链接点击后能关闭菜单
卡片布局变为单列
文字大小适中，无需缩放
图片自适应容器宽度
触摸滑动流畅

iOS Safari 特殊处理

如果遇到 iOS Safari 显示问题，在 CSS 中添加：

/* iOS Safari 优化 */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
}

🎨 艺术设计效果保证

视觉一致性检查

色彩显示
- ✅ 莫兰迪苔绿色 (#8A9B7E) 正确显示
- ✅ 背景暖灰色 (#F5F5F2) 均匀
- ✅ 文字对比度足够
字体渲染
- ✅ 中文显示清晰
- ✅ 字号层级分明
- ✅ 行距舒适（1.8倍）
阴影效果
- ✅ 卡片弥散阴影柔和
- ✅ 悬停时阴影加深
- ✅ 无锯齿或模糊
动画流畅度
- ✅ 卡片入场动画 0.6s
- ✅ 过渡效果 cubic-bezier
- ✅ 无卡顿或闪烁

🔧 服务器配置检查

Apache 服务器（.htaccess 已配置）

确保服务器启用了以下模块：

mod_rewrite（URL重写）
mod_deflate（Gzip压缩）
mod_expires（缓存控制）

Nginx 服务器

如果使用 Nginx，创建 nginx.conf：

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 动画

建议添加

图片优化

# 使用 WebP 格式
# 压缩图片体积
# 添加 lazy loading
<img src="image.webp" loading="lazy" alt="描述">

代码压缩

# 压缩 CSS
cssnano style.css > style.min.css

# 压缩 JS
terser main.js -o main.min.js

CDN 加速（可选）
- 将静态资源托管到 CDN
- 提高全球访问速度

🌐 最终验证

访问测试

在不同网络环境下测试：

校园网
家庭宽带
移动数据
海外网络（如有）

设备测试

Windows + Chrome
Mac + Safari
iPhone + Safari
Android + Chrome
iPad + Safari

功能测试

所有导航链接有效
平滑滚动正常
移动端菜单工作
卡片动画触发
表格数据显示完整

📞 技术支持

如果遇到问题：

检查浏览器控制台（F12）
- 查看红色错误信息
- 截图保存
检查网络请求
- Network 标签查看所有资源
- 确认状态码都是 200

清除缓存

Ctrl + Shift + Delete (Windows)
Cmd + Shift + Delete (Mac)

联系老师或技术支持
- 提供错误截图
- 说明使用的设备和浏览器
- 提供访问 URL

✨ 部署完成检查表

添加 <base href="/g2026/g4/">
优化 SEO meta 标签
创建 .htaccess 配置文件
检查所有资源路径
推送到 Gitea
上传到 solarark.net 服务器
访问 https://solarark.net/g2026/g4/ 测试
多设备测试通过
多浏览器测试通过
通知老师验收

祝你的毕业设计展示圆满成功！ 🎓✨

最后更新：2026年

6.7 KiB Raw Blame History Unescape Escape