Hexo Splide Carousel 在线演示

发表于 更新于 本文字数： 1.6k 阅读时长 ≈ 6 分钟

Hexo Splide Carousel

preview.webp

此博文用于 Hexo Splide Carousel 包的在线演示。
_config.yml中轮播组件使用的配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 图片轮播缩放
splide:
  cdn: unpkg  # 可选项：unpkg, cdnjs, jsdelivr
  options:
    heightRatio: 0.618        # 宽高比
    lazyLoad: false           # 懒加载，可选项：false, 'nearby', 'sequential'
    type: 'slide'             # 类型，可选项：'loop', 'slide'
    autoplay: false           # 自动播放
    interval: 3000            # 自动播放时间间隔
    pauseOnHover: true        # 鼠标悬停时暂停自动播放

  styles:
    arrowColor: '#fc8d5d'             # 左右切换箭头颜色
    arrowHoverColor: '#fc6423'        # 悬停时的左右切换箭头颜色
    paginationColor: '#fc8d5d'        # 非激活状态下的分页按钮颜色
    paginationActiveColor: '#fc6423'  # 激活状态下的分页按钮颜色
    paginationHoverColor: '#fc6423'   # 悬停时的分页按钮颜色
    borderRadius: 1px                 # 边框圆角半径
    borderColor:
      light: "#eee"  # 亮色主题边框颜色
      dark: "#444"   # 深色主题边框颜色
    shadowColor:
      light: "rgba(0, 0, 0, 0.1)"  # 亮色主题阴影颜色
      dark: "rgba(0, 0, 0, 0.3)"   # 深色主题阴影颜色

  dark_mode: auto  # 深色模式，可选项：true, false, auto. auto 模式会根据浏览器主题自动设置
  enable_medium_zoom: false  # 是否启用 medium zoom，请不要与主题中的 medium zoom 同时启用

_config.next.yml中相关配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
pjax: true
fancybox: true
mediumzoom: false
lazyload: true
motion:
  enable: true
  async: true
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

单张图片

轮播组件中仅包含一张图片。

