hexo优化

2021-10-08 11:13:04 浏览数 (1)

鼠标点击效果

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

鼠标点击出现桃心

在codeblogthemesnext6sourcejs下新建文件love.js文件，其中加入代码如下：

代码语言：javascript复制
!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);

12

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

代码语言：javascript复制
<script type="text/javascript" src="/js/love.js"></script>
1

实现效果如下：

鼠标点击出现爆炸烟花

在codeblogthemesnext6sourcejs下新建文件firework.js文件，其中加入代码如下：

代码语言：javascript复制
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* "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)};
*/

12

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

代码语言：javascript复制
<!-- 爆炸红心效果 -->
<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>
1234

展示效果如下

评论系统

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

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

官方文档。

DISQUS

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

代码语言：javascript复制
disqus:
  enable: false
  shortname:
  count: true
1234

Facebook Comments 由 hydai 贡献

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

代码语言：javascript复制
# 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)
12345678

HyperComments 由 ivan-nginx 贡献

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

代码语言：javascript复制
# Hypercomments
#hypercomments_id:
12

网易云跟帖 由 geekrainy 贡献

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

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

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

来必力 由 asmoker 贡献

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

代码语言：javascript复制
livere_uid: #your livere_uid
1

本博客采用的是来必力的评论系统，登陆来比力获取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: 人次 1234
  • 站点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: 次 1234
  • 单页面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: 次 12345

效果图: [外链图片转存失败(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)中添加以下代码：
代码语言：javascript复制
live2d:
  enable: true
  scriptFrom: local
  model: 
    use: live2d-widget-model-z16 #模型选择
  display: 
    position: right  #模型位置
    width: 100       #模型宽度
    height: 200      #模型高度
  mobile: 
    show: false      #是否在手机端显示
1234567891011

执行效果如下：

hexo-admin-qiniu后台管理

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

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

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

代码语言：javascript复制
#Qiniu
admin:
  qiniuCfg:
      imageslim: true  # 启动图片瘦身，仅华东区bucket可以使用
      AccessKey: 'your key'
      SecretKey: 'your key'
      BucketName: 'your bucketname'
      bucketHost: 'your buckethost'
12345678

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

参考文档

  • Hexo官方文档
hexo html http

0 人点赞