add swiper

_config.butterfly.yml

@@ -902,7 +902,7 @@ mask:
 
 # Loading Animation
 preloader:
-  enable: true
+  enable: false
   # source
   # 1. fullpage-loading
   # 2. pace (progress bar)
@@ -1165,6 +1165,7 @@ inject:
     - <link rel="stylesheet" href="/css/nav.css">
     - <link rel="stylesheet" href="/css/style.css">
     - <link rel="stylesheet" href="/css/poem.css">
+    - <link rel="stylesheet" href="/css/swiper.css">
     - <link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/instantsearch.css/themes/reset-min.css">
     - <link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage/welcome.css">
     - <link rel="stylesheet" href="https://cdn.jsdmirror.com/gh/bishshi/sidecalendar/calendar.css">
@@ -1178,7 +1179,8 @@ inject:
     - <script src="/js/shuoshuoshouye.js"></script> 
     - <script src="/js/ai-summary.js"></script>
     - <script src="/js/typesense-search.js"></script>
-    - <script src="https://cdn.jsdmirror.com/jquery-3.7.1.min.js"></script>
+    - <script src="/js/statistic.js"></script>
+    - <script src="https://code.jquery.com/jquery-4.0.0.js"></script>
     - <script src="https://cdn.jsdmirror.com/npm/echarts@4.9.0/dist/echarts.min.js"></script>
     - <script src="https://cdn.jsdmirror.com/npm/aplayer/dist/APlayer.min.js"></script>
     - <script src="https://cdn.jsdmirror.com/npm/meting/dist/Meting.min.js"></script>

_config.yml

@@ -214,4 +214,19 @@ aisummary:
   
   max_token: 5000           # 输入内容最大 token 长度（非输出限制）
   concurrency: 2            # 并发处理数，建议不高于 5hexo s
-  
+  
+
+# hexo-butterfly-swiper-lyx
+# see https://blog.yaria.top/posts/670e47f/#%E6%9B%B4%E5%A5%BD%E7%9A%84%E9%A6%96%E9%A1%B5%E8%BD%AE%E6%92%AD
+swiper:
+  enable: true # 开关
+  priority: 5 # 过滤器优先权
+  enable_page: / # 应用页面
+  layout: # 挂载容器类型
+    type: id
+    name: recent-posts
+    index: 0
+  default_descr: 还不知道怎么描述哦
+  swiper_css: https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css
+  swiper_js: https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js
+  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper-lyx/lib/swiper_init.js

themes/butterfly/source/css/swiper.css

@@ -0,0 +1,74 @@
+/* 1. 强制清空外层所有可能的背景、边框和阴影 */
+#swiperBox, 
+#swiper_container, 
+.blog-slider,
+.swiper-container {
+    padding: 0 !important;
+    margin: 0 auto !important;
+    background: none !important; /* 彻底删掉白色底色 */
+    border: none !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    overflow: hidden !important;
+}
+
+/* 2. 针对容器下方的白边进行“零间距”处理 */
+div#swiperBox {
+    margin-bottom: 20px !important; /* 只保留外部下边距，内部不留白 */
+}
+
+div#swiper_container {
+    height: 250px !important;
+    display: block !important;
+    border-radius: 12px;
+}
+
+/* 3. 彻底隐藏那个奇怪的橙色方块 */
+/* 那个方块通常是 swiper-pagination-bullet-active 或导航按钮的背景 */
+.blog-slider__pagination .swiper-pagination-bullet,
+.swiper-pagination-bullet,
+.swiper-button-next,
+.swiper-button-prev {
+    outline: none !important;
+}
+
+/* 如果你不需要底部的圆点，直接用下面这行彻底删掉它 */
+.blog-slider__pagination, .swiper-pagination {
+    display: none !important; 
+}
+
+/* 4. 修复图片和内容的覆盖，确保不露底色 */
+.blog-slider__item {
+    width: 100% !important;
+    height: 100% !important;
+    background-size: cover !important;
+    background-position: center !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+/* 5. 修正文字布局，防止重叠 */
+.blog-slider__content {
+    background: rgba(0, 0, 0, 0.45); /* 黑色半透明遮罩 */
+    width: 100% !important;
+    height: 100% !important;
+    padding: 0 40px !important;
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+a.blog-slider__title {
+    font-size: 1.5rem !important;
+    color: #fff !important;
+    margin: 5px 0 !important;
+    display: block !important;
+}
+
+/* 6. 解决左右箭头样式异常 */
+.swiper-button-next::after, .swiper-button-prev::after {
+    font-size: 1.2rem !important;
+    color: #fff !important;
+    background: none !important; /* 彻底去掉背景色 */
+}