https://github.com/sumumm/hexo-qidaink-swiper_bar

https://github.com/sumumm/hexo-qidaink-swiper_bar

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/sumumm/hexo-qidaink-swiper_bar
• Owner: sumumm
• Created: 2021-05-07T23:29:48.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-05-11T12:25:04.000Z (over 3 years ago)
• Last Synced: 2024-10-14T03:18:52.177Z (about 1 month ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 自用文章置顶轮播图插件

  本插件仅为方便自己学习使用，在作者原有插件的基础上进行修改，添加自己所需要的功能，以达到自己想要的效果。如有需求，还请使用原作者插件(当时fork的时候原作者插件版本为 1.1.1)。

- 原作者插件项目

    

        参考项目

        项目地址

    

    

        Zfour/hexo-swiper-bar

        https://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

```