hexo功能扩展

发表于 | 更新于 | 分类于 ，

看到一篇知乎的文章，根据文章内容对现有网站进行了学习（其实就是完全照搬的….），原文链接见底部

创建分类

  1. 在 http://xxxx.github.io 目录下打开命令行
    (xxxx代指你GitHub上的用户名)

  2. 新建页面为 categories

hexo new page categories

  1. 编辑新建的index.md文件

创建标签云页面

  1. 打开命令行，定位到 http://xxxx.github.io 目录

  2. 新建一个页面，命名为 tags

    hexo new page tags

  3. 根据提示找到新建的 index.md 文件，编辑 title 即标签页的标题

为博客加上GitHub丝带

如果使用的是Next 主题（其他主题也差不多），添加 GitHub 丝带：在 xxx.github.io\themes\next\layout_layout.swig 中加入[^相关代码]，记得修改自己的链接！

为博客加入动态背景

首先找到\themes\next\layout_layout.swig，在末尾前加上下面一句:

浅蓝色线条

1
<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

然后在themes\source\js\src下新建文件particle.js写上以下代码:

1
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();

为博客加入鼠标点击显示红心

鼠标点击小红心在\themes\next\source\js\src文件目录下添加love.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);

找到\themes\next\layout_layout.swing文件，在文件的后面，</body>之前 添加以下代码：

1
2
<!-- 小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

添加Local Search功能

暂时还没加到网站上，应该是可以用的

安装 hexo插件在你的站点文件夹中，用shell等运行下面这行代码：

1
npm install hexo-generator-searchdb --save

编辑站点配置文件

添加以下字段：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

启用本地搜索

编辑主题配置文件启用本地搜索

1
2
3
# Local search
local_search:
  enable: true

网站的访问统计

不蒜子统计

大概是集合网站在不蒜子上的统计得到的，比百度和Google的网站统计方便

找到\themes\next\layout_partials\footer.swig文件，加入下面不蒜子统计代码：

1
2
3
4
5
  |  本页点击 <span id="busuanzi_value_page_pv"></span> 次
  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

在标题下添加【阅读量】等

没添加成功，不知道问题所在

现在要添加的阅读量统计也依赖下面这段代码

1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

打开/themes/next/layout/_macro/post.swig，找到标签<div class="post-meta"></div>，在该标签内部合适的位置（如time和categories之间或categories后面）添加：

1
2
3
{% if not is_index %}
  <span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}

将阅读量改为热度（单纯为了好玩）

未使用

还可以继续修改，看到好多人的博客不是阅读次数（阅读量），而是热度 188 ℃，那么可以继续这样修改，首先在Next主题的/themes/next/languages/zh-Hans文件中查找”阅读次数“这几个字，可以看到，在post中的visitors被定义为“阅读次数”，把这里的“阅读次数”改为“热度”。

那么怎么在页面中显示呢。打开Next主题文件夹中layout/_macro/post.swig，在这个文件里加上摄氏度的标志，在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可

修改标题下分类等的样式

未使用

在Next主题中，我用的是LeanCloud数据统计，默认样式是在统计数据前有个小眼睛，我感觉不好看，想把它去掉，那么打开/themes/next/layout/_macro/post.swig，找到标签<i class="fa fa-eye"></i>，去掉下面这段代码即可：

1
2
3
<span class="post-meta-item-icon">
  <i class="fa fa-eye"></i>
</span>

设置动态title

在标签那里！

在 \themes\next\source\js\src 目录下新建 dytitle.js 。添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitile = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = ' 页面崩溃啦 ~ | cwyaml！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' 噫又好了~ ' + OriginTitile;
         titleTime = setTimeout(function () {
             document.title = OriginTitile;
         }, 2000);
     }
 });

更改 \themes\next\layout_layout.swig 。在 </body>之前添加：

1
2
<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

首页分割线

在 \themes\next\source\css_custom\custom.styl 文件中添加以下代码，可以修改博客首页中每篇文章的分割线长度，我设置为了100%长度

1
2
3
4
5
6
7
8
9
10
11
//index页面中每篇文章相隔的那条线
.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;
    height: 3px;
    background: $grey-light;
    text-align: center;
  }
}

首页文章背景

尝试后发现不能达到我想要的效果就删除了，但是总的还是突出了背景和文字的区别

在 \themes\next\source\css_custom\custom.styl 文件中添加以下代码

1
2
3
4
5
6
7
8
9
//为主页的文章添加一个半透明的灰色背景
.post-block{
    .post-body{
        background-color:rgba(247, 247, 247, 0.788235294117647);
    }
    .post-header{
        background-color:rgba(247, 247, 247, 0.788235294117647);
    }
}

字体、颜色等设置

在\themes\next\source\css_variables\custom.styl 文件中添加以下代码。具体功能我已经做了注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 标题，修改成你期望的字体族
$font-family-headings = Georgia, sans
// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字体的大小
$font-size-base = 16px
// 代码字体的大小
$code-font-size = 14px
// 代码块颜色
$code-foreground = #dd0055
// Background color for <body>
$body-bg-color = #e7e5dc  //theme mist use #fdfdfd
// text-color
$text-color = #353535

[^相关代码]: 你可以在 GitHub 官方网站 GitHub Ribbons 上进行选择

参考：