close
此代码对应颜色为：
close

Ka Tou Space

二十三年前、この腐敗した世界に堕とされた...

个性化Huno主题

• 分类: Tech Blog • 标签: Hexo, Static Website

本博客基于Hexo博客框架，主题为Huno。Huno主题作者已长时间未更新，而且与最新主题例如NexT相比，美观度不足且功能有所缺失。因此需要针对Huno主题的不足进行一些个性化的修改。

一、Logo旋转

网站logo默认是没用响应动画特效的。参考NexT主题，可以将logo加入鼠标移入时旋转效果，最终效果见本网站logo。本功能参考该博客：Hexo Next主题头像改圆角并实现鼠标移入时旋转效果。

首先进入主题目录打开source/css/uno.css，找到定义logo的样式panel-cover__logo，加上以下属性：

1
2
3
4
-webkit-transition: -webkit-transform 1s;
-ms-transition: -ms-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;

再定义新样式panel-cover__logo:hover即可：

1
2
3
4
5
6
.panel-cover__logo:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
}

二、多说评论显示博主

本博客评论系统采用多说，但多说默认是不显示博主标识的。在评论较多的情况下这有可能使得评论列表较为混乱。因此需对博主的回复加上相应标识。本功能的实现参考此博客：多说评论框UA显示/博主标记。最终效果如下所示：

Screenshot

首先需本地化多说核心脚本embed.js，即将embed.js下载到本地调用，下载后打开embed.js，在首行加入以下代码：

1
2
3
4
5
6
7
function sskadmin(e) {
	var ssk = '';
	if(e.user_id==【你的多说id】){
		ssk = '<span class="sskadmin">博主'
	}
	return ssk+"</span> ";
}

然后在embed.js搜索：

1
data-qqt-account="'+s+'">'+p(n.name)+"")+""

修改为：

1
data-qqt-account="'+s+'">'+p(n.name)+"") +"<span class="\"ua\"">" + sskadmin(e.author) + "</span>" + ""

最后将以下代码添加至多说自定义css中即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
span.ua{
	margin: 0 1px!important;
	color:#FFFFFF!important;
	/*text-transform: Capitalize!important;
	float: right!important;
	line-height: 18px!important;*/
}
.sskadmin{
        background-color: #3399FF!important;
	border-color: #01B171!important;
	border-radius: 4px;
	padding: 0 5px!important;
}

三、不同文章显示不同侧边栏图片

默认情况下Huno主题只能定义一张侧边栏图片，即无论切换到任何文章，侧边栏图片只能是一张。这样就会使人觉得十分单调。为了使阅读不同文章时显示与文章主题相对应的侧边栏图片，需要进行以下修改。

打开定义侧边栏样式的文件layout/_partials/side-panel.ejs，在判断页面是否为主页的代码下加入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if (is_post()) { %>
  <% if (page.title+'' == '文章1') { %>
    <script type="text/javascript"> 
    document.getElementById("head").style.background="url(/images/background-cover1.jpg) bottom center no-repeat #666666";
    document.getElementById("head").style.backgroundSize="cover";
    </script> 
  <% } else if (page.title+'' == '文章2') { %>
    <script type="text/javascript"> 
    document.getElementById("head").style.background="url(/images/background-cover2.jpg) center center no-repeat #666666";
    document.getElementById("head").style.backgroundSize="cover";
    </script> 
  <% } %>
<% } %>

其中“backgroundSize=”cover””保证在页面缩放时侧边栏图片保持不变。最后需在对应位置，即images文件夹下存放相应的图片。效果如下所示：

Screenshot

Screenshot

四、博客列表显示对应的分类与标签

Huno主题默认的博客列表不显示博客的分类和标签，不利于读者直观地寻找其所需要查找的博客。添加此功能需在定义博客列表样式的文件layout/_partials/archive.ejs中，定义摘要信息的标签之下插入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<span class="post-meta__tags tags">
  <% if (post.categories && post.categories.length > 0){ %>
    <font class="categories">
    <img src="/images/small-icon/cat.png" title="categories" />
    <%- list_categories(post.categories, {
      show_count: false,
      class: 'categories',
      style: 'none'
    }) %>
    &nbsp&nbsp&nbsp&nbsp
    </font>
  <% } %>
  <% if (post.tags && post.tags.length > 0){ %>
    <img src="/images/small-icon/tag.png" title="tags" />
    <font class="categories">
    <%- list_tags(post.tags, {
      show_count: false,
      style: 'none',
      class: 'tags'
    }) %>
    </font>
  <% } %>
</span>

然后在uno.css中加入对应的样式：

1
2
.post-meta__tags {
  margin-left: .4em; }

最后在small-icon路径下加入对应的小图标即可。最终效果如下所示：

Screenshot

五、Nest背景特效（已取消此特效）

本博客背景的几何线条是采用来自NexT主题的效果，一个基于html5 canvas绘制的网页背景效果。此特效来自GitHub开源项目canvas-nest.js。本功能参考该博客：为next主题添加nest背景特效。

首先下载canvas-nest.min.js文件至source/js路径下，再打开layout/layout.ejs文件，将以下代码插入

1
<body></body>

之间：

1
<script type="text/javascript" color="0,0,0" opacity='0.5' zIndex="-1" count="100" src="<%- config.root %>js/canvas-nest.min.js"></script>

