在出去 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 啦.