hexo——hueman主题美化（持续更新中）

现在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

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

"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

!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

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>标签上方添加如下代码（引入）

  <% 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中添加配置项：

  # cursor effect
  cursor:
      switch: true
      type: text # option: text explosion love fireworks

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

---

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

效果

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

<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>标签的样式代码，覆盖为以下代码就行了，整体就是下面这样

.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-background和color-nav-background，修改后面的十六进制颜色就好了。有mobile那个应该是移动端的，有兴趣的自己改改看呗~
如果不想要这个背景色的话，emm…应该没人会删掉菜单栏颜色吧…

主题颜色

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

---

5. 自定义网页背景图

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

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文件下，在最顶端加入下面这段媒体查询代码就一切都解决了。

/* ------------------------------------------------------------------------- *
 *    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的样式代码，覆盖为以下代码

  #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样式代码覆盖为下面的代码

  #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) { %>语句上方添加两句代码即可

<!-- 不蒜子 -->
<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 ID和APP Key了：
   

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

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

更多信息：Valine官网

---

9. 添加Valine Admin

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

详情查看：Valine Admin配置手册

---

10. 添加live2d宠物

1. 在Git Bash中安装插件：

   npm install --save hexo-helper-live2d

2. 选择你喜欢的模型并复制你喜欢的模型名字：live2d-plugin-2.0

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

   npm install --save live2d-widget-model-<你喜欢的模型名字>

4. 在站点_config.yml配置文件中加入如下配置项
   比如我的：

   # 宠物
   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">标签上方加入如下代码（不需要的部分可以删掉）

   <!-- 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

.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

.read-over 
    text-align: center
    margin: 20px 0 20px 0;
    color: lightgray
    font-size: 14px

reward.styl

.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

3. 在hueman/source/css/style.styl文件最后，加入如下代码

   @import "_partial/read_over"
   @import "_partial/copyright"
   @import "_partial/reward"

4. 在主题_config.yml配置文件中，加入如下三个配置项

   # copyright
   copyright: true
   
   # read_over
   read_over: true
   
   # reward
   reward: true

5. 其中，版权信息可以在写文章的.md文件中选择是否打开，就像这样
   
   true为开，false为关。

---

12. 控制台特效

效果

原理就一个：

console.log();

我的代码：

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:幼圆")

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

---

持续更新中…