1 files changed, 134 insertions, 0 deletions
diff --git a/themes/itheme/assets/js/initPost.js b/themes/itheme/assets/js/initPost.js
new file mode 100644
index 0000000..db04238
--- /dev/null
+++ b/themes/itheme/assets/js/initPost.js
@@ -0,0 +1,134 @@
+import params from "@params"
+// console.log("postInit.js loaded");
+var scriptMd5 = document.createElement("script");
+scriptMd5.src =  `${params.baseURL}js/md5.js`;
+document.head.appendChild(scriptMd5);
+
+scriptMd5.onload = function () {
+  // console.log("md5.js loaded")
+  // step1. sythx highlighting
+  syntaxHighlight();
+  // step2. lazyload
+  initLazyLoad();
+}
+
+function initLazyLoad() {
+  var script = document.createElement("script");
+  script.src =  `${params.baseURL}js/animation.js`;
+  document.head.appendChild(script);
+
+  script.onload = function () {
+    // console.log("lazyload.js loaded");
+
+    animationElementName = ".image-load";
+
+    // Hook the loadImage function
+    loadImage = (index) => {
+      if (index >= imageElements.length) return;
+
+      let image = imageElements[index];
+      image.src = image.dataset.src;
+      let img = new Image();
+      img.src = image.src;
+
+      // if the image is loaded or not loaded, load the next image
+      img.onload = function () {
+        loadImage(index + 1);
+      };
+      img.onerror = function () {
+        loadImage(index + 1);
+      }
+    }
+
+    loadAnimation = (item) => {
+      if(item.classList.contains("image-loaded")) return;
+      let grandSon = item.children[0].children[0];
+      let img = new Image();
+      img.src = grandSon.src;
+      let sign = md5(grandSon.src);
+
+      let target = document.getElementById(`lht${sign}`)
+      if (!target)  {
+          // If an absolute path is used as the image link, such as "/static/img.png",
+          // the URL of grandSon.src will become "https://example.com/static/img.png", resulting in a different md5.
+          // Therefore, we attempt to handle this situation by trying again with the absolute path.
+          const a = document.createElement('a');
+          a.href = grandSon.src;
+          sign = md5(a.pathname);
+      }
+
+      img.onload = function () {
+        let percent = ((img.height / img.width) * 100).toFixed(5);
+        var style = document.createElement("style");
+        style.innerHTML = renderStyle(sign, percent);
+        let target = document.getElementById(`lht${sign}`)
+
+        if (!target) return;
+
+        target.parentNode.insertBefore(style, target);
+        item.classList.remove("image-load");
+        item.classList.add("image-loaded");
+      }
+
+    }
+
+    initImage();
+  };
+}
+
+
+function renderStyle(sign, percent) {
+  return `
+      .image-${sign} {
+      width: 100%;
+      padding-top: ${percent}%;
+      height: auto;
+  }
+
+  @media only screen and (max-width: 1068px) {
+      .image-${sign} {
+      width: 100%;
+      padding-top: ${percent}%;
+      height: auto;
+    }
+  }
+
+  @media only screen and (max-width: 734px) {
+    .image-${sign} {
+    width: 100%;
+    padding-top: ${percent}%;
+    height: auto;
+  }
+  };`
+}
+
+function syntaxHighlight() {
+  var script = document.createElement("script");
+  script.src = "//cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js";
+  document.head.appendChild(script);
+
+  var styleLight = document.createElement("link");
+  styleLight.rel = "stylesheet";
+  styleLight.href = "//cdn.staticfile.org/highlight.js/11.7.0/styles/stackoverflow-light.min.css";
+
+  var styleDark = document.createElement("link");
+  styleDark.rel = "stylesheet";
+  styleDark.href = "//cdn.staticfile.org/highlight.js/11.7.0/styles/stackoverflow-dark.min.css";
+
+  if (document.querySelector("body").classList.contains("theme-dark")) {
+    document.head.appendChild(styleDark);
+  } else {
+    document.head.appendChild(styleLight);
+  }
+
+  script.onload = function () {
+    // console.log("hljs.js loaded");
+    // 忽略未转义的HTML警告，自己的md文档默认可信
+    hljs.configure({
+      ignoreUnescapedHTML: true
+    });
+    document.querySelectorAll('pre code').forEach((el) => {
+      hljs.highlightElement(el);
+    });
+  };
+}