在 Hexo 中集成 Swiper

前言

hexo-tag-swiper ,一个能够在 Hexo 中使用 Swiper 的插件。

正文

安装

1
npm install hexo-tag-swiper --save

配置

在 Hexo 的 _config.yml 中配置

1
2
3
swiper:
jsUrl: "https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js" // default is "https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"
cssUrl: "https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" // default is "https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
  • jsUrl - 引用的 Swiper js 文件的地址
  • cssUrl - 引用的 Swiper css 文件的地址

插件内置了对 next 主题的简单样式支持,如果你的主题不是 next ,如果有需要可以在 scripts 文件夹下自己编写相关的样式

1
2
3
4
5
6
7
8
9
10
// scripts/swiper.my-theme.js
hexo.extend.injector.register("body_end", () => {
const { theme = "my-theme" } = hexo.config || {};
if (theme === "my-theme") {
return `<style>
// 额外的样式
</style>`;
}
return "";
});

这里的 my-theme 是你当前使用的主题,对应到 Hexo 的 _config.yml 中为 theme

普通使用

语法

1
2
3
4
5
{% swiper %}
{% swiperItem %}
write your content here
{% endswiperItem %}
{% endswiper %}

例子

1
2
3
4
5
6
7
8
9
{% swiper %}
{% swiperItem %}
William Stoner is born on a small farm in 1891. One day his father suggests he should attend the University of Missouri to study agriculture. Stoner agrees but, while studying a compulsory literature course, he quickly falls in love with literary studies. Without telling his parents, Stoner quits the agriculture program and studies only the humanities. He completes his MA in English and begins teaching. In graduate school, he is friendly with fellow students Gordon Finch and Dave Masters. World War I begins, and Gordon and Dave enlist. Despite pressure from Gordon, Stoner decides to remain in school during the war. Masters is killed in France, while Finch sees action and becomes an officer. At a faculty party, Stoner meets and becomes infatuated with a young woman named Edith, who is staying with an aunt for a few weeks.
{% endswiperItem %}
{% swiperItem %}
Stoner woos Edith, and she agrees to marry him. Stoner’s marriage to Edith is bad from the start. It gradually becomes clear that Edith has profound emotional problems. Significantly, she is bitter about having cancelled a trip to Europe with her aunt to marry Stoner. After three years of marriage, Edith suddenly informs Stoner that she wants a baby. She suddenly becomes passionate sexually, but this period is brief. When their daughter Grace is born, Edith remains bedridden for nearly a year, and Stoner largely cares for their child alone. He grows close with his young daughter, who spends most of her time with him in his study. Stoner gradually realizes that Edith is waging a campaign to separate him from his daughter emotionally.
Stoner woos Edith, and she agrees to marry him. Stoner’s marriage to Edith is bad from the start. It gradually becomes clear that Edith has profound emotional problems. Significantly, she is bitter about having cancelled a trip to Europe with her aunt to marry Stoner. After three years of marriage, Edith suddenly informs Stoner that she wants a baby. She suddenly becomes passionate sexually, but this period is brief. When their daughter Grace is born, Edith remains bedridden for nearly a year, and Stoner largely cares for their child alone. He grows close with his young daughter, who spends most of her time with him in his study. Stoner gradually realizes that Edith is waging a campaign to separate him from his daughter emotionally.
{% endswiperItem %}
{% endswiper %}

效果

William Stoner is born on a small farm in 1891. One day his father suggests he should attend the University of Missouri to study agriculture. Stoner agrees but, while studying a compulsory literature course, he quickly falls in love with literary studies. Without telling his parents, Stoner quits the agriculture program and studies only the humanities. He completes his MA in English and begins teaching. In graduate school, he is friendly with fellow students Gordon Finch and Dave Masters. World War I begins, and Gordon and Dave enlist. Despite pressure from Gordon, Stoner decides to remain in school during the war. Masters is killed in France, while Finch sees action and becomes an officer. At a faculty party, Stoner meets and becomes infatuated with a young woman named Edith, who is staying with an aunt for a few weeks.

Stoner woos Edith, and she agrees to marry him. Stoner’s marriage to Edith is bad from the start. It gradually becomes clear that Edith has profound emotional problems. Significantly, she is bitter about having cancelled a trip to Europe with her aunt to marry Stoner. After three years of marriage, Edith suddenly informs Stoner that she wants a baby. She suddenly becomes passionate sexually, but this period is brief. When their daughter Grace is born, Edith remains bedridden for nearly a year, and Stoner largely cares for their child alone. He grows close with his young daughter, who spends most of her time with him in his study. Stoner gradually realizes that Edith is waging a campaign to separate him from his daughter emotionally.
Stoner woos Edith, and she agrees to marry him. Stoner’s marriage to Edith is bad from the start. It gradually becomes clear that Edith has profound emotional problems. Significantly, she is bitter about having cancelled a trip to Europe with her aunt to marry Stoner. After three years of marriage, Edith suddenly informs Stoner that she wants a baby. She suddenly becomes passionate sexually, but this period is brief. When their daughter Grace is born, Edith remains bedridden for nearly a year, and Stoner largely cares for their child alone. He grows close with his young daughter, who spends most of her time with him in his study. Stoner gradually realizes that Edith is waging a campaign to separate him from his daughter emotionally.

只使用图片

语法

{% swiperImageItem [url] [ratio = 1.77778] %}

  • url - 图片地址
  • ratio - 容器宽高比,通过 css 的 aspect-ratio 来控制

例子

1
2
3
4
{% swiper %}
{% swiperImageItem https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/202304022159088.avif %}
{% swiperImageItem https://fastly.jsdelivr.net/gh/Dedicatus546/image@main/202304022159851.avif %}
{% endswiper %}

效果

优点

  • 懒加载,Swiper 的 js 文件和 css 文件并非在生成时就插入 html 文档中,而是通过一个迷你的 loader.js 来加载
  • 简单适配了 next 主题

缺点

  • 无法通过额外的参数来控制 Swiper

后记

目前的使用上基本不需要太多额外的参数,之后会考虑增加对 Swiper 其他参数的支持,比如 slidesPerView, spaceBetween, speed 等的支持

不过我觉得这样子基本上就符合绝大部分人的需要了…

如果你喜欢这个插件,可以给个 star 哦~