[opt] swiper

_config.yml

@@ -288,8 +288,8 @@ plugins:
   # swiper
   swiper:
     enable: true
-    css: https://unpkg.com/swiper@6/swiper-bundle.min.css
+    css: https://unpkg.com/swiper@8/swiper-bundle.min.css
-    js: https://unpkg.com/swiper@6/swiper-bundle.min.js
+    js: https://unpkg.com/swiper@8/swiper-bundle.min.js
 
 
   # 赫蹏 (Heti) - 专为中文网页内容设计的排版样式增强

scripts/tags/lib/swiper.js

@@ -2,7 +2,7 @@
  * swiper.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
  * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
  *
- * {% swiper %}
+ * {% swiper [width:max] [effect:cards] %}
  * ![img](src)
  * {% endswiper %}
  */
@@ -10,7 +10,7 @@
 'use strict'
 
 module.exports = ctx => function(args, content) {
-  args = ctx.args.map(args, ['width'])
+  args = ctx.args.map(args, ['width', 'effect'])
   var el = ''
   function slide() {
     let imgs = ctx.render.renderSync({text: content, engine: 'markdown'})
@@ -22,10 +22,8 @@ module.exports = ctx => function(args, content) {
       })
     }
   }
-  el += '<div class="tag-plugin swiper-container" id="swiper-api"'
+  el += '<div class="tag-plugin gallery swiper" id="swiper-api"'
-  if (args.width && args.width.length > 0) {
+  el += ' ' + ctx.args.joinTags(args, ['width', 'effect']).join(' ')
-    el += ' ' + ctx.args.joinTags(args, 'width').join(' ')
-  }
   el += '>'
   el += '<div class="swiper-wrapper">'
   slide()

source/css/_layout/md.styl

@@ -22,8 +22,7 @@ h1.article-title
 .md-text.content
   position: relative
   margin-bottom: 2rem
-  // display: flex
+  overflow: hidden
-  // flex-direction: column
   &.indent
     >p:not([class])
       text-indent: 'calc(%s * 2)' % $fs-p

source/css/_plugins/swiper.styl

@@ -1,10 +1,10 @@
 :root
   --swiper-theme-color: $color-theme !important
-.swiper-container
+.swiper
   width: 100%
   border-radius: 4px
   --gap-p: 2rem
-.swiper-container:not(.swiper-container-initialized)
+.swiper:not(.swiper-initialized)
   display: none
 div.swiper-slide
   text-align: center
@@ -25,12 +25,15 @@ div.swiper-slide
   img
     border-radius: 4px
 
-.swiper-container[width='max'] div.swiper-slide
+.swiper[width='max'] .swiper-slide
   width: 100%
 
-.swiper-container[width='min'] div.swiper-slide
+.swiper[width='min'] .swiper-slide
   width: 25%
 
+.swiper[effect='cards'] .swiper-slide
+  max-width: 75%
+
 .swiper-button-prev,.swiper-button-next
   padding: 1rem 0.5rem
   margin-top: -2rem !important

source/js/main.js

@@ -241,10 +241,12 @@ if (stellar.plugins.swiper) {
   if (swiper_api != undefined) {
     stellar.loadCSS(stellar.plugins.swiper.css);
     stellar.loadScript(stellar.plugins.swiper.js, { defer: true }).then(function () {
-      var swiper = new Swiper('.swiper-container', {
+      const effect = swiper_api.getAttribute('effect') || '';
+      var swiper = new Swiper('.swiper#swiper-api', {
         slidesPerView: 'auto',
         spaceBetween: 8,
         centeredSlides: true,
+        effect: effect,
         loop: true,
         pagination: {
           el: '.swiper-pagination',