# 项目地址
- 你可以使用 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 { | |
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-tool svg { | |
fill: #7b8c9d; | |
cursor: pointer; | |
height: 20px; | |
transition: fill .3s; | |
} |
# 提示信息
}, { | |
"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": ["我家主人好看吗？", "这是我家主人(*´∇｀*)"] | |
}, { |
