轉(zhuǎn)自我的個人博客https://blognas.hwb0307.com。歡迎關(guān)注！

前言

在《Docker系列 WordPress系列特效》教程中，你應(yīng)該已經(jīng)學會怎么使用一個CDN看板娘，比如：

<!--看板娘-->
<script src="https://fastly.jsdelivr.net/gh/huangwb8/live2d_bensz@latest/front/autoload.js"></script>

如果你足夠細心的話，或許會發(fā)現(xiàn)這個看板娘和我實際使用的看板娘有所不同。我實際使用的看板娘功能集成度更高、效果更干凈：

體積更迷你
內(nèi)置音樂播放器，歌單來源于網(wǎng)易云音樂
右擊看板娘調(diào)出秘密通道，上面是你想放進去的鏈接

如下圖所示，你可以在我博客地址https://blognas.hwb0307.com中預(yù)覽：

實際上，看板娘的原型來自下列大佬優(yōu)秀的開發(fā)工作：

stevenjoezhang/live2d-widget
fghrsh/live2d_api
fghrsh/live2d_demo
summerscar / live2dDemo

開發(fā)音樂播放器的大佬：

APlayer
MetingJS

當然，這里要特別感謝鴉鴉大佬，TA集前人之大成對看板娘進行了再設(shè)計和優(yōu)化，使得看板娘的展示效果進一步升華，所以有了現(xiàn)在這個國服無敵的看板娘！不過鴉鴉的教程有點凌散，并且有些內(nèi)容已經(jīng)略顯陳舊（比如模型聲音無法展示），所以TA的教程已經(jīng)不宜直接搬來使用，只可以作為重要參考資料。

我進行了一些看板娘的復(fù)現(xiàn)和測試工作，讓其效果更具可重復(fù)性。按本文的教程，你可以完全復(fù)現(xiàn)這種效果！小伙伴別搶小魚干就成功移植這個看板娘呢！應(yīng)該是蠻簡單的，因為該踩的坑我已經(jīng)踩過了。我寫得輕巧，很多地方一筆帶過，但每個坑其實都非常沉重！

目前我只在WordPress平臺測試過這個看板娘，但理論上使用相對路徑的任何博客框架應(yīng)該都可以使用它。歡迎使用其它博客框架的小伙伴反饋測試結(jié)果！

是不是有點期待了？我們開始吧！

準備工作

Font Awesome

如果你的主題沒有Font Awesome圖標庫，在footer.php文件中添加此命令：

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

使用argon主題的小伙伴可以不用添加。

插件

這確實是一個大坑，我之前失敗全都是因為我不知道WordPress有這個插件。如果你用寶塔，也許寶塔可以幫你協(xié)調(diào)上傳文件與MYSQL的關(guān)系，你不需要這個插件；如果是用Docker安裝的WordPress，應(yīng)該還是需要的。這個插件叫Add From Server。只有添加Add From Server插件，你通過sftp上傳到wordpress根目錄的文件及其結(jié)構(gòu)才可以通過URL的方式被正確訪問。我估計它是通過操作MYSQL數(shù)據(jù)庫實現(xiàn)的?？傊?，它是個免費插件，安裝就是了。成功后，在媒體庫里會有一個選項：

下載數(shù)據(jù)

我將代碼托管至Github Repo——huangwb8/live2dyy上。整個安裝包有300+M，主要是看板娘模型托管目錄/live2d_api/model/的other包含了大部分體積，源自summerscar/live2dDemo項目。

目前的版本暫時不支持CDN托管，只支持博客本地托管。我覺得修改waifu-tips.js的某些代碼應(yīng)該可以做到實現(xiàn)CDN托管，不過這超出了我的能力范疇。如果有專業(yè)大佬懂得怎么改，歡迎Pull Requests!

其它下載地址：

Gitee: https://gitee.com/huangwb8/live2dyy。估計2022-05-28后方可使用。
百度云盤: https://pan.baidu.com/s/1uD4bHmPnvQ-OuBYE91ziSQ，提取碼：63dr

自定義

目錄結(jié)構(gòu)

在正式使用前，有必要了解關(guān)鍵文件的功能。live2dyy的子目錄類似于：

