SwiperBar个性化

前言

这篇文章本来都写得差不多了，提交的时候发现有一个Git记录没有修正，然后不小心把提交删了，好几篇文章就此没了，我直接哭死。

因为在用店长的hexo-butterfly-swiper^[1]，对于要修改Front-matter感到挺麻烦的，加上之前用Aurora主题^[2]的时候，看到它的一个“推荐文章”的机制很有意思——Front-matter里面选择类似于“top:true”的，就可以列入推荐文章列表，然后显示最近三篇，不足3篇就都显示。

个人就把店长插件源码逻辑给改了，并且发布了npm包，关于包的安装跟配置，可以看BTMuli/hexo-butterfly-swiper-btmuli: 对于hexo-butterfly-swiper的个性化 (github.com)。

原版代码

分析店长插件的源码^[3]，主要是index.js前面不到60行：

hexo.extend.filter.register('after_generate', function () {
  // 获取所有文章
  var posts_list = hexo.locals.get('posts').data;
  var swiper_list = []
  // 若文章的front_matter内设置了index和描述，则将其放到swiper_list内
  for (var item of posts_list) {
    if (item.swiper_index) {
      swiper_list.push(item)
    }
  }
  // 对swiper_list进行处理，使其按照index大小进行排序
  function sortNumber(a, b) {
    return a.swiper_index - b.swiper_index
  }
  swiper_list = swiper_list.sort(sortNumber);
  // 排序反转，使得数字越大越靠前
  swiper_list = swiper_list.reverse();
// =====================================================================
  // 首先获取整体的配置项名称
  const config = hexo.config.swiper || hexo.theme.config.swiper
  // 如果配置开启
  if (!(config && config.enable)) return
  // 集体声明配置项
    const data = {
      pjaxenable: hexo.theme.config.pjax.enable,
      enable_page: config.enable_page ? config.enable_page : "all",
      exclude: config.exclude,
      timemode: config.timemode ? config.timemode : "date",
      layout_type: config.layout.type,
      layout_name: config.layout.name,
      layout_index: config.layout.index ? config.layout.index : 0,
      error_img: config.error_img ? urlFor(config.error_img) : "https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif",
      insertposition: config.insertposition ? config.insertposition : "afterbegin",
      swiper_list: swiper_list,
      default_descr: config.default_descr ? config.default_descr : "再怎么看我也不知道怎么描述它的啦！",
      swiper_css: config.swiper_css ? urlFor(config.swiper_css) : "https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.css",
      swiper_js: config.swiper_js ? urlFor(config.swiper_js) : "https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.js",
      custom_css: config.custom_css ? urlFor(config.custom_css) : "https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiperstyle.css",
      custom_js: config.custom_js ? urlFor(config.custom_js) : "https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper_init.js"
    }

不难发现逻辑是这样的：

获取文章的data
若有swiper-index的值就放进列表
排序，反转调整
侦测配置并初始化

个性化修改

原方案的timezone可以拿出来作为排列顺序使用，然后再加一个swiper_num作为最大展示数就行。

所以主要步骤就是——

声明变量

    var posts_list = hexo.locals.get('posts').data;
    var swiper_list = []
+  var swiper_num = 6

更改加入列表条件

// 若文章的front_matter内设置了index和描述，则将其放到swiper_list内
for (var item of posts_list) {
  if (item.swiper_index === true) {
    swiper_list.push(item)
  }
}

配置项获取

   swiper_list: swiper_list,
+ swiper_num: config.swiper_num > 10 ? 6 : ( config.swiper_num < 0 ? 6 : config.swiper_num ), //最多6篇

排序，转置，数量截断

// 对swiper_list进行处理，使其按照规定顺序排序 创建/更新 时间
function sortNumber(a, b) {
    if(data.timemode === "date")
        return a.date - b.date
    else
        return a.updated - b.updated
}
swiper_list = swiper_list.sort(sortNumber);
// 转置调整顺序
swiper_list.reverse();
// 不能超过一定数量
if(swiper_list.length > swiper_num)
    swiper_list.splice(swiper_num)

完整代码

所以改完后的到渲染为止的代码就是：

hexo.extend.filter.register('after_generate', function () {
  // 获取所有文章
  var posts_list = hexo.locals.get('posts').data;
  var swiper_list = []
  var swiper_num = 6
  // 若文章的front_matter内设置了index和描述，则将其放到swiper_list内
  for (var item of posts_list) {
    if (item.swiper_index === true) {
      swiper_list.push(item)
    }
  }
// =====================================================================
  // 首先获取整体的配置项名称
  const config = hexo.config.swiper || hexo.theme.config.swiper
  // 如果配置开启
  if (!(config && config.enable)) return
  // 集体声明配置项
    const data = {
      pjaxenable: hexo.theme.config.pjax.enable,
      enable_page: config.enable_page ? config.enable_page : "all",
      exclude: config.exclude,
      timemode: config.timemode ? config.timemode : "updated",
      layout_type: config.layout.type,
      layout_name: config.layout.name,
      layout_index: config.layout.index ? config.layout.index : 0,
      error_img: config.error_img ? urlFor(config.error_img) : "https://npm.elemecdn.com/hexo-butterfly-swiper-btmuli/lib/loading.gif",
      insertposition: config.insertposition ? config.insertposition : "afterbegin",
      swiper_list: swiper_list,
      swiper_num: config.swiper_num > 10 ? 6 : ( config.swiper_num < 0 ? 6 : config.swiper_num ), //最多6篇
      default_descr: config.default_descr ? config.default_descr : "再怎么看我也不知道怎么描述它的啦！",
      swiper_css: config.swiper_css ? urlFor(config.swiper_css) : "https://unpkg.zhimg.com/hexo-butterfly-swiper-btmuli/lib/swiper.min.css",
      swiper_js: config.swiper_js ? urlFor(config.swiper_js) : "https://unpkg.zhimg.com/hexo-butterfly-swiper-btmuli/lib/swiper.min.js",
      custom_css: config.custom_css ? urlFor(config.custom_css) : "https://unpkg.zhimg.com/hexo-butterfly-swiper-btmuli/lib/swiperstyle.css",
      custom_js: config.custom_js ? urlFor(config.custom_js) : "https://unpkg.zhimg.com/hexo-butterfly-swiper-btmuli/lib/swiper_init.js"
    }
  // 对swiper_list进行处理，使其按照规定顺序排序 创建/更新 时间
  function sortNumber(a, b) {
    if(data.timemode === "date")
      return a.date - b.date
    else
      return a.updated - b.updated
  }
  swiper_list = swiper_list.sort(sortNumber);
  // 转置调整顺序
  swiper_list.reverse();
  // 不能超过一定数量
  if(swiper_list.length > swiper_num)
    swiper_list.splice(swiper_num)