Blog 美化

发表于 更新于 分类于 ， 阅读次数： 281

本篇文章记录 nexT 主题的美化工作。
效果图呈现：

前言

通过 Blog 更新 & 配置文件详解的内容基本能满足大部分的需求，如果想要逼格高一点、深度优化，可以对里面的一些文件（swig、js 等）进行新增、修改等。

美化

点击特效

点击特效可通过 JS 来实现，大家可以选择自己喜欢的特效，调用 JS 即可。我选择的是点击桃心特效，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
(function(window,document,undefined){
  var hearts = [];
  window.requestAnimationFrame = (function(){
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback){
        setTimeout(callback,1000/60);
      }
  })();
  init();
  function init(){
    css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
    attachEvent();
    gameloop();
  }
  function gameloop(){
    for(var i=0;i<hearts.length;i++){
      if(hearts[i].alpha <=0){
        document.body.removeChild(hearts[i].el);
        hearts.splice(i,1);
        continue;
      }
      hearts[i].y--;
      hearts[i].scale += 0.004;
      hearts[i].alpha -= 0.013;
      hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
    }
    requestAnimationFrame(gameloop);
  }
  function attachEvent(){
    var old = typeof window.onclick==="function" && window.onclick;
    window.onclick = function(event){
      old && old();
      createHeart(event);
    }
  }
  function createHeart(event){
    var d = document.createElement("div");
    d.className = "heart";
    hearts.push({
      el : d,
      x : event.clientX - 5,
      y : event.clientY - 5,
      scale : 1,
      alpha : 1,
      color : randomColor()
    });
    document.body.appendChild(d);
  }
  function css(css){
    var style = document.createElement("style");
    style.type="text/css";
    try{
      style.appendChild(document.createTextNode(css));
    }catch(ex){
      style.styleSheet.cssText = css;
    }
    document.getElementsByTagName('head')[0].appendChild(style);
  }
  function randomColor(){
    return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
  }
})(window,document);

将上面源码存放为 click.js 文件内，将 click.js 文件放在 /hexo/themes/next/source/js/src\ 路径下。
打开 /hexo/themes/next/layout/_layout.swig 文件， 在 head 标签内最后位置添加以下代码：

1
<script type="text/javascript" src="/js/src/click.js"></script>

修改文章内链接文本样式

修改文件 /themes/next/source/css/_common/components/post/post.styl，在末尾添加如下 css 样式：

1
2
3
4
5
6
7
8
9
10
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

文章底部标签样式

修改模板 /hexo/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成或者可以从这里自己挑。

1
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i>{{ tag.name }}</a>

文章末尾添加结束标记

在路径 /hexo/themes/next/layout/_macro/ 中新建 passage-end-tag.swig 文件，并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-heart-o" aria-hidden="true"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开 /hexo/themes/next/layout/_macro/post.swig 文件，post-footer 之前添加如下代码（post-footer 之前两个 DIV）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>

    {% if (theme.alipay or theme.wechatpay or theme.bitcoin) and not is_index %}
      <div>
        {% include 'reward.swig' %}
      </div>
    {% endif %}

    {% if theme.post_copyright.enable and not is_index %}
      <div>
        {% include 'post-copyright.swig' with { post: post } %}
      </div>
    {% endif %}

    <footer class="post-footer">

打开主题配置文件 /hexo/themes/next/_config.yml, 在末尾添加：

1
2
3
# 文章末尾添加结束标记
passage_end_tag:
  enabled: true

侧边栏作者头像修改

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果，修改 /hexo/themes/next/source/css/_common/components/sidebar/sidebar-author.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
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
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1;

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

背景 & 透明度美化

背景图片

在 /hexo/themes/next/source/css/_custom 文件夹下打开 custom.styl 文件，往里面添加以下代码：

1
2
3
4
5
6
7
body{   
        background:url(图片链接);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
     }

文字背景色设置

在 /hexo/themes/next/source/css/_custom 文件夹下打开 custom.styl 文件，往里面添加以下代码：

1
2
3
4
5
.content {
            border-radius: 10px;
            margin-top: 60px;
            background:rgba(颜色rgb,透明度) none repeat scroll !important;
         }

代码块美化

这块工作让我头痛了很久！！！
代码块透明度设置，在 /hexo/themes/next/source/css/_custom 文件夹下打开 custom.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
// 单行代码块设置
code {
  background:rgba(241,241,241,0.3);
  margin: 2px;
}
// 多行代码块的自定义样式
.highlight{
  background:rgba(241,241,241,0.3);
}
.highlight, pre {
  margin: 5px 0;
  padding: 5px;
  border-radius: 3px;
  background:rgba(241,241,241,0.3);
}
.highlight, td{
  background:rgba(241,241,241,0.1)
}
.highlight, gutter pre{
  background:rgba(241,241,241,0.1)
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
    background:rgba(241,241,241,0.3)
}
table>tbody>tr:nth-of-type(odd){
  background:rgba(241,241,241,0.1)
}

