Hexo添加Live2D看板娘最新教程

前言

上次我們搭建了hexo博客,今天來添加一個Live2D看板娘。在網上看了一些教程,不過hexo更新之後更簡單,以前的一些教程有些過時了,所以想寫一篇更新的教程。

介紹

Live2D

Live2D是一種應用於電子遊戲的繪圖渲染技術,由日本Cybernoids公司開發,通過一系列的連續圖像和人物建模來生成一種類似二維圖像的三維模型,換句話說就是2D的素材實現一定程度的3D效果,但只能是一定程度3D,因爲Live 2D人物無法大幅度轉身。

很多知名的動漫都是Live2D遊戲改編的或者反過來的,例如:《我的妹妹不可能有那麼可愛》、《我的朋友很少》、《櫻花莊的寵物女孩》等。
在這裏插入圖片描述
《路人女主的養成方法》中安藝倫也一行人制作的遊戲就是Live2D遊戲,當然,這部輕小說本身也被做成了Live2D遊戲。
在這裏插入圖片描述
ive2d官方網站就是live2d.com,裏面提供了live2d開發和編輯軟件(如Live2D Cubism editor和Live2D Euclideditor),還有開發使用教程等,對相關製作感興趣的可以看看。
更詳細的介紹請看二次元live2d看板娘中的web前端技術

看板娘

看板娘是一種職業和習慣稱呼,也是ACGN次文化中的萌屬性之一。簡而言之就是小店的女服務生,也有“吸引顧客,招攬生意,提高人氣”等作用類似品牌形象代言人的含義。
在這裏插入圖片描述

添加Live2D看板娘

準備工作

檢查博客主目錄下的package.json是否有"hexo-helper-live2d": “^3.0.3”,依賴:
在這裏插入圖片描述
有的話可以先卸載:npm uninstall hexo-helper-live2d

安裝依賴

安裝依賴:
npm install --save hexo-helper-live2d
安裝過程中可能遇到一些依賴性問題,按提示做就行
在這裏插入圖片描述
遇到這種就運行npm audit fix,如果還不成功,會提示你用npm audit fix --force,一般這個時候就成功了。
成功了之後可以看到當前目錄的node_modules/下有個live2d-widget目錄,這是動畫的主配置:
在這裏插入圖片描述
這個時候是沒有模型文件的,所以下一步是下載模型文件

下載model文件

下載模型文件:
模型文件可直接用npm安裝:如下
npm install live2d-widget-model-shizuku
model名字可在live2d-widget-models中找到,也可點擊live2d看板娘模型預覽來選擇你喜歡的模型進行安裝。
安裝完成可以在node_modules/下看到live2d-widget-model-shizuku文件夾
在這裏插入圖片描述

添加live2d看板娘到hexo

配置Hexo的主_config.yml或者使用的主題的_config.yml
添加以下代碼到配置文件中:

## Live2D看板娘
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    #模板目錄,在node_modules裏
    use: live2d-widget-model-shizuku  
  display:
    position: right
    width: 300 
    height: 600
  mobile:
    # 在手機端顯示
    show: false   
  rect:
    opacity:0.7

查看效果

使用hexo g生成文件,使用hexo server即可在本地查看效果:
在這裏插入圖片描述
打開瀏覽器訪問:http://localhost:4000即可看到效果:
在這裏插入圖片描述

發佈

在本地找到滿意的效果後,使用hexo d將其發佈到你的hexo服務器上,即可在外網查看了。可在我的hexo博客預覽,只不過我現在用的github作服務器,訪問速度有點慢。
沒有安裝過hexo的同學,可參見教程hexo最全搭建教程,安裝過程中的一些錯誤我做了記錄,請見使用Hexo搭建博客遇到的問題及解決。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章