1479 字
7 分钟
简单的Mizuki配置指引
NOTE主要涉及基本解读与番剧改用bgm api,删除本地方式的方法
猜你想看
Waiting for api.github.com...
基本解读
前提概要
配置文件在MizukiMod(项目目录)/src/config.ts,不是根目录那个,一开始我这里就搞错了,所以说说明一下
基本站点设置
const SITE_LANG = "zh_CN"; // 语言代码,例如:'en', 'zh_CN', 'ja' 等。const SITE_TIMEZONE = 8; //设置你的网站时区 from -12 to 12 default in UTC+8export const siteConfig: SiteConfig = {title: "GlassBlog",subtitle: "",siteURL: "https://glasscode.top/", // 请替换为你的站点URL,以斜杠结尾siteStartDate: "2025-07-01", // 站点开始运行日期,用于站点统计组件计算运行天数很简单的一部分,子标题不需要请留空,但不能删去,不然必报错
色相与特色页面
themeColor: {hue: 200, // 主题色的默认色相,范围从 0 到 360。例如:红色:0,青色:200,蓝绿色:250,粉色:345fixed: 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.pngicon: "/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的效果(已投入生产环境)

日后谈
这个项目目前还是较为年轻,因此bug也不少,在cf部署就遇到了不少吞文件的问题,希望可以越做越好吧
部分信息可能已经过时