1、添加宠物

博客宠物模型：https://github.com/xiazeyu/live2d-widget-models

模型对应的动画效果：https://huaji8.top/post/live2d-plugin-2.0/

安装模型：

npm install live2d-widget-model-hijiki

配置：hexo博客的根目录下的配置文件_config.yml，在最后添加以下代码

live2d:

  enable: true

  scriptFrom: local

  model:

    use: live2d-widget-model-hijiki

  display:

    position: right

    width:

    height:

  mobile:

    show: true

参考资料：Hexo主题更改以及小功能的添加

　　　　   live2d-widget-models

　　　　   Hexo+yilia添加helper-live2d插件宠物动画，很好玩的哦~~

2、鼠标点击效果（桃心）

在Hexo博客下找到自己使用的主题在文件夹source下新建love.js，love.js文件内容如下：

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在主题文件夹下的layout文件夹下的_layout.ejs（我自己的是layout.ejs文件）配置文件里面的<head></head>标签里添加

<script type="text/javascript" src="/love.js"></script>

src路径根据love.js的存放路径添加

参考资料：Hexo优化

3、一台电脑使用两个/多个GitHub账号部署两个/多个Hexo博客

hexo个人博客添加宠物/鼠标点击效果/博客管理的更多相关文章

  1. 【hugo】- hugo 博客 添加鼠标单击特效

    hugo 博客 监听鼠标点击事件,添加动画效果 js下载 链接:https://pan.baidu.com/s/1SZu76WdEXRxLCfqJ2lbbtQ 密码:r056 移入hugo博客中 打开 ...

  2. 【网上转载搜罗】本博客花里胡哨（划掉）效果js代码

    <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;poin ...

  3. 【PyQt5-Qt Designer】添加图片+鼠标点击

    添加图片+鼠标点击 graphicsView中添加图片 效果图 添加之后左边1处 生成qrc文件  选择文件右键编译-生成图片的16进制文件 课后作业:

  4. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...

  5. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  6. hexo博客添加gitalk评论系统

      经过了一天的折腾,我终于为自己的博客添加上了评论系统.坦率的讲,为什么网上那么多方案我还要自己写一篇博客,那就是因为他们说的都有bug,所以我要自己总结一下.   我选用的是gitalk评论系统, ...

  7. HEXO | 给博客添加RSS

    Hexo是一个简洁.高效.易用的博客框架,同时它拥有十分丰富的主题环境,本次我们所谈到的是cards主题,但是该主题的原生环境里没有相关的rss配置,所以我们需要采用手动添加的方式,进而实现rss功能 ...

  8. hexo博客添加功能

    设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式.在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config ...

  9. 如何利用腾讯云COS为静态博客添加动态相册

    前言 本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...

随机推荐

  1. prometheus 的promsql的经典例子 安装grafana

    0.好的参考文档 https://www.cnblogs.com/longcnblogs/p/9620733.html 1.多维度数据 2.Prometheus的全局监控指标 只需要定义一个全局的指标 ...

  2. getopts的使用 + 创建空目录

    1.getopts的经典例子 isRollback= rollbackVer="" targetGroup="" actionType="" ...

  3. Flutter与Xamarin跨平台移动开发相比

    在过去十年中,移动行业经历了巨大的增长,特别是在应用程序开发方面.据Statista报告称,全球智能手机用户超过20亿,预计到2022年底这一数字将增加到50亿以上.在这些智能手机中,近100%在三个 ...

  4. 22.把hive表中数据导入到mysql中

    先通过可视化工具链接mysql,在链接的时候用sqoop 用户登录 在数据库userdb下新建表 保存,输入表名upflow 现在我们需要把hive里面的数据通过sqoop导入到mysql里面 sqo ...

  5. Yii2.0 组件

    框架之所以是框架,是因为其强大,其封装了很多实用的功能,开发者可以开箱即用. 下边列举Yii2.0的部分组件: var_dump(Yii::$app->session->getId()); ...

  6. [经验分享] Docker网络解决方案-Weave部署记录

    前面说到了Flannel的部署,今天这里说下Docker跨主机容器间网络通信的另一个工具Weave的使用.当容器分布在多个不同的主机上时,这些容器之间的相互通信变得复杂起来.容器在不同主机之间都使用的 ...

  7. RHEL8运维新利器--Cockpit使用方法

    在web浏览器中查看服务器并使用鼠标执行系统任务,很容易管理存储.配置网络和检查日志等操作. # 安装cockpit yum -y install cockpit # 启用cockpit system ...

  8. maraidb忘记数据密码

    一.概述 服务器上安装了maraidb 数据库,但是很久未使用过它,需要使用时,忘记了密码, 此时可以给它重新设置密码. 二.操作 修改密码 修改 /etc/my.cnf,修改下图红色区域位置,修改成 ...

  9. Laravel使用whereHas进行过滤不符合条件的预加载with数据

    问题描述:目前有用户表,文章表,文章评论表,收藏表.我需要获我的收藏文章列表(可以被搜索,通过分类,文章标题等),通过收藏预加载with文章表,文章评论表,文章用户表 解决办法:通过whereHas限 ...

  10. VS调试 启动vs报错--未启动IIS

    VS调试 启动程序报错——未启动IIS Express Web服务 解决办法: 1.关闭VS. 2.删出项目文件下的".vs"文件. 3.重新启动解决方案. 4.编译,运行OK. ...