首页 教程 博客

# 项目地址

  • 你可以使用 github 上的一个叫 live2d-widget 的开源项目，可以在 demo.html 中查看效果
  • 也可以使用被我魔改后的版本：live2d-web，具体效果看这个博客的左下角，用法看 github
  • 下面简单说一下 live2d-widget 的使用用法，live2d-web 的用法类同

# 简单引用

  • 因为在 Shoka 主题下没有找到可以引入第三方插件的配置，所以我选择了直接修改 themes\shoka\layout\_partials\layout.njk ，在下面引入
<script src="https://cnd.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

# 调整看板娘

  • 你可以选择将项目文件全部导入到博客中
  • 也可以 Fork 一份到自己的 github 仓库里，修改通过 CDN 方式加载，这里说一下这种方法

# CDN 加载

  • 把 Fork 下来的仓库克隆到自己的本地修改，每次修改完毕创建一个新标签，比如 1.0.0 , 1.0.1 这样，然和代码一起推送到远程服务器
  • 修改脚本路径为 https://cdn.jsdelivr.net/gh/你github的名字/项目名@latest/autoload.js ，比如：
<script src="https://cdn.jsdelivr.net/gh/GardenHamster/live2d-widget@latest/autoload.js"></script>

# jsdelivr 缓存

  • jsdelivr.net 只会缓存你第一次提交的版本，后续修改后你需要手动访问 https://purge.jsdelivr.net/gh/你github的名字/项目名@latest/文件名 的方式对其进行刷新
  • 访问以后会返回一段这样的 json
{
  "id": "NfF3A42TzNhDiFJy",
  "status": "finished",
  "timestamp": "2022-12-02T18:49:16.998Z",
  "paths": {
    "/gh/GardenHamster/live2d-widget@latest/waifu.css": {
      "throttled": false,
      "providers": {
        "CF": true,
        "FY": true
      }
    }
  }
}
  • 例如我需要刷新的项目文件路径如下
https://purge.jsdelivr.net/gh/GardenHamster/live2d-widget@latest/waifu.css
https://purge.jsdelivr.net/gh/GardenHamster/live2d-widget@latest/src/index.js
https://purge.jsdelivr.net/gh/GardenHamster/live2d-widget@latest/waifu-tips.js
https://purge.jsdelivr.net/gh/GardenHamster/live2d-widget@latest/waifu-tips.json

# 这里帖一些我修改的内容

# 看板娘换到右下角

waifu.css
#waifu {
    bottom: -1000px;
    right: 50px;
    line-height: 0;
    margin-bottom: -10px;
    position: fixed;
    transform: translateY(3px);
    transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    z-index: 1;
}

# icon 大小

waifu.css
#waifu-tool svg {
    fill: #7b8c9d;
    cursor: pointer;
    height: 20px;
    transition: fill .3s;
}

# 提示信息

waifu-tips.json
}, {
		"selector": "a[href='/']",
		"text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦。", "点它就可以回到首页啦！", "回首页看看吧。"]
	}, {
		"selector": "a[href='/about/']",
		"text": ["你想知道我家主人是谁吗？", "这里有一些关于我家主人的秘密哦，要不要看看呢？", "发现主人出没地点！"]
	}, {
		"selector": "a[href='/tags/']",
		"text": ["点击就可以看文章的标签啦！", "点击来查看所有标签哦。"]
	}, {
		"selector": "a[href='/categories/']",
		"text": ["文章都分类好啦～", "点击来查看文章分类哦。"]
	}, {
		"selector": "a[href='/archives/']",
		"text": ["翻页比较麻烦吗，那就来看看文章归档吧。", "文章目录都整理在这里啦！"]
	}, {
		"selector": "a[href='/friends/']",
		"text": ["这是我的朋友们哦ヾ(◍°∇°◍)ﾉﾞ", "要去大佬们的家看看吗？", "要去拜访一下我的朋友们吗？"]
	}, {
		"selector": ".item, .search",
		"text": ["找不到想看的内容？搜索看看吧！", "在找什么东西呢，需要帮忙吗？"]
	}, {
		"selector": ".menu .item a",
		"text": ["快看看这里都有什么呢？"]
	}, {
		"selector": ".author",
		"text": ["我家主人好看吗？", "这是我家主人(*´∇｀*)"]
	}, {
阅读次数 次