opt: lazyload

Author: xaoxuu

scripts/tags/lib/albums.js

@@ -30,8 +30,9 @@ module.exports = ctx => function(args) {
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell album-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

scripts/tags/lib/gallery.js

@@ -17,13 +17,14 @@
 
 var index = 0
 
-function img(src, alt) {
+function img(src, alt, loading) {
   let img = ''
-  img += `<img data-fancybox="gallery-${index}" src="${src}"`
+  img += `<img class="lazy" data-fancybox="gallery-${index}" data-src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
   img += `/>`
+  img += `<div class="lazy-icon" style="background-image:url(${loading});"></div>`
   // cap
   img += `<div class="image-meta">`
   if (alt?.length > 0) {
@@ -54,7 +55,7 @@ module.exports = ctx => function(args, content) {
     if (matches?.length > 2) {
       let alt = matches[1]
       let src = matches[2]
-      el += `<div class="${layoutType}-cell">${img(src, alt)}</div>`
+      el += `<div class="${layoutType}-cell lazy-box">${img(src, alt, ctx.theme.config.default.loading)}</div>`
     }
   }
   el += `</div>`

scripts/tags/lib/posters.js

@@ -30,8 +30,9 @@ module.exports = ctx => function(args) {
     for (let item of (links[args.group] || [])) {
       if (item?.url) {
         el += `<div class="grid-cell poster-card">`
-        el += `<a class="card-link" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
-        el += `<img src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<a class="card-link lazy-box" target="_blank" rel="external nofollow noopener noreferrer" href="${item.url}">`
+        el += `<img class="lazy" data-src="${item.cover || item.icon || item.avatar || ctx.theme.config.default.cover}" onerror="javascript:this.removeAttribute(&quot;data-src&quot;);this.src=&quot;${ctx.theme.config.default.cover}&quot;;"/>`
+        el += `<div class="lazy-icon" style="background-image:url(${ctx.theme.config.default.loading});"></div>`
         el += `<div class="image-meta">`
         if (item.title) {
           el += `<span class="image-caption">${item.title}</span>`

source/css/_components/tag-plugins/gallery.styl

@@ -109,6 +109,7 @@
       height: 100%
       border-radius: 8px
     &:has(img.loading),&:has(img.error)
+      background-color: var(--block)
       img
         background-color: var(--block)
   .image-meta

source/css/_plugins/comments/artalk.styl

@@ -7,11 +7,17 @@
     .atk-header,.atk-editor-user-wrap
       border-bottom: 1px dashed var(--block-border)
       padding: 0.5rem 1rem
+      margin: 0
     .atk-editor-user-wrap:empty
       visibility: hidden
       padding: 0
     >.atk-bottom 
       padding: 8px
+      .atk-state-btn
+        height: 2rem
+        border-radius: 100px
+        .atk-cancel
+          background: none
       .atk-plug-btn
         border-radius: 32px
         height: 2rem
@@ -77,10 +83,10 @@
       --at-color-border: var(--block-border)
     --at-color-light: var(--link)
     --at-color-bg: var(--card)
-    --at-color-bg-transl: var(--block-border)
+    --at-color-bg-transl: var(--card)
     --at-color-bg-grey: var(--block)
-    --at-color-bg-grey-transl: orange
-    --at-color-bg-light: rgba(29, 161, 242, 1)
+    --at-color-bg-grey-transl: var(--block-border)
+    --at-color-bg-light: var(--theme)
     --at-color-main: var(--theme)
     --at-color-red: $c-red
     --at-color-green: $c-green