现在hexo的主题中最heat的就是NexT了。截至我在写这篇文章,它GitHub的star已经达到了4.9k。NexT主题以简洁,自定义度高,插件集成多等等因素,被众多人喜爱。就我入坑hexo的那一会,我也用过一段时间的NexT。但是在后来觉得,NexT没有博客该有的样子,太过于简洁,可视页面上给予浏览者的信息太少,感觉除了首页上的文章不知道还有哪里可看,没有一些突出的地方让浏览者有欲望去点击。

在网络上我们可以看到关于NexT的美化教程一抓一大把,但关于hueman的却少之又少。所以,有了现在这篇关于hueman主题美化的文章。

用过NexT后再来用hueman,就发现hueman主题里无论是集成的插件,还是可自定义的东西,和NexT比起来就是白纸一张…不过这也阻止不了我对这个主题的喜爱,没有集成的插件就自己装呗,没有自定义选项就自己去改呗。

以下关于主题里的配置都是经过我自己亲手去配置过的,所以100%可用。如果出现异常情况,或者除了本篇文章所述的还想在hueman加入哪些功能的,可以在评论区留言,我尽力去研究下。


目录

  1. 鼠标点击特效(4种)
  2. 在侧边栏(sidebar)加入站点运行时间
  3. 美化侧边栏(sidebar)标签云
  4. 修改页面颜色
  5. 自定义网页背景图
  6. 回到顶部按钮
  7. 添加不蒜子统计
  8. 添加Valine评论
  9. 添加Valine Admin
  10. 添加live2d宠物
  11. 添加文章版权,结束条,打赏按钮
  12. 控制台特效

1. 鼠标点击特效(4种)

  • hueman/source/js/cursor/目录下,新建四个文件js文件

1)fireworks.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin
this.position = { ...this.origin }
this.color = color
this.speed = speed
this.angle = angle
this.context = context
this.renderCount = 0
}

draw() {
this.context.fillStyle = this.color
this.context.beginPath()
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
this.context.fill()
}

move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
this.renderCount++
}
}

class Boom {
constructor ({ origin, context, circleCount = 16, area }) {
this.origin = origin
this.context = context
this.circleCount = circleCount
this.area = area
this.stop = false
this.circles = []
}

randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}

randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}

randomRange(start, end) {
return (end - start) * Math.random() + start
}

init() {
for(let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
}
}

move() {
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}

draw() {
this.circles.forEach(circle => circle.draw())
}
}

class CursorSpecialEffects {
constructor() {
this.computerCanvas = document.createElement('canvas')
this.renderCanvas = document.createElement('canvas')

this.computerContext = this.computerCanvas.getContext('2d')
this.renderContext = this.renderCanvas.getContext('2d')

this.globalWidth = window.innerWidth
this.globalHeight = window.innerHeight

this.booms = []
this.running = false
}

handleMouseDown(e) {
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}

handlePageHide() {
this.booms = []
this.running = false
}

init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '999999999999999999999999999999999999999999'
style.pointerEvents = 'none'

style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

document.body.append(this.renderCanvas)

window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}

run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}

requestAnimationFrame(this.run.bind(this))

this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
}

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()

2)explosion.min.js

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)}"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)};

3)love.min.js

1
!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: 50%;-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.onclick=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);

4)text.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 28,
"left": x - a[a_idx].length * 8,
"position": "absolute",
"font-weight": "bold",
"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
}, 1500, function() {
$i.remove();
});
a_idx = (a_idx + 1) % a.length;
});
});
  • hueman/layout/common/head.js文件中</head>标签上方添加如下代码(引入)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <% if(theme.cursor.switch) { %>
    <% if(theme.cursor.type == 'text') { %>
    <script type="text/javascript" src="js/cursor/text.js"></script>
    <% } %>
    <% if(theme.cursor.type == 'explosion') { %>
    <script type="text/javascript" src="js/cursor/explosion.min.js"></script>
    <% } %>
    <% if(theme.cursor.type == 'fireworks') { %>
    <script type="text/javascript" src="js/cursor/fireworks.js"></script>
    <% } %>
    <% if(theme.cursor.type == 'love') { %>
    <script type="text/javascript" src="js/cursor/love.min.js"></script>
    <% } %>
    <% } %>
  • 在主题_config.yml中添加配置项:

    1
    2
    3
    4
    # cursor effect
    cursor:
    switch: true
    type: text # option: text explosion love fireworks

    switch设置为true打开,type是选择效果


2. 在侧边栏(sidebar)加入站点运行时间

效果

