Adding a Live2D Mascot to a Webpage

Introducing an existing Web Live2D CDN service to add a super-super-super Pro Max Plus +++ cute kanban musume to your site

Usage

Just insert the following .css and .js file links into your webpage, and you can play with the cute Live2D kanban musume!

<link rel="stylesheet" href="https://registry.npmmirror.com/weblive2d/latest/files/waifu.css">
<script async src="https://registry.npmmirror.com/weblive2d/latest/files/js/autoload.js"></script>

Open the config file _config.next.yml of the NexT theme, and uncomment head to enable the custom file configuration option

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl
  head: source/_data/head.njk

Create a new file siteroot/source/_data/head.njk

Open the siteroot/source/_data/head.njk file and paste the following code into it

<link rel="stylesheet" href="https://registry.npmmirror.com/weblive2d/latest/files/waifu.css">
<script async src="https://registry.npmmirror.com/weblive2d/latest/files/js/autoload.js"></script>

Run the Hexo double command and you can see the result!

hexo cl; hexo s

Open the config file _config.butterfly.yml of the Butterfly theme, search for Insert the code to head, and then modify your own configuration options according to the following configuration

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="https://registry.npmmirror.com/weblive2d/latest/files/waifu.css">

  bottom:
    # - <script src="xxxx"></script>
    - <script async src="https://registry.npmmirror.com/weblive2d/latest/files/js/autoload.js"></script>