Yesterday, I saw my colleague beautify his blog, and I saw that he was doing this, which was very nice to see, so NOW I just have time to do something about it

Install the hexo-Helper-Live2D plugin

Now suppose you have another blog built using hexo, and let’s install the hexo-Helper-Live2D module

Hexo-helper-live2d Official Chinese document

npm install –save hexo-helper-live2d

2. Add a configuration file

Add the following configuration to the _config.yml file in the hexo blog. It is recommended to configure _config.yml in the root directory so that you do not need to change the theme later

live2d:
  enable: true  # Enable/disable
  scriptFrom: local # the default
  pluginRootPath: live2dw/  The root (relative path) of the plug-in on the site
  pluginJsPath: lib/  The script file is relative to the plug-in root directory path
  pluginModelPath: assets/  The model file is relative to the plug-in root directory path
  tagMode: false  Whether to replace only live2D tag tags instead of inserting them into all pages
  debug: false  Debug whether to output logs on the console
  model:
    use: live2d-widget  ## Model file
  display:
    position: right Left right top bottom
    width: 150  # Small width
    height: 300 # Little man height
    hOffset: - 15  # offset to 👇
    vOffset: - 15  # like 👈 offset
  mobile:
    show: true  # Whether to display on the mobile terminal
  react:
    opacity: 0.7  # Model transparency
Copy the code

Modify the model you like

You can find your favorite model here

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
Copy the code

Then use NPM install NPM install –save live2D-widget-model-xxx to install your favorite model. For example, if the author likes koharu, use NPM install NPM install –save Live2d-widget-model-koharu is installed

After installation, we found the live2D-Widget-model-koharu folder under node_modules, Copy this folder and go to the root of our hexo blog (because we added the configuration in _config.yml). Create a new folder called live2d_Models and paste in the file we just copied so that we are 99% done. Finally, open the added configuration file, Find this row

model:
    use: live2d-widget  ## Model file
Copy the code

Copy use back to us in live2d_models model in folder directory name, so that we will finish the modification using hexo d | | hexo deploy to deploy, and then clear the browser cache, open the can be found after we add the dog has been on the screen in the bottom right hand corner looking at you.

Check out my blog xiaobaicai.fun for more