在出去 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 的路徑。

live2d_path

讓我們注意,你必須講整個 repo 的 release 下載下來,而不是單單 autoload.js。否則你不需要改 live2d path
因為他要存在於 source 裏面才可以被訪問

#

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

總瀏覽次數:載入中...更新於

請我喝[茶]~( ̄▽ ̄)~*

ketsuro 微信支付

微信支付

ketsuro 支付寶

支付寶