此方法使用了 jiangweifang 大佬製作的 WordPress Live 2D 插件和 imuncle 大佬整理的模型文件,在此致敬。

現在有越來越多的站長給他們的博客添加了Live2d看板娘。藉助於 jiangweifang 大佬製作的 WordPress Live 2D 插件,給博客添加一個看板娘這項工作已經變得十分簡單,繁雜的前端代碼只需要通過可視化的操作就可以配置,我們唯一要做的就是找好鐘意的看板娘模型便是。

安裝 WordPress 上的 Live 2D 插件

首先當然要安裝好插件,進入博客的後端,依次點擊 插件 - 安裝插件,搜索 Live 2D ,點擊 現在安裝 即可。

隨後啟用插件,便可在 設置 中找到 Live 2D 設置 了。

一般情況下,不需經過任何設置,刷新後,博客即可出現 Live2d 看板娘。

尋找 moc3 模型

得益於眾多大佬的不懈努力,只要善用搜索引擎,找到一個可用的 moc3 模型已經不再困難。在下博客的 moc3 模型來自於 imuncle大佬整理的碧藍航線 Live2d,項目地址在這裡

我們直奔 live2d_3/model/Azue Lane(JP),就可以看到一眾模型文件夾,可以從文件夾名字中的拼音得知她們都是誰。

在此之前,可以先訪問演示站來預覽一下模型是否中意。

找到自己想添加的模型之後,自然是要把她下載下來了,然而把整個倉庫克隆下來可能有點僵硬,可以使用 GitZip 這個瀏覽器插件把特定的模型文件夾下載下來,關於 GitZip 的具體操作這裡就不再過多贅述了,其官網有很直白的演示。

得到了模型文件夾之後,我們需要把它上傳到伺服器的網站的任意目錄之下,隨後記下文件夾目錄中的 XXX.model3.json 的路徑。

配置 Live 2D 插件的設置

打開博客後端的設置 - Live 2D設置,在 模型 API 處填入 XXX.model3.json 的路徑,一般格式為:

https://yourwebsite.url/path/to/XXX.model3.json

請將 yourwebsite.urlpath/to 改成自己的域名和相應的文件路徑。

隨後打開模型文件夾目錄下的 XXX.model3.json 文件,看到 "Motions" 這一行,下面有很多諸如 "motions/complete.motion3.json" 之類的存放動作文件的地址,我們需要把這一動作文件的文件名(不包括擴展名)填入 Live 2D 設置中的 moc3模型自定義動作 當中,例如 "touch_head.motion3.json" 請在輸入框中輸入 touch_head

點擊 保存更改,刷新博客後,不出意外 moc3 模型的看板娘就已經顯示在博客上了,但是 moc3 模型的看板娘搭配該插件顯示的時候都會比較小,我們只需要搭配微調 模型縮放倍數看板娘樣式設置 中的 看板娘大小 等設置即可。

之後的所有基本操作都可以在插件的設置中完成,由於該插件是基於 fghrsh 大佬的項目 打造的,因此該項目所能實現的設置在該插件的設置中都能實現。

當一切配置完成,盡情享受博客的看板娘吧!

其他

Live 2D 插件中 高級設置 是有關看板娘文字框中的消息設置,這一部分設置做出改動並保存後,需要清除博客的緩存後重新訪問才能看到效果。


封面來源:カンセンたちの休日 | ひみつ #pixiv https://www.pixiv.net/artworks/79225451