hexo-next-theme美化

简单介绍

最近博客主题出现一些问题,所以将顺便将next-theme升级到了7.7.0的版本,因为之前版本都是改的主题代码,这与一来就要对主题重新做一次美化。新的版本中,可以不再修改主题原文件,而是直接新建一个自定义的文件来做修改。7.x以下版本需要通过修改源码来实现美化或增加功能。仔细读以下hexo的配置,修改配置后就可以实现美化,所以不再赘述。

添加文章结束标志

在hexo目录下创建source/_data/post-body-end.swig,添加以下内容。

1
<div style="text-align:center;color: #ccc;font-size:14px;">------ 本文结束 ------</div>

然后删除主题配置文件custom_file_pathpostBodyEnd的注释。

动态显示title

在hexo配置文件中添加subtitles,内容以,分割,或者自己修改分隔符,如:

1
2
3
subtitles:
- 人生当苦无妨,良人当归即可。
- 且行善举,莫问前程。

在hexo目录下创建source/_data/header.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
<script>
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}

function setSidebarMarginTop (headerOffset) {
return $('#sidebar').css({ 'margin-top': headerOffset });
}

function getHeaderOffset () {
return $('.header-inner').height() + CONFIG.sidebar.offset;
}

window.onload=function(){
var subtitle = "{{config.subtitles}}";
var mytitle = subtitle.split(",");
var max = mytitle.length-1;
var index = GetRandomNum(0,max);
var text = mytitle[index];
$(".site-subtitle").html(text);
var headOffset = getHeaderOffset();
setSidebarMarginTop(headOffset);
}
</script>

然后删除主题配置文件custom_file_pathheader的注释。

为主题文章添加阴影效果

在hexo目录下创建source/_data/styles.styl,添加以下内容。

1
2
3
4
5
6
7
.post-block {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

然后删除主题配置文件custom_file_pathstyle的注释。

禁止广告拦截软件

为了保证广告能够正常投放,并且产生收益,要禁止广告拦截软件,可以使用第三方代码fuckadblock

1
npm install fuckadblock

在hexo目录下创建source/_data/header.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
<script>
// Function called if AdBlock is not detected
function adBlockNotDetected() {
// console.log('AdBlock check is ok');
}
// Function called if AdBlock is detected
function adBlockDetected() {
for ( i=0; i<document.styleSheets.length; i++) {
void(document.styleSheets.item(i).disabled=true);
}
alert('本站显示不正常,可能因为您使用了广告拦截器。');
}

// We look at whether FuckAdBlock already exists.
if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
// If this is the case, it means that something tries to usurp are identity
// So, considering that it is a detection
adBlockDetected();
} else {
// Otherwise, you import the script FuckAdBlock
var importFAB = document.createElement('script');
importFAB.onload = function() {
// If all goes well, we configure FuckAdBlock
fuckAdBlock.onDetected(adBlockDetected)
// fuckAdBlock.onNotDetected(adBlockNotDetected);
};
importFAB.onerror = function() {
// If the script does not load (blocked, integrity error, ...)
// Then a detection is triggered
adBlockDetected();
};
importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
importFAB.crossOrigin = 'anonymous';
importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
document.head.appendChild(importFAB);
}
</script>

检测到广告拦截程序后,会禁用所有的网站样式。

小结

我的博客,除以上自己添加代码外,都是通过修改配置实现,无需修改主题代码,如更新主题,直接git pull即可。

如需要自定义功能或样式,在source/_data/下添加即可。