hexo-theme-nblog 1.2.0 → 1.2.2

package/source/css/markdown.css

@@ -10,7 +10,7 @@
 .post-body h4,
 .post-body h5,
 .post-body h6 {
-  margin-top: 1.5em;
+  margin-top: 1em;
   margin-bottom: 0.5em;
   font-weight: 600;
   line-height: 1.4;
@@ -26,6 +26,7 @@
   color: var(--primary-color);
   font-weight: normal;
   opacity: 1;
+  bottom: -0.5em;
   transition: opacity var(--transition-fast);
   border-bottom: none;
   position: relative;
@@ -111,14 +112,13 @@
   position: relative;
   z-index: 1;
   transition: color var(--transition-fast);
-  bottom: -0.55em;
+  bottom: -0.65em;
   right: 0.1em;
   word-break: break-word;
 }
 
 .post-body a::before {
   position: absolute;
-  bottom: 0;
   left: 0;
   width: 100%;
   height: 0;
@@ -145,20 +145,11 @@
 .post-body ul,
 .post-body ol {
   margin-bottom: 1em;
-  padding-left: 1em;
 }
 
 .post-body li {
   margin-bottom: 0.5em;
-}
-
-.post-body li::marker {
-  color: var(--primary-color);
-}
-
-.post-body li>strong,
-.post-body li>a {
-  display: inline-flex;
+  display: flex;
   align-items: center;
 }
 
@@ -176,109 +167,38 @@
 }
 
 .post-body code {
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
   font-size: 0.9em;
   padding: 0.2em 0.4em;
   margin: 0em 0.4em;
-  background: var(--border-color);
-  border-radius: 10px;
+  background: var(--primary-light);
+  border-radius: 5px;
   color: var(--primary-color);
 }
 
-.post-body pre {
-  margin: 1em 0;
-  padding: 0;
-  background: #282c34;
-  border-radius: 10px;
-  overflow: hidden;
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
-}
-
-.post-body pre code {
-  padding: 0;
-  background: transparent;
-  font-size: 0.9em;
-  line-height: 1.6;
-  color: inherit;
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
-}
-
-.post-body .highlight {
-  margin: 1em 0;
-  border-radius: 10px;
-  overflow-x: auto;
-  background: #282c34;
-  padding: 1em;
-  position: relative;
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
-}
-
-.post-body .highlight pre {
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
-  white-space: pre;
-}
-
 .post-body .highlight code {
   padding: 0;
   background: transparent;
   color: inherit;
-  font-family: Consolas, Menlo, 'Fira Code', monospace;
   white-space: pre;
 }
 