├── assets
│?? ├── browserstack.svg
│?? └── waifu.css
├── autoload.js (重要)
├── live2d_api (重要)
│?? ├── add
│?? │?? └── index.php
│?? ├── get
│?? │?? └── index.php
│?? ├── model (重要)
│?? │?? ├── other
│?? │?? └── prefer (重要)
│?? ├── model_list.json (重要)
│?? ├── rand
│?? │?? └── index.php
│?? ├── rand_textures
│?? │?? └── index.php
│?? ├── switch
│?? │?? └── index.php
│?? ├── switch_textures
│?? │?? └── index.php
│?? └── tools
│??     ├── jsonCompatible.php
│??     ├── modelList.php
│??     ├── modelTextures.php
│??     └── name-to-lower.php
├── live2d.min.js
├── README.md
├── waifu.css 
├── waifu-tips.js (重要)
└── waifu-tips.json (重要)

autoload.js

主要指定了看板娘的前端和后端目錄。我上傳時，是將live2dyy上傳到wp-content/uploads目錄里面。你上傳到自己的目錄后，要將https://blognas.hwb0307.com/wp-content/uploads/這部分換成你自己的地址。切記切記！

// 你要更換為自己的地址
const live2d_path = "https://blognas.hwb0307.com/wp-content/uploads/live2dyy/";

// 封裝異步加載資源的方法
function loadExternalResource(url, type) {
	return new Promise((resolve, reject) => {
		let tag;

		if (type === "css") {
			tag = document.createElement("link");
			tag.rel = "stylesheet";
			tag.href = url;
		}
		else if (type === "js") {
			tag = document.createElement("script");
			tag.src = url;
		}
		if (tag) {
			tag.onload = () => resolve(url);
			tag.onerror = () => reject(url);
			document.head.appendChild(tag);
		}
	});
}

// 加載 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
            // apiPath這里也要換自己的地址
			apiPath: "https://blognas.hwb0307.com/wp-content/uploads/live2dyy/live2d_api",
		});
	});
}
// initWidget 第一個參數(shù)為 waifu-tips.json 的路徑，第二個參數(shù)為 API 地址
// API 后端可自行搭建，參考 https://github.com/fghrsh/live2d_api
// 初始化看板娘會自動加載指定目錄下的 waifu-tips.json

console.log(`
  く__,.ヘヽ.        /  ,ー? 〉
           ＼ ', !-─‐-i  /  /′
           ／｀?'       L/／｀ヽ?
         /   ／,   /|   ,   ,       ',
       ?   / /-‐/  ｉ  L_ ? ヽ!   i
        ? ? 7?｀?   ?'?-??!ハ|   |
          !,/7 '0'     ′0iソ|    |
          |.從"    _     ,,,, / |./    |
          ?'| i＞.?,,__  _,.イ /   .i   |
            ?'| | / k_７_/?'ヽ,  ?.  |
              | |/i 〈|/   i  ,.? |  i  |
             .|/ /  ｉ：    ?!    ＼  |
              kヽ>??    _,.??    /?!
              !'〈//｀Ｔ′', ＼ ｀'7'?r'
              ?'ヽL__|___i,___,ン?|ノ
                  ?-,/  |___./
                  '?'    !_,.:
`);

waifu-tips.js

鴉鴉主要是在這里添加了很多自定義內(nèi)容。這個文件主要是定義一些看板娘的行為活動，比如鼠標相關(guān)事件。你要改的部分是這里：

$("#live2d").mousedown(function(e) {
    if(e.which==3){
        showMessage("<div style=\"text-align:center\">秘密通道<br/><a href=\"javascript:aplayer_panel_toggle();\">音樂播放器</a><br/><a href=\"https://blognas.hwb0307.com\" target=\"_blank\">主頁</a><br/><a href=\"https://chevereto.hwb0307.com/\" target=\"_blank\">圖床</a><br/><a href=\"https://umamirn2.hwb0307.com/share/QqhvkqI6/blognas/\" target=\"_blank\">流量</a></div>",4000,10);
    }
});

