diff --git a/index.js b/index.js new file mode 100644 index 0000000..8418c62 --- /dev/null +++ b/index.js @@ -0,0 +1,103 @@ +/* ===================================================================== +* FileInstructions：文章置顶轮播图js实现文件 +* Repository: https://github.com/Zfour/hexo-swiper-bar +* RelatedLinks: https://www.swiper.com.cn/ +* Author: Zfour +* Modify: qidaink +* Instructions: 仅供自己学习使用，如有需求，还请使用作者原插件 +* =====================================================================*/ +/* global hexo */ + +'use strict'; /* 启用strict模式 */ + +/* ------------------------------------------------------------------ */ +/* 过滤器的优先级 priority，值越低，过滤器会越早执行 */ +function priority_swiper(){ + var priority = 0 + if(hexo.config.swiper.priority){ + priority = hexo.config.swiper.priority + } + else{ + priority = 0 + } + return priority +} + +/* ------------------------------------------------------------------ */ +/* 使用 after_generate 过滤器（必须是生成文件之后才行） */ +hexo.extend.filter.register('after_generate',function() { + var swiper_cfg = hexo.config.swiper; + + if(swiper_cfg.enable == false) return; + + var layout_name =''; + var layout_type =''; + var layout_index =0; + var temple = swiper_cfg.temple_html.split("${temple_html_item}") /* ${temple_html_item} 作为一个字符串，用于分割字符串 */ + layout_name = swiper_cfg.layout.name; /* 将代码片段插入的地方的名字标识 */ + layout_type = swiper_cfg.layout.type; /* type 表示标识的类型 可以为 id 和 class ，id是唯一的，更加方便查找 */ + layout_index = swiper_cfg.layout.index; /* 定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个 */ + + var get_layout = ''; + if (layout_type == 'class'){ /* type 为 class */ + /* 返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个DOM文档，包含根节点。 + 也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。*/ + get_layout = `document.getElementsByClassName('${ layout_name }')[${ layout_index }]`; + } + else if (layout_type == 'id'){ /* type 为 id */ + /* getElementById()返回一个匹配特定 ID的元素，由于元素的 ID 在大部分情况下要求是独一无二的， + 这个方法自然而然地成为了一个高效查找特定元素的方法。*/ + get_layout = `document.getElementById('${ layout_name }')`; + } + else { /* type 默认的情况为 id */ + get_layout = `document.getElementById('${layout_name}')` + } + + var temple_html_item = ''; + var item = ''; + var posts_list = hexo.locals.get('posts').data; /* 获取文章的所有信息，主要是为了获得Front-matter中的参数,决定了该插件必须使用 after_generate 过滤器 */ + var new_posts_list =[]; + for (item of posts_list){ + if(item.swiper_index && item.swiper_desc){ + new_posts_list.push(item); /* push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。*/ + } + } + /* 返回两个元素的差值 */ + function sortNumber(a,b){ + return a.swiper_index - b.swiper_index + } + new_posts_list = new_posts_list.sort(sortNumber); /* arr.sort([compareFunction]) compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前 */ + new_posts_list = new_posts_list.reverse(); /* reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。*/ + + for (item of new_posts_list){ + if(item.swiper_index && item.swiper_desc){ + temple_html_item += `
${ item.swiper_cover||item.cover }
${ item.date.format('YYYY-MM-DD') }${ item.title }
${ item.swiper_desc }
详情
`; + } + } + + /* 拼接要插入的 html 片段 */ + var temple_html =`${ temple[0] }
${ temple_html_item }
${ temple[1] }`; + + var script_text = ` + + + + + `; + hexo.extend.injector.register('head_end',` + + + `, "default"); + hexo.extend.injector.register('body_end',script_text, "default"); +},priority_swiper()) \ No newline at end of file diff --git a/package.json b/package.json index 06075d3..32f43ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-qidaink-swiper_bar", - "version": "1.0.0", + "version": "1.1.0", "description": "The swiper bar of Cloud And Sea.", "main": "index.js", "scripts": { diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..ddee9a4 --- /dev/null +++ b/readme.md @@ -0,0 +1,76 @@ +# 自用文章置顶轮播图插件 + +  本插件仅为方便自己学习使用，在作者原有插件的基础上进行修改，添加自己所需要的功能，以达到自己想要的效果。如有需求，还请使用原作者插件(当时fork的时候原作者插件版本为 1.1.1)。 + +- 原作者插件项目 + + + + + + + + + + +
参考项目项目地址
Zfour/hexo-swiper-barhttps://github.com/Zfour/hexo-swiper-bar
+ +- 参考博客 + + + + + + + + + + + + + + +
参考博客博客文章
小冰博客教程：hexo-swiper 文章置顶插件
Akilarの糖果屋基于 swiper 的首页置顶轮播图
+ +# hexo-qidaink-swiper_bar + +## 安装 + +```shell +npm i hexo-qidaink-swiper_bar +``` + +## 更新 +```shell +npm i hexo-qidaink-swiper_bar@latest +``` + +## 配置 + +  具体的配置可以查看参考博客中的博主文章，因为本插件是从冰老师的插件修改而来，所以配置就是按照冰老师的来的。 + +  由于自己使用的是 NexT 主题，所以本来是想适配到 NexT 的，但是对于搞硬件的我来说，这个还是有点小难，只是解决了插件对于 pjax 的适配(当时 fork 冰老师的插件的时候，冰老师的插件产生的文章轮播图框是正常的，但是点击其中链接，会导致全局刷新，对于 aplayer 就比较的不友好)，后边准备考研，所以就先记录在这里把，以后有空再进行修改。 + +  在站点配置文件`_config`中添加以下内容: +```yaml +swiper: + enable: true + priority: 2 + enable_page: / + layout: + type: id + name: recent-posts + index: 0 + temple_html: '
${temple_html_item}
' + plus_style: "" +``` + +## 使用 + +  在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。 + +```markdown +swiper_index: 8 +swiper_desc: 文章描述 +swiper_cover: /images/xxx.jpg +``` \ No newline at end of file