原文鏈接←還有其他的next美化

live2d是這幾年比較火熱的一門技術(shù)点晴，是應(yīng)用于游戲中的一種繪圖渲染粒督，近幾年廣泛應(yīng)用于手游中（作為看板）禽翼。
很意外的捐康，它也很適用于博客中。
雖然本身的功能不大解总，但是作為美化來說還是十分可愛的花枫。

雖然有朋友在研究這項(xiàng)技術(shù)，但由于我本身的畫圖技術(shù)不強(qiáng)敦锌，對于live2d的制作就不講了佳簸，只說如何放上一個live2d颖变。

簡易版

如果對于看板娘的要求不是特別高腥刹，只是需要放在那里賣個萌就行衔峰，建議用簡易版的就ok蛙粘。比較常見于各個博客的看板娘類型。

安裝插件：

npm install --save hexo-helper-live2d

安裝模型（模型的樣式可以參考這里穴肘，把packagename的名字換成自己喜歡的模型名即可）：

npm install packagename

當(dāng)然你也可以用自己制作的模型和網(wǎng)上下載的梢褐，一些詳細(xì)的設(shè)置可以參考作者文檔。

中級版

比起簡易版添加了對話框功能耿眉。

長這樣（↓）

1.jpg

首先下載大佬的github代碼鸣剪，把下載下來的文件更名為live2d，然后放到themes\next\source文件里债鸡。

打開\themes\next\layout下的_layout.swig铛纬，在body標(biāo)簽內(nèi)添加：

<link rel="stylesheet" href="/live2d/css/live2d.css" />
<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="hide-button">隱藏</div>
</div>

<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://soyawww.github.io/'  //此處修改為你的域名
</script>

<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/live2d/model/tia/model.json");  //此處為你是用的模型文件告唆，可以修改
</script>

如要修改模型，修改上面代碼的loadlive2d路徑即可模她。

如要修改點(diǎn)擊時看板娘或者鼠標(biāo)放在某個元素上的對話，打開live2d文件中的message.json進(jìn)行修改侈净。

高級版

1.gif

擁有換裝畜侦、換人夏伊、飛機(jī)大戰(zhàn)小游戲等功能的看板娘（也就是我現(xiàn)在正在用的。）

首先下載大佬的github文件咏连，修改好名字放置于\themes\next\source下（當(dāng)然你也可以選擇直接fork倉庫鲁森，如果你不想下載文件的話就直接跳過這一段吧）歌溉。

打開_layout.swig文件，先在head標(biāo)簽下添加依賴草慧，否則無法正常顯示：

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" >

然后再在footer標(biāo)簽下添加：

<script src="https://soyawww.github.io/live2d/autoload.js"></script>

打開live2d文件下的autoloads.js文件漫谷，修改絕對路徑：

const live2d_path = "/live2d/";

其他的就按照自己的需求修改舔示。

例如waifu.css修改看板的大小和位置电抚，waifu-tips.json修改對話。

screenshot.1.jpg

總之俺祠，更多的內(nèi)容就自己摸索吧锻煌！

~關(guān)于fork倉庫和api

其實(shí)不用下下來文件也可以直接用宋梧，用法是添加在添加依賴后直接添加一行代碼在footer標(biāo)簽捂龄。

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

這個是直接用的大佬的倉庫，你可以選擇把倉庫fork下來倦沧，然后自行修改（如下展融，修改username為你的github名稱）。

<script src="https://cdn.jsdelivr.net/gh/username/live2d-widget/autoload.js"></script>

無論是用fork倉庫的方法還是下載文件扑浸，都是無法改變模型的喝噪，如果想要改變模型，就需要自建api（詳情參考這里）酝惧。

——————————————————————————————
這里是soya
郵箱：1057851022@qq.com
個人博客地址：https://soyawww.github.io
歡迎各位交流探討哦晚唇！