教程:hexo-swiper 文章置顶插件
效果如下:
NPM 插件安装的部署方法:
1 | npm i hexo-swiper-bar --save |
注意,一定要加 --save,不然本地预览的时候可能不会显示!!!
新增网站根目录_config 配置项 (不是主题的):
1 | swiper: |
-
enable
参数:true/false
含义:是否开启插件 -
enable_page
参数:/
含义:路由地址,如 / 代表主页。/me/ 代表自我介绍页等等 -
priority
参数:1
含义:插件的叠放顺序,数字越大,叠放约靠前。
1 | swiper: |
- layout
参数:type; (class&id)
参数:name;
参数:index;(数字)
含义:如果说 swiper 是一幅画,那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况,这时就需要使用 index,确定是哪一个。
最后墙的名字即是 name;
1 | <div name="我是墙" id="recent-posts"> |
- temple_html
参数:html 模板字段
含义:包含挂载容器
1 | <div class="recent-post-item" style="height: auto;width: 100%"><!--文章容器 --> |
- plus_style
参数:“”
含义:提供可自定义的 style,如加入黑夜模式。
挂载方法
在 Front-matter 添加以下参数即可,index 数字越大越靠前展示。
1 | swiper_index: 8 |
hexo 三连
执行 hexo 三连
1 | hexo clean && hexo g && hexo s |
即可发现已经成功部署
教程原贴:https://zfe.space/(小冰)
评论