hexo-theme-particlex 2.5.0 → 2.5.1

package/README.md

@@ -66,11 +66,15 @@ theme: particlex
 ## 配置
 
 ```yaml
-avatar: # Avatar image
-headBlockEnable: true # Home page info block
-background: # Home page background image
+avatar:
+
+headBlockEnable: true
+
+background:
 ```
 
+其中 Background 可以是一个列表，打开时会随机加载一个背景
+
 -   导航栏
 
     为了方便，主题使用的图标是 Font Awesome 6 图标
@@ -80,27 +84,27 @@ background: # Home page background image
         Home:
             name: house
             theme: solid
-            src: /
+            link: /
         About:
             name: id-card
             theme: solid
-            src: /about
+            link: /about
         Archives:
             name: box-archive
             theme: solid
-            src: /archives
+            link: /archives
         Categories:
             name: bookmark
             theme: solid
-            src: /categories
+            link: /categories
         Tags:
             name: tags
             theme: solid
-            src: /tags
+            link: /tags
         # <name>:
         #     name: <icon-name>
         #     theme: <icon-theme>
-        #     src: <link-url>
+        #     link: <link-url>
     ```
 
 -   主页信息卡片
@@ -190,6 +194,15 @@ background: # Home page background image
         enable: false
     ```
 
+-   图片预览
+
+    简单的点击图片放大缩小的预览
+
+    ```yaml
+    preview:
+        enable: true
+    ```
+
 -   文章置顶
 
     在 [Front-Matter](https://hexo.io/zh-cn/docs/front-matter) 里设置 `pinned` 作为置顶参数，越大越靠前，默认为 0

package/_config.yml

@@ -18,27 +18,27 @@ menu:
     Home:
         name: house
         theme: solid
-        src: /
+        link: /
     About:
         name: id-card
         theme: solid
-        src: /about
+        link: /about
     Archives:
         name: box-archive
         theme: solid
-        src: /archives
+        link: /archives
     Categories:
         name: bookmark
         theme: solid
-        src: /categories
+        link: /categories
     Tags:
         name: tags
         theme: solid
-        src: /tags
+        link: /tags
     # <name>:
     #     name: <icon-name>
     #     theme: <icon-theme>
-    #     src: <link-url>
+    #     link: <link-url>
 
 # Side info card
 card:
@@ -82,6 +82,10 @@ highlight:
 math:
     enable: false
 
+# Image Preview
+preview:
+    enable: true
+
 # Article encryption
 crypto:
     enable: false

package/layout/archives.ejs

@@ -41,9 +41,9 @@
                                     "color: #00a596",
                                     "color: #ff7d73",
                                 ];
-                                let num = Math.floor(Math.random() * color.length);
+                                let id = Math.floor(Math.random() * color.length);
                             %>
-                            <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
                         </span>
                         <% }); %>
                     </span>

package/layout/categories.ejs

@@ -6,10 +6,10 @@
             const color = is_category(category.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
                 : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
-            let num = Math.floor(Math.random() * color.length);
+            let id = Math.floor(Math.random() * color.length);
         %>
         <span>
-            <a href="<%- url_for(category.path) %>" style="background: <%- color[num] %>">
+            <a href="<%- url_for(category.path) %>" style="background: <%- color[id] %>">
                 <span class="icon">
                     <i class="fa-solid fa-bookmark fa-fw"></i>
                 </span>
@@ -58,9 +58,9 @@
                                 "color: #00a596",
                                 "color: #ff7d73",
                             ];
-                            let num = Math.floor(Math.random() * color.length);
+                            let id = Math.floor(Math.random() * color.length);
                         %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                        <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/layout/footer.ejs

@@ -16,7 +16,7 @@
         <div>
             备案号：
             <% if (theme.footer.ICP.link) { %>
-            <a href="<%- theme.footer.ICP.link %>"><%= theme.footer.ICP.code %></a>
+            <a href="<%- url_for(theme.footer.ICP.link) %>"><%= theme.footer.ICP.code %></a>
             <% } else { %>
             <%= theme.footer.ICP.code %>
             <% } %>

package/layout/import.ejs

@@ -1,7 +1,10 @@
 <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
 <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css" />
 <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>" />
