样式调整

templates/blog.html

@@ -286,6 +286,26 @@
             background-color: antiquewhite;
             border-radius: 4px;
         }
+
+        /* 保证每个图都有左右和上下间隙 */
+        #article a[data-pswp-width] {
+            display: inline-block; /* 让 margin 生效 */
+            margin: 0.5rem; /* 上下左右都是 0.5rem，你可以自己调 */
+        }
+
+        /* 如果有 img 没包 <a> 的，也同样 */
+        #article img {
+            display: inline-block;
+            margin: 0.5rem;
+            max-width: 100%;
+            height: auto;
+        }
+
+        /* 去除一切过渡，避免闪动 */
+        #article img,
+        #article a img {
+            transition: none !important;
+        }
     </style>
 
 </head>
@@ -619,51 +639,52 @@
             return 'ui fluid rounded image'
         }
     }
-$(function(){
-  // 选中你文章区里的所有图片
-  $('#article img').each(function(){
-    const $img = $(this);
-    const src = $img.attr('src');
-    const alt = $img.attr('alt') || '';
-    // 如果 alt 是 “宽,高” 格式
-    let w, h;
-    if (/,/.test(alt)) {
-      [w, h] = alt.split(',').map(x => x.trim());
-      // 在 img 外包一层 <a>
-      $img.wrap(`
+
+    $(function () {
+        // 选中你文章区里的所有图片
+        $('#article img').each(function () {
+            const $img = $(this);
+            const src = $img.attr('src');
+            const alt = $img.attr('alt') || '';
+            // 如果 alt 是 “宽,高” 格式
+            let w, h;
+            if (/,/.test(alt)) {
+                [w, h] = alt.split(',').map(x => x.trim());
+                // 在 img 外包一层 <a>
+                $img.wrap(`
         <a
           href="${src}"
           data-pswp-width="${w}"
           data-pswp-height="${h}"
         ></a>
       `);
-      // 再给 img 补属性
-      $img
-        .css('display','inline-block')
-        .addClass(getClass(w))      // 你原来的那段 class 逻辑
-        .attr({
-          width: w,
-          height: h,
-          'data-magnify': 'gallery',
-          'data-src': src,
-          'data-href': src
+                // 再给 img 补属性
+                $img
+                    .css('display', 'inline-block')
+                    .addClass(getClass(w))      // 你原来的那段 class 逻辑
+                    .attr({
+                        width: w,
+                        height: h,
+                        'data-magnify': 'gallery',
+                        'data-src': src,
+                        'data-href': src
+                    });
+            } else {
+                // 没有 alt，就只加个样式，不包 a
+                $img
+                    .css('display', 'inline-block')
+                    .addClass('ui fluid rounded image');
+            }
         });
-    } else {
-      // 没有 alt，就只加个样式，不包 a
-      $img
-        .css('display','inline-block')
-        .addClass('ui fluid rounded image');
-    }
-  });
-
-  // 然后初始化 PhotoSwipeLightbox，gallery 指向包了 a 的容器
-  const lightbox = new PhotoSwipeLightbox({
-    gallery: '#article',           // 或者 'p' 也行，但 #article 更保险
-    children: 'a[data-pswp-width]',// 只选那些有宽高 data 的 a
-    pswpModule: PhotoSwipe
-  });
-  lightbox.init();
-});
+
+        // 然后初始化 PhotoSwipeLightbox，gallery 指向包了 a 的容器
+        const lightbox = new PhotoSwipeLightbox({
+            gallery: '#article',           // 或者 'p' 也行，但 #article 更保险
+            children: 'a[data-pswp-width]',// 只选那些有宽高 data 的 a
+            pswpModule: PhotoSwipe
+        });
+        lightbox.init();
+    });
 
 
 </script>