Stellar首页轮播图

观前提醒

Warning

请注意，由于本博客对首页样式进行了改动，所以以下教程不完全适用于官方Stellar，只提供参考作用并留作备份用途。代码写的一坨，凑活着看

轮播位置

需要选择放置轮播图的位置，因为我想偷懒（划掉）复用 post-card 的css，所以我选择将轮播图放在 post-list 文章列表前。找到构建首页 post-list 部分的代码，位于 theme/stellar/layout/index.ejs ，加入构建轮播图的部分。

构建分为两部分，第一部分是过滤出 front-matter 中含有 swiper_index 的文章并按从大到小进行排序(好像不排序也没有什么问题，反正都要循环轮播🧐)

第二部分则是添加轮播图的 HTML 结构。

由于我是放置于 post-list 中，所以我在 layout_post_list 中引用 render_swiper

完整代码见

https://github.com/weekdaycare/hexo-theme-stellar/blob/main/layout/index.ejshttps://github.com/weekdaycare/hexo-theme-stellar/blob/main/layout/index.ejs

传入参数优化

Stellar 主题默认传递给 swiper 的参数是给图片轮播用的，不适用于首页轮播图，所以我们需要其能判断是首页轮播还是图片轮播。修改 theme/stellar/layout/_plugins/swiper.ejs ，我在其中增加了 isHomepage 的判断，若 isHomepage 为 false 则 swiper 的默认样式为图片轮播。

CSS 样式

引入时加入判断，若 homepage 启用则引入

source/css/_plugins/index.styl

if hexo-config('plugins.swiper.homepage')
  @import 'slide'

然后新建 theme/stellar/source/css/_plugins/slide.styl 这里写轮播图的 css 样式。

Be careful，请根据自己的 post-card 实际情况调整css样式，由于本人改动过 post.cover 所以直接套我的css效果大概是惨不忍睹的。

How to Use

启用插件以及css

要实现轮播效果需要用到 swiper ，Stellar 的 {% swiper %} 标签中已经存在引入脚本的操作，所以不妨稍加利用一下，启用 swiper 并添加 homepage 选项。

_config.stellar.yml

plugins:
  swiper:
    enable: true
    homepage: true # 增加该项
    css: https://unpkg.com/swiper@10.3.1/swiper-bundle.min.css
    js: https://unpkg.com/swiper@10.3.1/swiper-bundle.min.js

设置文章轮播

在你想要轮播的文章 front-matter 中加入 swiper_index 参数

front-matter

---
title: test
swiper_index: 1 # 数字越大轮播的位置越靠前
---

预览

见首页。

大功告成，now Enjoy！

CC BY-NC-ND 4.0 若你喜欢我的文章欢迎互动，玩的愉快！