基于 Oh-My-Live2d 的看板娘配置 - 杂谈 | CircleCoder = 碼農書架 = 仰望星空

近日在装修站点时发现了好玩的 “看板娘 “，尽管我不混迹二次元世界，但看板娘的动效实在让我眼馋，遂决定将它带回家。

# 传统插件：hexo-helper-live2d

使用 npm 安装：

npm install hexo-helper-live2d

安装后博客会使用库中自带的看板娘模型，并且只有最简单的效果

若想使用更高级的动效、换装等功能，则需要替换为自定义的模型

但是 hexo-helper-live2d 几年前便停止维护，使用自定义的看板娘时只能使用 .moc 版本的模型，不兼容 .moc3 版本，因此笔者尝试后发现页面无法加载，遂放弃。

# 时代新秀：oh-my-live2d

该插件于 2024 年发布，并且一直在积极维护，支持所有版本的 live2d 模型，并且更简单、更方便自定义。

官网上有插件介绍和 hexo 配置的简单教程，但是官方代码有点问题，无法正确加载资源

# 安装

npm install hexo-oh-my-live2d

# 配置

在博客根目录的 config.yml 末尾引入以下代码：

	OhMyLive2d:
	enable: true
	CDN: https://unpkg.com/oh-my-live2d
	option:
	dockedPosition: 'left' # 模型停靠位置默认值: 'right' 可选值: 'left' \| 'right'
	# menus: \|
	# (currentModel) =>{
	# console.log(currentModel);
	# }

	# menus:
	# items: \|
	# (defaultItems)=>{
	# return [
	# ...defaultItems,
	# {
	# id: 'github',
	# icon: 'github-fill',
	# title: '我的github',
	# onClick: ()=>window.open('https://github.com/hacxy')
	# }
	# ]
	# }

	# items:
	# - id: 'github'
	# icon: 'github-fill'
	# title: ' 我的 github'
	# onClick: ()=>window.open('https://github.com/hacxy')

	mobileDisplay: true # 是否在移动端显示
	models:
	- path: https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
	mobilePosition: [0, 23] # 移动端时模型在舞台中的位置。默认值: [0,0] [横坐标，纵坐标]
	mobileScale: 0.1 # 移动端时模型的缩放比例默认值: 0.1
	mobileStageStyle: # 移动端时舞台的样式
	width: 180
	height: 250
	motionPreloadStrategy: IDLE # 动作预加载策略默认值: IDLE 可选值: ALL \| IDLE \| NONE
	position: [0, 30] # 模型在舞台中的位置。默认值: [0,0] [横坐标，纵坐标]
	scale: 0.18 # 模型的缩放比例默认值: 0.1
	# showHitAreaFrames: false # 是否显示点击区域默认值: false
	stageStyle:
	width: 250
	height: 250
	- path: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json'
	scale: 0.12
	position: [0, 0]
	stageStyle:
	width: 250
	mobileScale: 0.08
	mobilePosition: [0, 0]
	mobileStageStyle: # 移动端时舞台的样式
	width: 180
	- path: 'https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json'
	scale: 0.12
	position: [0, 0]
	mobileScale: 0.08
	mobilePosition: [0, 0]
	mobileStageStyle: # 移动端时舞台的样式
	width: 180
	stageStyle:
	width: 250
	parentElement: document.body #为组件提供一个父元素，如果未指定则默认挂载到 body 中
	primaryColor: 'var(--btn-bg)' # 主题色支持变量
	sayHello: false # 是否在初始化阶段打印项目信息
	tips:
	style:
	width: 230
	height: 120
	left: calc(50% - 20px)
	top: -100px
	mobileStyle:
	width: 180
	height: 80
	left: calc(50% - 30px)
	top: -100px
	idleTips:
	interval: 15000
	# message:
	# - 你好呀～
	# - 欢迎来到我的小站～
	# 自定义提示语需要引入 axios 库，也可以使用其他方法
	message: \|
	function(){
	return axios.get('https://v1.hitokoto.cn?c=i')
	.then(function (response) {
	return response.data.hitokoto ;
	})
	.catch(function (error) {
	console.error(error);
	});
	}
	# wordTheDay: true
	# 自定义 https://v1.hitokoto.cn 数据
	# wordTheDay: \|
	# function(wordTheDayData){
	# return `${wordTheDayData.hitokoto} by.${wordTheDayData.from}`;
	# }
	# 具体方法请看: https://oml2d.com/guide/loadModel.html#oml2d-% E5% AE%9E% E4% BE%8B
	# then: \|
	# oml2d.onStageSlideIn(() => {
	# oml2d.tipsMessage('Oh My Live2D !!!', 3000, 10);
	# });

