Suck the cat with code! This paper is participating in[Cat Essay Campaign].

preface

For this month’s technical essay, the code “draw cat”, I have been thinking about it for a long time, but have not come up with a particularly good idea, or the idea is too big, the technical level is not enough to achieve. Therefore began to turn the ideas of each big man, hoping to find some direction.

The day before yesterday, Live2D created a Chrome cat stroking plugin and added the function of cat chat. I have been watching big guy’s blog for a long time, one is to praise big guy’s creativity, two is to praise big guy’s technology, too strong.

Before I went to bed at night, I thought, just having cats on my browser is not enough. If I could add cats to my website and Vscode editor, it would be more fun to have cats everywhere.

Say dry dry, east check west look, finally successfully realized in Vscode and website to add meow, here to share with you, everyone happy cat stroking, happy double.

Let’s take a look at the effect:

Add a cat to VSCode

About vscode-Live2D plug-in: AT the beginning, I found that there was a big man who encapsulated vscode-Live2D plug-in, which could achieve meow effect. However, after my test, IT failed. Besides, it would be complicated to uninstall after installation, so I suggest caution.

Vscode-live2d is implemented by modifying the JavaScript file of VScode. So I went along with it, and I finally found a solution.

Find the vscode installation directory

Locate the workbench.html file by following the path below

The path

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

Save a workbench.html file

In case one day you get tired of meow, you can copy it back and restore the original Vscode.

Edit the workbench.html file

<! -- Copyright (C) Microsoft Corporation. All rights reserved. -->
<! DOCTYPEhtml>
<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/[email protected]/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>

Copy the code

Replace the original code directly with the above code.

Restart VScode

Restart Vscode and the black cat will appear in the bottom right corner of the screen. You can play with the black cat hijiki in your spare time.

Meow microphones to replace

Live2d provides two cats for free, people are half-hearted, in case one day black cat gets bored and wants white cat, what should I do then?

Simple, just replace some of the paths in jsonPath, black cat’s code is hijiki, white cat’s code is Tororo, and replace all hijiki in the path with Tororo

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

Look, here comes the white cat.

To tell you the secret, Live2D is not just a cat, there are many cute small changes and handsome little brother, the corresponding model code can refer to the link: Live2D template library

Regret medicine

If one day, I say if (lit up, LPL come on!), tired of cats, tired of handsome men and women, want comfortable clean Vscode, very simple, just copy that workbench. HTML right, restart Vscode, you can modify successful.

Resolve Vscode warnings

Because the above implementation method directly changes the JavaScript file of Vscode, there may be a warning of code file error after restarting Vscode. Let’s solve this situation:

  1. Open command line, installFix VSCode Checksums, type the command:
code --install-extension lehni.vscode-fix-checksums
Copy the code
  1. Open theVscodeShortcuts,Ctrl + Shift + PEnter the command:
Fix Checksums:Apply
Copy the code

L2Dwidget configuration

L2dwidget. init l2DWidget. init has a lot of configuration to make it easy for you if you are not happy with your cat’s size or position, or if you want to talk to your cat. I’ll briefly introduce four attributes:

  • model: specifymodel.jsonLocation, if you don’t like cats can also be inLive2d template libraryFind your favorite model code, you can also download to the local, modifymodelPath parameters anddisplayJust display the parameters
  • displayControl:live2dThe position of the model displayed on the page
  • mobile: Controls whether to display on the mobile terminal
  • react: Controls display transparency

For more detailed configuration, consult the L2Dwidget official documentation

Add a cat to your website

Add a cat to a normal website

Move the contents of workbench.html directly to the web page.

<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/[email protected]/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"./ / black meow microphones
    },
    display: {
      superSample: 2.width: 100.height: 200.position: "right".hOffset: 0.vOffset: 0,}});</script>
Copy the code

Add cat to vUE project

  1. Download the material

Link to footage: Live2D footage library

  1. willlive2dFiles inpublicdirectory

Live2d does not require Webpack compilation, so it can be placed directly under public

  1. index.htmlThe introduction ofL2Dwidget.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js?_=1557308476616"></script>
Copy the code
  1. app.vueAdd the following code (inmountedAdd)
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.// Whether to display boundaries around canvas}};window.L2Dwidget.init(config); }); }};Copy the code

Hexo blog adds cat

Add Live2d people to Hexo blog

conclusion

Busy for a long time, finally succeeded in achieving the goal, although it may be a little rough, but ah Bao is still very satisfied. Whenever I get tired of writing code, I can play with my cat. It’s fun.

Past wonderful articles

  • Cow guest latest front-end JS written test 100 questions
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Native JavaScript soul torture (2), can you answer all correctly?
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • Reference blog: The Golden Bean Road of Vam, adding Live2D Kanban niang to vUE project

After the language

Guys, if you find this article helpful, give a like to 👍 or follow ➕ to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!

If you feel confused in the comments section, you can also add my wechat or QQ for detailed communication, and the name is battlefield small bag.