-.post-body .highlight table {
-  margin: 0;
-  border: none;
-}
-
-.post-body .highlight table tr {
-  background: transparent;
-}
-
-.post-body .highlight table td {
-  padding: 0;
-  border: none;
-}
-
-.post-body .highlight .gutter {
-  width: 20px;
-  padding-right: 5px;
-  border-right: 1px solid #3e4451;
-  text-align: right;
-  user-select: none;
-}
-
-.post-body .highlight .gutter pre {
-  padding: 0 0.5em 0 0.5em;
-}
-
-.post-body .highlight .gutter .line {
-  color: #5c6370;
-}
-
-.post-body .highlight .code pre {
-  padding: 0 0 0 0.5em;
-}
-
-.post-body .highlight .line {
-  height: 1.6em;
-  line-height: 1.6;
+.post-body pre,
+code {
+  font-family: Consolas, Menlo, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 .post-body .highlight-wrap {
   position: relative;
   margin: 1em 0;
   border-radius: 10px;
-  background: #282c34;
+  background-color: var(--border-color);
   overflow-x: auto;
+  font-family: Consolas, Menlo, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 
 .post-body .highlight-wrap .highlight {
-  margin: 5px;
-  padding: 5px;
+  margin: 0px;
+  padding: 0px;
   overflow-x: auto;
   overflow-y: hidden;
 }
@@ -314,20 +234,11 @@
   border-color: #98c379;
 }
 
-.post-body .highlight .code,
-.post-body .highlight .gutter {
-  user-select: none;
-}
-
-.post-body .highlight .code pre {
-  user-select: text;
-}
-
 .post-body img {
-  max-width: 100%;
+  width: 100%;
   height: auto;
   border-radius: var(--border-radius-sm);
-  margin: 1em 0;
+  margin: 0;
 }
 
 .post-body .medium-zoom-image {
@@ -364,7 +275,6 @@
 
 .post-body table {
   width: 100%;
-  margin: 1em 0;
   border-collapse: collapse;
   border-radius: var(--border-radius-sm);
   overflow: hidden;
@@ -374,7 +284,6 @@
 .post-body td {
   padding: 12px 16px;
   text-align: left;
-  border: 1px solid var(--border-color);
 }
 
 .post-body th {
@@ -455,10 +364,6 @@
     font-size: 15px;
   }
 
-  .post-body pre {
-    font-size: 0.85em;
-  }
-
   .post-body table {
     display: block;
     overflow-x: auto;

package/source/css/tocbot.css

@@ -0,0 +1 @@
+.toc{overflow-y:auto}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.toc-list{margin:0;padding-left:10px}a.toc-link{color:currentColor;height:100%}.is-collapsible{max-height:1000px;overflow:hidden;transition:all 300ms ease-in-out}.is-collapsed{max-height:0}.is-position-fixed{position:fixed !important;top:0}.is-active-link{font-weight:700}.toc-link::before{background-color:#eee;content:" ";display:inline-block;height:inherit;left:0;margin-top:-1px;position:absolute;width:2px}.is-active-link::before{background-color:#54bc4b}/*# sourceMappingURL=tocbot.css.map */

package/source/js/lazyload.js

@@ -107,6 +107,7 @@
             img.src = src;
 
             img.classList.add('lazyload-loaded');
+            img.classList.remove('lazyload-image');
             if (wrapper) {
                 wrapper.classList.add('lazyload-wrapper--loaded');
             }
@@ -114,6 +115,19 @@
             img.removeAttribute('data-src');
             img.removeAttribute('data-srcset');
 
+            if (img.hasAttribute('data-zoomable') && typeof mediumZoom !== 'undefined') {
+                img.classList.add('medium-zoom-image');
+                var globalZoom = window.mediumZoomInstance;
+                if (!globalZoom) {
+                    window.mediumZoomInstance = mediumZoom('.medium-zoom-image', {
+                        margin: 24,
+                        background: getComputedStyle(document.documentElement).getPropertyValue('--bg-color') || '#fff'
+                    });
+                } else {
+                    globalZoom.attach(img);
+                }
+            }
+
             img.dispatchEvent(new CustomEvent('lazyload:loaded', {
                 bubbles: true,
                 detail: { img: img }
@@ -122,6 +136,8 @@
 
         tempImg.onerror = function () {
             img.classList.add('lazyload-error');
+            img.classList.remove('lazyload-image');
+            img.style.opacity = '1';
             if (wrapper) {
                 wrapper.classList.add('lazyload-wrapper--error');
                 self.showErrorPlaceholder(wrapper, src);
@@ -179,4 +195,22 @@
     window.initLazyload = initLazyload;
     window.refreshLazyload = refreshLazyload;
     window.destroyLazyload = destroyLazyload;
+
+    function autoInit() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', function () {
+                initLazyload({
+                    rootMargin: '100px 0px',
+                    threshold: 0.01
+                });
+            });
+        } else {
+            initLazyload({
+                rootMargin: '100px 0px',
+                threshold: 0.01
+            });
+        }
+    }
+
+    autoInit();
 })();

package/source/js/main.js

@@ -249,37 +249,39 @@
         }
 
         const script = document.createElement('script');
-        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js';
-        script.onload = function () {
-            const vueScript = document.createElement('script');
-            vueScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/vue.min.js';
-            vueScript.onload = callback;
-            document.head.appendChild(vueScript);
-        };
+        script.src = '/lib/js/highlight.min.js';
+        script.onload = callback;
         document.head.appendChild(script);
     }
 
     function applyHighlight(element, language) {
         if (!window.hljs) return;
 
-        const codeElement = element.querySelector('code') || element.querySelector('.code pre') || element.querySelector('pre');
+        const codeElement = element.querySelector('.code code') || element.querySelector('code');
         if (!codeElement) return;
 
-        let codeText = codeElement.textContent || codeElement.innerText;
+        let codeText;
+        const tempEl = codeElement.cloneNode(true);
+        tempEl.querySelectorAll('br').forEach(br => br.replaceWith('\n'));
+        codeText = tempEl.textContent || tempEl.innerText;
+
+        const gutter = element.querySelector('.gutter');
+        const lines = codeText.split('\n');
+        if (lines.length > 0 && lines[lines.length - 1] === '') {
+            lines.pop();
+        }
+        const lineCount = lines.length;
 
-        element.innerHTML = '';
+        if (gutter) {
+            gutter.innerHTML = '<pre>' + Array.from({ length: lineCount }, (_, i) => `<span class="line">${i + 1}</span><br>`).join('') + '</pre>';
+        }
 
-        const pre = document.createElement('pre');
-        const code = document.createElement('code');
-        code.className = language ? `hljs language-${language}` : 'hljs';
-        code.textContent = codeText;
-        pre.appendChild(code);
-        element.appendChild(pre);
+        codeElement.textContent = codeText;
 
         if (language && hljs.getLanguage(language)) {
-            hljs.highlightElement(code);
+            hljs.highlightElement(codeElement);
         } else {
-            hljs.highlightElement(code);
+            hljs.highlightElement(codeElement);
         }
     }
 
@@ -367,11 +369,11 @@
 
         const link = document.createElement('link');
         link.rel = 'stylesheet';
-        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.28.2/tocbot.css';
+        link.href = '/css/tocbot.css';
         document.head.appendChild(link);
 
         const script = document.createElement('script');
-        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.28.2/tocbot.min.js';
+        script.src = '/lib/js/tocbot.min.js';
         script.onload = callback;
         document.head.appendChild(script);
     }
@@ -543,6 +545,8 @@
         setTimeout(updateTocPosition, 500);
     }
 
+    let zoomInstance = null;
+
     function initMediumZoom() {
         if (typeof mediumZoom === 'undefined') return;
 
@@ -555,19 +559,23 @@
         images.forEach(img => {
             if (img.closest('a')) return;
             if (img.classList.contains('medium-zoom-image')) return;
+            if (img.hasAttribute('data-src')) return;
             img.classList.add('medium-zoom-image');
         });
 
         document.querySelectorAll('[data-zoomable]').forEach(function (img) {
-            if (!img.classList.contains('medium-zoom-image')) {
+            if (!img.classList.contains('medium-zoom-image') && !img.hasAttribute('data-src')) {
                 img.classList.add('medium-zoom-image');
             }
         });
 
-        mediumZoom('.medium-zoom-image', {
-            margin: 24,
-            background: getComputedStyle(document.documentElement).getPropertyValue('--bg-color') || '#fff'
-        });
+        if (!zoomInstance) {
+            zoomInstance = mediumZoom('.medium-zoom-image', {
+                margin: 24,
+                background: getComputedStyle(document.documentElement).getPropertyValue('--bg-color') || '#fff'
+            });
+            window.mediumZoomInstance = zoomInstance;
+        }
     }
 
     function initPage() {
@@ -591,6 +599,9 @@
         initToc();
         initMediumZoom();
         initNotifications();
+        if (typeof refreshLazyload === 'function') {
+            refreshLazyload();
+        }
 
         window.scrollTo(0, 0);
     }
@@ -626,7 +637,20 @@
 
         initCodeBlocks();
         initToc();
+        initMediumZoom();
         initNotifications();
+        initLazyloadAuto();
+    }
+
+    function initLazyloadAuto() {
+        if (typeof initLazyload === 'function') {
+            initLazyload({
+                rootMargin: '100px 0px',
+                threshold: 0.01
+            });
+        } else if (typeof refreshLazyload === 'function') {
+            refreshLazyload();
+        }
     }
 
     function handleOutsideClick(e) {