如何用Hexo搭建个人博客网站
1、先下载Node.js
2、想要使用Node.js环境加载速度变快，需要获取cnpm环境
npm install -g cnpm --registry
=https://registry.npm.taobao.org
3、安装Hexo客户端
cnpm
install -g hexo-cli
4、初始化一个博客框架
hexo init
5、开启博客
hexo s 或者 hexo server
6、创建博客
hexo new
"我的第一篇博客"
hexo new page tags
7、书写博客的内容
cd source/_posts/
vim 我的第一篇博客.md
8、回到原来的目录下
$
pwd
/e/blog
9、清理hexo
hexo clean
10、生成文章页面
hexo generate 或者 hexo g
11、再次启动hexo，即可见到文章的内容
hexo s 或者 hexo server
12、创建github仓库，部署到远端
lc627595056.github.io
https://github.com/lc627595056/lc627595056.github.io.git
13、安装hexo与git结合的插件
cnpm
install hexo-deployer-git --save
14、修改_config.xml文件，将git仓库的地址部署进去
deploy:
type:
git
repo: https://github.com/lc627595056/lc627595056.github.io.git
branch: master
15、直接部署到远端即可
hexo d 或者 hexo deploy
浏览器访问 lc627595056.github.io 就ok了
替换炫酷的主题
1、首先要克隆到 /blog目录下
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
2、修改 _config.xml文件
theme: yilia
3、
hexo clean
hexo g
hexo s
hexo d
lc627595056.github.io
常见的配置
1、如果这一页太多了，可以另起一页（没起作用）
hexo new page board
2、点击页面出现小红心
内容为：
!function(e
,t
,a
){function r(){for(var e
=0;e
<s
.length
;e
++)s
[e
].alpha
<=0?(t
.body
.removeChild(s
[e
].el
),s
.splice(e
,1)):(s
[e
].y
--,s
[e
].scale
+=.004,s
[e
].alpha
-=.013,s
[e
].el
.style
.cssText
="left:"+s
[e
].x
+"px;top:"+s
[e
].y
+"px;opacity:"+s
[e
].alpha
+";transform:scale("+s
[e
].scale
+","+s
[e
].scale
+") rotate(45deg);background:"+s
[e
].color
+";z-index:99999");requestAnimationFrame(r
)}function n(){var t
="function"==typeof e
.onclick
&&e
.onclick
;e
.onclick=function(e
){t
&&t(),o(e
)}}function o(e
){var a
=t
.createElement("div");a
.className
="heart",s
.push({el
:a
,x
:e
.clientX
-5,y
:e
.clientY
-5,scale
:1,alpha
:1,color
:c()}),t
.body
.appendChild(a
)}function i(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 c(){return"rgb("+~~(255*Math
.random())+","+~~(255*Math
.random())+","+~~(255*Math
.random())+")"}var s
=[];e
.requestAnimationFrame
=e
.requestAnimationFrame
||e
.webkitRequestAnimationFrame
||e
.mozRequestAnimationFrame
||e
.oRequestAnimationFrame
||e
.msRequestAnimationFrame
||function(e
){setTimeout(e
,1e3/60)},i(".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: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window
,document
);
添加以下代码：
<!--页面点击小红心
-->
<script type
="text/javascript" src
="/js/love.js"></script
>
3、“关于我” 的标签（没起作用）
hexo
new page about
4、点击页面出现爆竹效果
"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)
};
<!--鼠标点击烟花爆炸效果，需要引入jQuery
-->
<% if (theme
.fireworks
){ %>
<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/fireworks.js"></script
>
<% } %>
# 鼠标点击烟花爆炸效果
fireworks
: true
5、“私密文章”
会在source/drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到drafts目录之中。 $ hexo new draft "new draft" 如果你希望强行预览草稿，更改配置文件： render_drafts: true或者，如下方式启动server： $ hexo server --drafts下面这条命令可以把草稿变成文章，或者页面： $ hexo publish [layout]
6、总文章数
1、将themes\yilia\layout_partialleft-col.ejs文件的
<nav
class="header-menu">
<ul
>
<% for (var i
in theme
.menu
){ %>
<li
><a href
="<%- url_for(theme.menu[i]) %>"><%= i
%></a
></li
>
<%}%>
</ul
>
</nav
>
后面加上
<nav
>
总文章数
<%=site
.posts
.length
%>
</nav
>
7、文章结束语
1、打开yourblog\themes\yilia\layout_partial文件夹，并编辑article.ejs文件，在
<% if (!post
.noDate
){ %>
<%- partial('post/date', {class_name
: 'archive-article-date', date_format
: null}) %>
<% } %>
</header
>
<% } %>
<div
class="article-entry" itemprop
="articleBody">
<% if (post
.excerpt
&& index
){ %>
<%- post
.excerpt
%>
<% if (theme
.excerpt_link
) { %>
<a
class="article-more-a" href
="<%- url_for(post.path) %>#more"><%= theme
.excerpt_link
%> >></a
>
<% } %>
<% } else { %>
<%- post
.content
%>
<% } %>
之后加上
<% if ((theme
.essayending_type
=== 2 || (theme
.essayending_type
=== 1 && post
.essayending
)) && !index
){ %>
<% if (!index
){ %>
<div
class="essayending">
<div
>
<div style
="text-align:center;color: #ccc;font-size:22px;">
<br
/>
<br
/>
-------------本文结束
<i
class="fa fa-paw"></i
>感谢您的阅读
-------------
<br
/>
<br
/>
<br
/>
<br
/>
</div
>
</div
>
</div
>
<% } else {%>
<div
class="essayending" hidden
="hidden"></div
>
<% } %>
<% } %>
2、然后在**\theme\yilia_config.yml**文件中找到合适位置添加：
essayending_type: 1
essayending: true
8、截断显示文件
1、在你 md 格式文章正文插入<!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml，重复