-<script>const mixins = [];</script>
+<script> const mixins = {}; </script>
+<% if (theme.polyfill.enable) { %>
+<script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
+<% } %>
 <% if (theme.highlight.enable) { %>
 <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
 <link
@@ -10,23 +13,23 @@
 />
 <script src="<%- url_for("/js/lib/highlight.js") %>"></script>
 <% } %>
-<% if (theme.polyfill.enable) { %>
-<script src="https://polyfill.io/v3/polyfill.min.js?features=<%- theme.polyfill.features.join(",") %>"></script>
-<% } %>
 <% if (theme.math.enable) { %>
 <script src="https://cdn.staticfile.org/KaTeX/0.16.4/katex.min.js"></script>
 <script src="https://cdn.staticfile.org/KaTeX/0.16.4/contrib/auto-render.min.js"></script>
 <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.4/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.1.1/crypto-js.min.js"></script>
 <script src="<%- url_for("/js/lib/crypto.js") %>"></script>
 <% } %>
-<% if (theme.search.enable && type === "archives") { %>
+<% if (type === "archives" && theme.search.enable) { %>
 <script src="<%- url_for("/js/lib/search.js") %>"></script>
 <% } %>
-<% if (page.comments && type === "post") { %>
+<% 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" />
@@ -40,5 +43,7 @@
 <script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
 <% } %>
 <% } %>
-<script src="<%- url_for("/js/lib/preview.js") %>"></script>
+<% if (type === "index") %>
+<script src="<%- url_for("/js/lib/home.js") %>"></script>
+<%  %>
 <link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />

package/layout/index.ejs

@@ -1,5 +1,5 @@
-<div id="home-head" ref="head">
-    <div id="home-background" style="background-image: url(<%- theme.background %>)"></div>
+<div id="home-head">
+    <div id="home-background" ref="homeBackground" data-image="<% url_for(theme.background) %>"></div>
     <% if (theme.headBlockEnable) { %>
     <div id="home-info" @click="homeClick">
         <span class="loop"></span>
@@ -16,7 +16,7 @@
     </div>
     <% } %>
 </div>
-<div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="wrap">
+<div id="home-posts-wrap" <%- theme.card.enable ? "" : 'class="home-posts-wrap-no-card"' %> ref="homePostsWrap">
     <div id="home-posts">
         <div id="posts">
             <%- partial("posts") %>

package/layout/layout.ejs

@@ -51,11 +51,13 @@
                 <%- 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>
             </transition>
+            <% } %>
         </div>
         <script src="<%- url_for("/js/main.js") %>"></script>
         <% if (type === "post" && page.comments) { %>

package/layout/menu.ejs

@@ -4,7 +4,7 @@
             <span><%= config.title.toUpperCase() %></span>
         </a>
         <% Object.keys(theme.menu).forEach(key => { %>
-        <a href="<%- url_for(theme.menu[key].src) %>">
+        <a href="<%- url_for(theme.menu[key].link) %>">
             <i class="fa-<%- theme.menu[key].theme %> fa-<%- theme.menu[key].name %> fa-fw"></i>
             <span>&ensp;<%= key %></span>
         </a>
@@ -19,7 +19,7 @@
         <transition name="slide">
         <div class="items" v-show="showMenu">
             <% Object.keys(theme.menu).forEach(key => { %>
-            <a href="<%- url_for(theme.menu[key].src) %>">
+            <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>

package/layout/post.ejs

@@ -1,6 +1,6 @@
 <div class="article">
     <div>
-        <h1><%= page.title %> </h1>
+        <h1><%= page.title %></h1>
     </div>
     <div class="info">
         <span class="date">
@@ -34,9 +34,9 @@
                         "color: #00a596",
                         "color: #ff7d73",
                     ];
-                    let num = Math.floor(Math.random() * color.length);
+                    let id = Math.floor(Math.random() * color.length);
                 %>
-                <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
             </span>
             <% }); %>
         </span>

package/layout/posts.ejs

@@ -68,9 +68,9 @@
                     "color: #00a596",
                     "color: #ff7d73",
                 ];
-                let num = Math.floor(Math.random() * color.length);
+                let id = Math.floor(Math.random() * color.length);
             %>
-            <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">
+            <a href="<%- url_for(data.path) %>" style="<%- color[id] %>">
                 <%= data.name %>
             </a>
         </span>

package/layout/tags.ejs

@@ -6,10 +6,10 @@
             const color = is_tag(tag.name)
                 ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"]
                 : ["#ffa2c4", "#00bcd4", "#03a9f4", "#00a596", "#ff7d73"];
-            let num = Math.floor(Math.random() * color.length);
+            let id = Math.floor(Math.random() * color.length);
         %>
         <span>
-            <a href="<%- url_for(tag.path) %>" style="background: <%- color[num] %>">
+            <a href="<%- url_for(tag.path) %>" style="background: <%- color[id] %>">
                 <span class="icon">
                     <i class="fa-solid fa-tags fa-fw"></i>
                 </span>
@@ -58,9 +58,9 @@
                                 "color: #00a596",
                                 "color: #ff7d73",
                             ];