注释 /hexo/themes/next/source/css/_components/highlight/highlight.styl 文件第 81、88 行：

1
// background-color: $highlight-gutter.bg-color

这一块修改学习到了一个小技巧，通过 chrome 的 F12→Elements→Styles 进行一层层修改测试，快速找到需要修改的地方。Ps：这里要谢谢我的同事 - C！

播放器

安装 APlayer 插件

安装 Aplayer 播放器，在 /hexo 目录执行 npm install aplayer --save。
安装完后在 node_modules 目录下找到 APlayer.min.js 文件，将其复制到 theme/next/source/js/src/ 目录下。
在你想要加入音乐播放器的地方插入以下代码，这里我把它放到了侧边栏。
打开 theme/next/layout/_custom/ 文件夹下的 sidebar.swig 文件，向其中添加以下代码：

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
<div id="player1" class="aplayer" data-id="2058781355" data-server="netease" data-type="playlist" data-mode="circulation"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 3,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'circulation',                                               // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                            // Optional, max height of play list
    music: [
        {
            title: '化身孤岛的鲸',                                          // Required, music title
            author: '不才',                                                // Required, music author
            url: '/music/不才 - 化身孤岛的鲸.mp3',                          // Required, music url
            pic: '/music/不才 - 化身孤岛的鲸.jpg',                          // Optional, music picture
            lrc: '/music/不才 - 化身孤岛的鲸.lrc'                           // Optional, lrc, see: ###With lrc
        },
        {
            title: '我的一个道姑朋友',                                      // Required, music title
            author: '以冬',                                               // Required, music author
            url: '/music/以冬 - 我的一个道姑朋友.mp3',                     // Required, music url
            pic: '/music/以冬 - 我的一个道姑朋友.jpg',                    // Optional, music picture
            lrc: '/music/以冬 - 我的一个道姑朋友.lrc'                    // Optional, lrc, see: ###With lrc
        },
        {
            title: '七月上',                                          // Required, music title
            author: 'Jam',                                           // Required, music author
            url: '/music/Jam - 七月上.mp3',                          // Required, music url
            pic: '/music/Jam - 七月上.jpg',                         // Optional, music picture
            lrc: '/music/Jam - 七月上.lrc'                         // Optional, lrc, see: ###With lrc
        }
    ]
});
</script>

自定义播放器样式

包含颜色更改，列表歌曲信息的排版修改。
在 /hexo/theme/next/source/css/_custom 文件夹下打开 custom.styl 文件，往里面添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 播放器设置
.aplayer-list{
    height: 100px !important;
}
.aplayer-list ol li:hover {   /*列表悬停颜色*/
                  background:rgba(255,255,255,0.3) none repeat scroll !important;}
.aplayer-list ol li {   /*列表底色*/
                        background:rgba(250,252,123,0.3);}
.aplayer-list-light {   /*列表播放歌曲颜色*/
                      background:rgba(97,217,101,0.3) none repeat scroll !important;}

#player1 {    /*边框样式*/
          border-radius: 6px;
          div,ol {border-radius: 6px;}
        }
#player1 *{color: #696969;}    /*字体颜色*/
/*列表歌曲信息的排版*/
.aplayer-list-index{float:left;}
.aplayer-list-title{float:left;}
.aplayer-list-author{float:right;}

音乐播放控制边栏

将 APlayer-Controler放入 /hexo/themes/next/source/js/src/ 目录下。
在 /hexo/themes/next/layout/_custom/ 文件夹下新建一个 myapcontroler.swig 的文件。向其中添加以下代码：

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
<script src="/js/src/APlayer-Controler.js"></script>
<div id="AP-controler"></div>
<script type="text/javascript">
var myapc=new APlayer_Controler({
		APC_dom:$('#AP-controler'),
		aplayer:ap, //此为绑定的aplayer对象
		attach_right:true,
		position:{top:'300px',bottom:''},
		fixed:true,
		btn_width:100,
		btn_height:120,
		img_src:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg',
				'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg',
				'http://oty1v077k.bkt.clouddn.com/pentigirl.jpg',
				'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif'],
		img_style:{repeat:'no-repeat',position:'center',size:'contain'},
		ctrls_color:'rgba(173,255,47,0.8)',
		ctrls_hover_color:'rgba(255,140,0,0.7)',
		tips_on:true,
		tips_width:140,
		tips_height:25,
		tips_color:'rgba(255,255,255,0.6)',
		tips_content:{},
		timeout:30
	});
</script>

在 /hexo/themes/next/layout 文件夹下打开_layout.swig 文件，在