在網誌加上Live2D看板娘

Why?

  記得以前有看過別人的網誌加上了一個會動的看板娘，就覺得「哎這什麼啊太有味道了」，瀏覽網誌的時候，碰到無聊的段落或是需要思考的段落，游標就可以去逗弄角落的看板娘，很有趣不是嗎？

  於是趁著最近時間很多，心血來潮就在自己的網誌實驗看看。

How?

  在網路找到這位的博客有手把手的教學，於是就跟著教學手把手的做出來。簡單來說，就是把Github裡的兩個專案：live2d-widget(注入html的js)和live2d_api(live2d model相關)clone到網誌的資料夾裡，然後做一些必要的更動。在這裡感謝兩位專案作者的貢獻。

  照著步驟做完後，就會發現──怎麼會跑出ReferenceError: initWidget is not defined啊！對於對javascript完全不懂、網頁前端也是一知半解的我來說，打擊之沉重，可想而知。

  不過幸好還有ChatGPT對吧？就和GPT-4o一起討論、推敲，總算是想出一個workaround。原來，問題是來自initWidget沒有被綁到global的window上，所以在autoload.js裡呼叫initWidget時，不知道它指的就是window.initWidget。在/src/index.ts裡加上下面這行：

(window as any).initWidget = initWidget;

就行了。

  接著又碰到另一個問題：在waifu-tips.js裡用到動態query的方式來取用live2d model，用Hexo部署的話會有問題。於是修改了一下/src/model.ts裡的判斷條件，讓它每次取用live2d model都是透過靜態路徑(${this.cdnPath}model/${target}/index.json)。這就是不用CDN的下場嗎？

  都是一些亂七八糟的做法呢！明明都有GPT-4o可以請教了…因為我的目的只是要正常顯示live2d看板娘，所以一當看到看板娘正常顯示，也顧不得這麼多了，能動就好！

Result

  結果還挺不錯的呢！雖然Kanna只是站在那邊沒有什麼表情，這樣就很滿意了。話又說回來，網誌的功能還這麼陽春、連文章都還沒開始寫，就花了一天時間做這個看板娘，算是不務正業吧？不管啦，這裡是我的空間，我的random space，做無聊事在這裡是被允許的！

  動動你的游標，和角落的看板娘互動看看吧。