給VSCode和網站領養喵咪一起快樂擼貓-有解無憂

前言

本月技術征文，代碼 “吸貓”，我構思了很久，沒有想出特別好的創意，要不就是創意太大，技術水平不夠無法實作，因此就開始翻各位大佬們的創意，希望能找到點方向，

前天大佬大帥老猿使用 live2d 開發了一個 chrome 擼貓插件，還添加了喵語聊天功能，我觀摩了大佬的博客好久，一是為大佬的創意點贊，二為大佬的技術點贊，太強了，

晚上睡覺前，我就在想，光瀏覽器上有喵咪可不過癮啊，如果能給我的網站和 Vscode 編輯器都添加上喵咪，那豈不是處處有喵咪，快樂加倍，

說干就干，東查西看，終于成功實作了在 Vscode 和網站上添加喵咪，在這里分享給大家，大家一起快樂擼貓，快樂加倍，

首先可以來看看效果:

給 VSCode 添加喵咪

關于 vscode-live2d 插件:

最開始查詢到曾經有大佬封裝過 vscode-live2d 插件，可以實作喵咪效果，但是經我測驗，未能成功，而且安裝后卸載會有些復雜，建議謹慎嘗試，

vscode-live2d 的實作方法是修改 Vscode 的 JavaScript 檔案，因此我就沿著這個思路，順藤摸瓜，終于找到了實作方案，

找到 vscode 安裝目錄

按下列路徑找到 workbench.html 檔案

路徑

resources\app\out\vs\code\electron-browser\workbench

保存一份 workbench.html 檔案

防止有一天厭倦了喵咪，就可以在拷貝回來，恢復最初的 Vscode ，

編輯 workbench.html 檔案

<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;"
    />
  </head>
  <style type="text/css">
    #live2dcanvas {
      border: 0 !important;
    }
  </style>
  <body aria-label="">
    <div id="live2d-widget">
      <canvas
        id="live2dcanvas"
        width="100"
        height="200"
        style="
          position: fixed;
          width: 100px;
          height: 200;
          opacity: 0.8;
          right: 0px;
          bottom: -20px;
          z-index: 99999;
          pointer-events: none;
          border: 0;
        "
      ></canvas>
    </div>
  </body>

  <!-- Init Bootstrap Helpers -->
  <script src="../../../../bootstrap.js"></script>
  <script src="../../../../vs/loader.js"></script>
  <script src="../../../../bootstrap-window.js"></script>

  <!-- Startup via workbench.js -->
  <script src="workbench.js"></script>
  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"
  ></script>
  <script type="text/javascript">
    L2Dwidget.init({
      model: {
        jsonPath:
          "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
      },
      display: {
        superSample: 2,
        width: 100,
        height: 200,
        position: "right",
        hOffset: 0,
        vOffset: 0,
      },
    });
  </script>
</html>

直接使用上面的代碼替換掉原來的代碼，

重啟 VScode

重啟 Vscode ，黑喵咪就出現在螢屏右下角了，閑暇時刻，就可以逗一逗黑喵咪 hijiki，

喵咪更換

live2d 免費提供兩只喵咪，人都是三心二意的，萬一有一天黑喵咪逗膩了，想要白喵咪，那該怎么辦那？

很簡單，只需要替換 jsonPath 中部分路徑即可，黑喵咪的代碼是 hijiki ，白喵咪的代碼是 tororo ，將路徑中的 hijiki 全部替換為 tororo

https://unpkg.com/live2d-widget-model-tororo/assets/tororo.model.json

你看，白喵咪這不就來了嗎？

偷偷告訴大家，live2d 可不只有喵咪啊，還有很多可愛的小改改和帥氣的小哥哥，對應的模型代碼可以參考鏈接: live2d模板庫

后悔藥

假如有一天，我說假如(燃起來了，LPL 加油啊)，厭倦了喵咪，厭倦了帥哥美女，想要舒適干凈的 Vscode，很簡單，把剛才拷貝的那份 workbench.html 扶正，重啟 Vscode，就可以修改成功，

解決 Vscode 警告

因為上述實作方法直接修改 Vscode 的 JavaScript 檔案，重啟 Vscode 后有可能會有 code 檔案錯誤的警告，我們來解決這種情況：