代码中，color属性值代表线条颜色，opacity代表线条透明度（0-1），count代表线条数量，zIndex代表背景的z-index属性。

六、博客打赏功能

扫码支付这一功能运用得越来越广泛。博客中也可以添加“扫描支付宝、微信付款二维码支付”功能实现打赏功能。本功能实现参考此博客：为Hexo博客添加版权说明和打赏功能。

1、引入FancyBox插件

为实现点击图片弹出小窗口显示放大图片，而不是美观性不足的点击图片打开新页面显示放大图片，需要使用FancyBox插件。它是一款基于jQuery开发的类Lightbox插件。最终实现效果如下所示：

Screenshot

首先在官网下载FancyBox，下载完毕后将其中文件按文件类型分别复制到source文件夹中对应的css、js文件夹内。再打开layout/layout.ejs文件，在

1
</body>

之前写入以下内容引入FancyBox的css样式和js文件：

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" type="text/css" href="<%- config.root %>css/jquery.fancybox.css">            <!--引入fancybox的样式-->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<%- config.root %>js/jquery.fancybox.js"></script>
<script type="text/javascript" src="<%- config.root %>js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<%- config.root %>js/jquery.mousewheel-3.0.6.pack.js"></script>  <!--带有鼠标滚动效果的库-->
<style type="text/css">
  #content{width: 800px;margin: 20px auto;overflow: hidden;}
  #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image: url('<%- config.root %>images/fancybox_sprite.png');}  /**更改fancybox默认的图片路径**/
</style>

接着在

1
</body>

标签之后输入以下内容以初始化 fancybox() 函数即成功引入FancyBox插件。

1
2
3
4
5
<script type="text/javascript">
  $(function(){
    $(".fancybox").fancybox();
  })
</script>

2、添加打赏按钮及支付二维码

首先通过支付宝与微信手机客户端获取二者的支付二维码，拷贝至source/images目录下。再打开Huno主题根目录的_config.yml文件，添加以下代码：

1
2
3
donate:
  enable: true
  text: 若本文对您有帮助，请打赏鼓励本人！

之后打开source/css/uno.css，添加post-donate样式：

1
2
3
.post-donate {
  border-top: 1px solid #dddddd;
  padding: 40px 0; }

再在layout/_partials下新建donate.ejs，添加以下代码：

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
<% if (page.comments){ %>
<section class="post-donate">
<% if (theme.donate) { %>
  <!-- css -->
  <style type="text/css">
    .center {
      text-align: center;
    }
    .hidden {
      display: none;
    }
    .donate_bar a.btn_donate{
      display: inline-block;
      width: 82px;
      height: 82px;
      background: url("/images/btn_reward.gif") no-repeat;
      _background: url("/images/btn_reward.gif") no-repeat;
      <!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif
           因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，
         为了在让打赏按钮显示效果正常 而 添加了以下几行 css，
         嵌入其它博客时不一定要它们。 -->
      -webkit-transition: background 0s;
      -moz-transition: background 0s;
      -o-transition: background 0s;
      -ms-transition: background 0s;
      transition: background 0s;
      <!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束 -->
    }
    .donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
    .donate_bar .donate_txt {
      display: block;
      color: #9d9d9d;
      font: 14px/2 "Microsoft Yahei";
    }
    .bold{ font-weight: bold; }
  </style>
  <!-- /css -->
  <!-- Donate Module -->
  <div id="donate_module">
  <!-- btn_donate & tips -->
    <div id="donate_board" class="donate_bar center">
      
      <a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a>
      <span class="donate_txt">
        <%= theme.donate.text %>
      </span> 
    </div>
    <!-- /btn_donate & tips -->
    <!-- donate guide -->
    
    <div id="donate_guide" class="donate_bar center hidden">
      <a href="<%- config.root %>images/wechat.png" title="用微信扫一扫" class="fancybox" rel="article0">
        <img src="<%- config.root %>images/wechat.png" title="微信打赏" height="190px" width="auto"/>
      </a>
        
      &nbsp;&nbsp;
      <a href="<%- config.root %>images/alipay.jpg" title="用支付宝扫一扫" class="fancybox" rel="article0">
        <img src="<%- config.root %>images/alipay.jpg" title="支付宝打赏" height="190px" width="auto"/>
      </a>
      <span class="donate_txt">
        <%= theme.donate.text %>
      </span>
    </div>
    <!-- /donate guide -->
    <!-- donate script -->
    <script type="text/javascript">
      document.getElementById('btn_donate').onclick = function() {
        $('#donate_board').addClass('hidden');
        $('#donate_guide').removeClass('hidden');
      }
      function donate_on_web(){
        $('#donate').submit();
      }
      var original_window_onload = window.onload;
      window.onload = function () {
        if (original_window_onload) {
          original_window_onload();
        }
        document.getElementById('donate_board_wdg').className = 'hidden';
      }
    </script>
    <!-- /donate script -->
  </div>
  <!-- /Donate Module -->
<% } %>
</section>
<% } %>

最后打开layout/_partials/article.ejs，在

1
</article>

之前加入：

1
<%- partial('donate') %>

即可实现功能。

分享到： QQ空间 新浪微博 腾讯微博 微信 更多