hexo-next-theme美化

发表于 分类于 阅读次数： Disqus：

简单介绍

最近博客主题出现一些问题，所以将顺便将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_path的postBodyEnd的注释。

动态显示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_path的header的注释。

为主题文章添加阴影效果

在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_path的style的注释。

禁止广告拦截软件

为了保证广告能够正常投放，并且产生收益，要禁止广告拦截软件，可以使用第三方代码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/下添加即可。