在出去 hexo live2d 的世界外， 我們還有一個神奇的 live2d widgets 可以使用。當然要做的步驟就多不少了。但相對的，他的功能也更多地多樣化。

# 安裝

如果我是懶人，最簡單的方法就是去 GitHub 的 readme 上獲取即食罐頭 <script src="https://fastly.jsdelivr.net/npm/live2d-widgets@0/autoload.js"></script> , 然後放到網頁裏。

當然你會發現 hexo 好像沒得隨便給你注入 html，此時 shokax 提供的注入器就有了大用。

# 注入器

根據遠古的文檔，我們可以得知 hexo 能用這個方法注入 html。

hexo.extend.filter.register("theme_inject", function (injects) {

    // 此处放置注入代码

  });

於是我嘗試性質的使用了，然而直接注入失敗了。在這裏讓我們跳過各種排錯過程，跳到答案。實際上，他只是給了一個位置注入，但實際的注入代碼，還需要仰賴 hexo 提供的注入器。

注入器的使用方法很簡單，只需要 register 了注入點，注入内容，以及注入位置。

# 注入點

shokax 提供了不少的注入點。截至 v0.4.20，你能在 repo 的 /script/plugin/lib/inject-point.ts 裏面找到具體注入點如下:

export default {

 views: [

   'head',

   'sidebar',

   'rightNav',

   'postMeta',

   'postBodyEnd',

   'footer',

   'bodyEnd',

   'comment',

   'status'

 ],

 styles: [

   'variable',

   'mixin',

   'style'

 ]

}

# 注入内容

注入内容請填入 autoload.js 的路徑， 如果你不想自定義可以用 readme 提供的文件；不然的話就要自建 l2dapi 的後端然後修改 autoload.js。 具體方法會稍後説明。

# 注入位置

如果要的話可以看 hexo 文檔，簡單説我們這邊需要把代碼放到全部 page，所以用 default 。

# 參考答案

如果我是懶人，停在這裏就夠了。

hexo.extend.filter.register("theme_inject", function (injects) {

   hexo.extend.injector.register(

       "head",

       "<script src=\"https://fastly.jsdelivr.net/npm/live2d-widgets@0/autoload.js"></script>", 

       "default",

       );

 });

# 自建 api

要自建 api，加入自己喜歡的老婆可以接著看下去。首先，請去 l2d widget 的 repo 拿一份 release，並放到 hexo 根目錄底下的 source 裏。

之後你需要爲他去一個名字，e.g. l2d 這個樣子。 如此，你就可以透過 <blog的網址>/l2d/autoload.js 取得關鍵的調味料。

# API 建立

要搞 api, 首先我們需要 api 的代碼，下載下來之後你可以透過任何方法讓他可以訪問。博主的做法是利用 php 加 apache 的 docker image, 把整套 api 文件放到 /www/html 裏面，接著用 caddy 轉發 api 後面的東西。

#

接著我們需要塞入自定義的東西，如果做到這一步，先檢查一下 autoload 跟 api 可不可以訪問吧！

# 使用自己的 api 吧！

接著讓我們回到 autoload.js 裏面，把 api path 改成自己 api 的設置路徑，接著把 live2d path 改成訪問 autoload.js 的路徑。

#

如果這步也成功了，剩下的就是定義自己的模型，可以將模型加入到 api 的 model 裏面，然後在 model_list.json 加入他。接著就可以享用你的 l2d 啦.