简体中文 | English
Important
· 嘿！恭喜你看到这里~ 这是酪灰基于原作者 imsyy 主页的修改版本！修改版本添加了更多的功能，但是也会带来更高的性能占用！（主要来自逐字歌词以及季节效果渲染），也添加了安全更新，增强安全性。
· 酪灰作为 Vue 初学者，因为热爱，拉着同学 Pizero 完善了这个项目，因此这些代码可能会很 shi，并可能充斥着不少 BUG。欢迎在遇到 BUG 时进行反馈，也欢迎各位大佬帮助！
· 遇到问题请在 Github 上提 issue ，需要帮助请在 Github 上发 discussion ，看到了会回复。除特殊情况外，请不要直接通过其它社交方式联系酪灰！酪灰不是客服，不提供售后服务，并没有那么多的时间来回复私聊。还请谅解！
· 由于 workbox 缓存原因，查看最新效果可能需要
Ctrl+F5强制刷新浏览器缓存噢！
【小贴士】如果您的项目不需要 workbox 的本地缓存，比如有 CDN 的情况下，或者是遇到访问子路径自动跳转主页的情况，可以取消注释
vite.config.ts内的两行代码：
selfDestroying: true,
injectRegister: false,- 载入动画
- 站点简介
- Hitokoto 一言
- 日期及时间
- 实时天气
- 时光进度条
- 音乐播放器
- 移动端适配
- 逐字歌词兼容
如果遇到构建环境或者打包过程出现错误，则可以采用 Github Actions 来进行自动构建
-
在成功
fork仓库后，前往Actions页面，若您是首次开启，则会出现下面的提示，点击开启
-
然后在仓库中进行任意修改后均会触发工作流的运行，在工作流完成后，会在下方生成一个可供下载的压缩包，这就是构建出的静态文件，可自行上传至服务器
-
安装 node.js 环境
node > 24.13.0
npm > 10.15.0
-
然后以 管理员权限 运行
PowerShell终端，并cd到 项目根目录 -
在
终端中输入：
# 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
# 预览
pnpm dev
# 构建
pnpm build构建完成后，静态资源会在
dist目录 中生成，可将dist文件夹下的文件上传至服务器，也可使用Vercel等托管平台一键导入并自动部署
安装及配置 Docker 将不在此处说明，请自行解决
# 构建
docker build -t home .
# 运行
docker run -p 12445:12445 -d home其他部署平台大致相同，在此不做说明
- 点击本仓库右上角的
Fork，复制本仓库到你的GitHub账号 - 复制
/.env.example文件并重命名为/.env（ 重要 ） - 按需修改
/.env文件中的配置 - 点击
Deploy，即可成功部署
在 src/assets/siteLinks.json 中可以自定义网站链接（以指向自己的网站）:
{
"icon": "Blog",
"name": "博客",
"link": "https://blog.your.domain/"
},其中 icon 网站链接的图标可以在 src/components/Links/index.vue 中添加:
// 可前往 https://www.xicons.org 自行挑选并在此处引入
// 此处引入的是 fa 类型
import {
Link,
Blog,
CompactDisc,
Cloud,
Compass,
Book,
Fire,
LaptopCode,
} from "@vicons/fa";
...
// 网站链接图标
const siteIcon = {
Blog,
Cloud,
CompactDisc,
Compass,
Book,
Fire,
LaptopCode,
};在 src/assets/socialLinks.json 中可以自定义社交链接。
天气及地区获取需要 腾讯位置服务 与 高德开放平台 相关 API
- 前往 腾讯位置服务 或 高德开放平台控制台 创建一个
Web 服务类型的Key，并将Key填入.env中对应参数中。 - 注：高德开放平台的 FREE IP定位接口不支持 IPV6，如果遇到高德接口异常，请检查网络环境是否有 IPV6，系统是否使用 IPV6 优先。你也可以在浏览器开发者选项中看到“远程地址”是否为 IPV6 地址。腾讯接口同时支持 IPV4 和 IPV6。
也可自行更换其他方式。
Warning
强烈建议自行注册天气 Token ，它们是免费且稳定的！
内置了三个免费接口，目前仅剩 小米天气 可正常工作。由于这些非公开接口没有 CORS 不允许跨域，必须使用中转。并且拥有较高的速率限制，所以经常失效。如果您希望使用这个接口，记得捐赠酪灰，帮助其承担服务器费用！
本项目采用了
Aplayer音乐播放器，可实现快速自定义歌单 *仅支持 中国大陆地区
请在 .env 文件中更改歌曲相关参数即可实现自定义歌单列表
# 歌曲 API 地址 （强烈建议自行搭建 Meting-Api）
VITE_SONG_API = "https://metingapi.nanorocky.top/"
# 歌曲服务器 ( netease-网易云, tencent-qq音乐 )
VITE_SONG_SERVER = "netease"
VITE_SONG_SERVER_SECOND = "tencent"
# 播放类型 ( song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家 )
VITE_SONG_TYPE = "playlist"
# 播放 ID
VITE_SONG_ID = "3035221869"
VITE_SONG_ID_SECOND = "9518088898"目前已支持设置两个歌单进行合并，如不需要，留空即可。
如果需要使用网易云音乐逐字歌词，请使用 修改版 Meting-Api ！
Warning
这里提供的 api 有较高的速率限制，且不太稳定，强烈建议自行搭建 Meting-API！你也可以赞助酪灰帮助他承担服务费用！阿里嘎多！
注意：提供的 api 可能出现Q音接口抛 401 的情况，并非服务异常，Q音接口需要将项目编译后挂到正常域名并使用 https only，使用正常 443 端口，才能正常工作。
现采用 MiSans and HarmonyOS Sans 字体，采用字体拆分，提升加载速度。
https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap
https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css
可以在 public/images 中修改网站背景。
如果想要添加更多的本地图片作为网站背景，可以将图片重命名 background+数字 的形式，并进行修改：
· 先编辑
src/components/Background/index.vue
// 设置一个默认值，防止在无法加载 JSON 文件时壁纸失效。应该尽量保证壁纸数始终不小于这个默认值
let bgImageCount = 10; // PC 版壁纸
let bgImageCountP = 2; // 移动版壁纸· 再编辑
public/images/config.json
{
"bgImageCount": 10, // PC 版壁纸
"bgImageCountP": 2 // 移动版壁纸
}后续添加或减少壁纸，可直接编辑 config.json ，而无需重新编译项目。但必须确保壁纸数始终大于或等于 index.vue 中的配置。
如需配置默认壁纸选项，请编辑 src/store/index.js
coverType: "0", // 壁纸种类可以在 public/images/icon 中修改网站图标。
· 语音交互区分 预生成 与 实时生成。
· 预生成的语音需要提前生成并放在
public/speechlocal/路径下，替换原有音频。预生成的音频是为固定不变的通知设计的，有更低的语音延迟（推荐使用 CDN 或对音频文件启用客户端缓存）。· 实时生成的语音用于音乐播放器歌名播报，需自行搭建并填写在
.env内。如果也使用 Azure ，您可直接使用AzureSpeechAPI-by-PHP 完成 API 部署。
· 自动播放，逐字开关，语音交互开关 等其它默认设置，请编辑
src/store/index.js，但这些设置仅对编辑后首次打开网页的用户生效，覆盖用户设置需要清除网页数据
