Hexo配置主题Particlex保姆级教程

✅作者简介：CSDN内容合伙人、信息安全专业在校大学生🏆
🔥系列专栏 ：零基础搭建博客
📃新人博主 ：欢迎点赞收藏关注，会回访！
💬舞台再大，你不上台，永远是个观众。平台再好，你不参与，永远是局外人。能力再大，你不行动，只能看别人成功！没有人会关心你付出过多少努力，撑得累不累，摔得痛不痛，他们只会看你最后站在什么位置，然后羡慕或鄙夷。

---

本文配置前提是配置好了基础的hexo博客，没搭建的可以去瞅瞅我的另一篇博客.

本次推荐的主题是Particlex ，实现的效果点击此处

在github中下载此主题：

根目录下_config.yml的修改：

修改根目录的_config.yml中的theme为你刚才下载的文件名，下图以next主题为例：

网站标题

主题目录下_config.yml的修改：

首页修改

修改主页头像

修改首页背景

修改首页描述

修改图标

修改友链

添加鼠标点击爆炸烟花和特效

在/themes/hexo-theme-particlex/source/js或者css对面下面添加如下的文件:
background.js：流星背景特效

!function(){var t=(window.innerWidth+window.innerHeight)/8,n=document.getElementById("background"),e=n.getContext("2d"),o=1,i=void 0,r=void 0,a=[],d=void 0,h=void 0,y={x:0,y:0,tx:0,ty:0,z:5e-4};function x(t){t.x=Math.random()*i,t.y=Math.random()*r}function m(){o=window.devicePixelRatio||1,i=window.innerWidth*o,r=window.innerHeight*o,n.width=i,n.height=r,a.forEach(x)}for(var c=0;c<t;c++)a.push({x:0,y:0,z:.2+.8*Math.random()});m(),function t(){e.clearRect(0,0,i,r),y.tx*=.95,y.ty*=.95,y.x+=.7*(y.tx-y.x),y.y+=.7*(y.ty-y.y),a.forEach(function(t){var n,a,e;t.x+=y.x*t.z,t.y+=y.y*t.z,t.x+=(t.x-i/2)*y.z*t.z,t.y+=(t.y-r/2)*y.z*t.z,t.z+=y.z,(t.x<-50||t.x>i+50||t.y<-50||t.y>r+50)&&(t=t,n="z",a=Math.abs(y.tx),e=Math.abs(y.ty),1<a&&1<e&&(n="h"==(e<a?Math.random()<Math.abs(y.x)/(a+e)?"h":"v":Math.random()<Math.abs(y.y)/(a+e)?"v":"h")?0<y.x?"l":"r":0<y.y?"t":"b"),t.z=.2+.8*Math.random(),"z"===n?(t.z=.1,t.x=Math.random()*i,t.y=Math.random()*r):"l"===n?(t.x=-3,t.y=r*Math.random()):"r"===n?(t.x=i+3,t.y=r*Math.random()):"t"===n?(t.x=i*Math.random(),t.y=-3):"b"===n&&(t.x=i*Math.random(),t.y=r+3))}),a.forEach(function(t){e.beginPath(),e.lineCap="round",e.lineWidth=3*t.z*o,e.strokeStyle="rgba(102,175,239,.2)",e.beginPath(),e.moveTo(t.x,t.y);var n=2*y.x,a=2*y.y;Math.abs(n)<.1&&(n=.5),Math.abs(a)<.1&&(a=.5),e.lineTo(t.x+n,t.y+a),e.stroke()}),requestAnimationFrame(t)}(),window.addEventListener("resize",m),window.addEventListener("mousemove",function(t){var n,a,e;n=t.clientX,t=t.clientY,"number"==typeof d&&"number"==typeof h&&(a=n-d,e=t-h,y.tx=y.x+a/8*o*1,y.ty=y.y+e/8*o*1),d=n,h=t}),window.addEventListener("mouseleave",function(){h=d=null})}();

fireworks.js：鼠标点击特效

