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开发】CreateThread给线程函数传递的参数

    CreateThread给线程函数传递的参数   HANDLE WINAPI CreateThread ( __in_opt LPSECURITY_ATTRIBUTES lpThreadAttribu ...

  2. python urllib2 实现大文件下载

    使用urllib2下载并分块copy: # from urllib2 import urlopen # Python 2 from urllib.request import urlopen # Py ...

  3. poj3714 Raid（分治求平面最近点对）

    题目链接:https://vjudge.net/problem/POJ-3714 题意:给定两个点集,求最短距离. 思路:在平面最近点对基础上加了个条件,我么不访用f做标记,集合1的f为1,集合2的f ...

  4. Consecutive Numbers Sum

    Given a positive integer N, how many ways can we write it as a sum of consecutive positive integers? ...

  5. [转帖]SSH原理与运用（二）：远程操作与端口转发

    SSH原理与运用(二):远程操作与端口转发 http://www.ruanyifeng.com/blog/2011/12/ssh_port_forwarding.html 接着前一次的文章,继续介绍S ...

  6. hadoop(一HDFS)

    hadoop(一HDFS) 介绍 狭义上来说: hadoop指的是以下的三大系统: HDFS :分布式文件系统(高吞吐,没有延时要求,容错性,扩展能力) MapReduce : 分布式计算系统 Yar ...

  7. Spring的四种事务特性，五种隔离级别，七种传播行为

    Spring事务: 什么是事务: 事务逻辑上的一组对数据对操作,组成这些操作的各个逻辑单元,要么一起成功,要么一起失败. 事务特性(4种): 原子性(atomicity):强调事务的不可分割:一致性( ...

  8. MySql 枚举和集合 详解

    枚举与集合 枚举类型,enum 每个枚举值均有一个索引值: 在列说明中列表值所允许的成员值被从 1 开始编号. 一般来说就是单选,在定义枚举的时候列出所有的可能性: 代码如下 1. create ta ...

  9. jmeter 工具学习 未完待续

    about Apache JMeter是Apache组织的开源项目,是 一个纯Java桌面应用,用于压力测试和性能测试,它最初被设计用于 web应用测试,后来逐渐的扩展到其他领域 jmeter可以用于 ...

  10. Docker——四种网络模式

    docker run创建Docker容器时,可以用–net选项指定容器的网络模式,Docker有以下4种网络模式:  bridge模式:使用–net =bridge指定,默认设置:  host模式 ...