首页 » 教程 » 经验教程 » 给博客加上看板娘

简介

众所周知,每个博客都应该有个萌萌哒看板娘(误)
因为感觉博客两边有点空荡荡的,所以决定加点什么进去,(当然是加看板娘啊!!!)


项目地址

我使用的看板娘是github上一个live2d-widget的开源项目
而且样子会随机刷新
Github项目链接:点击前往项目地址


效果

给博客加上看板娘
给博客加上看板娘


安装

一、简单安装
该项目的资源文件是已经放到了cdn上,因此我们只需要简单的引入以下一行代码
复制后删除括号里的汉字

代码如下
<复制删除汉字script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js">


在halo中进入主题,然后设置,以我现在使用的主题寒山为例
进入主题设置后,进入自定义面板,在此处

给博客加上看板娘

加上代码,点击保存即可


注意
由于项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。
还有就是该项目需要Font Awesome的图标的支持,如果你的网页中没有引入该样式,则需要加入以下代码

<复制删除汉字link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

由于各个屏幕分辨率不同,导致默认大小的看板娘在100%缩放情况下在较低分辨率下会挡住博客内容,这样会影响观看体验,因此用了几天后我决定更改一下配置


自定义安装

1. 使用自己的版本
  • 可以直接在服务器上通过git下载
  • git clone https://github.com/stevenjoezhang/live2d-widget.git
    

  • 可以先下载zip,再上传到服务器
  • 也可以直接fork到你的仓库,然后进行修改,最后添加script

  • 2.修改

    我是fork到自己的仓库进行了修改,设置了下css,并修改autoload.js中的·live2d_path`

    给博客加上看板娘
    给博客加上看板娘

    然后向使用简单安装一样添加script

    <复制删除汉字script src="https://cdn.jsdelivr.net/gh/kiritoghy/live2d-widget@latest/autoload.js">
    

    将此处的kiritoghy替换为你的GitHub用户名。为了使CDN的内容正常刷新,需要创建新的git tag并推送至GitHub仓库中,然后就可以刷新页面查看效果了,cdn是有缓存的,如果效果没变可以等个一天左右。
    如果你想立即查看修改的效果,也可以将@后面的latest改为你push的修改的sha值

    给博客加上看板娘

    保存修改后刷新,即可看到修改效果

    如果你是选择通过自己的服务器加载,那么你需要修改该项目中的autoload.js中的live2d_path,将其修改为绝对路径
    比如说,如果你能够通过

    https://example.com/path/to/live2d-widget/live2d.min.js
    

    访问到 live2d.min.js,那么就把 live2d_path 的值修改为

    https://example.com/path/to/live2d-widget/
    

    路径末尾的 / 一定要加上。
    完成后,在你要添加看板娘的界面加入

    <复制删除汉字script src="https://example.com/path/to/live2d-widget/autoload.js">
    

    就可以加载了。

    3. 更多自定义

    当然还有更多可自定义的配置
    例如看板娘说的文字,这个可以在waifu-tips.json中修改

    给博客加上看板娘


    也可以根据api自行构建后端,具体可参见原项目文档

    未经允许不得转载:作者:王凯, 转载或复制请以 超链接形式 并注明出处 王凯博客
    原文地址:《给博客加上看板娘》 发布于2020-08-26

    分享到:
    赞(0) 打赏 生成海报

    评论 抢沙发

    2 + 1 =


    长按图片转发给朋友

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏

    荔枝云
    粽情端午,主机全场5折!全场低至1元!年费主机仅需29!无需备案,极速访问!
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    Q Q 登 录
    微 博 登 录
    切换登录

    注册