Original Link: Hexo: Butterfly Theme Magic Change Homepage Sticky Lunbo Plugin | Elvin
1. Initial effect
Two, install the plug-in
npm install hexo-butterfly-swiper --save
3. Configure the plug-in
Add the following configuration under the _config.ymlconfiguration file or custom theme configuration file (mine is )_config.butterfly.yml
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: all # 应用页面
timemode: date #date/updated
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法
4. Plug-in parameters
| parameter | Alternative value/type | paraphrase |
|---|---|---|
| priority | number | [Optional] Filter priority, the smaller the value, the earlier the execution, the default is 10, optional |
| enable | true/false | 【Required】Control switch |
| enable_page | path/all | [Optional] Fill in the relative path (that is, the routing address) of the page you want to apply, such as '/' for the root directory, and '/categories/' for the category page. To apply to all pages, fill in 'all', the default is all |
| fearfully | date/updated | [Optional] Time display, date is to display the creation date, updated is to display the update date, the default is date |
| layout.type | id/class | [Optional] Mount container type, fill in id or class, if not filled, the default is id |
| layout.name | text | [Required] Mount container name |
| layout.index | 0 sum positive integer | [Optional] The premise is that the layout.type is class, because there may be multiple classes on the same page, this item is used to confirm the ranking |
| default_descr | text | Default article description |
| swiper_css | url | [Optional] Custom swiper dependency css link |
| swiper_js | url | [Optional] Custom swiper dependencies plus js links |
| custom_css | url | [Optional] Adapt theme style patch |
| custom_js | url | [Optional] swiper initialization method |
- For more details, you can check the article of the boss, [Portal]
5. How to use
The configuration front_matteradded at the article can beswiper_index
title: 建站首发：Markdown语法开篇
tags:
- Markdown
- 语言
categories: 语言
sticky: 1
katex: true
cover: http://qiniu.gocit.cn/blog_posts_1/cover_img.jpeg
top_img: http://qiniu.gocit.cn/blog_posts_1/top_img.png
date: 2022-08-02 09:28:56
abbrlink: 1
swiper_index: 1
description: 务必阅读：适用于新手快速入门的Markdown语法使用教程，运用Markdown语法是建立blog的必要前提!zf
- swiper_index #The order of the top carousel, a non-negative integer, the bigger the number, the higher the front
- description #article description
- abbrlink #Permanent link id (see [Portal] for details )
Six, the final effect
reference link
More knowledge is being continuously updated!!!
statement
The source of the original text is indicated in the reference part, and the source of the original text can be obtained at the reference link of the article
If the content in the article involves the original copyright, please contact [email protected] by email , and the related articles or content will be changed or canceled in time