安装日志
- 执行指令
git --version
node -v
pnpm setup
pnpm add hexo-cli -g
hexo init --no-install
pnpm i
cd themes
git clone https://github.com/theme-particlex/hexo-theme-particlex.git particlex --depth=1
hexo new page categories
hexo new page tags
theme: particlex
- 目录结构
blog # Hexo 博客根目录
|---public # 静态网页文件
|---source # 文章
|---themes # 主题
|---<theme-name>
|---layout
| |---layout.ejs
|---source # 主题资源文件，里面的内容会生成到静态文件下
- 根目录下做修改
highlight:
enable: false # default false 修改
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false # default false 修改
preprocess: true
line_number: true
tab_replace: ''
fireworks.js
js/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)
}();
themes\particlex\layout\layout.ejs
<canvas
id="fireworks"
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 32767"
></canvas>
<script src="https://s4.zstatic.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="/js/fireworks.min.js"></script>
background.js
js/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
})
}();
themes\particlex\layout\layout.ejs
<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>
cursor.min.js
js/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
css/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\particlex\layout\layout.ejs
<div id="cursor"></div>
<link rel="stylesheet" href="/css/cursor.min.css" />
<script src="/js/cursor.min.js"></script>
hexo cl
hexo g
hexo s
- 网页部署
ssh-keygen -t rsa -C "2451752823@qq.com"
// Generating public/private rsa key pair.
// Enter file in which to save the key (C:\Users\Lenovo/.ssh/id_rsa):
// enter 就行
C:\Users\Lenovo\.ssh
pnpm install hexo-deployer-git --save
_config.yml
deploy:
- type: git
repository: <url>
branch: main
hexo d
- 保存图片
_config.yml
post_asset_folder: true
pnpm install hexo-asset-image --save
pnpm install cheerio
继续在Git Brsh下利用hexo n "xxxx"来生成md的文件（""里的内容填自己的文件名），这时就会在同级的目录下生成一个同名的文件夹。