1. 来源
本博客自Mizuki主题博客改造而来，原作者是松坂有希；而Mizuki主题，又是从Fuwari主题博客改造而来，原作者是二叉树树。
这两个主题都是采用Astro框架进行构建。
- Mizuki主题
- Fuwari主题
2. 启动
2.1 下载仓库
本博客选用的版本是Mizuki v4.9.5 LTS。推荐使用LTS版本，不要使用master版本。
2.2 安装npm和pnpm
- 安装npm：https://nodejs.org/en ，选择LTS版本下载安装，不需要安装chocolatey
- 安装pnpm
npm install -g pnpm2.3 安装环境依赖
pnpm install2.4 开发、编译与预览
| 命令 | 功能 |
|---|---|
pnpm dev | 启动本地开发服务，运行在localhost:4321站点 |
pnpm build | 编译生产站点至./dist/ |
pnpm preview | 在部署前，预览本地编译后的网站状态 |
3. 个性化配置
3.1 主页名称
修改src/config.ts中SiteConfig配置中的title和subtitle内容，对应网站主页的标题和副标题。
3.2 主题色
修改src/config.ts中SiteConfig配置中的themeColor内容，调整网站的主题色。
主题颜色对应的是hue值，选取范围为0~360，如：红色=0，青色=200，蓝绿色=250，粉色=345等。
3.3 Banner壁纸
配置修改
修改src/config.ts中SiteConfig配置中的banner内容，可以修改网站的banner信息。
-
电脑端：修改
src中的desktop信息，自定义图像路径，即可修改电脑端图像内容 -
手机端：修改
src中的mobile信息，自定义图像路径，即可修改手机端图像内容
轮播功能
-
功能开关：修改
carousel中的enable信息，可以启动或关闭壁纸轮播功能-
开启：按轮播间隔播放图片
-
关闭：随机显示一张图片
-
-
轮播间隔：修改
carousel中的interval信息，可以修改banner图像的轮播间隔时间，单位为秒
高度调整
修改 src/constants/constants.ts 中的BANNER_HEIGHT、BANNER_HEIGHT_EXTEND变量的值，可以控制首页壁纸的高度。
MAIN_PANEL_OVERLAPS_BANNER_HEIGHT为波浪块的位置，可在调试时作适配性地调整。
BANNER_HEIGHT为每一页的导航栏到正文的距离BANNER_HEIGHT_EXTEND为首页的导航栏到正文额外追加的距离：- 若值为0，则每一页导航栏到正文的距离一致，均为
BANNER_HEIGHT - 若值不为0，则首页的壁纸高度将更高，但其他页的壁纸高度保持不变
- 若值为0，则每一页导航栏到正文的距离一致，均为
推荐方案一
BANNER_HEIGHT= 25，BANNER_HEIGHT_EXTEN= 0，MAIN_PANEL_OVERLAPS_BANNER_HEIGHT= 25- 特点：
- 每一页导航栏到正文的距离一致，结构整齐
- 首页壁纸只能不完整地显示
推荐方案二
BANNER_HEIGHT= 25，BANNER_HEIGHT_EXTEND= 80，MAIN_PANEL_OVERLAPS_BANNER_HEIGHT= 25- 特点：
- 首页壁纸全屏显示
- 其余页导航栏到正文的距离一致
3.4 Banner标题
修改src/config.ts中SiteConfig配置中的banner内容，可以修改网站的banner信息。
-
功能开关：修改
homeText中的enable信息，可以启动或关闭标题内容 -
主标题：修改
homeText中的title信息，可以修改Banner标题内容 -
副标题：修改
homeText中的subtitle信息，可以修改Banner副标题内容- 打字机效果：修改
typewriter信息
- 打字机效果：修改
3.5 头像、名称、介绍、网站
修改src/config.ts中ProfileConfig的内容，可以修改个人资料信息。
- 头像：通过修改
avatar信息，设置自定义头像- 头像图片地址：
src/assets/images/avatar.jpg
- 头像图片地址：
- 名称：通过修改
name信息，设置个人名称 - 介绍：通过修改
bio信息，设置个人介绍的内容 - 网站：通过修改
links信息，修改个人网站的内容name：网站名称icon：网站图标url：网站地址
3.6 全屏壁纸
配置修改
修改src/config.ts中FullscreenWallpaperConfig的信息，可以设定网站的全屏壁纸图片。
-
电脑端：修改
src中的desktop信息，自定义图像路径，可以修改电脑端图像内容 -
手机端：修改
src中的mobile信息，自定义图像路径，可以修改手机端图像内容 -
功能开关：
-
banner模式为true，启用Banner壁纸轮播 -
banner模式为false，启用全屏壁纸
-
banner模式为false，不启用全屏壁纸，全屏壁纸为空白状态
-
轮播功能
- 功能开关：修改
carousel中的enable信息，可以启动或关闭壁纸轮播功能-
开启：按轮播间隔播放图片
-
关闭：显示最后一张图片
-
- 轮播间隔：修改
carousel中的interval信息，可以修改banner图像的轮播间隔时间，单位为秒
3.7 公告
-
如需使用，修改
src/config.ts中AnnouncementConfig的内容，即可修改公告内容。title：公告标题content：公告内容link：公告链接
-
如不使用，则将
sidebarLayoutConfig的components列表中的announcement组件的enable字段设置为false，即可关闭公告模块。
3.8 导航栏
修改src/config.ts中NavBarConfig的信息，可以修改网站的导航栏信息。
既可以直接使用预设的导航内容，也可以使用自定义导航栏链接：以json格式编写，支持多级菜单形式。
预设导航内容一览如下：
Home：主页Archive：文章Diary：日记- 在
src/pages/diary.astro中编辑日记内容
- 在
Albums：相册- 在
public/images/albums中生成相册文件夹，更新相册内容
- 在
Anime：追番- 在
src/pages/anime.astro中编辑追番内容 - 番剧封面地址：
src/assets/anime
- 在
Game：游戏- 在
src/pages/game.astro中编辑游戏内容 - 游戏封面地址：
src/assets/game
- 在
Friends：友链- 保留
src/content/spec/friends.md的空文档 - 在
src/pages/friends.astro中编辑友链信息
- 保留
About：关于- 在
src/content/spec/about.md中编辑关于内容
- 在
Projects：项目在src/data/projects.ts中编辑项目内容
Skills：技能在src/data/skill.ts中编辑技能内容
Timeline：时间线在src/data/timeline.ts中编辑时间线内容
3.9 樱花特效
修改src/config.ts中SakuraConfig的信息，可以设定网站的樱花特效。
根据个人喜好，进行功能启动或关闭和参数微调。
3.10 看板娘
外部配置修改
修改src/config.ts中pioConfig的信息，可以修改看板娘信息。
models：选取看板娘模型，使用的是pio方案，可参考：给你的博客增加动态看板娘position：看板娘的位置，左边或者右边width和height：看板娘的高度和宽度mode：看板娘能否拖拽，fixed为固定，draggable为可以拖拽
内部配置修改
修改public/pio/static/pio.css中的信息，可以对看板娘做一些更深层的修改。
- 注释
pio-action的相关字段，可以关闭看板娘的动作响应 - 将
.pio-dialog中添加text-align: center;，可以让看板娘的字幕居中显示 - 将
.pio-dialog.active的visibility属性设为hidden，可以关闭看板娘的字幕显示
3.11 音乐组件
修改src\components\widget\MusicPlayer.svelte中的信息，即可修改音乐组件的功能。
在线音乐模式
- 将
musicPlayerConfig.mode的值设为meting - 设置
meting_api的相关参数，即可使用在线音乐功能，支持网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
本地音乐模式
- 将
musicPlayerConfig.mode的值设为local - 修改
localPlaylist的信息，填入本地音乐的音乐文件路径、专辑图像路径及艺术家名称，即可进行播放。
