hexo-theme-particlex 2.5.15 → 2.6.1

package/README.md

@@ -121,8 +121,6 @@ menu:
 
 图标链接配置和导航栏配置相同
 
-**如果图标链接或友链为空，请在 `iconLinks:` 或 `friendLinks:` 后添加一个 `{}`**
-
 ```yaml
 # Side info card
 card:
@@ -131,7 +129,6 @@ card:
         Description
         ...
     iconLinks:
-        {}
     friendLinks:
         Argvchs: https://argvchs.github.io
 ```
@@ -274,11 +271,7 @@ giscus:
 
 Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
 
-考虑到博客可能部署到多个网站同步评论，但 OAuth APP 只能有一个回调 URL，所以添加了 `sites` 参数用于多个网站的评论
-
-**同样如果没有其他网站，请在 `sites:` 后添加一个 `{}`**
-
-由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，添加了 `proxy` 参数，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
+由于 Gitalk 官方 CORS 代理用的是 Cloudflare，速度过慢，搭建 CORS 代理可以看[这篇文章](https://argvchs.github.io/2022/07/04/build-cors-anywhere)
 
 ```yaml
 # Gitalk
@@ -292,11 +285,6 @@ gitalk:
     admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
     language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
     proxy: # CORS proxy
-    sites: # Sites
-        {}
-        # www.example.com:
-        #    clientID:
-        #    clientSecret:
 ```
 
 ### 3.4.3. Waline
@@ -305,8 +293,6 @@ Waline 是一个简单、安全的评论系统
 
 详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
 
-**注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
-
 ```yaml
 # Waline
 # https://github.com/walinejs/waline
@@ -314,7 +300,6 @@ waline:
     enable: false
     serverURL: # Waline server address url, you should set this to your own link
     locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
-        {}
     commentCount: true # If false, comment count will only be displayed in post page, not in home page
     pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
     emoji: # Custom emoji

package/_config.yml

@@ -44,7 +44,6 @@ card:
         Description
         ...
     iconLinks:
-        {}
     friendLinks:
         Argvchs: https://argvchs.github.io
 
@@ -114,11 +113,6 @@ gitalk:
     admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
     language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
     proxy: # CORS proxy
-    sites: # Sites
-        {}
-        # www.example.com:
-        #    clientID:
-        #    clientSecret:
 
 # Waline
 # https://github.com/walinejs/waline
@@ -126,7 +120,6 @@ waline:
     enable: false
     serverURL: # Waline server address url, you should set this to your own link
     locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
-        {}
     commentCount: true # If false, comment count will only be displayed in post page, not in home page
     pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
     emoji: # Custom emoji

package/layout/archives.ejs

@@ -31,7 +31,7 @@
                         <span class="icon">
                             <i class="fa-solid fa-tags fa-fw"></i>
                         </span>
-                        <% post.tags.data.forEach(data => { %>
+                        <% post.tags.data.forEach(tag => { %>
                         <span class="tag">
                             <%
                                 const color = [
@@ -43,7 +43,7 @@
                                 ];
                                 let id = Math.floor(Math.random() * color.length);
                             %>
-                            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+                            <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
                         </span>
                         <% }); %>
                     </span>

package/layout/card.ejs

@@ -7,24 +7,24 @@
         <div class="description">
             <%- markdown(theme.card.description) %>
         </div>
-        <% if (Object.keys(theme.card.iconLinks).length) { %>
+        <% if (theme.card.iconLinks) { %>
         <div class="icon-links">
-            <% Object.keys(theme.card.iconLinks).forEach(key => { %>
+            <% Object.entries(theme.card.iconLinks).forEach(([key, value]) => { %>
             <span class="icon-link">
-                <a href="<%- url_for(theme.card.iconLinks[key].link) %>">
+                <a href="<%- url_for(value.link) %>">
                     <i
-                        class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"
+                        class="fa-<%- value.theme %> fa-<%- value.name %> fa-fw"
                     ></i>
                 </a>
             </span>
             <% }); %>
         </div>
         <% } %>
-        <% if (Object.keys(theme.card.friendLinks).length) { %>
+        <% if (theme.card.friendLinks) { %>
         <div class="friend-links">
-            <% Object.keys(theme.card.friendLinks).forEach(key => { %>
+            <% Object.entries(theme.card.friendLinks).forEach(([key, value]) => { %>
             <div class="friend-link">
-                <a href="<%- url_for(theme.card.friendLinks[key]) %>"><%= key %></a>
+                <a href="<%- url_for(value) %>"><%= key %></a>
             </div>
             <% }); %>
         </div>

package/layout/categories.ejs

@@ -48,7 +48,7 @@
                     <span class="icon">
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
-                    <% post.tags.data.forEach(data => { %>
+                    <% post.tags.data.forEach(tag => { %>
                     <span class="tag">
                         <%
                             const color = [
@@ -60,7 +60,7 @@
                             ];
                             let id = Math.floor(Math.random() * color.length);
                         %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+                        <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/layout/comment.ejs

@@ -18,30 +18,19 @@
 <% } %>
 <% if (theme.gitalk.enable) { %>
 <script>
-    (() => {
-        let clientID = "<%- theme.gitalk.clientID %>",
-            clientSecret = "<%- theme.gitalk.clientSecret %>";
-        <% Object.keys(theme.gitalk.sites).forEach(key => { %>
-        if (window.location.host === "<%- key %>") {
-            clientID = "<%- theme.gitalk.sites[key].clientID %>";
-            clientSecret = "<%- theme.gitalk.sites[key].clientSecret %>";
-        }
-        <% }); %>
-        const gitalk = new Gitalk({
-            clientID: clientID,
-            clientSecret: clientSecret,
-            repo: "<%- theme.gitalk.repo %>",
-            owner: "<%- theme.gitalk.owner %>",
-            admin: ["<%- theme.gitalk.admin %>"],
-            language: "<%- theme.gitalk.language %>",
-            id: location.pathname,
-            distractionFreeMode: false,
-            <% if (theme.gitalk.proxy) { %>
-            proxy: "<%- theme.gitalk.proxy %>",
-            <% } %>
-        })
-        gitalk.render("gitalk-container");
-    })();
+    const gitalk = new Gitalk({
+        clientID: "<%- theme.gitalk.clientID %>",
+        clientSecret: "<%- theme.gitalk.clientSecret %>",
+        repo: "<%- theme.gitalk.repo %>",
+        owner: "<%- theme.gitalk.owner %>",
+        admin: "<%- theme.gitalk.admin %>".split(","),
+        language: "<%- theme.gitalk.language %>",
+        id: location.pathname,
+        <% if (theme.gitalk.proxy) { %>
+        proxy: "<%- theme.gitalk.proxy %>",
+        <% } %>
+    })
+    gitalk.render("gitalk-container");
 </script>
 <% } %>
 <% if (theme.waline.enable) { %>
@@ -51,14 +40,16 @@
         serverURL: "<%- theme.waline.serverURL %>",
         commentCount: <%- theme.waline.commentCount %>,
         pageview: <%- theme.waline.pageview %>,
-        emoji: <%- JSON.stringify(theme.waline.emoji) %>,
-        meta: <%- JSON.stringify(theme.waline.meta) %>,
-        requiredMeta: <%- JSON.stringify(theme.waline.requiredMeta) %>,
+        emoji: "<%- (theme.waline.emoji) %>".split(","),
+        meta: "<%- (theme.waline.meta) %>".split(","),
+        requiredMeta: "<%- theme.waline.requiredMeta %>".split(","),
         lang: "<%- theme.waline.lang %>",
         wordLimit: <%- theme.waline.wordLimit %>,
         pageSize: "<%- theme.waline.pageSize %>",
         login: "<%- theme.waline.login %>",
+        <% if (theme.waline.locale) { %>
         locale: <%- JSON.stringify(theme.waline.locale) %>,
+        <% } %>
     });
 </script>
 <% } %>

package/layout/current.ejs

@@ -14,12 +14,12 @@
             <span class="page-omit">...</span>
             <% } %>
             <% if (page.current - 2 >= 1) { %>
-                <% if (page.current - 2 === 1) { %>
-                <a class="page-num" href="<%- config.root %>">1</a>
-                <% } %>
-                <% if (page.current - 2 !== 1) { %>
-                <a class="page-num" href="<%- url_for("page/" + (page.current - 2)) %>"><%= page.current - 2 %></a>
-                <% } %>
+            <% if (page.current - 2 === 1) { %>
+            <a class="page-num" href="<%- config.root %>">1</a>
+            <% } %>
+            <% if (page.current - 2 !== 1) { %>
+            <a class="page-num" href="<%- url_for("page/" + (page.current - 2)) %>"><%= page.current - 2 %></a>
+            <% } %>
             <% } %>
             <a class="page-num" href="<%- url_for(page.prev_link) %>"><%= page.prev %></a>
         </span>

package/layout/index.ejs

@@ -1,9 +1,5 @@
 <div id="home-head">
-    <div
-        id="home-background"
-        ref="homeBackground"
-        data-images="<%- theme.background.map(i => url_for(i)) %>"
-    ></div>
+    <div id="home-background" ref="homeBackground" data-images="<%- theme.background.map(url_for) %>"></div>
     <div id="home-info" @click="homeClick">
         <span class="loop"></span>
         <span class="loop"></span>

package/layout/layout.ejs

@@ -27,26 +27,26 @@
     <body>
         <div id="layout">
             <transition name="fade">
-            <div id="loading" v-show="loading">
-                <div id="loading-circle">
-                    <h2>LOADING</h2>
-                    <p>加载过慢请开启缓存 浏览器默认开启</p>
-                    <img src="<%- url_for("/images/loading.gif") %>" />
+                <div id="loading" v-show="loading">
+                    <div id="loading-circle">
+                        <h2>LOADING</h2>
+                        <p>加载过慢请开启缓存 浏览器默认开启</p>
+                        <img src="<%- url_for("/images/loading.gif") %>" />
+                    </div>
                 </div>
-            </div>
             </transition>
             <%- partial("menu") %>
             <transition name="into">
-            <div id="main" v-show="!loading">
-                <%- partial(type) %>
-                <%- partial("footer") %>
-            </div>
+                <div id="main" v-show="!loading">
+                    <%- partial(type) %>
+                    <%- partial("footer") %>
+                </div>
             </transition>
             <% if (theme.preview.enable) { %>
             <transition name="fade">
-            <div id="preview" ref="preview" v-show="previewShow">
-                <img id="preview-content" ref="previewContent" />
-            </div>
+                <div id="preview" ref="preview" v-show="previewShow">
+                    <img id="preview-content" ref="previewContent" />
+                </div>
             </transition>
             <% } %>
         </div>

package/layout/menu.ejs

@@ -1,34 +1,36 @@
 <nav id="menu" :class="{ hidden: hiddenMenu, 'menu-color': menuColor}">
-    <div class="desktop-menu">
+    <div id="desktop-menu">
         <a class="title" href="<%- config.root %>">
             <span><%= config.title.toUpperCase() %></span>
         </a>
-        <% Object.keys(theme.menu).forEach(key => { %>
-        <a href="<%- url_for(theme.menu[key].link) %>">
-            <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
+        <% Object.entries(theme.menu).forEach(([key, value]) => { %>
+        <a href="<%- url_for(value.link) %>">
+            <i class="fa-<%- value.theme %> fa-<%- value.name %> fa-fw"></i>
             <span>&ensp;<%= key %></span>
         </a>
         <% }); %>
     </div>
     <div id="mobile-menu">
-        <div class="curtain" @click="shouMenuItems = !shouMenuItems" v-show="shouMenuItems"></div>
-        <div class="title" @click="shouMenuItems = !shouMenuItems">
+        <div class="title" @click="showMenuItems = !showMenuItems">
             <i class="fa-solid fa-bars fa-fw"></i>
             <span>&emsp;<%= config.title.toUpperCase() %></span>
         </div>
         <transition name="slide">
-        <div class="items" v-show="shouMenuItems">
-            <% Object.keys(theme.menu).forEach(key => { %>
-            <a href="<%- url_for(theme.menu[key].link) %>">
-                <div class="item">
-                    <div style="min-width: 20px; max-width: 50px; width: 10%">
-                        <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
+            <div class="items" v-show="showMenuItems">
+                <% Object.entries(theme.menu).forEach(([key, value]) => { %>
+                <a href="<%- url_for(value.link) %>">
+                    <div class="item">
+                        <div style="min-width: 20px; max-width: 50px; width: 10%">
+                            <i class="fa-<%- value.theme %> fa-<%- value.name %> fa-fw"></i>
+                        </div>
+                        <div style="min-width: 100px; max-width: 150%; width: 20%"><%= key %></div>
                     </div>
-                    <div style="min-width: 100px; max-width: 150%; width: 20%"><%= key %></div>
-                </div>
-            </a>
-            <% }); %>
-        </div>
+                </a>
+                <% }); %>
+            </div>
         </transition>
     </div>
 </nav>
+<transition name="fade">
+    <div id="menu-curtain" @click="showMenuItems = !showMenuItems" v-show="showMenuItems"></div>
+</transition>

package/layout/post.ejs

@@ -24,7 +24,7 @@
             <span class="icon">
                 <i class="fa-solid fa-tags fa-fw"></i>
             </span>
-            <% page.tags.data.forEach(data => { %>
+            <% page.tags.data.forEach(tag => { %>
             <span class="tag">
                 <%
                     const color = [
@@ -36,7 +36,7 @@
                     ];
                     let id = Math.floor(Math.random() * color.length);
                 %>
-                <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+                <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
             </span>
             <% }); %>
         </span>
@@ -47,7 +47,7 @@
     <input
         id="crypto"
         :class="['input', cryptoClass]"
-        :disabled="check"
+        :disabled="cryptoStatus"
         ref="crypto"
         placeholder="文章被加密，请输入密码"
         data-encrypted="<%- CryptoJS.AES.encrypt(page.content, page.secret).toString() %>"
@@ -55,7 +55,7 @@
         v-model="crypto"
     />
     <transition name="fade">
-    <div class="content" ref="content" v-html="decrypted" v-show="check"></div>
+        <div class="content" ref="content" v-show="cryptoStatus"></div>
     </transition>
     <% } else { %>
     <div class="content" v-pre>

package/layout/posts.ejs

@@ -58,7 +58,7 @@
             <i class="fa-solid fa-tags fa-fw"></i>
         </span>
         <% } %>
-        <% post.tags.data.forEach(data => { %>
+        <% post.tags.data.forEach(tag => { %>
         <span class="tag">
             <%
                 const color = [
@@ -70,7 +70,7 @@
                 ];
                 let id = Math.floor(Math.random() * color.length);
             %>
-            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+            <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
         </span>
         <% }); %>
     </div>

package/layout/tags.ejs

@@ -33,7 +33,7 @@
                 <h3><%= post.title %></h3>
             </a>
             <div class="info">
-                <% if (post.categories && post.categories.data.length !== 0){ %>
+                <% if (post.categories && post.categories.data.length){ %>
                 <span class="category">
                     <a href="<%- url_for(post.categories.data[0].path) %>">
                         <span class="icon">
@@ -48,7 +48,7 @@
                     <span class="icon">
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
-                    <% post.tags.data.forEach(data => { %>
+                    <% post.tags.data.forEach(tag => { %>
                     <span class="tag">
                         <%
                             const color = [
@@ -60,7 +60,7 @@
                             ];
                             let id = Math.floor(Math.random() * color.length);
                         %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
+                        <a href="<%- url_for(tag.path) %>" style="<%- color[id] %>"><%= tag.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/package.json

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

package/source/css/main.css

@@ -271,7 +271,7 @@
 }
 #home-posts .post .category-and-date .date,
 #archives .tags,
-#menu .desktop-menu a span {
+#menu #desktop-menu a span {
     display: inline-block;
 }
 #home-posts .post .category-and-date .special {
@@ -376,18 +376,18 @@
     top: 0;
     transition: background 0.25s ease-out, top 0.25s ease-out;
     width: 100vw;
-    z-index: 10004;
+    z-index: 1004;
 }
-#menu .desktop-menu {
+#menu #desktop-menu {
     height: 50px;
 }
-#menu .desktop-menu .title {
+#menu #desktop-menu .title {
     color: #555;
     display: inline-block;
     margin-left: 60px;
     margin-right: 5px;
 }
-#menu .desktop-menu a {
+#menu #desktop-menu a {
     color: #555;
     display: inline-block;
     margin-left: 30px;
@@ -396,17 +396,18 @@
     min-height: 50px;
     text-align: center;
 }
-#menu #mobile-menu .curtain {
+#menu-curtain {
+    background: #0003;
     height: 100%;
     left: 0;
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: -1;
+    z-index: 1001;
 }
 #menu #mobile-menu .items {
     padding: 10px 0 20px;
-    z-index: 10002;
+    z-index: 1002;
 }
 #menu #mobile-menu .items .item {
     display: flex;
@@ -421,10 +422,10 @@
 #menu #mobile-menu .title {
     color: #555;
     cursor: pointer;
-    z-index: 10003;
+    z-index: 1003;
 }
 #menu.hidden {
-    top: -70px !important;
+    top: -50px !important;
 }
 #menu.menu-color {
     background: #0003 !important;
@@ -444,7 +445,7 @@
     position: fixed;
     top: 0;
     width: 100vw;
-    z-index: 10005;
+    z-index: 1005;
 }
 #preview-content {
     box-shadow: 0 0 50px 10px #d9d9d980;
@@ -454,7 +455,7 @@
 }
 #search-bar {
     margin-bottom: 50px;
-    z-index: 10001;
+    z-index: 1000;
 }
 #timeline-wrap {
     display: flex;
@@ -872,7 +873,7 @@ ol li {
     #home-posts-wrap {
         max-width: 1200px;
     }
-    #menu .desktop-menu {
+    #menu #desktop-menu {
         display: block;
     }
     #menu #mobile-menu {
@@ -958,7 +959,7 @@ ol li {
     #footer #footer-wrap {
         width: 100%;
     }
-    #menu .desktop-menu,
+    #menu #desktop-menu,
     #home-card {
         display: none;
     }

package/source/js/lib/crypto.js

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

package/source/js/lib/highlight.js

@@ -10,9 +10,14 @@ mixins.highlight = {
         highlight() {
             let codes = document.querySelectorAll("pre");
             for (let i of codes) {
-                let code = i.innerText;
-                let language = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
-                let highlighted = hljs.highlight(code, { language }).value;
+                let code = i.innerText,
+                    language = [...i.classList, ...i.firstChild.classList][0] || "plaintext",
+                    highlighted;
+                try {
+                    highlighted = hljs.highlight(code, { language }).value;
+                } catch {
+                    highlighted = code;
+                }
                 i.innerHTML = `
                     <div class="code-content">${highlighted}</div>
                     <div class="language">${language}</div>

package/source/js/lib/home.js

@@ -1,8 +1,8 @@
 mixins.home = {
     mounted() {
-        let background = this.$refs.homeBackground;
-        let images = background.dataset.images.split(",");
-        let id = Math.floor(Math.random() * images.length);
+        let background = this.$refs.homeBackground,
+            images = background.dataset.images.split(","),
+            id = Math.floor(Math.random() * images.length);
         background.style.backgroundImage = `url('${images[id]}')`;
         this.menuColor = true;
     },

package/source/js/lib/preview.js

@@ -8,8 +8,8 @@ mixins.preview = {
     methods: {
         preview() {
             let preview = this.$refs.preview,
-                content = this.$refs.previewContent;
-            let images = document.querySelectorAll("img");
+                content = this.$refs.previewContent,
+                images = document.querySelectorAll("img");
             for (let i of images)
                 i.addEventListener("click", () => {
                     content.alt = i.alt;

package/source/js/main.js

@@ -25,8 +25,8 @@ const app = Vue.createApp({
             for (let i of this.renderers) i();
         },
         handleScroll() {
-            let wrap = this.$refs.homePostsWrap;
-            let newScrollTop = document.documentElement.scrollTop;
+            let wrap = this.$refs.homePostsWrap,
+                newScrollTop = document.documentElement.scrollTop;
             if (this.scrollTop < newScrollTop) {
                 this.hiddenMenu = true;
                 this.showMenuItems = false;