hexo-theme-particlex 2.7.6 → 2.8.1

package/README.md

@@ -2,7 +2,7 @@
 
 [ParticleX](https://github.com/theme-particlex/hexo-theme-particlex) 主题，诞生原因是因为原来的 [Particle](https://github.com/korilin/hexo-theme-particle) 主题不维护了，但是我觉得还是很好的。
 
-原来用的是 Vue 2 + Ant Design Vue 1，现更新到 Vue 3，去除 Ant Design Vue 采用自定义样式，图标更改为 Font Awesome 6，CDN 改为 Staticfile。
+原来用的是 Vue 2 + Ant Design Vue 1，现更新到 Vue 3，去除 Ant Design Vue 采用自定义样式，图标更改为 Font Awesome 6，CDN 改为 ZStatic。
 
 原项目 `README.md` 里说：
 
@@ -40,6 +40,12 @@ prismjs:
     enable: false
 ```
 
+如果使用 Hexo 7.0.0 之后的版本只需要修改为：
+
+```yaml
+syntax_highlighter:
+```
+
 如果使用 Pandoc 还需要设置一下：
 
 ```yaml
@@ -166,6 +172,8 @@ footer:
 
 可以配合 [Hexo-Babel](https://github.com/theme-particlex/hexo-babel) 插件处理 JS 语法兼容。
 
+Polyfill 在国内一些省份被墙，这里换成了阿里的 [Polyfill](https://polyfill.alicdn.com)。
+
 ```yaml
 # Polyfill
 # https://polyfill.io
@@ -250,14 +258,14 @@ search:
 
 ## 3.4. 评论配置
 
-### 3.4.1. Giscus
+### 3.4.1. giscus
 
-Giscus 是一个由 GitHub Discussions 支持的评论系统。
+giscus 是一个由 GitHub Discussions 支持的评论系统。
 
-在 [Giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可。
+在 [giscus.app](https://giscus.app) 设置好各项后，会在下面生成一个 `<script>` 标签，在主题内填入即可。
 
 ```yaml
-# Giscus
+# giscus
 # https://github.com/giscus/giscus
 giscus:
     enable: false

package/_config.yml

@@ -93,7 +93,7 @@ crypto:
 search:
     enable: false
 
-# Giscus
+# giscus
 # https://github.com/giscus/giscus
 giscus:
     enable: false

package/layout/archives.ejs

@@ -32,14 +32,16 @@
                             <i class="fa-solid fa-tags fa-fw"></i>
                         </span>
                         <% let prev; %>
-                        <% post.tags.data.forEach(tag => { %>
+                        <% post.tags.data.forEach((tag) => { %>
                         <span class="tag">
                             <%
-                                const colors = theme.colors.filter(color => color !== prev);
+                                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: <%- colors[id] %>"><%= tag.name %></a>
+                            <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>">
+                                <%= tag.name %>
+                            </a>
                         </span>
                         <% }); %>
                     </span>

package/layout/categories.ejs

@@ -2,11 +2,11 @@
     <% let posts = []; %>
     <div class="categories-tags">
         <% let prev; %>
-        <% site.categories.data.forEach(category => { %>
+        <% site.categories.forEach((category) => { %>
         <%
             const colors = is_category(category.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
-                : theme.colors.filter(color => color !== prev);
+                : theme.colors.filter((color) => color !== prev);
             let id = Math.floor(Math.random() * colors.length);
             prev = colors[id];
         %>
@@ -26,7 +26,7 @@
         <% } %>
         <% }); %>
     </div>
-    <% posts.forEach(post => { %>
+    <% posts.forEach((post) => { %>
     <div class="timeline">
         <div class="timeline-tail"></div>
         <div class="timeline-content">
@@ -51,14 +51,16 @@
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
                     <% let prev; %>
-                    <% post.tags.data.forEach(tag => { %>
+                    <% post.tags.data.forEach((tag) => { %>
                     <span class="tag">
                         <%
-                            const colors = theme.colors.filter(color => color !== prev);
+                            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: <%- colors[id] %>"><%= tag.name %></a>
+                        <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>">
+                            <%= tag.name %>
+                        </a>
                     </span>
                     <% }); %>
                 </span>

package/layout/comment.ejs

@@ -1,66 +1,66 @@
-<% if (theme.giscus.enable) { %>
-<script
-    src="<%- theme.giscus.src %>"
-    data-repo="<%- theme.giscus.repo %>"
-    data-repo-id="<%- theme.giscus.repoID %>"
-    data-category="<%- theme.giscus.category %>"
-    data-category-id="<%- theme.giscus.categoryID %>"
-    data-mapping="<%- theme.giscus.mapping %>"
-    data-strict="<%- theme.giscus.strict %>"
-    data-reactions-enabled="<%- theme.giscus.reactionsEnabled %>"
-    data-emit-metadata="<%- theme.giscus.emitMetadata %>"
-    data-input-position="<%- theme.giscus.inputPosition %>"
-    data-theme="<%- theme.giscus.theme %>"
-    data-lang="<%- theme.giscus.lang %>"
-    crossorigin
-    async
-></script>
-<% } %>
-<% if (theme.gitalk.enable) { %>
-<script>
-    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) { %>
-<script>
-    Waline.init({
-        el: "#waline-container",
-        serverURL: "<%- theme.waline.serverURL %>",
-        commentCount: <%- theme.waline.commentCount %>,
-        pageview: <%- theme.waline.pageview %>,
-        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>
-<% } %>
-<% if (theme.twikoo.enable) { %>
-<script>
-    twikoo.init({
-        el: "#twikoo-container",
-        envId: "<%- theme.twikoo.envID %>",
-        region: "<%- theme.twikoo.region %>",
-        path: <%- theme.twikoo.path %>,
-        lang: "<%- theme.twikoo.lang %>",
-    })
-</script>
-<% } %>
+<% if (theme.giscus.enable) { %>
+<script
+    src="<%- theme.giscus.src %>"
+    data-repo="<%- theme.giscus.repo %>"
+    data-repo-id="<%- theme.giscus.repoID %>"
+    data-category="<%- theme.giscus.category %>"
+    data-category-id="<%- theme.giscus.categoryID %>"
+    data-mapping="<%- theme.giscus.mapping %>"
+    data-strict="<%- theme.giscus.strict %>"
+    data-reactions-enabled="<%- theme.giscus.reactionsEnabled %>"
+    data-emit-metadata="<%- theme.giscus.emitMetadata %>"
+    data-input-position="<%- theme.giscus.inputPosition %>"
+    data-theme="<%- theme.giscus.theme %>"
+    data-lang="<%- theme.giscus.lang %>"
+    crossorigin
+    async
+></script>
+<% } %>
+<% if (theme.gitalk.enable) { %>
+<script>
+    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) { %>
+<script>
+    Waline.init({
+        el: "#waline-container",
+        serverURL: "<%- theme.waline.serverURL %>",
+        commentCount: <%- theme.waline.commentCount %>,
+        pageview: <%- theme.waline.pageview %>,
+        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>
+<% } %>
+<% if (theme.twikoo.enable) { %>
+<script>
+    twikoo.init({
+        el: "#twikoo-container",
+        envId: "<%- theme.twikoo.envID %>",
+        region: "<%- theme.twikoo.region %>",
+        path: <%- theme.twikoo.path %>,
+        lang: "<%- theme.twikoo.lang %>",
+    })
+</script>
+<% } %>

package/layout/current.ejs

@@ -8,10 +8,14 @@
     <% } %>
     <span class="current"><%= page.current %></span>
     <% if (page.current + 1 <= page.total) { %>
-    <a class="page-num" href="<%- url_for("page/" + (page.current + 1)) %>"><%= page.current + 1 %></a>
+    <a class="page-num" href="<%- url_for("page/" + (page.current + 1)) %>">
+        <%= page.current + 1 %>
+    </a>
     <% } %>
     <% if (page.current + 2 <= page.total) { %>
-    <a class="page-num" href="<%- url_for("page/" + (page.current + 2)) %>"><%= page.current + 2 %></a>
+    <a class="page-num" href="<%- url_for("page/" + (page.current + 2)) %>">
+        <%= page.current + 2 %>
+    </a>
     <% } %>
     <% if (page.current + 3 <= page.total) { %>
     <span class="page-omit">...</span>

package/layout/import.ejs

@@ -1,33 +1,36 @@
-<link rel="preconnect" href="https://cdn.staticfile.org" />
-<script src="https://cdn.staticfile.org/vue/3.3.7/vue.global.prod.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.2/css/all.min.css" />
-<link rel="preconnect" href="https://fonts.loli.net" />
-<link rel="preconnect" href="https://gstatic.loli.net" crossorigin />
-<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Fira+Code:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap" />
+<link rel="preconnect" href="https://s4.zstatic.net" />
+<script src="https://s4.zstatic.net/ajax/libs/vue/3.3.7/vue.global.prod.min.js"></script>
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
+<link rel="preconnect" href="https://fonts.googleapis.cn" />
+<link rel="preconnect" href="https://fonts.gstatic.cn" crossorigin />
+<link
+    rel="stylesheet"
+    href="https://fonts.googleapis.cn/css2?family=Fira+Code:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap"
+/>
 <script> const mixins = {}; </script>
 <% if (theme.polyfill.enable) { %>
-<script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
+<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
 <% } %>
 <% if (theme.highlight.enable) { %>
-<script src="https://cdn.staticfile.org/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="https://cdn.staticfile.org/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
+<script src="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://s4.zstatic.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
 <link
     rel="stylesheet"
-    href="https://cdn.staticfile.org/highlight.js/11.9.0/styles/<%- theme.highlight.style %>.min.css"
+    href="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/styles/<%- theme.highlight.style %>.min.css"
 />
 <script src="<%- url_for("/js/lib/highlight.js") %>"></script>
 <% } %>
 <% if (theme.math.enable) { %>
-<script src="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.js"></script>
-<script src="https://cdn.staticfile.org/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" />
+<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
+<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css" />
 <script src="<%- url_for("/js/lib/math.js") %>"></script>
 <% } %>
 <% if (theme.preview.enable) { %>
 <script src="<%- url_for("/js/lib/preview.js") %>"></script>
 <% } %>
 <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-<script src="https://cdn.staticfile.org/crypto-js/4.2.0/crypto-js.min.js"></script>
+<script src="https://s4.zstatic.net/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
 <script src="<%- url_for("/js/lib/crypto.js") %>"></script>
 <% } %>
 <% if (type === "archives" && theme.search.enable) { %>
@@ -35,16 +38,16 @@
 <% } %>
 <% if (type === "post" && page.comments) { %>
 <% if (theme.gitalk.enable) { %>
-<script src="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/gitalk/1.8.0/gitalk.min.css" />
+<script src="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.js"></script>
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.css" />
 <% } %>
 <% if (theme.waline.enable) { %>
-<script src="https://cdn.staticfile.org/waline/2.15.8/waline.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.15.8/waline.min.css" />
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.15.8/waline-meta.min.css" />
+<script src="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.js"></script>
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.css" />
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline-meta.min.css" />
 <% } %>
 <% if (theme.twikoo.enable) { %>
-<script src="https://cdn.staticfile.org/twikoo/1.6.22/twikoo.all.min.js"></script>
+<script src="https://s4.zstatic.net/ajax/libs/twikoo/1.6.31/twikoo.all.min.js"></script>
 <% } %>
 <% } %>
 <% if (type === "index") { %>

package/layout/index.ejs

@@ -1,5 +1,9 @@
 <div id="home-head">
-    <div id="home-background" ref="homeBackground" data-images="<%- theme.background.map(url_for) %>"></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>
@@ -14,7 +18,11 @@
         </span>
     </div>
 </div>
-<div id="home-posts-wrap" <%- theme.card.enable || 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
+<div
+    id="home-posts-wrap"
+    ref="homePostsWrap"
+    <%- theme.card.enable || 'class="home-posts-wrap-no-card"' %>
+>
     <div id="home-posts">
         <%- partial("posts") %>
         <%- partial("current") %>

package/layout/layout.ejs

@@ -20,7 +20,10 @@
     <meta name="author" content="<%- config.author %>" />
     <meta name="description" content="<%- config.description %>" />
     <meta name="keywords" content="<%- config.keywords %>" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <link rel="icon" href="<%- url_for(theme.avatar) %>" />
     <%- partial("import", { type }) %>
 </head>

package/layout/post.ejs

@@ -25,21 +25,23 @@
                 <i class="fa-solid fa-tags fa-fw"></i>
             </span>
             <% let prev; %>
-            <% page.tags.data.forEach(tag => { %>
+            <% page.tags.data.forEach((tag) => { %>
             <span class="tag">
                 <%
-                    const colors = theme.colors.filter(color => color !== prev);
+                    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: <%- colors[id] %>"><%= tag.name %></a>
+                <a href="<%- url_for(tag.path) %>" style="color: <%- colors[id] %>">
+                    <%= tag.name %>
+                </a>
             </span>
             <% }); %>
         </span>
         <% } %>
     </div>
     <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-    <% const CryptoJS = crypto(); %>
+    <% const CryptoJS = getCryptoJS(); %>
     <input
         id="crypto"
         :class="['input', cryptoStatus]"

package/layout/posts.ejs

@@ -8,7 +8,7 @@
     });
     posts = posts.slice(current, config.index_generator.per_page + current);
 %>
-<% posts.forEach(post => { %>
+<% posts.forEach((post) => { %>
 <div class="post">
     <a href="<%- url_for(post.path) %>">
         <h2 class="post-title"><%= post.title %></h2>
@@ -59,10 +59,10 @@
         </span>
         <% } %>
         <% let prev; %>
-        <% post.tags.data.forEach(tag => { %>
+        <% post.tags.data.forEach((tag) => { %>
         <span class="tag">
             <%
-                const colors = theme.colors.filter(color => color !== prev);
+                const colors = theme.colors.filter((color) => color !== prev);
                 let id = Math.floor(Math.random() * colors.length);
                 prev = colors[id];
             %>

package/layout/tags.ejs

@@ -2,11 +2,11 @@
     <% let posts = []; %>
     <div class="categories-tags">
         <% let prev; %>
-        <% site.tags.data.forEach(tag => { %>
+        <% site.tags.forEach((tag) => { %>
         <%
             const colors = is_tag(tag.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
-                : theme.colors.filter(color => color !== prev);
+                : theme.colors.filter((color) => color !== prev);
             let id = Math.floor(Math.random() * colors.length);
             prev = colors[id];
         %>
@@ -26,7 +26,7 @@
         <% } %>
         <% }); %>
     </div>
-    <% posts.forEach(post => { %>
+    <% posts.forEach((post) => { %>
     <div class="timeline">
         <div class="timeline-tail"></div>
         <div class="timeline-content">
@@ -51,14 +51,16 @@
                         <i class="fa-solid fa-tags fa-fw"></i>
                     </span>
                     <% let prev; %>
-                    <% post.tags.data.forEach(tag => { %>
+                    <% post.tags.data.forEach((tag) => { %>
                     <span class="tag">
                         <%
-                            const colors = theme.colors.filter(color => color !== prev);
+                            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: <%- colors[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.7.6",
+  "version": "2.8.1",
   "description": "A concise Hexo theme, based on Particle.",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/theme-particlex/hexo-theme-particlex#readme",
   "dependencies": {
-    "hexo-helper-crypto": "^1.1.5",
+    "hexo-helper-crypto": "^1.2.1",
     "hexo-renderer-ejs": "^2.0.0"
   },
   "scripts": {

package/source/js/lib/highlight.js

@@ -7,8 +7,8 @@ mixins.highlight = {
         this.renderers.push(this.highlight);
     },
     methods: {
-        sleep(delay) {
-            return new Promise(resolve => setTimeout(resolve, delay));
+        sleep(ms) {
+            return new Promise((resolve) => setTimeout(resolve, ms));
         },
         highlight() {
             let codes = document.querySelectorAll("pre");
@@ -22,12 +22,12 @@ mixins.highlight = {
                     highlighted = code;
                 }
                 i.innerHTML = `
-                    <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-check fa-fw"></i>
-                    </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-check fa-fw"></i>
+                </div>
                 `;
                 let content = i.querySelector(".code-content");
                 hljs.lineNumbersBlock(content, { singleLine: true });