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. Leetcode之动态规划（DP）专题-264. 丑数 II（Ugly Number II）

    Leetcode之动态规划(DP)专题-264. 丑数 II(Ugly Number II) 编写一个程序,找出第 n 个丑数. 丑数就是只包含质因数 2, 3, 5 的正整数. 示例: 输入: n ...

  2. PTA一般问题汇总与解答

    在进行PTA作业完成的过程中,大家很积极在完成作业,然后在不懂的地方,有许多的同学也向助教们提出了问题,我们在这里将大家的问题进行了一下汇总然后逐一解答. 1输出中常遇到的问题. 这个图片里我将同学们 ...

  3. MySQL慢查询—开启慢查询

    ###一.简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. ###二.参数说明 slow_query_log 慢查询开启状态 ...

  4. [转帖]postgres 创建新用户并授权-- 非常好的

    postgres 创建新用户并授权 https://blog.csdn.net/XuHang666/article/details/81506297 原作者总结的挺好的 可以用来学习一下. grant ...

  5. 简单实现JDBC自动加载驱动，简化数据连接和关闭数据库连接

    package util; import java.io.File;import java.io.FileInputStream;import java.io.IOException;import j ...

  6. 同步锁 死锁与递归锁 信号量 线程queue event事件

    二个需要注意的点: 1 线程抢的是GIL锁,GIL锁相当于执行权限,拿到执行权限后才能拿到互斥锁Lock,其他线程也可以抢到GIL,但如果发现Lock任然没有被释放则阻塞,即便是拿到执行权限GIL也要 ...

  7. linux 下用find命令查找文件，rm命令删除文件

    linux 下用find命令查找文件,rm命令删除文件. 删除指定目录下指定文件find 要查找的目录名 -name .svn |xargs rm -rf 删除指定名称的文件或文件夹: find -t ...

  8. [Jenkins]初次访问Jenkins，输入密码后，页面卡在空白界面一直未加载出内容_解决方案

    问题描述 安装Jenkins,初次访问Jenkins(http://localhost:8002,端口号根据各自设置而不同,本例是8002),输入Jenkins初始化的管理密码之后,浏览器中一直卡在空 ...

  9. Java基础第三天--内部类、常用API

    形参和返回值 抽象类名作为形参和返回值 方法的形参是抽象类名,其实需要的是该抽象类的子类对象 方法的返回值是抽象类名,其实返回的是该抽象类的子类对象 接口名作为形参和返回值 方法的形象是接口名,其实需 ...

  10. 03 Go语言特性

    一.基本注意事项 1.转义字符 \t 一个制表符,代表一次tab \n 换行符 \\ 转义代表 \ \" 转义代表 " \r 一个回车,从当前行的最前面开始输出,会覆盖以前的内容, ...