小鱼档案
有关小鱼的《蔚蓝档案》风格的个人主页

项目地址
预览链接
目前复刻程度
- 加载界面
- 主界面复刻
- 回忆大厅
- 弹窗复刻
- 什亭之箱转场
- 点击特效和动效
- 多个学生回忆大厅l2d切换
- 学生回忆大厅全局观赏
- 学生摸头和对话互动
- i18n适配
- 个人信息等二级界面
使用到的项目
- Vue
- Vite
- Arco Design
- PIXIjs
- spine-pixi-v7
- Iconfont
- cn-font-split
- APlayer
- howler.js
- Resource Han Rounded CN
部署方式
使用第三方部署平台
1. Vercel
2. Netlify
Fork本项目- 登录 Netlify 控制台,选择
Add new site-Import an exist project添加网站 - 接着选择 GitHub 认证来读取我们的 GitHub 项目列表。在列表中搜索我们刚才
Fork生成的仓库名,点击该项目开始基于该仓库创建我们的 Netlify 网站
本地构建网页文件
推荐环境:
node > 18.0.0
npm > 8.15.0
- 安装yarn
# 安装 yarnnpm install -g yarn- 克隆此项目到本地
- 在项目根目录下运行
# 安装依赖yarn install
# 预览(开发环境)yarn dev
# 构建yarn build
# 预览(生产环境预览)yarn preview构建完成后,静态资源会在
dist目录 中生成,你可以将dist目录中的文件上传至服务器
其中关于宝塔如何部署的(https://cloud.tencent.com/developer/article/1977167)
个性化
新版本配置文件采用yaml格式以方便阅读,想要快速迁移可以通过此网站快速将json格式转为yaml格式
打开根目录下的
_config.yaml,在其中你会看到如下内容
# 网站基本配置title: Fish Archive # 网站标题 - 浏览器标签页显示的标题description: A personal homepage in Blue Archive style. # 网站描述 - 用于搜索引擎优化和社交媒体分享favicon: /favicon144.png # 网站图标路径 - 浏览器标签页显示的小图标author: Yuzifu # 网站作者姓名keywords: 'Blue Archive, 小鱼yuzifu, Personal Homepage' # 网站关键词 - 用于搜索引擎优化,逗号分隔# ICP备案号 - 中国大陆备案信息,留空表示未备案ICP: ''# 公安备案号 - 中国大陆网站备案信息,留空表示未备案gongan: ''
# PWA配置 - 渐进式Web应用配置(https://developer.mozilla.org/zh-CN/docs/Web/Manifest)manifest: name: Fish Archive # PWA应用完整名称 short_name: Fish Archive # PWA应用简短名称 - 用于桌面显示 description: A personal homepage in Blue Archive style. # PWA应用描述 theme_color: '#128AFA' # PWA主题颜色 - 影响浏览器UI颜色 start_url: / # PWA启动URL - 应用启动时打开的页面 id: Homepage # PWA应用唯一标识符 # PWA图标配置 icons: # 大尺寸图标 - 用于桌面安装 - src: /favicon512.png sizes: 512x512 purpose: any maskable # 小尺寸图标 - 用于移动设备 - src: /favicon144.png sizes: 144x144
# 个人游戏等级信息level: 90 # 当前等级exp: 8382 # 当前经验值nextExp: 8381 # 升级所需经验值
# Iconfont字体库地址 - 阿里云图标字体库iconfont: 'https://at.alicdn.com/t/c/font_4336463_0i6ly0yvyzb.js'
# 底部项目展示区域 - 显示相关项目链接(推荐5个)dock: # 项目1 - name: Fish Archive Project href: 'https://gitee.com/sf-yuzifu/eat-fish-together' imgSrc: /img/fish.png
# 左侧联系方式区域(推荐4个)contact: # 联系方式1 - name: Github Profile href: 'https://github.com/sf-yuzifu' iconfont: icon-github
# 任务按钮配置 - 页面左下角的任务按钮task: # 任务按钮显示文本 name: Blog Link # 任务按钮链接地址 href: 'https://blog.yzf.moe/'
# Banner音乐播放器配置banner: # 网易云音乐歌曲ID列表 - 用于随机播放 musicID: - 2059151619
# Live2D角色配置memorialLobbies: # 角色1 - Aris - name: Aris # Live2D模型文件路径 path: '/l2d/aris/' # 骨骼动画文件 skel: 'Aris_home.skel' # 纹理图集文件 atlas: 'Aris_home.atlas' # 角色在屏幕中的水平位置偏移(0-1之间) offset: 0.45 # 对话框显示位置配置 dialogueDisplay: # X坐标位置(可以是分数) x: -1/4 - 1/16 # Y坐标位置(可以是分数) y: -1/16 # 对话框位置(left/right) position: right
bio: student: - name: CH0334_spr # Live2D模型文件路径 path: '/l2d/CH0334_spr/' # 骨骼动画文件 skel: 'CH0334_spr.skel' # 纹理图集文件 atlas: 'CH0334_spr.atlas' bth: - name: 蔚蓝档案 path: /img/card/ba.png - name: 明日方舟 path: /img/card/arknight.png修改其中相关内容,之后重新按上述方式部署即可完成修改
有关i18n
本项目支持多语言国际化,其中简体中文为本项目默认语言,位于_config.yaml中,并内置了English、日本語和繁體中文,分别位于src/locales/en-US.yaml、src/locales/ja-JP.yaml和src/locales/zh-TW.yaml。
翻译文件目录结构
src/locales/├── zh-CN.yaml # 简体中文翻译文件├── zh-TW.yaml # 繁体中文翻译文件├── en-US.yaml # 英文翻译文件└── ja-JP.yaml # 日文翻译文件翻译文件配置项
以src/locales/zh-CN.yaml为例,翻译文件包含以下配置项:
# 网站标题、描述和关键词title: 网站标题description: 网站描述keywords: 关键词列表
# PWA配置manifest: name: PWA应用名称 short_name: PWA应用短名 description: PWA应用描述
# 作者名称author: 作者名称
# 底部项目展示区域dock: - name: 项目名称
# 左侧联系方式区域contact: - name: 联系方式名称
# 任务按钮配置task: name: 任务按钮显示文本
# 纪念大厅角色显示名称memorialLobbies: - name: 角色名称
# 角色语音对话翻译memorialLobbies[0]: voice: 对话键: 对话内容
# 通用界面翻译字符串translate: about: 关于 projectWebsite: 项目地址: info: 通知 ifSkip: 是否跳过? update: 站点更新提示 ok: 确认 cancel: 取消 bio: 个人简介 bioTitle: 自我介绍 bioContent: - 这里是小鱼yuzifu,很高兴你能看到这个网站>_<! - <br/> prevPage: 上一页 nextPage: 下一页
bio: bth: - name: 蔚蓝档案 - name: 明日方舟有关学生回忆大厅L2D文件获取
- 自己去游戏解包中获取
- 去基沃托斯古书馆中的
角色图鉴—切换到鉴赏模式—回忆大厅当中自行抓包获取
基于本项目的最佳实践
感谢使用此项目的大佬们能够进一步完善这个项目😭😭😭
欢迎其他大佬通过Issue来向我投稿最佳实践❤❤❤

