hexo个人博客添加宠物/鼠标点击效果/博客管理
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主题更改以及小功能的添加
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个人博客添加宠物/鼠标点击效果/博客管理的更多相关文章
- 【hugo】- hugo 博客 添加鼠标单击特效
hugo 博客 监听鼠标点击事件,添加动画效果 js下载 链接:https://pan.baidu.com/s/1SZu76WdEXRxLCfqJ2lbbtQ 密码:r056 移入hugo博客中 打开 ...
- 【网上转载搜罗】本博客花里胡哨（划掉）效果js代码
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;poin ...
- 【PyQt5-Qt Designer】添加图片+鼠标点击
添加图片+鼠标点击 graphicsView中添加图片 效果图 添加之后左边1处 生成qrc文件 选择文件右键编译-生成图片的16进制文件 课后作业:
- hexo next主题为博客添加分享功能
title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...
- 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)
备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...
- hexo博客添加gitalk评论系统
经过了一天的折腾,我终于为自己的博客添加上了评论系统.坦率的讲,为什么网上那么多方案我还要自己写一篇博客,那就是因为他们说的都有bug,所以我要自己总结一下. 我选用的是gitalk评论系统, ...
- HEXO | 给博客添加RSS
Hexo是一个简洁.高效.易用的博客框架,同时它拥有十分丰富的主题环境,本次我们所谈到的是cards主题,但是该主题的原生环境里没有相关的rss配置,所以我们需要采用手动添加的方式,进而实现rss功能 ...
- hexo博客添加功能
设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式.在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config ...
- 如何利用腾讯云COS为静态博客添加动态相册
前言 本文首发于个人网站Jianger's Blog,欢迎访问订阅.个人博客小站刚建站不久,想着除了主题里的功能外再添加上相册模块,于是半搜索半摸索把相册模块搞出来了,最后采用了利用腾讯云对象存储作图 ...
随机推荐
- RNN汇总
RNN(Recurrent Neural Network)循环神经网络. 对于CNN来说,比如图像处理,它逐渐从局部空间抽象到全局空间,有一种空间层次感,通道可以与空间一起卷积,也可以分开卷积.同时由 ...
- vs .net WebForm 模板添加注释
首先说一点,好久不更新博客了.今天公司服务器不能用了,闲着没事儿,更新一篇博客. 今天要说的就是vs2010下,如何更改各种文件的模板,以省去每次新添加文件时,还得给文件添加文件标示注释等时间.很大程 ...
- 【机器学习】【计算机视觉】非常全面的图像数据集《Actions》
目录(?)[+] 1.搜狗实验室数据集: http://www.sogou.com/labs/dl/p.html 互联网图片库来自sogou图片搜索所索引的部分数据.其中收集了包括人物.动物.建筑 ...
- 11个顶级 JavaScript 日历插件
参考链接:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247487050&idx=1&sn=e1cf66726 ...
- beam search 和 greedy search
贪心搜索(greedy search): 贪心搜索最为简单,直接选择每个输出的最大概率,直到出现终结符或最大句子长度. 集束搜索(beam search): 集束搜索可以认为是维特比算法的贪心形式,在 ...
- SolidWorks学习笔记8 包覆，圆顶
包覆 在该平面上创建草图,点击A,创建文字 在左侧取消勾选“使用文档字体”,点击字体,重新设置高度,字体. 在草图上点击来放置. 点击特征->包覆, 在模型树中选择有文字的草图 这里面 选择圆柱 ...
- hadoop(一HDFS)
hadoop(一HDFS) 介绍 狭义上来说: hadoop指的是以下的三大系统: HDFS :分布式文件系统(高吞吐,没有延时要求,容错性,扩展能力) MapReduce : 分布式计算系统 Yar ...
- 区间dp之 "石子合并"系列（未完结）
A. 石子合并<1> 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统评测 方式:文本比较 题目描述 有N堆石子排成一排(n<=100),现要将石 ...
- PAT B1023 组个最小数(20)
题目描述 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的 ...
- # MATLAB数据处理
目录 MATLAB数据处理 数据归一化处理 冒号的作用(获取指定行列的数据) MATLAB数据处理 mean(A,(b)) %均值函数,b为设置对哪一维上的数据进行处理,默认为第一维(列),行为第二维 ...