样式调整

templates/blog.html

@@ -609,7 +609,6 @@
 
         $(".ui.dropdown").dropdown();
     });
-    let imgs = $('#article').find('p>img')
 
     function getClass(width) {
         if (width > 35 && width < 150) {
@@ -620,24 +619,52 @@
             return 'ui fluid rounded image'
         }
     }
-
-    for (let i = 0; i < imgs.length; i++) {
-        if ($(imgs[i]).attr('alt')) {
-            let alt = $(imgs[i]).attr('alt')
-            let src = $(imgs[i]).attr('src')
-            $(imgs[i]).parent().html(`<a data-pswp-width="${alt.split(',')[0]}" data-pswp-height="${alt.split(',')[1]}" href="${src}"><img style="display: inline-block;"  class="${getClass(alt.split(',')[0])}" width="${alt.split(',')[0]}" height="${alt.split(',')[1]}" data-magnify="gallery" data-src="${src}"  src="${src}"  data-href="${src}" "/></a>`)
-        } else {
-            let src = $(imgs[i]).attr('src')
-            $(imgs[i]).parent().html(`<img style="display: inline-block;"  class="ui fluid rounded image"  src="${src}" />`)
-        }
+$(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
+        });
+    } else {
+      // 没有 alt，就只加个样式，不包 a
+      $img
+        .css('display','inline-block')
+        .addClass('ui fluid rounded image');
     }
-    var lightbox = new PhotoSwipeLightbox({
-        gallery: '#article',
-        children: 'a[data-pswp-width]',
-        // dynamic import is not supported in UMD version
-        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>