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. 【VS开发】OpenCV2:Mat属性type，depth，step

    OpenCV2:Mat属性type,depth,step 在OpenCV2中Mat类无疑使占据着核心地位的,前段时间初学OpenCV2时对Mat类有了个初步的了解,见OpenCV2:Mat初学.这几天 ...

  2. 【图像处理】H.264简介

    H.264/MPEG-4 AVC(H.264)是1995年自MPEG-2视频压缩标准发布以后的最新.最有前途的视频压缩标准.H.264是由ITU-T和ISO/IEC的联合开发组共同开发的最新国际视频编 ...

  3. Reaching Points

    A move consists of taking a point (x, y) and transforming it to either (x, x+y) or (x+y, y). Given a ...

  4. 【Python】【demo实验16】【练习实例】【打印所有水仙花数】

    题目: 打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153= ...

  5. [转帖]Xenix — 微软与UNIX的短暂爱恋

    Xenix — 微软与UNIX的短暂爱恋 https://www.linuxdashen.com/xenix-微软与unix的短暂爱恋 原来微软曾经 干过那么牛B的 unix系统. 微软向外宣布Mic ...

  6. 1-N（1的总数）找规律

    见:https://blog.csdn.net/dormousenone/article/details/75208903 #define IOS ios_base::sync_with_stdio( ...

  7. Sql 中的索引

    转载:https://www.cnblogs.com/hyd1213126/p/5828937.html

  8. 简单的pycharm使用秘籍视频

    ttp://edu.51cto.com/center/course/lesson/index?id=163794 这个免费视频是我自己找的别人的,一些常用的基本上都还有,所以说善用百度之类的搜索引擎很 ...

  9. asp.net 5.图片和验证码

    1.基本画图 //给用户创建一张图片,并且保持一张图片. //创建一个画布 , )) { //绘画布创建一个画笔 using (Graphics g = Graphics.FromImage(map) ...

  10. C#实现鼠标滚筒缩放界面的效果

    elementCanvas继承UserControl 声明属性: #region 缩放属性添加 float ratio = 1.0f; public float Ratio { set { ratio ...