!function(){function i(){scale=window.devicePixelRatio||1,n.width=window.innerWidth*scale,n.height=window.innerHeight*scale,u.scale(scale,scale)}function r(n){-1<(n=d.indexOf(n))&&d.splice(n,1)}function e(n,e){i();var t,a=function(n,e){for(var t=[],a=0;a<24;a++){var i=function(n,e){var t={};return t.x=n,t.y=e,t.color=c[anime.random(0,c.length-1)],t.radius=anime.random(o(),2*o()),t.draw=function(){u.beginPath(),u.arc(t.x,t.y,t.radius,0,2*Math.PI,!0),u.fillStyle=t.color,u.fill()},t}(n,e);t.push(i)}return t}(n,e),n=(e=e,(t={}).x=n,t.y=e,t.color=c[anime.random(0,c.length-1)],t.color="#FFF",t.radius=0,t.alpha=1,t.lineWidth=6,t.draw=function(){u.globalAlpha=t.alpha,u.beginPath(),u.arc(t.x,t.y,t.radius,0,2*Math.PI,!0),u.lineWidth=t.lineWidth,u.strokeStyle=t.color,u.stroke(),u.globalAlpha=1},t),e=anime({targets:a,x:function(n){return n.x+anime.random(-200,200)},y:function(n){return n.y+anime.random(-200,200)},radius:0,duration:function(){return anime.random(1200,1800)},easing:"easeOutExpo",complete:r}),a=anime({targets:n,radius:function(){return anime.random(8.75*o(),11.25*o())},lineWidth:0,alpha:{value:0,easing:"linear",duration:function(){return anime.random(400,600)}},duration:function(){return anime.random(1200,1800)},easing:"easeOutExpo",complete:r});d.push(e),d.push(a)}var t,a,o=function(){return parseFloat(getComputedStyle(document.documentElement).fontSize)},n=document.getElementById("fireworks"),u=n.getContext("2d"),d=[],c=["#ff324a","#31ffa6","#206eff","#ffff99"];anime({duration:1/0,update:function(){u.clearRect(0,0,n.width,n.height),d.forEach(function(n){n.animatables.forEach(function(n){n.target.draw()})})}}),document.addEventListener("mousedown",function(n){t=n.clientX,a=n.clientY,e(t,a)},!1),window.addEventListener("resize",i,!1)}();

cursor.min.js：鼠标指针特效

function _createForOfIteratorHelper(e,t){var n,r,o,a,i="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(i)return r=!(n=!0),{s:function(){i=i.call(e)},n:function(){var e=i.next();return n=e.done,e},e:function(e){r=!0,o=e},f:function(){try{n||null==i.return||i.return()}finally{if(r)throw o}}};if(Array.isArray(e)||(i=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length)return i&&(e=i),a=0,{s:t=function(){},n:function(){return a>=e.length?{done:!0}:{done:!1,value:e[a++]}},e:function(e){throw e},f:t};throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var n;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(n="Object"===(n=Object.prototype.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:n)||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}!function(){function t(e,t,n){return(1-n)*e+n*t}var n=document.getElementById("cursor"),r={pre:null,now:null},o=document.getElementsByTagName("*"),a=[];window.addEventListener("load",function(){var e,t=_createForOfIteratorHelper(o);try{for(t.s();!(e=t.n()).done;){var n=e.value;"pointer"==window.getComputedStyle(n).cursor&&a.push(n.outerHTML)}}catch(e){t.e(e)}finally{t.f()}var r=document.createElement("style");r.innerHTML='* { cursor: url("data:image/svg+xml, <svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 8 8\\" width=\\"8px\\" height=\\"8px\\"><circle cx=\\"4\\" cy=\\"4\\" r=\\"4\\" opacity=\\".5\\"/></svg>") 4 4, auto !important; }',document.body.appendChild(r)}),document.addEventListener("mouseover",function(e){a.includes(e.target.outerHTML)&&n.classList.add("hover")}),document.addEventListener("mouseout",function(e){a.includes(e.target.outerHTML)&&n.classList.remove("hover")}),document.addEventListener("mousemove",function(e){r.now||(n.style.left=e.clientX-8+"px",n.style.top=e.clientY-8+"px"),r.now={x:e.clientX-8,y:e.clientY-8},n.classList.add("visible")}),document.addEventListener("mouseenter",function(){n.classList.add("visible"),r.pre=null}),document.addEventListener("mouseleave",function(){n.classList.remove("visible")}),document.addEventListener("mousedown",function(){n.classList.add("active")}),document.addEventListener("mouseup",function(){n.classList.remove("active")});requestAnimationFrame(function e(){r.pre?(r.pre={x:t(r.pre.x,r.now.x,.15),y:t(r.pre.y,r.now.y,.15)},n.style.left=r.pre.x+"px",n.style.top=r.pre.y+"px"):r.pre=r.now,requestAnimationFrame(e)})}();

cursor.min.css：鼠标指针特效

#cursor{position:fixed;width:16px;height:16px;border-radius:8px;background:#000;opacity:0;transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,transform .2s;transition:opacity .2s,transform .2s,-webkit-transform .2s;z-index:32767;pointer-events:none}#cursor.visible{opacity:.25}#cursor.hover{opacity:.1;-webkit-transform:scale(2.5);transform:scale(2.5)}#cursor.active{opacity:.5;-webkit-transform:scale(.5);transform:scale(.5)}

在/themes/hexo-theme-particlex/layout/layout.ejs中的<head>标签内部添加：

<canvas id="fireworks" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767"></canvas>
<script src="https://cdn.staticfile.org/animejs/3.2.1/anime.min.js"></script>
<script src="/js/fireworks.min.js"></script>
<canvas id="background" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1"></canvas>
<script src="/js/background.min.js"></script>
<div id="cursor"></div>
<link rel="stylesheet" href="/css/cursor.min.css">
<script src="/js/cursor.min.js"></script>

待开发(`````)