你打開文件，搜索秘密通道可以快速定位。我這里填的是我的信息，如果是你自己的話，當然要換成自己的信息了！比如換一下鏈接啥的。如果你足夠大膽，也可以改動其它內(nèi)容，不過都不建議小白去動了。我很多代碼也只懂個大概，畢竟不了解js，哈哈！

waifu-tips.json

這個文件與普通用戶密切相關(guān)，因為你可以在這里自定義看板娘說話的語句，包括鼠標的mouseover、click等動作。比如定義鼠標左擊時的語句：

"click": [{
		"selector": "#waifu #live2d",
		"text": ["生氣了哦，不要動手動腳的！", "再擼我，我就告訴主人！", "聽我說謝謝你，因為有你，溫暖了四季，謝謝你，感謝有你，世界更美麗～", "你有完沒有？","不要摸我了，信不信我敲碎你的屏幕？", "干嘛動我呀！小心我咬你！", "苯苯快來救我！"]
	}, {
		"selector": ".veditor",
		"text": ["要吐槽些什么呢？", "一定要認真填寫喵～", "有什么想說的嗎？"]
	}, {
		"selector": ".vsubmit",
		"text": ["輸入驗證碼就可以提交評論啦～"]
	}]

我覺得改動這個文件應(yīng)該算最簡單的了，不會改我也沒辦法，哈哈！

live2d_api/model_list.json

非常重要，它用于自定義你想要展示的模型。你可以先在summerscar/live2dDemo預(yù)覽一下效果，然后選擇自己喜歡的模型。

在我的例子中，這個文件的內(nèi)容如下：

{
    "models": [
		"prefer/haru01",
		"prefer/haru02",
		"prefer/tororo",
		"prefer/Bronya",
		"prefer/hijiki",
        "prefer/Potion-Maker/Pio",
        "prefer/Potion-Maker/Tia",
        "prefer/bilibili-live/22",
        "prefer/bilibili-live/33",
        [
            "prefer/ShizukuTalk/shizuku-48",
            "prefer/ShizukuTalk/shizuku-pajama"
        ],
        [
            "prefer/HyperdimensionNeptunia/neptune_classic",
            "prefer/HyperdimensionNeptunia/nepnep",
            "prefer/HyperdimensionNeptunia/neptune_santa",
            "prefer/HyperdimensionNeptunia/nepmaid",
            "prefer/HyperdimensionNeptunia/nepswim",
            "prefer/HyperdimensionNeptunia/noir_classic",
            "prefer/HyperdimensionNeptunia/noir",
            "prefer/HyperdimensionNeptunia/noir_santa",
            "prefer/HyperdimensionNeptunia/noireswim",
            "prefer/HyperdimensionNeptunia/blanc_classic",
            "prefer/HyperdimensionNeptunia/blanc_normal",
            "prefer/HyperdimensionNeptunia/blanc_swimwear",
            "prefer/HyperdimensionNeptunia/vert_classic",
            "prefer/HyperdimensionNeptunia/vert_normal",
            "prefer/HyperdimensionNeptunia/vert_swimwear",
            "prefer/HyperdimensionNeptunia/nepgear",
            "prefer/HyperdimensionNeptunia/nepgear_extra",
            "prefer/HyperdimensionNeptunia/nepgearswim",
            "prefer/HyperdimensionNeptunia/histoire",
            "prefer/HyperdimensionNeptunia/histoirenohover"
        ],
        "prefer/KantaiCollection/murakumo",
		"prefer/haruto"
    ],
    "messages": [
		"苯苯可愛的haru01",
		"苯苯可愛的haru02",
		"苯苯可愛的tororo",
		"苯苯可愛的Bronya",
		"hijiki",
        "來自 Potion Maker 的 Pio 醬 ~",
        "來自 Potion Maker 的 Tia 醬 ~",
        "來自 Bilibili Live 的 22 哦 ~",
        "來自 Bilibili Live 的 33 的說",
        "Shizuku Talk ！這里是 Shizuku ~",
        "Nep! Nep! 超次元游戲：海王星 系列",
        "艦隊これくしょん / 叢雲(yún)(むらくも)",
		"haruto"
    ]
}

