|
|
# 北辰导航 - 个人导航页
## 项目简介
基于 [ZYYO666/homepage](https://github.com/ZYYO666/homepage) 开源项目进行二创，在保留原有优秀设计骨架的基础上，对细节进行了大量补充和优化。
## 功能特性
- 打字机标题效果（北辰导航）
- 搜索框（支持百度搜索 / URL 直接跳转）
- 导航卡片（实用工具、我的项目、技术栈）
- 时间卡片：玻璃拟态设计，显示时/分/秒 + 日期（含中文星期）+ 时段 + 每日提示语
- 一言 API 打字机效果：逐字打出 -> 停留 -> 逐字删除 -> 换下一句，无限循环
- 左侧边栏：头像框 + 标签 + 时间线
- 蜘蛛网 canvas 背景
- 樱花飘落 canvas 动画
- 点击粒子特效
- 暗色模式切换
- 滚动进度环（右下角，> 300px 显示，点击回顶）
## 技术栈
- 纯 HTML + CSS + JS，无外部框架依赖
- 玻璃拟态（Glassmorphism）设计风格
- Canvas 动画（蜘蛛网、樱花飘落、点击粒子）
- 一言 API 实时获取语录
## 目录结构
```
release/
├── index.html # 主页面
├── static/
│ ├── css/
│ │ └── style.css # 样式文件
│ ├── js/
│ │ └── script.js # 脚本文件
│ ├── img/
│ │ ├── avatar.png # 头像
│ │ ├── logo4.png # 头像框
│ │ ├── reward.jpg # 赞助二维码
│ │ ├── wechat.jpg # 微信二维码
│ │ ├── i1.png # 项目展示图
│ │ └── i2.png # 项目展示图
│ └── svg/
│ ├── skillPc.svg # 技术栈 PC 版
│ └── skillWap.svg# 技术栈移动版
```
## 二创改动说明（相比原项目）
在原项目 [ZYYO666/homepage](https://github.com/ZYYO666/homepage) 的基础上：
1. 时间组件全面重构，新增秒数显示和日期（含中文星期）
2. 一言 API 从静态显示改为打字机效果（逐字打出 + 逐字删除 + 循环切换）
3. 头像框不再被裁剪遮挡
4. 蜘蛛网背景优化，消除闪烁
5. 整体排版和间距微调，视觉更协调
## 部署教程
项目为纯静态文件，无需后端和数据库，部署到任何静态服务即可。
### 方式一：本地 Python （推荐零基础）
确保电脑已安装 Python，在项目根目录下执行：
```bash
python3 -m http.server 8000
```
浏览器打开 `http://localhost:8000` 即可访问。
### 方式二：Vercel 免费部署（推荐）
1. 将项目上传到 GitHub 仓库
2. 打开 [vercel.com](https://vercel.com) 注册登录
3. 点击 "New Project" -> 导入你的 GitHub 仓库
4. 无需任何配置，直接点 Deploy
5. 几十秒后即可获得一个 `你的项目名.vercel.app` 的免费域名
### 方式三：Netlify 免费部署
1. 将项目上传到 GitHub 仓库
2. 打开 [netlify.com](https://netlify.com) 注册登录
3. 点击 "Add new site" -> "Import an existing project"
4. 选择 GitHub 仓库，直接点 Deploy
5. 获得 `你的项目名.netlify.app` 免费域名
### 方式四：GitHub Pages
1. 将项目上传到 GitHub 仓库
2. 进入仓库 Settings -> Pages
3. Source 选择 "Deploy from a branch"，分支选 main，目录选 root
4. 保存后获得 `用户名.github.io/仓库名` 免费域名
### 方式五：Cloudflare Pages（推荐，国内访问更快）
1. 将项目上传到 GitHub 仓库
2. 打开 [dash.cloudflare.com](https://dash.cloudflare.com) 注册登录
3. 左侧菜单进入 Workers & Pages -> 创建 -> Pages
4. 连接 GitHub，选择项目仓库，直接点"开始设置"
5. 构建命令留空，输出目录填 `/`，点保存并部署
6. 获得 `你的项目名.pages.dev` 免费域名
### 方式六：宝塔面板 / 虚拟主机
1. 购买国内虚拟主机或云服务器安装宝塔面板
2. 创建网站，将项目文件上传到网站根目录
3. 绑定域名，访问即可
【版权声明】
原版导航源码著作权归原作者所有，本版本为二次修改版本，经原作者许可分享。
本资源仅供个人学习交流，**禁止一切商业用途**。
如需商用，请自行联系原作者获取授权。
下载地址:https://beichenwl.lanzoue.com/iRn8y3y0etxe
预览页:https://been1.pages.dev/
重发！！这次没有任何问题
|
|
发表于