hexo-theme-linen 1.0.36 → 1.0.38

package/layout/post.ejs

@@ -289,6 +289,15 @@ const seriesInfo = getSeriesInfo(page?.series);
       return viewportSize.x < 700 ? smallScreenPadding : largeScreenPadding
     },
   });
+  const isSafari = !!(navigator.vendor && navigator.vendor.match(/apple/i));
+  lightbox.on('lazyLoadSlide', (event) => {
+    const imageSrc = event.itemData && event.itemData.src;
+    if (isSafari && imageSrc && imageSrc.includes('/hdr/')) {
+      // Let PhotoSwipe's main Content create and reuse its placeholder image.
+      // The bundled Lightbox preloader uses a separate, older Content class.
+      event.preventDefault();
+    }
+  });
 
   const getExif = (element) => {
     const exifString = (element && element.dataset && element.dataset.pspwExif) || '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-linen",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "A clean Hexo theme",
   "main": "index.js",
   "homepage": "https://github.com/lynanbreeze/hexo-theme-linen",

package/scripts/footnote.js

@@ -78,7 +78,7 @@ hexo.extend.filter.register("before_post_render", function (data) {
 
         const backrefs = Array.from({ length: refCount[id] || 0 }, (_, i) => {
           const n = i + 1;
-          return `<a href="#fnref-${id}-${n}" class="footnote-backref"></a>`;
+          return `<a href="#fnref-${id}-${n}" class="footnote-backref" aria-label="返回脚注引用" title="返回脚注引用"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 6v5a3 3 0 0 1-3 3H4m0 0 4-4m-4 4 4 4" /></svg></a>`;
         }).join(" ");
 
         return `<li id="fn-${id}">${html}${backrefs}</li>`;

package/scripts/lazyload/config.js

@@ -1,10 +1,10 @@
 module.exports.defaultConfig = {
     enable: false,
-    loadingImage: "../linen-theme/img/lazyload/loading.svg",
-    errorTipImage: "../linen-theme/img/lazyload/error-tip.svg",
+    loadingImage: "/linen-theme/img/lazyload/loading.svg",
+    errorTipImage: "/linen-theme/img/lazyload/error-tip.svg",
     intersectionRatio: 0.25,
     placeholderRatio: 3 / 2,
     showTransition: true,
     showAltText: true,
     preloadCount: 5
-}
+}

package/scripts/lazyload/inject.js

@@ -19,11 +19,27 @@ module.exports = function (hexo) {
       ...(hexo?.config?.theme_config?.lazyload || {}),
     };
 
+    const resolveSiteAsset = (assetPath) => {
+      if (!assetPath || /^(https?:)?\/\//i.test(assetPath) || /^data:/i.test(assetPath)) {
+        return assetPath;
+      }
+      if (!assetPath.startsWith("/")) return assetPath;
+
+      const rootSegments = String(hexo.config.root || "")
+        .split("/")
+        .filter(Boolean)
+        .join("/");
+      const root = rootSegments ? `/${rootSegments}/` : "/";
+      return `${root}${assetPath.replace(/^\/+/, "")}`;
+    };
+    const resolvedLoadingImage = resolveSiteAsset(loadingImage);
+    const resolvedErrorTipImage = resolveSiteAsset(errorTipImage);
+
     const placeholderImage =
-      /^(https?:\/\/|\/|data:image|\.\.\/)/i.test(loadingImage) ||
-      /\.(svg|png|jpg|jpeg|webp|gif)$/i.test(loadingImage)
-        ? `url(${loadingImage})`
-        : loadingImage;
+      /^(https?:\/\/|\/|data:image|\.\.\/)/i.test(resolvedLoadingImage) ||
+      /\.(svg|png|jpg|jpeg|webp|gif)$/i.test(resolvedLoadingImage)
+        ? `url(${resolvedLoadingImage})`
+        : resolvedLoadingImage;
 
     const injectedStyles = `.lazyload-outer-wrap .caption{
     width: 100%;
@@ -47,7 +63,7 @@ module.exports = function (hexo) {
     padding-bottom: ${(100 / Number(placeholderRatio)).toFixed(5)}%;
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    ${loadingImage ? `background-image: ${placeholderImage};` : ""}
+    ${resolvedLoadingImage ? `background-image: ${placeholderImage};` : ""}
     background-color: #fff;
   }
   .lazyload-wrap .placeholder canvas{
@@ -104,7 +120,7 @@ module.exports = function (hexo) {
   .lazyload-wrap .error-wrap .error-tip{
     width: 60%;
     background-size: cover;
-    background-image: url(${errorTipImage});
+    background-image: url(${resolvedErrorTipImage});
   }
   .lazyload-wrap .error-wrap .error-tip::before{
     content: '';
@@ -166,11 +182,11 @@ module.exports = function (hexo) {
     if (/<\/body>/gi.test(htmlContent)) {
       htmlContent = appendToHead(settingsContent, htmlContent);
       htmlContent = appendToHead(
-        `<link rel="preload" as="image" href="${loadingImage}" />`,
+        `<link rel="preload" as="image" href="${resolvedLoadingImage}" />`,
         htmlContent,
       );
       htmlContent = appendToHead(
-        `<link rel="preload" as="image" href="${errorTipImage}" />`,
+        `<link rel="preload" as="image" href="${resolvedErrorTipImage}" />`,
         htmlContent,
       );
       injectExtraScript(lazyLoadPath);

package/source/linen-theme/css/lazyload.css

@@ -20,7 +20,7 @@
     padding-bottom: 66.66667%;
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    background-image: url(../linen-theme/img/lazyload/loading.svg);
+    background-image: url(/linen-theme/img/lazyload/loading.svg);
     background-color: #fff;
   }
   .lazyload-wrap .placeholder canvas{
@@ -77,7 +77,7 @@
   .lazyload-wrap .error-wrap .error-tip{
     width: 60%;
     background-size: cover;
-    background-image: url(../linen-theme/img/lazyload/error-tip.svg);
+    background-image: url(/linen-theme/img/lazyload/error-tip.svg);
   }
   .lazyload-wrap .error-wrap .error-tip::before{
     content: '';

package/source/linen-theme/css/linen.scss

@@ -685,6 +685,32 @@ body {
     }
   }
 
+  .footnote-anchor-wrap {
+    scroll-margin-top: 1.5em;
+  }
+
+  .footnotes .footnote-backref {
+    display: inline-block;
+    margin-left: 0.35em;
+    font-weight: normal;
+
+    svg {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      overflow: visible;
+      vertical-align: -0.16em;
+    }
+
+    path {
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 2;
+    }
+  }
+
   del {
     a:not([class]):not(:has(.shared-link)) {
       &::after {

package/source/linen-theme/js/photoswipe/photoswipe.esm.min.js

@@ -170,6 +170,17 @@ function decodeImage(img) {
   });
 }
 
+function areImageSourcesEqual(first, second) {
+  if (!first || !second) {
+    return false;
+  }
+  try {
+    return new URL(first, document.baseURI).href === new URL(second, document.baseURI).href;
+  } catch (error) {
+    return first === second;
+  }
+}
+
 /** @typedef {LOAD_STATE[keyof LOAD_STATE]} LoadState */
 /** @type {{ IDLE: 'idle'; LOADING: 'loading'; LOADED: 'loaded'; ERROR: 'error' }} */
 const LOAD_STATE = {
@@ -4574,13 +4585,43 @@ class Content {
     ) {
       return;
     }
-    const imageElement = /** @type HTMLImageElement */ this.element;
+    let imageElement = /** @type HTMLImageElement */ this.element;
+    let reusingPlaceholder = false;
+    const isHdrImage = this.data.src && this.data.src.includes("/hdr/");
+    const placeholderElement = this.placeholder && this.placeholder.element;
+    // Safari can flash when it swaps between two separate image layers,
+    // even when the placeholder and the full-size HDR image use the same URL.
+    // Reuse the placeholder so HDR is never decoded through HTMLImageElement.decode().
+    if (
+      isSafari() &&
+      isHdrImage &&
+      !this.data.srcset &&
+      placeholderElement &&
+      placeholderElement.tagName === "IMG" &&
+      areImageSourcesEqual(placeholderElement.src, this.data.src)
+    ) {
+      imageElement = /** @type HTMLImageElement */ placeholderElement;
+      imageElement.classList.remove("pswp__img--placeholder");
+      imageElement.removeAttribute("aria-hidden");
+      imageElement.removeAttribute("role");
+      imageElement.style.width = "";
+      imageElement.style.height = "";
+      imageElement.style.transform = "";
+      imageElement.style.transformOrigin = "";
+      setWidthHeight(imageElement, this.displayedImageWidth, this.displayedImageHeight);
+      this.element = imageElement;
+      this.placeholder.element = null;
+      this.placeholder = undefined;
+      reusingPlaceholder = true;
+    }
     this.updateSrcsetSizes();
-    if (this.data.srcset) {
+    if (this.data.srcset && !reusingPlaceholder) {
       imageElement.srcset = this.data.srcset;
     }
-    imageElement.src =
-      (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : "";
+    if (!reusingPlaceholder) {
+      imageElement.src =
+        (_this$data$src = this.data.src) !== null && _this$data$src !== void 0 ? _this$data$src : "";
+    }
     imageElement.alt =
       (_this$data$alt = this.data.alt) !== null && _this$data$alt !== void 0 ? _this$data$alt : "";
     this.state = LOAD_STATE.LOADING;