插件化文章置顶轮播图、增加对 pjax 的处理

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 += `<div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms"><div class="blog-slider__img"><img src="${ item.swiper_cover||item.cover }" alt="${ item.swiper_cover||item.cover }"/></div><div class="blog-slider__content"><span class="blog-slider__code">${ item.date.format('YYYY-MM-DD') }</span><a class="blog-slider__title" href="${ item.path }">${ item.title }</a><div class="blog-slider__text">${ item.swiper_desc }</div><a class="blog-slider__button" href="${ item.path }">详情</a></div></div>`;
+        }
+    }
+
+    /* 拼接要插入的 html 片段 */
+    var temple_html =`${ temple[0] }<div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms">${ temple_html_item }</div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div>${ temple[1] }`;
+
+    var script_text = ` <script data-pjax>
+                            if(${get_layout} && location.pathname =='${ swiper_cfg.enable_page }'){
+                                var parent = ${ get_layout };
+                                var child = '${ temple_html }';
+                                console.log('swiper-bar加载成功');
+                                parent.insertAdjacentHTML("afterbegin",child);
+                                <!-- Inside a callback or Promise that runs after new DOM content has been inserted -->
+                                <!-- 以下语句是为了适配 pjax，由于插入 html 片段发生在 pjax 初始化之后，所以此链接中的 a 标签跳转会导致全局页面刷新，而以下的 refresh() 函数可以很好的解决这个问题 -->
+                                var newContent = document.querySelector("#recent-posts");
+                                pjax.refresh(newContent);
+                            }
+                        </script>
+                        <!-- Swiper JS -->
+                        <script data-pjax src = "https://unpkg.com/[email protected]/swiper-bundle.js"></script>
+                        <!-- Initialize Swiper -->
+                        <script data-pjax src = "https://unpkg.com/hexo-qidaink-swiper_bar/src/swiper-init.js"></script>
+                        <style>${swiper_cfg.plus_style}</style>`;
+    hexo.extend.injector.register('head_end',`<!-- Link Swiper's CSS -->
+                                              <link rel="stylesheet" href = "https://unpkg.com/[email protected]/swiper-bundle.css">
+                                              <link rel="stylesheet" href="https://unpkg.com/hexo-qidaink-swiper_bar/src/swiperbar.css">
+                                             `, "default");
+    hexo.extend.injector.register('body_end',script_text, "default");
+},priority_swiper())

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": {

readme.md

@@ -0,0 +1,76 @@
+# 自用文章置顶轮播图插件
+
+  本插件仅为方便自己学习使用，在作者原有插件的基础上进行修改，添加自己所需要的功能，以达到自己想要的效果。如有需求，还请使用原作者插件(当时fork的时候原作者插件版本为 1.1.1)。
+
+- 原作者插件项目
+
+<table>
+    <tr>
+        <td align="center">参考项目</td>
+        <td align="center">项目地址</td>
+    </tr>
+    <tr>
+        <td align="left">Zfour/hexo-swiper-bar</td>
+        <td align="left"><a href="https://github.com/Zfour/hexo-swiper-bar" target="_blank">https://github.com/Zfour/hexo-swiper-bar</td>
+    </tr>
+</table>
+
+- 参考博客
+
+<table>
+    <tr>
+        <td align="center">参考博客</td>
+        <td align="center">博客文章</td>
+    </tr>
+    <tr>
+        <td align="left">小冰博客</td>
+        <td align="left"><a href="https://zfe.space/post/hexo-swiper.html" target="_blank">教程：hexo-swiper 文章置顶插件</td>
+    </tr>
+    <tr>
+        <td align="left">Akilarの糖果屋</td>
+        <td align="left"><a href="https://akilar.top/posts/8e1264d1/" target="_blank">基于 swiper 的首页置顶轮播图</td>
+    </tr>
+</table>
+
+# hexo-qidaink-swiper_bar
+
+## 安装
+
+```shell
+npm i hexo-qidaink-swiper_bar
+```
+
+## 更新
+```shell
+npm i hexo-qidaink-swiper_bar@latest
+```
+
+## 配置
+
+&emsp;&emsp;具体的配置可以查看参考博客中的博主文章，因为本插件是从冰老师的插件修改而来，所以配置就是按照冰老师的来的。
+
+&emsp;&emsp;由于自己使用的是 NexT 主题，所以本来是想适配到 NexT 的，但是对于搞硬件的我来说，这个还是有点小难，只是解决了插件对于 pjax 的适配(当时 fork 冰老师的插件的时候，冰老师的插件产生的文章轮播图框是正常的，但是点击其中链接，会导致全局刷新，对于 aplayer 就比较的不友好)，后边准备考研，所以就先记录在这里把，以后有空再进行修改。
+
+&emsp;&emsp;在站点配置文件`_config`中添加以下内容:
+```yaml
+swiper:
+  enable: true
+  priority: 2
+  enable_page: /
+  layout:
+    type: id
+    name: recent-posts
+    index: 0
+  temple_html: '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container">${temple_html_item}</div></div>'
+  plus_style: ""
+```
+
+## 使用
+
+&emsp;&emsp;在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。
+
+```markdown
+swiper_index: 8
+swiper_desc: 文章描述
+swiper_cover: /images/xxx.jpg
+```