我以haru01這個模型為例。在models中，"prefer/haru01"代表我調(diào)用的是prefer子文件夾里的haru01模型，要嚴格與prefer中的模型一一對應(yīng)；與之相對應(yīng)的messages中苯苯可愛的haru01，就是你調(diào)用這個模型的時候的提示語句，可以隨便修改。其它模型是一樣的。

還有一些類似prefer/ShizukuTalk/shizuku-48的復(fù)雜模型。這些復(fù)雜模型是可以換裝的，可以點這個按鈕：

像haru01這種簡單模型則無法換裝。點了之后只會刷新一下模型，外觀沒有變化。

自定義模型

live2dyy已經(jīng)內(nèi)置所有summerscar/live2dDemo的模型，大多數(shù)都在/live2d_api/model/other/里面。放在other里的模型一般不會調(diào)用。

舉個例子，如果你想展示izumi模型，你要按下列步驟操作：

將izumi文件夾剪切至prefer文件夾中
將*.model.json的文件名改為index.json。這個文件的內(nèi)容大致為：

{"version":"Sample 1.0.0","model":"moc/izumi_illust.moc","textures":["moc/izumi_illust.1024/texture_00.png","moc/izumi_illust.1024/texture_01.png","moc/izumi_illust.1024/texture_02.png","moc/izumi_illust.1024/texture_03.png"],"motions":{"idle":[{"file":"mtn/idle_01.mtn"},{"file":"mtn/idle_02.mtn"},{"file":"mtn/idle_03.mtn"},{"file":"mtn/idle_04.mtn"}],"null":[{"file":"mtn/izumi_01.mtn","sound":"snd/izumi_01.mp3"},{"file":"mtn/izumi_02.mtn","sound":"snd/izumi_02.mp3"},{"file":"mtn/izumi_03.mtn","sound":"snd/izumi_03.mp3"},{"file":"mtn/izumi_04.mtn","sound":"snd/izumi_04.mp3"},{"file":"mtn/izumi_05.mtn","sound":"snd/izumi_05.mp3"},{"file":"mtn/izumi_06.mtn","sound":"snd/izumi_06.mp3"},{"file":"mtn/izumi_07.mtn","sound":"snd/izumi_07.mp3"},{"file":"mtn/izumi_08.mtn","sound":"snd/izumi_08.mp3"},{"file":"mtn/izumi_09.mtn","sound":"snd/izumi_09.mp3"},{"file":"mtn/izumi_10.mtn","sound":"snd/izumi_10.mp3"}]},"expressions":[{"name":"f01.exp.json","file":"exp/f01.exp.json"},{"name":"f02.exp.json","file":"exp/f02.exp.json"},{"name":"f03.exp.json","file":"exp/f03.exp.json"},{"name":"f04.exp.json","file":"exp/f04.exp.json"},{"name":"f05.exp.json","file":"exp/f05.exp.json"},{"name":"f06.exp.json","file":"exp/f06.exp.json"},{"name":"f07.exp.json","file":"exp/f07.exp.json"}],"physics":"izumi.physics.json"}

不同模型的命名可能不太一樣，自己仔細甄別。

在live2d_api/model_list.json文件中為izumi模型添加models和messages記錄即可。按其它模型的示例來寫，不懂評論區(qū)留言吧！應(yīng)該也蠻簡單的。

使用方法

上傳live2dyy

按上面自定義的內(nèi)容修改好后，將整個live2dyy目錄通過sftp等方法上傳到WordPress根目錄的wp-content/uploads/文件夾中。如果你是上傳到別的目錄，根據(jù)自己的實際情況修改autoload.js文件中的地址即可。然后通過chown將權(quán)限改成www-data:www-data。

cd <wp-content/uploads所在位置>
sudo chown -R 33:33 ./live2dyy

修改footer.php

進入WordPress后臺，在外觀——主題文件編輯器修改footer.php文件，在</body>前添加以下內(nèi)容并保存。注意要將https://blognas.hwb0307.com/wp-content/uploads/改為自己的地址。

此外，這里有個meting-js id="7376437138"。這個id是網(wǎng)易云播放列表的id，在網(wǎng)頁上登陸網(wǎng)易云音樂才可以看到，你一般是放自己喜歡的列表嘛，這個是我的列表。meting-js這里定義了好多個參數(shù)，比如autoplay、volume、order等。具體參數(shù)的選擇和解釋可以看MetingJS項目。

