惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
人人都是产品经理
人人都是产品经理
Cisco Talos Blog
Cisco Talos Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
V2EX
博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
WordPress大学
WordPress大学
D
Docker
S
SegmentFault 最新的问题
博客园 - 聂微东
美团技术团队
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
M
MIT News - Artificial intelligence
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
The GitHub Blog
The GitHub Blog
GbyAI
GbyAI
L
LangChain Blog
Vercel News
Vercel News
博客园 - 叶小钗
MongoDB | Blog
MongoDB | Blog
Stack Overflow Blog
Stack Overflow Blog
H
Help Net Security
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
The Cloudflare Blog
Engineering at Meta
Engineering at Meta
T
Threat Research - Cisco Blogs
T
Threatpost
Scott Helme
Scott Helme
T
Tailwind CSS Blog
Latest news
Latest news
Stack Overflow Blog
Stack Overflow Blog
Blog — PlanetScale
Blog — PlanetScale
The Register - Security
The Register - Security
罗磊的独立博客
P
Proofpoint News Feed
腾讯CDC
S
Schneier on Security
雷峰网
雷峰网
A
About on SuperTechFans
T
Tenable Blog
F
Full Disclosure
Cyberwarzone
Cyberwarzone
博客园_首页
有赞技术团队
有赞技术团队
K
Kaspersky official blog

文章列表

macOS Tahoe 如何用自己的视频做动态壁纸(替换 Aerial 方法) Podman Compose 常用命令速查 创建 Swap 文件 Cursor 2025 Hugo 中文阅读时间计算模版 手动重加载不蒜子计数 入坑舞萌 DX 历时两月终抵 w0 与首鸟加 多邻国 600 天连胜 原神五周年纪念 Asuna 成年生日 告别绝区零 站长18周岁啦! 一位动漫迷的追番日志与热情之旅 起飞日志 Reflector 镜像列表更新常用命令与配置文件 个人自用 rsync 文件同步常用命令 历时千日原神,深渊终抵满星 Arch Linux 个人常用命令记录 《三体III:死神永生》 《三体II:黑暗森林》 《千恋*万花》与现代物理学概念奇妙碰撞后产生出的糟糕想法 Minecraft 15 周年骨折价补票入正 记第二次清醒控梦体验 晶蝶终于收集到了x9999上限! 博客成立一周年了! 终于出雾切辣! 让萝莉受孕的糟糕教学 双11剁手铠侠RC20固态体验
网页添加 Live2D 看板娘
Asuna · 2024-04-30 · via

|总字数:441|阅读时长:2分钟|浏览量:|

引入已有的 Web Live2D CDN 服务,为你的站点加入超超超级 Pro Max Plus +++ 可爱的看板娘

使用

将以下 .css.js 文件链接插入到你的网页中即可调戏可爱的 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>

执行 Hexo 二连即可查看效果!

hexo cl; hexo s

源码

本文章所用到的 CDN 服务其源码来源于此处…

GitHub:nova1751/live2d-api

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 定の栈

赞助

  • 微信

    微信

  • 支付宝

    支付宝