然后保存、部署、发布，便可以实现默认的看板娘的效果，也是非常美观的。

在调整模型的参数时，如果毫无前端知识的话很容易出错。需要知晓 stageStyle （舞台）相当于背景框，而模型的坐标则是相对于背景框左上角的偏移量。

# 自定义模型

如果想使用自己喜欢的看板娘模型，只需要在 models 里新增一块即可。

	- path: 'http://unpkg.com/cat-white@1.0.0/model.json'
	scale: 0.12
	position: [0, 10]
	mobileScale: 0.08
	mobilePosition: [0, 0]
	mobileStageStyle: # 移动端时舞台的样式
	width: 180
	stageStyle:
	width: 250

如果想给一个模型增添不同服装（其实也是模型），将 path 改为列表即可

	- path: ['https://unpkg.com/cat-white@1.0.0/model.json',
	'https://unpkg.com/cat-black@1.0.0/model.json']
	scale: 0.12
	position: [0, 10]
	mobileScale: 0.08
	mobilePosition: [0, 0]
	mobileStageStyle: # 移动端时舞台的样式
	width: 180
	stageStyle:
	width: 250

模型我是从下面的仓库下载的，同时我所使用的模型也已上传至我的仓库。下载方式见后文

live2d-models

为OhMyLive2D提供的高质量模型仓库

CircleCoder05

我的模型

模型的 path：

可以使用本地路径（不推荐）
比如下载仓库中的 cat-white 模型，解压后置于根目录的 source 目录中， path 改为如下路径即可：
```
/cat-white/model.json
```
使用 unpkg 代理，具体方式见下文

# 模型下载

将 github 上的文件下载到本地时，会遇到一个问题：只能克隆整个仓库或者下载单一文件

对此推荐一个方便的浏览器插件：GitZip 。以 Edge 浏览器为例，在右上角的管理扩展中下载该插件即可

之后再打开 github 仓库，就会发现每个文件和目录的左侧会出现勾选框，用来选中打包下载

如果遇到下载速率限制（限制 60 次 /h），可以通过点击 GitZip 扩展图标，输入 GitHub API 访问令牌，便可提升至 5000 次 /h 。如果忘了访问令牌如何获取的话，网上教程很多，不再赘述

# 关于 CDN 代理

由于 jsdeliver 被墙了，我们采用 unpkg

unpkg 是一个专门为 npm 包设计的 CDN 代理服务。它的核心功能是 自动从 npm 仓库获取文件，并通过全球分布式节点加速分发，使我们能直接通过 URL 引用 npm 包中的静态资源

# 注册 npm

进入官网注册即可

npm 官网

Node Package Manager

# 整理项目结构

以下载的 cat-white 模型为例，项目结构如下

	├─cat-white
	│ ├─moc
	│ └─mtn
	\| └─model.json
	\| └─tororo.pose.json
	\| └─whitecat.pil.png
	\| └─shitecat.png

这便是我们接下来进行操作的根目录

# 初始化 package.json

npm init

然后按照终端给出的提示信息进行填写。核心字段示例：

	{
	"name": "cat-white", // 包名（确保在 npm 上唯一）
	"version": "1.0.0",
	"description": "Live2D model for cat-white",
	"entry point": "model.json", // 主入口文件
	"keywords": "cat-white"
	"author": "YourName",
	"license": "MIT"
	}

完成后将会生成 package.json 文件

# 登录 npm 并发布

如果你使用的是 npm 镜像源，由于镜像源仅支持包的下载，你需要先切回 npm 官方源

npm config set registry https://registry.npmjs.org/

然后登录并发布

npm login

npm publish

成功后会显示

+ cat-white@1.0.0

# 通过 CDN 访问

发布成功后， path 使用如下方式直接引用即可

	# https://unpkg.com/ 包名 /json 文件路径
	https://unpkg.com/cat-white/model.json

hexo