高颜值导航页

# 北辰导航 – 个人导航页

## 项目简介

基于 [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/

重发！！这次没有任何问题