1
2
3
{% splide %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
{% endsplide %}
  • 01.png

多张图片

轮播组件中包含多张图片，此处使用了简写标签sc。

1
2
3
4
5
6
7
8
{% sc %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![02.png](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![03.png](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
![04.png 这张图片的分辨率为256*256，尺寸小于轮播窗口的图片将会被放大至填满轮播窗口。](https://s2.loli.net/2024/09/11/Kgk6YlF5e1Nx3wq.png)
![05.png](https://s2.loli.net/2024/09/11/UY49yDBSwTeIWtP.png)
![06.png](https://s2.loli.net/2024/09/11/wxXuoU8qNfl1hMa.png)
{% endsc %}
  • 01.png
  • 02.png
  • 03.png
  • 04.png 这张图片的分辨率为256*256，尺寸小于轮播窗口的图片将会被放大至填满轮播窗口。
  • 05.png
  • 06.png

图片不含简介

轮播组件中的所有图片都不含有简介。

1
2
3
4
5
{% splide %}
![](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
{% endsplide %}

Sed a augue quis velit vulputate tristique quis nec neque. Donec a dui eleifend, auctor mauris sed, dictum urna. Duis id elementum elit, at pharetra risus. Praesent luctus vulputate efficitur. Donec sollicitudin odio eget interdum porta. In hac habitasse platea dictumst. Aliquam id lorem sem.

标签中自定义参数

在标签中添加了循环和自动播放参数。

1
2
3
4
5
6
7
8
{% splide type:'loop' autoplay:true %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![02.png](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![03.png](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
![04.png](https://s2.loli.net/2024/09/11/Kgk6YlF5e1Nx3wq.png)
![05.png](https://s2.loli.net/2024/09/11/UY49yDBSwTeIWtP.png)
![06.png](https://s2.loli.net/2024/09/11/wxXuoU8qNfl1hMa.png)
{% endsplide %}
  • 01.png
  • 02.png
  • 03.png
  • 04.png
  • 05.png
  • 06.png

以下文本为占位符，用于测试目录跳转位置是否准确。

Cras cursus non velit quis maximus. Pellentesque imperdiet viverra enim ut maximus. Phasellus at iaculis nisl. Suspendisse potenti. Vestibulum sapien nibh, convallis vitae convallis eu, suscipit eget est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam semper nisi id convallis placerat. Phasellus vitae leo nunc. Phasellus pellentesque consectetur velit vel cursus.

Donec vehicula metus sit amet lectus iaculis posuere. Pellentesque convallis risus eu tristique efficitur. Maecenas diam sem, iaculis sit amet dolor non, rutrum vestibulum eros. Duis elementum sit amet velit ac dictum. Quisque sollicitudin odio ullamcorper, suscipit nunc ac, feugiat nisl. Vivamus quis ligula nec quam suscipit congue at sit amet est. Duis eu dui nec est dictum blandit. Morbi ut lorem aliquet, aliquet purus at, sollicitudin odio. Duis convallis ultricies est vel convallis. Aliquam vestibulum, nulla ut posuere dignissim, arcu elit lacinia purus, a rhoncus lorem lectus eget leo. Nullam id elementum orci. Nam lobortis felis in diam venenatis tincidunt. Praesent augue erat, interdum in tellus et, posuere vehicula tellus. Nullam ac ex quis nibh pretium fringilla in sit amet leo. Cras suscipit, sem ut cursus ornare, eros orci ultricies ante, eget pellentesque orci arcu non nibh.

Sed commodo turpis non justo laoreet ultricies. Etiam venenatis, lacus pellentesque aliquam pharetra, risus lorem tempor lacus, sit amet tincidunt lorem velit vel nisl. Duis in aliquam ex. Curabitur id elit id lorem mattis lacinia. Phasellus vitae purus nibh. Vivamus vel ipsum tortor. Cras ultrices maximus enim, non laoreet dui cursus vel. Sed velit felis, mattis quis iaculis sed, malesuada ultrices arcu. Suspendisse turpis odio, ullamcorper a ipsum nec, dignissim efficitur arcu. In eget ex at elit faucibus varius. Integer dolor turpis, tempor in eros sit amet, fringilla aliquam augue.

Sed non luctus nunc, in vulputate arcu. Donec vitae diam vestibulum, placerat eros vel, viverra felis. Phasellus venenatis sodales nisl vitae feugiat. Sed ultrices pretium velit, ac venenatis lectus congue sodales. Nunc ullamcorper massa at auctor blandit. Curabitur et bibendum sem. Pellentesque dictum massa eget massa rhoncus, ut auctor velit vulputate. Donec quis metus ut ante tempor malesuada sit amet nec magna. Maecenas at imperdiet odio. Vivamus commodo lectus ut nisl laoreet, quis dapibus purus condimentum. Praesent fermentum, mi convallis dapibus tristique, ipsum ex euismod lacus, sed tempus felis diam vitae turpis. Pellentesque et ipsum congue, congue nisl et, blandit ligula.

Etiam consectetur risus sit amet imperdiet iaculis. Cras vel elementum magna. Pellentesque nec tempor est, ac porttitor magna. Maecenas porttitor, lorem nec volutpat euismod, velit lorem elementum sem, sit amet tempus nibh odio ac nulla. Nunc consequat nibh at nibh vulputate iaculis. Integer tincidunt, arcu non pharetra mollis, diam ligula dignissim mi, ac aliquam justo neque ut ipsum. In interdum ultrices leo, sed pretium nibh placerat id. Vestibulum pharetra vehicula suscipit. Integer in sollicitudin neque. Sed malesuada ac leo sit amet convallis. Quisque euismod eu ligula sit amet sodales.

Nulla fermentum mi metus. Vestibulum at molestie neque, sagittis mattis lorem. Donec porttitor lorem at quam volutpat, at imperdiet augue blandit. Sed sed turpis risus. Cras et sapien nec massa auctor fringilla. Nullam luctus elit et felis tincidunt eleifend. Proin in libero molestie, lacinia ante sed, volutpat ligula. In tellus nibh, tristique quis quam id, tincidunt aliquam purus. Praesent tempor ultrices mauris sed maximus. Aliquam enim erat, convallis non risus eget, interdum blandit nisi. Maecenas velit enim, rhoncus id ante in, imperdiet laoreet enim. Donec ut orci vestibulum, tempus metus quis, elementum augue. Cras lacinia, erat ac blandit mollis, nisi mauris scelerisque mauris, id elementum risus ipsum ac dui. Maecenas tortor nulla, porta ac tempus et, pulvinar quis nisl.

目录跳转测试

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis interdum arcu. Mauris at maximus arcu. Ut placerat rhoncus tortor, sit amet feugiat ante pretium et. Vestibulum at pellentesque metus, ut ultricies ipsum. Nullam vel vehicula erat. Sed ac posuere tortor. Nam posuere lectus vel finibus euismod. Proin sit amet sapien faucibus, feugiat arcu sit amet, fringilla turpis. Cras eget suscipit nisl, sit amet ullamcorper ex. Aliquam consequat feugiat erat, vehicula ornare risus dapibus vitae. Nulla rutrum lorem sapien, non ultrices enim iaculis quis. Maecenas malesuada tincidunt nunc eget hendrerit.

In iaculis consequat sem non dictum. Aliquam vel vestibulum libero. Sed auctor nec mi in varius. Fusce eget urna justo. Nullam tincidunt est mi, in ultrices mauris dapibus a. In enim mauris, consequat tristique efficitur tempus, rhoncus sed sapien. Morbi sagittis, sapien sed maximus hendrerit, tellus sapien congue arcu, ut aliquam massa massa nec sem. Maecenas eget maximus ante. Fusce sed ullamcorper leo.

Phasellus nec arcu ornare, sodales sapien non, vestibulum ligula. Vivamus quis pharetra mi. Nunc rutrum erat et mollis commodo. Donec lorem felis, malesuada non augue eget, consequat posuere mauris. Proin varius vulputate mollis. Donec facilisis ipsum ex. Quisque dapibus turpis dolor, eu maximus nunc efficitur vel. Cras a urna vel ante euismod venenatis eu id nisl. Sed varius nisl ac eros consectetur, porttitor eleifend risus consectetur. Proin ut hendrerit dolor, sit amet faucibus tortor. Cras hendrerit porttitor metus, mollis consequat nisi elementum in. Maecenas ac eros gravida, ultricies risus sit amet, efficitur lorem. Vivamus rutrum fringilla velit, a blandit augue. Nullam malesuada sed velit eu tincidunt. Integer diam dolor, dignissim sit amet dapibus non, sagittis sit amet neque. Pellentesque porta, nisi non tincidunt eleifend, felis lorem iaculis risus, id pulvinar magna diam non augue.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sit amet aliquet ipsum. Cras blandit venenatis metus, quis elementum eros placerat ut. Etiam commodo viverra lacus et pellentesque. Cras libero lorem, ultricies sit amet egestas in, congue eu diam. Nulla mi velit, tempus in tellus vitae, consequat dignissim tellus. Proin sodales ex eget dolor dictum, in pellentesque augue convallis. Sed vitae commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum interdum justo, a faucibus tellus gravida blandit. Sed tempor, justo ut congue facilisis, velit tortor porttitor erat, ac dictum metus dolor vitae nisi. Pellentesque faucibus erat sed libero egestas, in luctus ipsum euismod.

---------- 我是有底线哒 感谢您的阅读 ----------