hexo-theme-particlex 2.6.9 → 2.7.0

package/README.md

@@ -79,6 +79,17 @@ favicon: /images/favicon.png
 # Home page background image
 background:
     - /images/background.jpg
+
+# Loading image
+loading: /images/loading.gif
+
+# Optional colors for category and tag
+colors:
+    - "#ffa2c4"
+    - "#00bcd4"
+    - "#03a9f4"
+    - "#00a596"
+    - "#ff7d73"
 ```
 
 ## 3.2. 内容配置

package/_config.yml

@@ -11,6 +11,17 @@ favicon: /images/favicon.png
 background:
     - /images/background.jpg
 
+# Loading image
+loading: /images/loading.gif
+
+# Optional colors for category and tag
+colors:
+    - "#ffa2c4"
+    - "#00bcd4"
+    - "#03a9f4"
+    - "#00a596"
+    - "#ff7d73"
+
 # ParticleX theme icon is adopts the Font Awesome 6
 # https://fontawesome.com
 

package/layout/archives.ejs

@@ -31,19 +31,15 @@
                         <span class="icon">
                             <i class="fa-solid fa-tags fa-fw"></i>
                         </span>
+                        <% let prev; %>
                         <% post.tags.data.forEach(tag => { %>
                         <span class="tag">
                             <%
-                                const color = [
-                                    "color: #ffa2c4",
-                                    "color: #00bcd4",
-                                    "color: #03a9f4",
-                                    "color: #00a596",
-                                    "color: #ff7d73",
-                                ];
-                                let id = Math.floor(Math.random() * color.length);
+                                const colors = theme.colors.filter(color => color !== prev);
+                                let id = Math.floor(Math.random() * colors.length);
+                                prev = colors[id];
                             %>
-                            <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
+                            <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
                         </span>
                         <% }); %>
                     </span>

package/layout/categories.ejs

@@ -1,15 +1,17 @@
 <div id="archives">
     <% let posts = []; %>
     <div class="categories-tags">
+        <% let prev; %>
         <% site.categories.data.forEach(category => { %>
         <%
-            const color = is_category(category.name)
+            const colors = is_category(category.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
-                : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
-            let id = Math.floor(Math.random() * color.length);
+                : theme.colors.filter(color => color !== prev);
+            let id = Math.floor(Math.random() * colors.length);
+            prev = colors[id];
         %>
         <span>
-            <a href="<%- url_for(category.path) %>" style="background: <%- color[id] %>">
+            <a href="<%- url_for(category.path) %>" style="background: <%- colors[id] %>">
                 <span class="icon">
                     <i class="fa-solid fa-bookmark fa-fw"></i>
                 </span>
@@ -48,19 +50,15 @@
                     <span class="icon">
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
+                    <% let prev; %>
                     <% post.tags.data.forEach(tag => { %>
                     <span class="tag">
                         <%
-                            const color = [
-                                "color: #ffa2c4",
-                                "color: #00bcd4",
-                                "color: #03a9f4",
-                                "color: #00a596",
-                                "color: #ff7d73",
-                            ];
-                            let id = Math.floor(Math.random() * color.length);
+                            const colors = theme.colors.filter(color => color !== prev);
+                            let id = Math.floor(Math.random() * colors.length);
+                            prev = colors[id];
                         %>
-                        <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
+                        <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/layout/layout.ejs

@@ -31,7 +31,7 @@
                     <div id="loading-circle">
                         <h2>LOADING</h2>
                         <p>加载过慢请开启缓存 浏览器默认开启</p>
-                        <img src="<%- url_for("/images/loading.gif") %>" />
+                        <img src="<%- url_for(theme.loading) %>" />
                     </div>
                 </div>
             </transition>

package/layout/post.ejs

@@ -24,19 +24,15 @@
             <span class="icon">
                 <i class="fa-solid fa-tags fa-fw"></i>
             </span>
+            <% let prev; %>
             <% page.tags.data.forEach(tag => { %>
             <span class="tag">
                 <%
-                    const color = [
-                        "color: #ffa2c4",
-                        "color: #00bcd4",
-                        "color: #03a9f4",
-                        "color: #00a596",
-                        "color: #ff7d73",
-                    ];
-                    let id = Math.floor(Math.random() * color.length);
+                    const colors = theme.colors.filter(color => color !== prev);
+                    let id = Math.floor(Math.random() * colors.length);
+                    prev = colors[id];
                 %>
-                <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
+                <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
             </span>
             <% }); %>
         </span>
@@ -46,8 +42,8 @@
     <% const CryptoJS = crypto(); %>
     <input
         id="crypto"
-        :class="['input', cryptoClass]"
-        :disabled="cryptoStatus"
+        :class="['input', cryptoStatus]"
+        :disabled="cryptoStatus == 'success'"
         ref="crypto"
         placeholder="文章被加密，请输入密码"
         data-encrypted="<%- CryptoJS.AES.encrypt(page.content, page.secret).toString() %>"
@@ -55,7 +51,7 @@
         v-model="crypto"
     />
     <transition name="fade">
-        <div class="content" ref="content" v-show="cryptoStatus"></div>
+        <div class="content" ref="content" v-show="cryptoStatus == 'success'"></div>
     </transition>
     <% } else { %>
     <div class="content" v-pre>

package/layout/posts.ejs

@@ -58,19 +58,15 @@
             <i class="fa-solid fa-tags fa-fw"></i>
         </span>
         <% } %>
+        <% let prev; %>
         <% post.tags.data.forEach(tag => { %>
         <span class="tag">
             <%
-                const color = [
-                    "color: #ffa2c4",
-                    "color: #00bcd4",
-                    "color: #03a9f4",
-                    "color: #00a596",
-                    "color: #ff7d73",
-                ];
-                let id = Math.floor(Math.random() * color.length);
+                const colors = theme.colors.filter(color => color !== prev);
+                let id = Math.floor(Math.random() * colors.length);
+                prev = colors[id];
             %>
-            <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
+            <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
         </span>
         <% }); %>
     </div>

package/layout/tags.ejs

@@ -1,15 +1,17 @@
 <div id="archives">
     <% let posts = []; %>
     <div class="categories-tags">
+        <% let prev; %>
         <% site.tags.data.forEach(tag => { %>
         <%
-            const color = is_tag(tag.name)
+            const colors = is_tag(tag.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
-                : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
-            let id = Math.floor(Math.random() * color.length);
+                : theme.colors.filter(color => color !== prev);
+            let id = Math.floor(Math.random() * colors.length);
+            prev = colors[id];
         %>
         <span>
-            <a href="<%- url_for(tag.path) %>" style="background: <%- color[id] %>">
+            <a href="<%- url_for(tag.path) %>" style="background: <%- colors[id] %>">
                 <span class="icon">
                     <i class="fa-solid fa-tags fa-fw"></i>
                 </span>
@@ -33,7 +35,7 @@
                 <h3><%= post.title %></h3>
             </a>
             <div class="info">
-                <% if (post.categories && post.categories.data.length){ %>
+                <% if (post.categories && post.categories.data.length !== 0) { %>
                 <span class="category">
                     <a href="<%- url_for(post.categories.data[0].path) %>">
                         <span class="icon">
@@ -48,19 +50,15 @@
                     <span class="icon">
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
+                    <% let prev; %>
                     <% post.tags.data.forEach(tag => { %>
                     <span class="tag">
                         <%
-                            const color = [
-                                "color: #ffa2c4",
-                                "color: #00bcd4",
-                                "color: #03a9f4",
-                                "color: #00a596",
-                                "color: #ff7d73",
-                            ];
-                            let id = Math.floor(Math.random() * color.length);
+                            const colors = theme.colors.filter(color => color !== prev);
+                            let id = Math.floor(Math.random() * colors.length);
+                            prev = colors[id];
                         %>
-                        <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
+                        <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>"><%= tag.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/package.json

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

package/source/css/main.css

@@ -45,11 +45,11 @@
 #crypto {
     margin: 50px 0;
 }
-#crypto.fail {
+#crypto.failure {
     border-color: #ea4a5a;
     color: #ea4a5a;
 }
-#crypto.fail:focus {
+#crypto.failure:focus {
     box-shadow: 0 0 0 3px #ea4a5a4d;
 }
 #crypto.success {

package/source/js/lib/crypto.js

@@ -1,6 +1,6 @@
 mixins.crypto = {
     data() {
-        return { crypto: "", cryptoStatus: null };
+        return { crypto: "", cryptoStatus: "" };
     },
     watch: {
         crypto(value) {
@@ -10,20 +10,13 @@ mixins.crypto = {
             try {
                 let decrypted = CryptoJS.AES.decrypt(encrypted, value).toString(CryptoJS.enc.Utf8);
                 if (CryptoJS.SHA256(decrypted).toString() === shasum) {
-                    this.cryptoStatus = true;
+                    this.cryptoStatus = "success";
                     content.innerHTML = decrypted;
                     this.render();
-                } else this.cryptoStatus = false;
+                } else this.cryptoStatus = "failure";
             } catch {
-                this.cryptoStatus = false;
+                this.cryptoStatus = "failure";
             }
         },
     },
-    computed: {
-        cryptoClass() {
-            if (this.cryptoStatus === null) return "";
-            if (this.cryptoStatus === true) return "success";
-            if (this.cryptoStatus === false) return "fail";
-        },
-    },
 };

package/source/js/lib/highlight.js

@@ -13,7 +13,7 @@ mixins.highlight = {
         highlight() {
             let codes = document.querySelectorAll("pre");
             for (let i of codes) {
-                let code = i.innerText;
+                let code = i.textContent;
                 let language = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
                 let highlighted;
                 try {