基于 IMSYY 的个人主页 HOME 修改而来。
由于 CDN 缓存原因，查看最新效果可能需要 Ctrl + F5 强制刷新浏览器缓存
- 载入动画
- 站点简介
- Hitokoto 一言
- 日期及时间
- 实时天气
- 时光进度条
- 音乐播放器
- 移动端适配
新增
- DailySentence 每日一句
- 数据动态配置
- 触摸滑动切换
- 手动默哀模式
- 适配各种屏幕尺寸
-
安装 node.js 环境
node > 16.16.0
npm > 8.15.0 -
然后以 管理员权限 运行
cmd终端，并cd到 项目根目录 -
在
终端中输入：
# 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 预览
pnpm dev
# 构建
pnpm build构建完成后，静态资源会在
dist目录 中生成，可将dist文件夹下的文件上传至服务器，也可使用Vercel等托管平台一键导入并自动部署
本项目数据相关配置，可使用接口获取相关数据 * 如果 配置接口 获取相关数据，需要接口配置 跨域 相关内容
请在 .env 环境变量中进行相关配置
# 歌曲
## 请在 public/data 目录下的 music.json 文件中配置
## 此处提供的服务可能会超量从而无法访问, 请自行部署
## 请参照 https://github.com/xizeyoupan/Meting-API 进行 API 服务部署
## 若使用 QQ音乐 歌单, 歌曲数量最好不要超出 50 首
## 备用: https://api.wuenci.com/meting/api/
## 参数说明:
## api 歌曲 API 地址
## server 歌曲服务器 （ netease-网易云, tencent-QQ音乐 ）
## type 播放类型 （ song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 ）
## id 播放目标 （ 歌曲ID 或 歌单ID 等 ）
VITE_MUSIC_URL = "/data/music.json"
# 社交链接
## 请在 public/data 目录下的 socialLinks.json 文件中配置
VITE_SOCIAL_URL = "/data/socialLinks.json"
# 网站列表
## 请在 public/data 目录下的 websiteLists.json 文件中配置
VITE_LISTS_URL = "/data/websiteLists.json"
# 背景图片
## 请在 public/data 目录下的 background.json 文件中配置
## 注: 请勿设置默认背景 url 属性, 请勿调整默认背景在配置文件中的位置
VITE_BACKGROUND_URL = "/data/background.json"
# 默哀模式
## 请在 public/data 目录下的 mourn.json 文件中配置
## 注: 不是默哀模式的开关, 而是手动开启默哀模式（非指定日期）
VITE_MOURN_URL = "/data/mourn.json"
# 更新日志
## 请在 public/data 目录下的 updateRecords.json 文件中配置
VITE_RECORDS_URL ="/data/updateRecords.json"
# 控制台内容
## 请在 public/data 目录下的 console.json 文件中配置
VITE_CONSOLE_URL = "/data/console.json"
* 请将
VITE_WEATHER_KEY替换为个人的Key
天气及地区获取需要 高德开放平台 相关 API
- 前往 高德开放平台控制台 创建一个
Web 服务类型的Key，并将Key填入.env中的VITE_WEATHER_KEY中
也可自行更换其他方式
项目中使用的是
高德开放平台中的Web API，定位精度不高。如果想要更高的定位精度，则可以自行（需要修改代码）更换为JS API
本项目采用了基于
MetingJS的Aplayer音乐播放器，可实现快速自定义歌单
* 仅支持 中国大陆地区
请在 public/data/ 目录下的 music.json 文件中更改歌曲相关参数即可实现自定义歌单列表
{
"api": "https://api.i-meto.com/meting/api/",
"server": "netease",
"type": "playlist",
"id": "2243342814"
}* 音乐播放器 相关配置可以在网站 全局设置 页面进行修改
请在 public/data/ 目录下的 socialLinks.json 文件中配置
[
{
"name": "Github",
"icon": "/image/icon/github.png",
"tip": "去 Github 看看 !",
"url": "https://github.com/first19326"
}, {
"name": "BiliBili",
"icon": "/image/icon/bilibili.png",
"tip": "( ° - °)つロ 干杯 ~",
"url": "https://space.bilibili.com/"
}, {
"name": "QQ",
"icon": "/image/icon/qq.png",
"tip": "有什么事吗 ?",
"url": "https://res.abeim.cn/api/qq/?qq=1400134416"
}, {
"name": "Email",
"icon": "/image/icon/email.png",
"tip": "来封 Email ~",
"url": "mailto:[email protected]"
}
]* 请勿配置过多，否则需要自行适配样式（最多可以配置 7 个社交链接）
Hikotoko 一言 相关数据通过对应接口获得，此处配置为接口失效显示的 默认数据
请在 .env 环境变量中进行相关配置
# 一言数据（默认）
VITE_HITOKOTO_TEXT = "简单地活着，肆意而又精彩。"
VITE_HITOKOTO_FROM = "WorstOne"
请在 public/data/ 目录下的 websiteLists.json 文件中配置
[
{
"icon": "Link",
"title": "网站列表",
"items": [
[
{
"icon": "Blog",
"name": "博客",
"url": "https://notes.worstone.cn/"
}, {
"icon": "Code",
"name": "力扣",
"url": "https://leetcode.cn/"
}, {
"icon": "Search",
"name": "搜索",
"url": "https://kaifa.baidu.com/"
}, {
"icon": "CompactDisc",
"name": "音乐",
"url": "https://music.163.com/"
}, {
"icon": "Cloud",
"name": "网盘",
"url": "https://www.aliyundrive.com/"
}
], [
{
"icon": "Train",
"name": "开往",
"url": "https://www.foreverblog.cn/go.html"
}, {
"icon": "Book",
"name": "背单词",
"url": "https://kaiyiwing.gitee.io/qwerty-learner/"
}
]
]
}, {
"icon": "Bars",
"title": "功能列表",
"items": [
[
{
"icon": "PencilAlt",
"name": "一言",
"method": "hitokoto"
}, {
"icon": "SlidersH",
"name": "播放器",
"method": "player"
}, {
"icon": "Music",
"name": "音乐列表",
"method": "music"
}, {
"icon": "Cog",
"name": "全局设置",
"method": "setting"
}
]
]
}
]网站列表 支持列表切换，可分别配置 网站列表、功能列表 以及 友情链接 等。每个列表已引入触摸滑动插件
Swiper，支持分页操作，每页项目不可超过 6 个（超出部分不显示）
修改网站链接图标，需要修改 src/components/Lists/index.vue
- 引入图标组件
- 在
collection中对图标组件进行映射
<script setup>
import { Blog, Code, Search, CompactDisc, Cloud, Train, Book, Link } from "@vicons/fa";
// 名称与组件集合
const icons = {
"Blog": Blog,
"Book": Book,
"Cloud": Cloud,
"Code": Code,
"CompactDisc": CompactDisc,
"Search": Search,
"Train": Train
};
</script>若图标组件不存在或通过图标名称找不到对应组件，则会默认使用
Link图标
修改关联方法，需要修改 src/components/Lists/index.vue
- 创建相关方法
- 在
methods中对方法进行映射
<script setup>
const hitokoto = () => {
store.musicOpenState = false;
};
const musicPlayer = () => {
store.musicOpenState = true;
};
const musicList = () => {
store.musicListShow = true;
};
const setting = () => {
store.setOpenState = true;
};
// 方法名称与方法集合
const methods = {
"hitokoto": hitokoto,
"music": musicList,
"player": musicPlayer,
"setting": setting
};
</script>请在 public/data/ 目录下的 background.json 文件中配置
若
url参数为空，则会 随机 从images里面选取图片 * 请勿设置 默认背景url属性，请勿调整 默认背景 在配置文件中的位置
[
{
"name": "默认背景",
"url": "",
"images": [
"/image/background/home.jpg", "/image/background/home.jpeg",
"/image/background/back.jpg", "/image/background/back.jpeg"
]
}, {
"name": "每日一图",
"url": "https://api.dujin.org/bing/1920.php",
"images": []
}, {
"name": "随机风景",
"url": "https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images",
"images": []
}
]* 部分浏览器不支持
webp格式的图片，为了保证网站效果尽量不要使用该格式图片
* 这个配置不是默哀模式的开关，而是手动开启默哀模式（非指定日期）
请在 public/data/ 目录下的 mourn.json 文件中配置
{
"mournSwitch": false,
"mournText": ""
}请在 public/data/ 目录下的 updateRecords.json 文件中配置
{
"fix": [
"音乐播放器存在的问题",
"网站列表中链接点击范围不正确的问题"
],
"new": [
"静音功能",
"网站图标配置",
"键盘控制事件",
"Swiper 相关配置",
"音乐播放器的相关设置",
"vue-aplayer.min.js 文件",
"动态获取更新日志的数据方式",
"当前音乐在音乐列表中置顶显示的效果"
],
"delete": [
"Safari 浏览器中的默认点击样式"
],
"update": [
"版权信息逻辑",
"网站加载逻辑",
"更新日志样式",
"更新日志内容种类",
"更新日志数据内容",
"音乐控制面板样式",
"音乐播放器切换音乐方法",
"时光胶囊以及设置页面样式",
"初始化音乐播放器的代码结构",
"打开音乐播放器按钮的显示动画"
]
}请在 public/data/ 目录下的 console.json 文件中配置
控制台输出有 3 种模式：random，banner 以及默认
random：随机颜色在控制台输出，输出内容直接配置在数组中即可banner：类似badge标识在控制台输出，输出内容必须以长度为 2 的数组形式配置在数组中（参见console.json配置信息）- 默认：固定颜色在控制台输出
[
["WorstOne's website LiveForCode", "简单地活着, 肆意而又精彩!"],
["Based on IMSYY's website Home.", "Author IMSYY"]
]-
加载速度的问题
在本地通过
pnpm dev运行网站的时候，第一次加载会很慢，这是由于 Vite 项目的特性，并且本地运行的时候网络协议为 HTTP/1.1。如果想要改善网站加载速度慢的问题，可以考虑使用 CDN 对站点进行加速，可以参考 静态网站部署。 -
音乐自动播放的问题
由于浏览器权限的问题，音乐自动播放会失效，需要在浏览器中添加相关设置解决（以 Edge 浏览器为例）。
设置 -> Cookie 和网站权限 -> 媒体自动播放，然后 添加网站地址 即可。
-
2024-01-04
A添加了部分样式，适配各种屏幕尺寸设备 -
2024-01-02
F修复了音乐播放器加载失败，但键盘控制事件仍旧生效的问题F修复了音乐播放器音量未能正确设置的问题
U修改了 APlayer 插件加载逻辑，并优化了代码结构 -
2024-01-01
U修改了 APlayer 插件，使用@worstone/vue-aplayer替换vue3-aplayer，并进行适配 -
2023-11-14
U修改了音乐播放器歌词样式 -
2023-11-11
F修复了音乐播放器静音的问题
A新增了font-display属性U修改了音乐播放器静音问题的解决方式 -
2023-11-10
U修改了音乐播放器提示文本，并调整了代码结构U修改了 logo 区域样式 -
2023-11-05
F修复了 Safari 浏览器由于动画重复，在关闭音乐列表时 屏幕闪烁 的问题F修复了移动端模式下，在背景图片展示状态，移动端菜单按钮仍旧显示的问题F修复了 720px 宽度时，移动端菜单按钮不显示的问题F修复了背景图片展示状态，下载图片按钮无法点击的问题F修复了 Safari 浏览器消息提示内容超出容器的问题F修复了由 PC 端模式 调整到 移动端模式 后，音乐列表关闭的问题
A新增了加载动画组件A新增了字体文件A新增了部分全局变量A新增了部分环境变量A新增了自动导入 Vue 相关组件的配置A新增了音乐加载失败的方法A新增了网站列表切换功能D删除了无用的样式文件U修改了网站结构以及样式U修改了字体样式文件U修改了模块数据结构U修改了环境变量引入方式U修改了部分插件版本U修改了部分代码，统一编码结构U修改了背景图片加载逻辑 -
2023-07-06
A新增了关于更新日志的注释U修改了更新日志内容种类U修改了更新日志数据内容 -
2023-07-03
F修复了网站列表中链接点击范围不正确的问题F修复了音乐播放器存在的问题，修复方式参见 Q & A
A新增了网站图标配置A新增了 vue-aplayer.min.js 文件A新增了音乐播放器的相关设置A新增了当前音乐在音乐列表中置顶显示的效果A新增了动态获取更新日志的数据方式A新增了静音功能，可以通过点击音量图标开启A新增了Swiper相关配置，以适配移动端操作A新增了键盘控制事件，可以通过 Ctrl + ← / → 切换音乐A新增了相关样式，去除了 Safari 浏览器中的默认点击样式U修改了音乐控制面板样式U修改了初始化音乐播放器的代码结构U修改了音乐播放器切换音乐方法U修改了版权信息逻辑U修改了打开音乐播放器按钮的显示动画U修改了更新日志的样式，去掉标题粗体U修改了时光胶囊以及设置页面样式，以适配更大屏幕设备U修改了网站加载逻辑，调整了欢迎提示以及默哀模式执行时间点 -
2023-05-12
F修复了 Safari 浏览器默认背景图片无法显示的问题F修复了 Safari 浏览器backdrop-filter属性不生效的问题F修复了默认背景图片无法下载的问题F修复了网站列表中链接点击范围不准确的问题F修复了720px - 910px屏幕尺寸无法打开音乐播放器的问题
A新增了DailySentence每日一句A新增了触摸滑动切换A新增了多种工具方法U修改了移动端逻辑，引入触摸滑动插件SwiperU修改了网站名称字体，并适配各种屏幕尺寸U修改了网站样式，添加最小的宽度以及高度，保证显示效果 -
2023-05-28
F修复了 Safari 浏览器歌词过长导致样式显示不正确的问题F修复了 手机端 Safari 浏览器时间卡片以及一言卡片的Pagination不显示的问题
A新增了256 x 256尺寸的图标A新增了公安备案的配置选项以及相关样式U修改了时间卡片以及一言卡片的位置U修改了网站列表渲染逻辑U修改了apple-touch-icon图标U修改了页面底部样式U修改了 腾讯云Serverless配置选项，解决了推送修改ACL 权限的问题