Hexo优化(鼠标点击效果+评论系统+站点统计+hexo-admin-qiniu+markdown图片存储+live2d板娘）

最新推荐文章于 2024-05-14 07:17:56 发布

acgl

最新推荐文章于 2024-05-14 07:17:56 发布

阅读量4.6k

点赞数 11

本文链接：https://blog.csdn.net/C_acgl/article/details/86555826

版权

个人博客专栏收录该内容

1 篇文章 0 订阅

订阅专栏

欢迎访问我的博客

文章目录

欢迎访问[我的博客](http://blog.duanzy.xyz)

鼠标点击效果

本博客采用hexo-theme-next主题，大部分的主题可能只是文件的后缀名不相同，文件名相同，可以使用subline Text 3或者其他编辑器修改配置文件等。

鼠标点击出现桃心

在\codeblog\themes\next6\source\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.οnclick=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配置文件里面的<head></head>标签里添加

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

实现效果如下：
在这里插入图片描述

鼠标点击出现爆炸烟花

在\codeblog\themes\next6\source\js下新建文件firework.js文件，其中加入代码如下：

"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

在主题文件夹下的layout文件夹下的_layout配置文件里面的<head></head>标签里添加

<!-- 爆炸红心效果 -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/firework.js"></script>

展示效果如下

在这里插入图片描述

评论系统

由hexo-next的官方文档，可以看出hexo支持多种第三方评论插件。

如需取消某个页面/文章的评论，在 md 文件的 front-matter 中增加 comments: false

官方文档。

DISQUS

编辑 主题配置文件，将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否显示评论数量。

disqus:
  enable: false
  shortname:
  count: true

Facebook Comments 由 hydai 贡献

需要先集成 Facebook SDK。修改 主题配置文件 以下配置：

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10  # min posts num is 1
width: 100%       # default width is 550px
scheme: light     # default scheme is light (light or dark)

HyperComments 由 ivan-nginx 贡献

Add support for Hypercomments system instead of Disqus. 修改 主题配置文件 以下配置：

# Hypercomments
#hypercomments_id:

网易云跟帖由 geekrainy 贡献

登陆网易云跟帖获取你的 Product Key。编辑 主题配置文件，编辑 gentie_productKey 字段，设置如下：

gentie_productKey: #your-gentie-product-key
请注意，您在云跟帖管理后台设置的域名必须跟您站点的域名一致。在本地测试时，需要做两步骤前置设定：

修改 hosts 文件，将您域名的请求指向本地。例如：127.0.0.1 notes.example.com
修改 Hexo 监听的端口为 80：hexo s --debug -p 80
测试完成后请将 hosts 文件中的域名映射删除。

来必力由 asmoker 贡献

登陆来必力获取你的 LiveRe UID。编辑 主题配置文件，编辑 livere_uid 字段，设置如下：

livere_uid: #your livere_uid

本博客采用的是来必力的评论系统，登陆来比力获取city免费版，获取UID，放在主题配置文件config中的livere_uid中，(要先取消UID的注释）

效果图:
[外链图片转存失败(img-npNlncg7-1568728572910)(http://plii4i8ws.bkt.clouddn.com/1547874906585ww81rvx3.png?imageslim)]

站内统计

本博客采用的是不蒜子的站内统计，具体配置如下：

注意：此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后

全局配置

编辑 主题配置文件 中的busuanzi_count的配置项。
当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false 时，不蒜子仅作记录而不会在页面上显示。
站点UV配置

当site_uv: true时，代表在页面底部显示站点的UV值。
site_uv_header和site_uv_footer为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为[site_uv_header]UV值[site_uv_footer]。
```
# 效果：本站访客数12345人次
site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次
```

站点PV配置

当site_pv: true时，代表在页面底部显示站点的PV值。
site_pv_header和site_pv_footer为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为[site_pv_header]PV值[site_pv_footer]。
```
# 效果：本站总访问量12345次
site_pv: true
site_pv_header: 本站总访问量
site_pv_footer: 次
```

单页面PV配置
当page_pv: true时，代表在文章页面的标题下显示该页面的PV值（阅读数）。
page_pv_header和page_pv_footer为自定义样式配置，相关的值留空时将不显示，可以使用（带特效的）font-awesome。显示效果为[page_pv_header]PV值[page_pv_footer].
```
# 效果：本文总阅读量12345次
page_pv: true
page_pv_header: 本文总阅读量
page_pv_footer: 次
```

效果图:
[外链图片转存失败(img-5htdv9FE-1568728572912)(http://plii4i8ws.bkt.clouddn.com/1547874825919k3x0nqm9.png?imageslim)]

live2D

说实话写到这里,这是我最想要的了.以前做django个人博客的时候,有一次去看别的的博客,发现了live2d板娘,当时扣了很长时间的源码都没有找出来这个到底是则么构造的,偶然之间发现这是叫live2d板娘,当时的个人博客上并没有实现他.而hexo框架完美的结合了各种第三方库,在hexo中可以直接安装.

以下是使用流程：

下载相应的模板

在项目文件夹下使用git bash工具，执行npm install {packagename},其中的packagename可以在次项目中找到。
live2d模板.

我使用的是live2d-widget-model-z16。

在项目配置文件(_config)中添加以下代码：

live2d:
  enable: true
  scriptFrom: local
  model: 
    use: live2d-widget-model-z16 #模型选择
  display: 
    position: right  #模型位置
    width: 100       #模型宽度
    height: 200      #模型高度
  mobile: 
    show: false      #是否在手机端显示

执行效果如下：
在这里插入图片描述

hexo-admin-qiniu后台管理

最开始创建文章，必须在本地新建一个md文件，然后以markdown的格式去新建博客。在本地没有markdown编辑器的时候，很难受,不能实时看到编辑的效果，于是在想有没有当初的做django时候的后台管理。一番搜索之后，有hexo-admin和hexo-admin-qiniu两种选择，其中后者绑定七牛云，可以直接实现粘贴图片，很舒服。所以采用后者。

安装方法：
npm install hexo-admin-qiniu

然后在项目配置文件（_config)中，添加一下代码：

#Qiniu
admin:
  qiniuCfg:
      imageslim: true  # 启动图片瘦身，仅华东区bucket可以使用
      AccessKey: 'your key'
      SecretKey: 'your key'
      BucketName: 'your bucketname'
      bucketHost: 'your buckethost'

其中前两项是你的七牛云密钥，后者是你新建的存储空间的名字以及外链连接。
效果如下：
[外链图片转存失败(img-EAPHtSHW-1568728572913)(http://plii4i8ws.bkt.clouddn.com/1547876997271ep2ndgsp.png?)]

参考文档

Hexo官方文档

acgl

关注

11
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
Hexo优化(鼠标点击效果+评论系统+站点统计+hexo-admin-qiniu+markdown图片存储+live2d板娘）

文章目录鼠标点击效果鼠标点击出现桃心鼠标点击出现爆炸烟花评论系统DISQUSFacebook Comments 由 hydai 贡献HyperComments 由 ivan-nginx 贡献网易云跟帖由 geekrainy 贡献来必力由 asmoker 贡献站内统计live2Dhexo-admin-qiniu后台管理鼠标点击效果本博客采用hexo-theme-next主题，大部分的主题可能...
复制链接

扫一扫