hexo-theme-particlex 2.6.5 → 2.6.7

package/layout/import.ejs

@@ -7,6 +7,7 @@
 <% } %>
 <% if (theme.highlight.enable) { %>
 <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
+<script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
 <link
     rel="stylesheet"
     href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlight.style %>.min.css"

package/layout/index.ejs

@@ -14,7 +14,7 @@
         </span>
     </div>
 </div>
-<div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
+<div id="home-posts-wrap" <%- theme.card.enable || 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
     <div id="home-posts">
         <%- partial("posts") %>
         <%- partial("current") %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "description": "A concise Hexo theme, based on Particle.",
   "repository": {
     "type": "git",

package/source/css/main.css

@@ -396,15 +396,6 @@
     min-height: 50px;
     text-align: center;
 }
-#menu-curtain {
-    background: #0003;
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 1001;
-}
 #menu #mobile-menu .items {
     padding: 10px 0 20px;
     z-index: 1002;
@@ -424,6 +415,15 @@
     cursor: pointer;
     z-index: 1003;
 }
+#menu-curtain {
+    background: #0003;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1001;
+}
 #menu.hidden {
     top: -50px;
 }
@@ -485,7 +485,6 @@
     margin-right: 10px;
 }
 .code-content {
-    background: none;
     font-size: 13px;
     line-height: 2;
     overflow: auto;
@@ -535,6 +534,16 @@ body::-webkit-scrollbar-track {
 .fade-leave-to {
     opacity: 0;
 }
+.hljs-ln-code {
+    padding-left: 20px !important;
+}
+.hljs-ln-numbers {
+    border-right: 1px solid #ccc;
+    color: #ccc;
+    padding-right: 10px !important;
+    text-align: right;
+    vertical-align: top;
+}
 .icon {
     color: #5c6b72;
     margin-right: 5px;
@@ -664,6 +673,24 @@ a:hover,
 .content .copycode:hover {
     opacity: 0.8;
 }
+audio,
+button,
+iframe,
+img,
+video,
+#home-head,
+#menu,
+.categories-tags a,
+.copycode,
+.friend-link a,
+.go-post,
+.hljs-ln-numbers,
+.icon-link a,
+.katex,
+.language,
+.page-current {
+    user-select: none;
+}
 b,
 strong {
     font-weight: bold;
@@ -684,23 +711,6 @@ body {
     overflow-x: hidden;
     width: 100%;
 }
-button,
-img,
-video,
-audio,
-iframe,
-#home-head,
-#menu,
-.katex,
-.go-post,
-.page-current,
-.categories-tags a,
-.friend-link a,
-.icon-link a,
-.language,
-.copycode {
-    user-select: none;
-}
 code {
     background: #bddcf76b;
     border-radius: 4px;
@@ -763,33 +773,32 @@ pre {
     border-radius: 15px;
     box-shadow: 0 2px 12px 0 #0000001a;
     margin: 25px 0;
+    overflow: hidden;
     white-space: normal;
 }
 pre,
 code,
 .hljs,
-.highlight,
-.commit-tease-sha,
 .input,
 .language {
     font-family: "Fira Code", "Noto Sans SC", monospace;
 }
-table {
+table:not(.hljs-ln) {
     margin: 15px 0;
 }
-table td:nth-child(even) {
+table:not(.hljs-ln) td:nth-child(even) {
     background: #c7e0fb4d;
 }
-table td:nth-child(odd) {
+table:not(.hljs-ln) td:nth-child(odd) {
     background: #d9e8ff4d;
 }
-table th {
+table:not(.hljs-ln) th {
     background: #a3ddfb;
 }
-table tr th,
-table tr td {
-    padding: 10px 20px;
+table:not(.hljs-ln) tr th,
+table:not(.hljs-ln) tr td {
     border-radius: 3px;
+    padding: 10px 20px;
 }
 ul li,
 ol li {

package/source/js/lib/highlight.js

@@ -7,8 +7,8 @@ mixins.highlight = {
         this.renderers.push(this.highlight);
     },
     methods: {
-        sleep(time) {
-            return new Promise(resolve => setTimeout(resolve, time));
+        sleep(delay) {
+            return new Promise(resolve => setTimeout(resolve, delay));
         },
         highlight() {
             let codes = document.querySelectorAll("pre");
@@ -22,13 +22,15 @@ mixins.highlight = {
                     highlighted = code;
                 }
                 i.innerHTML = `
-                    <div class="code-content">${highlighted}</div>
+                    <div class="code-content hljs">${highlighted}</div>
                     <div class="language">${language}</div>
                     <div class="copycode">
                         <i class="fa-solid fa-copy fa-fw"></i>
                         <i class="fa-solid fa-clone fa-fw"></i>
                     </div>
                 `;
+                let content = i.querySelector(".code-content");
+                hljs.lineNumbersBlock(content, { singleLine: true });
                 let copycode = i.querySelector(".copycode");
                 copycode.addEventListener("click", async () => {
                     if (this.copying) return;

package/source/js/main.js

@@ -32,10 +32,9 @@ const app = Vue.createApp({
                 this.showMenuItems = false;
             } else this.hiddenMenu = false;
             if (wrap) {
+                wrap.style.top = -Math.min(newScrollTop / 5, 80) + "px";
                 if (newScrollTop <= window.innerHeight - 100) this.menuColor = true;
                 else this.menuColor = false;
-                if (newScrollTop <= 400) wrap.style.marginTop = -newScrollTop / 5 + "px";
-                else wrap.style.marginTop = "-80px";
             }
             this.scrollTop = newScrollTop;
         },