WebページにLive2D看板娘を追加

既存の Web Live2D CDN サービスを導入して、あなたのサイトに超超超 Pro Max Plus +++ 可愛い看板娘を追加しましょう

使い方

以下の .css と .js ファイルのリンクをあなたの Web ページに挿入するだけで、可愛い Live2D 看板娘をからかえるようになります！

<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>

NexT テーマの設定ファイル _config.next.yml に進み、head のコメントを解除してカスタムファイル設定項目を有効にします

# 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

新しいファイル siteroot/source/_data/head.njk を作成します

siteroot/source/_data/head.njk ファイル内に進み、以下のコードを貼り付けます

<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>

Hexo を二連続で実行すれば効果を確認できます！

hexo cl; hexo s

Butterfly テーマの設定ファイル _config.butterfly.yml に進み、Insert the code to head を検索してから以下の設定を参照して自分の設定項目を変更すれば完了です

# 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>