-                            let num = Math.floor(Math.random() * color.length);
+                            let id = Math.floor(Math.random() * color.length);
                         %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                        <a href="<%- url_for(data.path) %>" style="<%- color[id] %>"><%= data.name %></a>
                     </span>
                     <% }); %>
                 </span>

package/package.json

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

package/source/css/main.css

@@ -47,7 +47,7 @@
     top: 80px;
 }
 #crypto {
-    margin: 50px auto 0;
+    margin: 50px 0;
 }
 #crypto.fail {
     border-color: #ea4a5a;
@@ -452,7 +452,7 @@
     max-width: 95%;
 }
 #search-bar {
-    margin: 0 auto 50px;
+    margin-bottom: 50px;
     z-index: 10001;
 }
 #timeline-wrap {
@@ -504,24 +504,24 @@ body::-webkit-scrollbar-track {
     margin: 15px auto;
     max-width: 75%;
 }
-.copycode {
+.code-copy {
     color: #5c6b72;
     position: absolute;
     right: 0;
     top: 0;
 }
-.copycode i {
+.code-copy i {
     padding: 15px;
     position: absolute;
     right: 0;
     top: 0;
     transition: transform 0.25s;
 }
-.copycode.copied i {
+.code-copy.copied i {
     transform: scale(1.25);
 }
-.copycode.copied i:first-child,
-.copycode:not(.copied) i:last-child {
+.code-copy.copied i:first-child,
+.code-copy:not(.copied) i:last-child {
     opacity: 0;
 }
 .fade-enter-active,
@@ -658,7 +658,7 @@ a {
     text-decoration: none;
 }
 a:hover,
-.content .copycode:hover {
+.content .code-copy:hover {
     opacity: 0.8;
 }
 b,
@@ -687,7 +687,6 @@ audio,
 iframe,
 #home-head,
 #menu,
-#loading,
 .katex,
 .go-post,
 .page-current,
@@ -695,7 +694,7 @@ iframe,
 .friend-link a,
 .icon-link a,
 .language,
-.copycode {
+.code-copy {
     user-select: none;
 }
 code {

package/source/js/lib/crypto.js

@@ -1,9 +1,6 @@
-const cryptoMixin = {
+mixins.crypto = {
     data() {
-        return {
-            crypto: "",
-            check: false,
-        };
+        return { crypto: "", check: false };
     },
     methods: {
         SHA(word) {

package/source/js/lib/highlight.js

@@ -1,20 +1,20 @@
-const highlightMixin = {
+mixins.highlight = {
     data() {
-        return { copying: false };
+        return { copying: false, renderers: [this.highlight] };
     },
-    mounted() {
+    created() {
         hljs.configure({ ignoreUnescapedHTML: true });
     },
     methods: {
         highlight() {
             let that = this;
-            let codes = document.getElementsByTagName("pre");
+            let codes = document.querySelectorAll("pre");
             for (let i of codes) {
                 let lang = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
                 let code = i.innerText;
-                i.innerHTML = `<div class="code-content">${code}</div><div class="language">${lang}</div><div class="copycode"><i class="fa-solid fa-copy fa-fw"></i><i class="fa-solid fa-clone fa-fw"></i></div>`;
-                let copycode = i.getElementsByClassName("copycode")[0];
-                copycode.addEventListener("click", async function () {
+                i.innerHTML = `<div class="code-content">${code}</div><div class="language">${lang}</div><div class="code-copy"><i class="fa-solid fa-copy fa-fw"></i><i class="fa-solid fa-clone fa-fw"></i></div>`;
+                let copy = i.querySelector(".code-copy");
+                copy.addEventListener("click", async function () {
                     if (that.copying) return;
                     that.copying = true;
                     this.classList.add("copied");
@@ -23,10 +23,9 @@ const highlightMixin = {
                     this.classList.remove("copied");
                     that.copying = false;
                 });
-                let content = i.getElementsByClassName("code-content")[0];
+                let content = i.querySelector(".code-content");
                 hljs.highlightElement(content);
             }
         },
     },
 };
-mixins.push(highlightMixin);

package/source/js/lib/home.js

@@ -0,0 +1,15 @@
+mixins.home = {
+    mounted() {
+        let menu = this.$refs.menu,
+            background = this.$refs.homeBackground;
+        menu.classList.add("menu-color");
+        let image = background.dataset.image.split(",");
+        let id = Math.floor(Math.random * image.length);
+        background.style.backgroundImage = `url('${image[id]}')`;
+    },
+    methods: {
+        homeClick() {
+            window.scrollTo({ top: window.innerHeight, behavior: "smooth" });
+        },
+    },
+};

package/source/js/lib/math.js

@@ -1,4 +1,7 @@
-const mathMixin = {
+mixins.math = {
+    data() {
+        return { renderers: [this.math] };
+    },
     methods: {
         math() {
             renderMathInElement(document.body, {
@@ -12,4 +15,3 @@ const mathMixin = {
         },
     },
 };
-mixins.push(mathMixin);

package/source/js/lib/preview.js

@@ -1,13 +1,13 @@
-const previewMixin = {
+mixins.preview = {
     data() {
-        return { previewShow: false };
+        return { previewShow: false, renderers: [this.preview] };
     },
     methods: {
         preview() {
             let that = this;
             let preview = this.$refs.preview,
-                content = this.$refs.previewContent,
-                images = document.getElementsByTagName("img");
+                content = this.$refs.previewContent;
+            let images = document.querySelectorAll("img");
             for (let i of images)
                 i.addEventListener("click", function () {
                     content.alt = this.alt;
@@ -23,4 +23,3 @@ const previewMixin = {
         },
     },
 };
-mixins.push(previewMixin);

package/source/js/lib/search.js

@@ -1,8 +1,6 @@
-const searchMixin = {
+mixins.search = {
     data() {
-        return {
-            rawSearch: "",
-        };
+        return { rawSearch: "" };
     },
     watch: {
         search(value) {
@@ -25,4 +23,3 @@ const searchMixin = {
         },
     },
 };
-mixins.push(searchMixin);

package/source/js/main.js

@@ -1,11 +1,7 @@
 const app = Vue.createApp({
-    mixins,
+    mixins: Object.values(mixins),
     data() {
-        return {
-            loading: true,
-            showMenu: false,
-            barLocal: 0,
-        };
+        return { loading: true, showMenu: false, barLocal: 0 };
     },
     created() {
         window.addEventListener("load", () => {
@@ -13,17 +9,17 @@ const app = Vue.createApp({
         });
     },
     mounted() {
-        if (this.$refs.head) this.$refs.menu.classList.add("menu-color");
         window.addEventListener("scroll", this.handleScroll, true);
         this.render();
     },
     methods: {
-        homeClick() {
-            window.scrollTo({ top: window.innerHeight, behavior: "smooth" });
+        render() {
+            if (typeof this.renderers === "undefined") return;
+            for (let i of this.renderers) i();
         },
         handleScroll() {
             let menu = this.$refs.menu,
-                wrap = this.$refs.wrap;
+                wrap = this.$refs.homePostsWrap;
             let newlocal = document.documentElement.scrollTop;
             if (this.barLocal < newlocal) {
                 this.showMenu = false;
@@ -37,11 +33,6 @@ const app = Vue.createApp({
             }
             this.barLocal = newlocal;
         },
-        render() {
-            if (typeof this.highlight !== "undefined") this.highlight();
-            if (typeof this.math !== "undefined") this.math();
-            this.preview();
-        },
     },
 });
 app.mount("#layout");