自己做了个蔚蓝档案主题的个人主页

自己做了个蔚蓝档案主题的个人主页

项目地址

预览链接

项目预览

主页界面

目前复刻程度

  • 加载界面
  • 主界面复刻
  • 回忆大厅
  • 弹窗复刻
  • 什亭之箱转场
  • 点击特效和动效
  • 多个学生回忆大厅l2d切换
  • 学生回忆大厅全局观赏
  • 学生互动

技术栈

部署方式

推荐环境:

node > 16.16.0
npm > 8.15.0

  1. 安装yarn
1
2
# 安装 yarn
npm install -g yarn
  1. 克隆此项目到本地
  2. 在项目根目录下运行
1
2
3
4
5
6
7
8
9
10
11
# 安装依赖
yarn install

# 预览(开发环境)
yarn dev

# 构建
yarn build

# 预览(生产环境)
yarn preview

构建完成后,静态资源会在 dist 目录 中生成,你可以将 dist 目录中的文件上传至服务器,也可以使用 VercelNetlify 等静态托管平台一键导入并自动部署

个性化

打开根目录下的 _config.json,在其中你会看到如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
{
// 网站基本配置
title: '小鱼档案', // 网站标题
description: '有关小鱼的《蔚蓝档案》风格的个人主页', // 网站简介
favicon: '/favicon144.png', // 网站图标链接
author: '小鱼yuzifu', // Sensei,你的名字
keywords: '蔚蓝档案,小鱼yuzifu,个人主页', // 网站关键词描述
ICP: '', // ICP备案号
// PWA配置(https://developer.mozilla.org/zh-CN/docs/Web/Manifest)
manifest: {
name: '小鱼档案', // 应用全称
short_name: '小鱼档案', // 应用简称
description: '有关小鱼的《蔚蓝档案》风格的个人主页', // 简介
theme_color: '#128AFA', // 主题色
start_url: '/',
id: 'Homepage',
// 图标
icons: [
{
src: '/favicon512.png', // 网站图标链接
sizes: '512x512', // 尺寸
purpose: 'any maskable'
}
]
},
// 个人信息
level: 75, // 等级
exp: 114514, // 经验值
nextExp: 1919, // 到达下一等级经验值(比exp小则显示满级)
// Iconfont图标导入
iconfont: 'https://at.alicdn.com/t/c/font_4336463_0i6ly0yvyzb.js',
// 底部项目信息(推荐5个,最多7个)
dock: [
{
name: '一起吃小鱼', // 项目名称
href: 'https://gitee.com/sf-yuzifu/eat-fish-together', // 项目地址
imgSrc: '/img/fish.png' // 项目图标
}
],
// 左边联系方式(推荐4个,最多不限)
contact: [
{
name: 'QQ', // 联系方式
href: 'https://wpa.qq.com/msgrd?v=3&uin=1906929246&site=qq&menu=yes&jumpflag=1', // 联系地址
iconfont: 'icon-qq' // iconfont图标id(只有icon-qq/github/bilibili/gitee)
}
],
// 任务按钮启动
task: {
name: '个人博客', // 任务名称
href: 'https://blog.yzf.moe/' // 跳转地址
}
}

有关学生回忆大厅L2D文件获取

  1. 自己去解包(教程1教程2
  2. 基沃托斯古书馆中的“角色图鉴”——“切换到鉴赏模式”——“回忆大厅”当中自行获取

视频演示

自己做了个蔚蓝档案主题的个人主页

https://blog.yzf.moe/ba-homepage/

作者

小鱼yuzifu

发布于

2023-11-29

更新于

2024-01-27

许可协议

评论