hexo博客文章优化

博客文章添加折叠功能

博客文章中，有些内容篇幅较大，但是可能对一部分读者来说，并不会特别关注，所以这些数据的展示，可能会直接导致整篇博文变得臃肿，而对另一部分读者，这部分详细的介绍却非常重要，因此不能简单的缩减博文，所以这个时候，针对文章中这部分篇幅较大的内容，增加折叠功能可以很好的解决这类问题。

在main.js中添加折叠js

next主题的主要js位于 themes/next/source/js/src/post-details.js
在里面找合适的位置，添加如下代码：

$(document).ready(function(){
    $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
    });
    //默认情况下折叠
    $("div.fold").css("display","none");
});

自定义内建标签

在主题scripts下添加一个tags.js, 位于themes/next/scripts/tags.js

/*
  @haohuawu
  修复 Nunjucks 的 tag 里写 ```代码块```，最终都会渲染成 undefined 的问题
  https://github.com/hexojs/hexo/issues/2400
*/
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

再继续添加一个themes/next/scripts/fold.js

/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
    var text = args[0];
    if(!text) text = "点击显/隐";
    return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

最后，添加几个自定义样式，位置 themes/next/source/css/_custom/custom.styl

.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

最后，在我们需要折叠的地方前后添加便签，示例用法：

{% fold 点击显/隐内容 %}
something you want to fold, include code block.
{% endfold %}

参考博客

Hexo博文置顶（自定义排序）

HEXO默认是按照时间顺序排一条线，然后按照时间顺序来决定显示的顺序的。按照网上的教程整理了一份方法。

使用的是top属性，top值越高，排序越在前，不设置top值得博文按照时间顺序排序。
修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js

打开在最后添加如下javascript代码

posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
    if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
    else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
    return -1;
}
else if(!a.top && b.top) {
    return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
)};

更改以后，在写博客的时候，添加top属性就可以啦；