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

推荐订阅源

J
Java Code Geeks
S
SegmentFault 最新的问题
V
Visual Studio Blog
人人都是产品经理
人人都是产品经理
阮一峰的网络日志
阮一峰的网络日志
腾讯CDC
Stack Overflow Blog
Stack Overflow Blog
博客园 - 【当耐特】
Recent Announcements
Recent Announcements
I
InfoQ
U
Unit 42
博客园_首页
GbyAI
GbyAI
Hugging Face - Blog
Hugging Face - Blog
罗磊的独立博客
博客园 - 叶小钗
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
D
DataBreaches.Net
aimingoo的专栏
aimingoo的专栏
月光博客
月光博客
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - 聂微东
T
Tailwind CSS Blog
量子位

定の栈

AI 写得出功能,写不好 Dockerfile:Next.js 自托管踩坑记录 多个 AI 一起写代码时,我给它们划的边界 9 个 commit,没有一个人类作者:AI 独自写完一个项目之后 Next.js 渲染模式排查笔记:force-dynamic、hydration 与构建期没有数据库 让 Claude 少写错数据层:Prisma、Drizzle 和几条结构化做法 我的 CLAUDE.md 只有一行:约定文件到底该写多少 同一个月,把主页搬出 Next.js,又把 Hugo 站搬进来 macOS Tahoe 如何用自己的视频做动态壁纸(替换 Aerial 方法) Podman Compose 常用命令速查 创建 Swap 文件 Cursor 2025 Hugo 中文阅读时间计算模版 手动重加载不蒜子计数 入坑舞萌 DX 历时两月终抵 w0 与首鸟加 多邻国 600 天连胜 原神五周年纪念 Asuna 成年生日 告别绝区零 站长18周岁啦! 一位动漫迷的追番日志与热情之旅 起飞日志 Reflector 镜像列表更新常用命令与配置文件 个人自用 rsync 文件同步常用命令 历时千日原神,深渊终抵满星 Arch Linux 个人常用命令记录 《三体III:死神永生》 《三体II:黑暗森林》 《千恋*万花》与现代物理学概念奇妙碰撞后产生出的糟糕想法 Minecraft 15 周年骨折价补票入正 记第二次清醒控梦体验
网页添加 Live2D 看板娘
Asuna · 2024-04-30 · via 定の栈

引入已有的 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 许可协议。转载请注明来源 定の栈

赞助

  • 微信

    微信

  • 支付宝

    支付宝


avatar

Asuna

LINK START!

前往主页