hueman/layout/common/sidebar.ejs文件最下面的</aside>标签上方加入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div style="padding:30px 30px 20px;font-size: 15px;text-align: center;color: #777777;" id="days"></div>
<script language="javascript">
function show_date_time() {
window.setTimeout("show_date_time()", 1000);
BirthDay = new Date("09/01/2019 00:00:00");
today = new Date();
timeold = (today.getTime() - BirthDay.getTime());
sectimeold = timeold / 1000 secondsold = Math.floor(sectimeold);
msPerDay = 24 * 60 * 60 * 1000 e_daysold = timeold / msPerDay daysold = Math.floor(e_daysold);
e_hrsold = (e_daysold - daysold) * 24;
hrsold = setzero(Math.floor(e_hrsold));
e_minsold = (e_hrsold - hrsold) * 60;
minsold = setzero(Math.floor((e_hrsold - hrsold) * 60));
seconds = setzero(Math.floor((e_minsold - minsold) * 60));
document.getElementById('days').innerHTML = "小站已经运行了" + daysold + "天" + hrsold + "时" + minsold + "分" + seconds + "秒啦!";
}
function setzero(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
show_date_time();
</script>

BirthDay那里改成你的创站时间即可。


3. 美化侧边栏(sidebar)标签云

效果:

hueman/source/css/_partial/sidebar.styl文件中,找到.tagcloud下面<a>标签的样式代码,覆盖为以下代码就行了,整体就是下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.tagcloud
a
white-space:nowrap
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
font-family: 'Comic Sans MS', sans-serif
transition: .2s ease-out
padding: 3px 5px
margin: 8px
background: #f5f5f5
border-bottom: none
border-radius: 15px

&:hover {
background: rgba(100,154,182,0.902)
color: #fff
-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19)
}

4. 修改页面颜色

header颜色

其实就是修改上图所示区域的颜色。进入hueman/source/css/_variables.styl文件中,找到color-header-background,修改后面的十六进制颜色就好了。
如果不想要这个背景色的话,进入hueman/source/css/_partial/header.styl文件中,把#header样式下的background整句删掉或注释掉即可。

footer颜色

修改了header颜色别忘了修改页面底部的颜色,对称美嘛。进入hueman/source/css/_variables.styl文件中,找到color-footer-background,修改后面的十六进制颜色就好了。
如果不想要这个背景色的话,进入hueman/source/css/_partial/footer.styl文件中,把#footer样式下的background整句删掉或注释掉即可。

nav颜色

修改菜单栏颜色。进入hueman/source/css/_variables.styl文件中,找到color-mobile-nav-backgroundcolor-nav-background,修改后面的十六进制颜色就好了。有mobile那个应该是移动端的,有兴趣的自己改改看呗~
如果不想要这个背景色的话,emm…应该没人会删掉菜单栏颜色吧…

主题颜色

修改主题颜色。主题颜色就是上面圈起来部分的颜色,加上全局鼠标悬停(hover)在文字上时的颜色。在主题_config.yml文件中找到customize下的theme_color修改后面的十六进制颜色就行了。


5. 自定义网页背景图

你们想不想像我一样网页有背景图呢?把你想设为背景图的图片放入hueman/source/css/images/目录下并命名为bg.jpg,然后进入hueman/source/css/style.styl文件,注释掉或删掉body样式下的background整句,添加以下代码就可啦!

1
2
3
background-image: url("images/bg.jpg")
background-attachment:fixed;
background-size:cover;

但是机智的你们会发现,这么大的图片在移动端显示的话会变得特别模糊。所以,我们可以在移动端切换成另一张和手机壁纸同等大小的图片。把你想设为小屏幕下背景图的图片放入hueman/source/css/images/目录下并命名为bg-xs.jpg,进入hueman/source/css/images/_responsive.styl文件下,在最顶端加入下面这段媒体查询代码就一切都解决了。

1
2
3
4
5
6
7
8
/* ------------------------------------------------------------------------- *
* customlize
/* ------------------------------------------------------------------------- */
@media (max-width: 768px)
body
background-image: url("images/bg-xs.jpg")
background-attachment:fixed;
background-size:cover;

6. 回到顶部按钮

效果

看效果图我是把它变成圆形了

  • hueman/source/css/_partial/footer.styl文件中,找到#back-to-top的样式代码,覆盖为以下代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    #back-to-top
    background: color-background
    color: #777
    overflow: hidden
    text-align: center
    width: 60px
    height: 60px
    display: block
    margin: 0 auto -30px
    border-radius: 50%
    box-shadow: 0 1px 1px rgba(0,0,0,0.1)
    &:hover
    color: #444
    i
    font-size: 38px
    line-height: 53px
  • 因为修改后在小屏情况下,按钮会和文章板块紧贴着,非常不美观,所以要把hueman/source/css/_responsive.styl(专门控制响应式布局的)文件中的#back-to-top样式代码覆盖为下面的代码
    1
    2
    3
    #back-to-top
    margin: 20px auto 0;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05);

7. 添加不蒜子统计