<!--看板娘-->
<script src="https://blognas.hwb0307.com/wp-content/uploads/live2dyy/autoload.js"></script>
<!--音樂播放器-->
<link rel="stylesheet" >
<script src="https://fastly.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js id="7376437138" server="netease" type="playlist" theme="#339981" fixed="true" preload="auto" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
<!--歌詞相關(guān)-->
<script>
function removelrc(){
	$(".aplayer.aplayer-fixed .aplayer-body").addClass("my-hide");
	//document.querySelector('meting-js').aplayer.lrc.hide();
	$(".aplayer.aplayer-fixed .aplayer-icon-lrc").addClass("aplayer-icon-lrc-inactivity");
	$(".aplayer.aplayer-fixed .aplayer-lrc").addClass("aplayer-lrc-hide");
	document.querySelector('meting-js').aplayer.on('play', function () {
    		document.querySelector('meting-js').aplayer.lrc.show();
    		$(".aplayer.aplayer-fixed .aplayer-icon-lrc").removeClass("aplayer-icon-lrc-inactivity");
	});
	document.querySelector('meting-js').aplayer.on('pause', function () {
    		document.querySelector('meting-js').aplayer.lrc.hide();
    		$(".aplayer.aplayer-fixed .aplayer-icon-lrc").addClass("aplayer-icon-lrc-inactivity");
	});
}
document.querySelector('meting-js').addEventListener("DOMNodeInserted",removelrc);
setTimeout(function() {
	document.querySelector('meting-js').removeEventListener("DOMNodeInserted",removelrc);
	//移除左側(cè)欄切換時的監(jiān)聽事件防止頁面刷新
	if($("#leftbar_tab_catalog_btn").length > 0){
		var el = document.getElementById('leftbar_tab_catalog_btn'),elClone = el.cloneNode(true);
		el.parentNode.replaceChild(elClone, el);
	}
	var el = document.getElementById('leftbar_tab_overview_btn'),elClone = el.cloneNode(true);
	el.parentNode.replaceChild(elClone, el);
	var el = document.getElementById('leftbar_tab_tools_btn'),elClone = el.cloneNode(true);
	el.parentNode.replaceChild(elClone, el);
}, 5000);
</script>

添加額外css

進入WordPress后臺，從自定義中進入額外CSS，添加以下內(nèi)容并保存：

.my-hide{
	display:none !important;
}
.zero-margin-bottom{
	margin-bottom:0 !important;
}

其它

刷新一下網(wǎng)站，更新一下緩存，應(yīng)該就可以成功了。是不是很爽呢？

小結(jié)

雖然我已經(jīng)盡可能將最重要的內(nèi)容和細節(jié)展示出來，但你可能還是知其然不知其所以然。如果你要進一步詳細地了解，應(yīng)該去大佬們的Github倉庫里好好看一下。

參考

養(yǎng)一只博客寵物
Live2D 寵物功能修改|音樂播放器+右鍵秘密通道
stevenjoezhang/live2d-widget
fghrsh/live2d_api
fghrsh/live2d_demo
summerscar / live2dDemo
APlayer
MetingJS

本文使用文章同步助手同步

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Docker系列 WordPress系列國服最強博客看板娘沒有之一

Docker系列 WordPress系列國服最強博客看板娘沒有之一

前言

準備工作

Font Awesome

插件

下載數(shù)據(jù)

自定義

目錄結(jié)構(gòu)

autoload.js

waifu-tips.js

waifu-tips.json

live2d_api/model_list.json

自定義模型

使用方法

上傳live2dyy

修改footer.php

添加額外css

其它

小結(jié)

參考

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Docker系列 WordPress系列 國服最強博客看板娘沒有之一

前言

準備工作

Font Awesome

插件

下載數(shù)據(jù)

自定義

目錄結(jié)構(gòu)

autoload.js

waifu-tips.js

waifu-tips.json

live2d_api/model_list.json

自定義模型

使用方法

上傳live2dyy

修改footer.php

添加額外css

其它

小結(jié)

參考

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Docker系列 WordPress系列國服最強博客看板娘沒有之一