開命令列，安裝 Fix VSCode Checksums，鍵入命令：

code --install-extension lehni.vscode-fix-checksums

打開 Vscode ，快捷鍵 Ctrl + Shift + P 輸入命令：

Fix Checksums:Apply

L2Dwidget 配置

如果對喵咪的大小或者位置不滿意，或者想和喵咪對話等，都可以去調整 L2Dwidget.init ， L2Dwidget.init 有豐富的配置保證讓各位大佬舒舒服服的擼貓，下面我簡略介紹四個屬性:

model：指定 model.json 位置，如果你不喜歡貓也可以在 live2d模板庫下查找自己喜歡的模型編碼，也可以下載到本地，修改 model 路徑引數以及 display 顯示引數即可
display ：控制 live2d 模型在頁面上顯示的位置
mobile : 控制是否在移動端顯示
react : 控制顯示透明度

更詳細的配置，可以查詢L2Dwidget官方檔案

給網站添加喵咪

給普通網站添加喵咪

直接把 workbench.html 里面的內容搬到網頁中去即可，以下為搬運部分:

<div id="live2d-widget">
  <canvas
    id="live2dcanvas"
    width="100"
    height="200"
    style="
      position: fixed;
      width: 100px;
      height: 200;
      opacity: 0.8;
      right: 0px;
      bottom: -20px;
      z-index: 99999;
      pointer-events: none;
      border: 0;
    "
  ></canvas>
</div>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"
></script>
<script type="text/javascript">
  L2Dwidget.init({
    model: {
      jsonPath:
        "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json", // 黑喵咪
    },
    display: {
      superSample: 2,
      width: 100,
      height: 200,
      position: "right",
      hOffset: 0,
      vOffset: 0,
    },
  });
</script>

給 vue 專案添加喵咪

下載素材
素材鏈接: live2d素材庫
將 live2d 檔案放在 public 目錄下
live2d 無需 webpack 編譯，因此可以直接放在 public 下
index.html 引入 L2Dwidget.js

<script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>

app.vue 中添加下面代碼(在 mounted 中添加)

export default {
  mounted() {
    setTimeout(() => {
      const config = {
        pluginRootPath: 'live2dw/',
        pluginJsPath: 'lib/',
        pluginModelPath: 'live2d-widget-model-hijiki/assets/',
        tagMode: false,
        debug: false,
        model: {
          jsonPath:
              '../live2dw/live2d-widget-model-hijiki/assets/hijiki.model.json',
        },
        display: { position: 'right', width: 100, height: 200 },
        mobile: { show: true },
        log: false,
        dev: {
            border: false, //canvas周圍是否顯示邊界
        },
      };
      window.L2Dwidget.init(config);
    });
  },
};

hexo 博客添加喵咪

詳情鏈接: 給hexo博客添加Live2d小人

總結

忙活了半天，最侄訓是成功達成目標，雖然可能有些簡陋，但是阿包還是很滿足，每當寫代碼寫煩了，就可以去逗逗喵咪，其樂無窮啊，

往期精彩文章

牛客最新前端JS筆試百題
抓取牛客最新前端面試題五百道資料分析JS面試熱點
原生JavaScript靈魂拷問(二)，你能全部答對嗎？
原生JavaScript靈魂拷問(一)，你能答上多少？
JavaScript之徹底理解原型與原型鏈
JavaScript之徹底理解EventLoop
《2w字大章 38道面試題》徹底理清JS中this指向問題
參考博客: Vam的金豆之路、在vue專案中添加live2d看板娘(花里胡哨)

后語

伙伴們，如果大家感覺本文對你有一些幫助，給阿包點一個贊👍或者關注?都是對我最大的支持，

另外如果本文章有問題，或者對文章其中一部分不理解，都可以評論區回復我，我們來一起討論，共同學習，一起進步！

如果感覺評論區說不明白，也可以添加我的微信或者 qq 詳細交流，名字都是戰場小包，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357006.html

標籤：其他

上一篇：JavaScript異步（必考三座大三之三) —— 第一集：概念

下一篇：web前端高級JS實戰 - 仿京東商品圖放大鏡效果

給VSCode和網站領養喵咪 一起快樂擼貓

前言