hueman/layout/common/footer.ejs文件中,在<% if (theme.poweredby) { %>语句上方添加两句代码即可

1
2
3
<!-- 不蒜子 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

8. 添加Valine评论

  1. valine评论是已经集成在hueman中的了,所以我们直接去LeanCloud注册一个账号登录。

  2. 进入控制台后点击左下角创建应用

  3. 应用创建好以后,进入刚刚创建的应用,选择左下角的 设置>应用Key,然后就能看到你的APP IDAPP Key了:

  4. 把你的APP IDAPP Key复制到主题_config.yml的valine配置项中,再把on选项设置为true就配置好了。

  5. 再次部署你的博客就能看到效果啦!

更多信息:Valine官网


9. 添加Valine Admin

Valine Admin是Valine评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akismet API实现准确的垃圾评论过滤。

详情查看:Valine Admin配置手册


10. 添加live2d宠物

  1. 在Git Bash中安装插件:

    1
    npm install --save hexo-helper-live2d
  2. 选择你喜欢的模型并复制你喜欢的模型名字:live2d-plugin-2.0

  3. 安装模型。在Git Bash运行以下命令:

    1
    npm install --save live2d-widget-model-<你喜欢的模型名字>
  4. 在站点_config.yml配置文件中加入如下配置项
    比如我的:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # 宠物
    live2d:
    enable: true #开启
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    model:
    use: live2d-widget-model-wanko #选择哪种模型
    display: #放置位置和大小
    position: right
    width: 150
    height: 300
    mobile:
    show: false #是否在手机端显示
  5. 打开博客看下运行结果。


11. 添加文章版权,结束条,打赏按钮

效果

  1. 进入hueman/layout/common/article.ejs文件中,在<footer class="article-footer">标签上方加入如下代码(不需要的部分可以删掉)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!-- copyright -->
    <% if (theme.copyright && post.copyright) { %>
    <div style="display: block;">
    <ul class="post-copyright">
    <li class="post-copyright-author">
    <strong style="font-weight: bolder;">本文作者:</strong>小K同學
    </li>
    <li class="post-copyright-link">
    <strong style="font-weight: bolder;">源站链接:</strong><a href="<%- post.permalink %>"><%- post.permalink %></a>
    </li>
    <li class="post-copyright-license">
    <strong style="font-weight: bolder;">版权声明:</strong>本博客所有文章除特别声明外,均采用<a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"> <i class="fa fa-creative-commons"></i>BY-NC-SA </a>许可协议。转载请注明出处!
    </li>
    </ul>
    </div>
    <% } %>

    <!-- read_over -->
    <% if (theme.read_over) { %>
    <div class="read-over">----------本文结束 <i class="fa fa-paw"></i> 我是无情的昏割线----------</div>
    <% } %>

    <!-- reward -->
    <% if (theme.reward) { %>
    <div class="reward">
    <button id="rewardBtn" onclick="var e=document.getElementById('QR');'none'===e.style.display?e.style.display='block':e.style.display='none'"><span>打赏</span>
    </button>
    <div id="QR" style="display: none;">
    <div id="wechat" style="display: inline-block;">
    <img id="wechat_qr" src="https://s2.ax1x.com/2020/02/15/1zzhnA.png">
    <p style="margin-bottom: 10px;">微信</p>
    </div>
    <div id="alipay" style="display: inline-block;">
    <img id="wechat_qr" src="https://s2.ax1x.com/2020/02/15/1zz40I.png">
    <p style="margin-bottom: 10px;">支付宝</p>
    </div>
    </div>
    </div>
    <% } %>
  2. 进入hueman/source/css/_partial目录下,新建三个如下的.styl文件

copyright.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.post-copyright 
margin: 1em 0
padding: 0.5em 1em
border-left: 3px solid #ff1700
background-color: #f9f9f9
list-style: none


.post-copyright-author, .post-copyright-link, .post-copyright-license
padding: 0.5em 1em
display: list-item
text-align: -webkit-match-parent


.post-copyright-link a, .post-copyright-license a
overflow-wrap: break-word
word-wrap: break-word
color: #252525
text-decoration: none
outline: none
border: 0
cursor: pointer

read_over.styl

1
2
3
4
5
.read-over 
text-align: center
margin: 20px 0 20px 0;
color: lightgray
font-size: 14px

reward.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.reward 
margin: 10px auto
width: 90%
text-align: center

#rewardBtn
cursor: pointer
border: 0
outline: 0
border-radius: 5px
padding: 0
margin: 10px 0px 20px
letter-spacing: normal
text-transform: none
text-indent: 0
text-shadow: none


#rewardBtn span
display: inline-block
width: 80px
height: 35px
border-radius: 5px
color: #fff
font-size: 16px
line-height: 35px
background: #f44336

#QR img
width: 180px
max-width: 100%
display: inline-block
margin: 0 2em 0
  1. hueman/source/css/style.styl文件最后,加入如下代码

    1
    2
    3
    @import "_partial/read_over"
    @import "_partial/copyright"
    @import "_partial/reward"
  2. 在主题_config.yml配置文件中,加入如下三个配置项

    1
    2
    3
    4
    5
    6
    7
    8
    # copyright
    copyright: true

    # read_over
    read_over: true

    # reward
    reward: true
  3. 其中,版权信息可以在写文章的.md文件中选择是否打开,就像这样

    true为开,false为关。


12. 控制台特效

效果

原理就一个:

1
console.log();

我的代码:

1
console.log("%c这里是小K同學的博客,进控制台有何贵干?","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em;font-family:幼圆")

自己想写什么改下前面的文字就可以了。


持续更新中…