Mobile wallpaper 1
1479 字
7 分钟
简单的Mizuki配置指引
2026-01-10
NOTE

主要涉及基本解读与番剧改用bgm api,删除本地方式的方法

猜你想看

matsuzaka-yuki
/
Mizuki
Waiting for api.github.com...
00K
0K
0K
Waiting...

基本解读#

前提概要#

配置文件在MizukiMod(项目目录)/src/config.ts,不是根目录那个,一开始我这里就搞错了,所以说说明一下

基本站点设置#

const SITE_LANG = "zh_CN"; // 语言代码,例如:'en', 'zh_CN', 'ja' 等。
const SITE_TIMEZONE = 8; //设置你的网站时区 from -12 to 12 default in UTC+8
export const siteConfig: SiteConfig = {
title: "GlassBlog",
subtitle: "",
siteURL: "https://glasscode.top/", // 请替换为你的站点URL,以斜杠结尾
siteStartDate: "2025-07-01", // 站点开始运行日期,用于站点统计组件计算运行天数

很简单的一部分,子标题不需要请留空,但不能删去,不然必报错

色相与特色页面#

themeColor: {
hue: 200, // 主题色的默认色相,范围从 0 到 360。例如:红色:0,青色:200,蓝绿色:250,粉色:345
fixed: true, // 对访问者隐藏主题色选择器
},
// 特色页面开关配置(关闭不在使用的页面有助于提升SEO,关闭后直接在顶部导航删除对应的页面就行)
featurePages: {
anime: true, // 番剧页面开关
diary: true, // 日记页面开关
friends: false, // 友链页面开关
projects: false, // 项目页面开关
skills: false, // 技能页面开关
timeline: true, // 时间线页面开关
albums: true, // 相册页面开关
devices: false, // 设备页面开关
},

这个色相看个人喜好,与背景色底色相同可以大幅提升颜值。特色页面其实就目前来说大多比较鸡肋,修改难度也不是那么低,但是番剧页面是强烈推荐的,后续会讲如何改bgm api

各种图片类修改杂烩#

Part1#

// 顶栏标题配置

navbarTitle: {
// 顶栏标题文本
text: "Glassblog",
// 顶栏标题图标路径,默认使用 public/assets/home/home.png
icon: "/assets/home/home.webp",

转webp是为了修复某些奇奇怪怪的兼容性 是顶栏,不是fav

Part2#

banner: {
// 支持单张图片或图片数组,当数组长度 > 1 时自动启用轮播
src: {
desktop: ["/assets/desktop-banner/1.webp"], // 桌面横幅图片
mobile: ["/assets/mobile-banner/1.webp"], // 移动横幅图片
}, // 使用本地横幅图片
src: {
desktop: ["/assets/desktop-banner/1.webp"], // 桌面横幅图片
mobile: ["/assets/mobile-banner/1.webp"], // 移动横幅图片
}, // 使用本地横幅图片

顾名思义修改背景大图,只用单张是为优化考虑(当然我懒),注意改大图时要改两处代码,不要漏改。若启用单张背景图,搭配P3使用

Part3#

// 壁纸模式配置
wallpaperMode: {
// 默认壁纸模式:banner=顶部横幅,fullscreen=全屏壁纸,none=无壁纸
defaultMode: "fullscreen",
// 整体布局方案切换按钮显示设置(默认:"desktop")
// "off" = 不显示
// "mobile" = 仅在移动端显示
// "desktop" = 仅在桌面端显示
// "both" = 在所有设备上显示
showModeSwitchOnMobile: "off",
},

注释太详细了,搭配P3使用

Part4#

favicon: [
// 留空以使用默认 favicon
{
src: "/favicon/favicon.ico", // 图标文件路径
theme: "light", // 可选,指定主题 'light' | 'dark'
sizes: "32x32", // 可选,图标大小
},
],

fav设置,不必多言

顶部菜单栏相关#

export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home,
LinkPreset.Archive,
// 支持自定义导航栏链接,并且支持多级菜单,3.1版本新加
name: "Links",
url: "/links/",
icon: "material-symbols:link",
children: [
{
name: "GitHub",
url: "https://bgithub.xyz/glasscodeNya",
external: true,
icon: "fa6-brands:github",
},
{
name: "Bilibili",
url: "https://space.bilibili.com/483804483",
external: true,
icon: "fa6-brands:bilibili",
},
],
},
{
name: "My",
url: "/content/",
icon: "material-symbols:person",
children: [
{
name: "Anime",
url: "/anime/",
icon: "material-symbols:movie",
},
{
name: "Diary",
url: "/diary/",
icon: "material-symbols:book",
},
{
name: "Gallery",
url: "/albums/",
icon: "material-symbols:photo-library",
},
],
},
{
name: "About",
url: "/content/",
icon: "material-symbols:info",
children: [
{
name: "About",
url: "/about/",
icon: "material-symbols:person",
},
],
},
{
name: "Others",
url: "#",
icon: "material-symbols:more-horiz",
children: [
{
name: "Timeline",
url: "/timeline/",
icon: "material-symbols:timeline",
},
],
},
export const profileConfig: ProfileConfig = {
avatar: "assets/images/avatar.jpg", // 相对于 /src 目录。如果以 '/' 开头,则相对于 /public 目录
name: "GlassCode",
bio: "ACG & Tech",
typewriter: {
enable: true, // 启用个人简介打字机效果
speed: 80, // 打字速度(毫秒)
},
links: [
{
name: "Bilibli",
icon: "fa6-brands:bilibili",
url: "https://space.bilibili.com/483804483",
},
{
name: "GitHub",
icon: "fa6-brands:github",
url: "https://bgithub.xyz/glasscodeNya",
},
],

对应修改你的UID和Gihub主页,而且有些特色功能你禁用后可能会出现菜单栏图片还在的问题,此时删除对应的行即可

樱花飘落效果?#

export const sakuraConfig: SakuraConfig = {
enable: false, // 默认关闭樱花特效
sakuraNum: 10, // 樱花数量
limitTimes: -1, // 樱花越界限制次数,-1为无限循环
size: {
min: 0.5, // 樱花最小尺寸倍数
max: 1.1, // 樱花最大尺寸倍数
},
opacity: {
min: 0.3, // 樱花最小不透明度
max: 0.9, // 樱花最大不透明度
},
speed: {
horizontal: {
min: -1.7, // 水平移动速度最小值
max: -1.2, // 水平移动速度最大值
},
vertical: {
min: 1.5, // 垂直移动速度最小值
max: 2.2, // 垂直移动速度最大值
},
rotation: 0.03, // 旋转速度
fadeSpeed: 0.03, // 消失速度,不应大于最小不透明度
},
zIndex: 100, // 层级,确保樱花在合适的层级显示
};

大概率是本项目较为无用的功能,因为开了后效果其实不怎么样,而且还会加重优化负担

番剧接入bgm API#

先插入如下代码在config文件中
bangumi: {
userId: "xxxxx", // 在此处设置你的Bangumi用户ID,可以设置为 "sai" 测试
},
anime: {
mode: "bangumi", // 番剧页面模式:"bangumi" 使用Bangumi API,"local" 使用本地配置
},

除此之外,还要修改文件MizukiMod/src/data/anime.ts

// 默认返回 Bangumi 数据
//全部删掉后再填入该代码
export const getAnimeList = () => getBangumiData();

这时候pnpm dev,百分百会爆错,此时不要慌,找到对应的文件与行数,删掉那一行保存再启动就成功了 接入bgm的效果(已投入生产环境) 4-1

日后谈#

这个项目目前还是较为年轻,因此bug也不少,在cf部署就遇到了不少吞文件的问题,希望可以越做越好吧

简单的Mizuki配置指引
https://glasscode.top/posts/4/
作者
GlassCode
发布于
2026-01-10
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00