# 教程：hexo-swiper 文章置顶插件

本文作者：Skytyun (opens new window)

本站地址：https://gyb.skytyun.top (opens new window)

# 效果如下：

code

# NPM 插件安装的部署方法：

npm i hexo-swiper-bar --save

# 或者

cnpm i hexo-swiper-bar --save

1
2
3
4
5

注意，一定要加 --save，不然本地预览的时候可能不会显示！！！

# 新增网站根目录_config 配置项 (不是主题的)：

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

1
2
3
4
5
6
7
8
9
10

enable 参数：true/false 含义：是否开启插件
enable_page 参数：/ 含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等
priority 参数：1 含义：插件的叠放顺序，数字越大，叠放约靠前。

swiper:
  enable: true
  priority: 2 # 这里是参数

1
2
3

layout 参数：type; （class&id）参数：name; 参数：index；（数字）含义：如果说 swiper 是一幅画，那么这个 layout 就是指定了哪面墙来挂画而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。最后墙的名字即是 name;

<div name="我是墙" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      <!--这里通过js挂载swiper，也就是画画-->
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8

temple_html 参数：html 模板字段含义：包含挂载容器

<div class="recent-post-item" style="height: auto;width: 100%"><!--文章容器 -->
  <div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><!-- swiper容器 -->
    ${temple_html_item}</div>
</div>

1
2
3
4

plus_style 参数：“” 含义：提供可自定义的 style，如加入黑夜模式。

# 挂载方法

在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。

swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png

1
2
3

# hexo 三连

执行 hexo 三连

hexo clean && hexo g && hexo s

即可发现已经成功部署教程原贴:https://zfe.space/(小冰)