Hexo Next主题美化

发表于 | 分类于 |

Hexo Next主题美化

Hexo支持很多自定义主题和插件，本人使用的是Next主题，也涉及很多美化，为此记录一下。

添加页脚访客人数和总访问量

使用的是不蒜子来进行统计,不蒜子是一款记录访客和访问量的插件.

1.安装脚本

要使用不蒜子必须在页面中引入busuanzi.js，在themes/next/layout/_partial/footer.swig中添加脚本，代码如下

1
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

2.安装标签

要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

1
2
3
<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

3.安装步骤

一般显示站点访问量在页脚，所以在footer.swig中添加标签，在themes/next/_config.yml中加入以下配置：

1
2
# visitors count
  counter: true

在themes/next/layout/_partial/footer.swig中添加以下代码：

1
2
3
4
5
6
{% if theme.footer.counter %}
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">本站访客数<span id="busuanzi_value_site_uv"></span>人</span>
{% endif %}

这样便可以在底部显示访问量了。之后使用hexo clean清空缓存，使用hexo generate重新生成站点文件，使用hexo deploy部署，就能看到效果了。

设置Menu

菜单栏会显示可以跳转的页面。

  • 如果还要添加，编辑themes/next/_config.yml：

    1
    2
    3
    4
    5
    6
    7
    8
    menu:
      home: / || home  //首页
      about: /about/ || user  //关于
      tags: /tags/ || tags  //标签
      categories: /categories/ || th   //分类
      archives: /archives/ || archive //归档
      schedule: /schedule/ || calendar   //日程表
      sitemap: /sitemap.xml || sitemap   //站点地图

    将需要的Menu前面#号去掉。

设置动态背景

主题配置文件中找到canvas_nest，设置成ture

1
2
# Canvas-nest
canvas_nest: ture

修改底部标签样式

  • 修改Blog\themes\next\layout\_macro\post.swig中文件，搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>。

侧边栏社交图标设置

  • 打开主题配置文件_config.yml，搜索Social，社交账号前面的#号去掉。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    #social:
      GitHub: https://github.com/yourname || github
      简书: https://www.jianshu.com/u/63445e24e8bf || heartbeat
      掘金: https://juejin.im/user/5a371ae551882512d0607108 || spinner
      #E-Mail: mailto:yourname@gmail.com || envelope
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      #Instagram: https://instagram.com/yourname || instagram
      #Skype: skype:yourname?call|chat || skype

添加网页顶部进度加载条

  • 编辑主题配置文件，搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Progress bar in the top during page loading.
    pace: ture
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-barber-shop
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-corner-indicator
    #pace-theme-fill-left
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    # For example
    # pace_theme: pace-theme-center-simple
    pace_theme: pace-theme-minimal

添加点击爱心效果

  1. 在/themes/next/source/js/src下新建文件 clicklove.js ，接着把代码拷贝粘贴到 clicklove.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);

  2. 在\themes\next\layout\_layout.swig文件末尾添加：

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

背景图片设置

打开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
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
// Custom styles.
//背景图片相关
@media screen and (min-width:1200px) {

    body {
		background-image:url(/images/bg1.jpg);
		background-repeat: no-repeat;
		background-attachment:fixed;
		background-position:50% 50%;
		background-size: cover
    }


    #footer a {
        color:#eee;
    }
	
	//改变背景色和透明度
	.main-inner {
		background: #fff;
		opacity: 0.9;
	}
	
	// 文章标题动态效果
	.posts-expand .post-title-link::before {
		background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
	}
	
	code {
		color: #ff7600;
		background: #fbf7f8;
		margin: 2px;
	}
	// 大代码块的自定义样式
	.highlight, pre {
		margin: 5px 0;
		padding: 5px;
		border-radius: 3px;
	}
	.highlight, code, pre {
		border: 1px solid #d6d6d6;
	}

}

	.site-title {
		font-size: 24px;
		font-weight: 400;
		font-family: 'Damion',"PingFang SC","Microsoft YaHei",sans-serif;
	}
	
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}

文章添加阴影、透明效果

1
2
3
4
5
6
7
8
9
// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   background:rgba(255,255,255,0.9) none repeat scroll !important;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

文章末尾添加版权声明

查找主题配置文件themes/next/_config.yml中的creative_commons

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

文字背景以及半透明的设置

打开theme/next/source/css/_custom/custom.styl，添加以下代码：

1
2
3
4
5
.content {
	border-radius: 20px; //文章背景设置圆角
	padding: 30px 60px 30px 60px;
	background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
}
0%