hexo-theme-particlex 2.4.11 → 2.5.1

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>
@@ -51,10 +51,16 @@
                     <% post.tags.data.forEach(data => { %>
                     <span class="tag">
                         <%
-                            const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
-                            let num = Math.floor(Math.random() * color.length);
+                            const color = [
+                                "color: #ffa2c4",
+                                "color: #00bcd4",
+                                "color: #03a9f4",
+                                "color: #00a596",
+                                "color: #ff7d73",
+                            ];
+                            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.4.11",
+  "version": "2.5.1",
   "description": "A concise Hexo theme, based on Particle.",
   "repository": {
     "type": "git",

package/source/css/{particlex.css → main.css}

@@ -1,53 +1,3 @@
-@keyframes into {
-    from {
-        opacity: 0;
-        transform: scale(1.1);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-@keyframes loading {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-@keyframes loop1 {
-    from {
-        transform: rotate(30deg);
-    }
-    to {
-        transform: rotate(390deg);
-    }
-}
-@keyframes loop2 {
-    from {
-        transform: rotate(60deg);
-    }
-    to {
-        transform: rotate(420deg);
-    }
-}
-@keyframes loop3 {
-    from {
-        transform: rotate(90deg);
-    }
-    to {
-        transform: rotate(450deg);
-    }
-}
-@keyframes loop4 {
-    from {
-        transform: rotate(120deg);
-    }
-    to {
-        transform: rotate(480deg);
-    }
-}
 #archives {
     margin: auto;
     margin-top: 100px;
@@ -97,7 +47,7 @@
     top: 80px;
 }
 #crypto {
-    margin: 50px auto 0;
+    margin: 50px 0;
 }
 #crypto.fail {
     border-color: #ea4a5a;
@@ -117,19 +67,19 @@
     text-align: center;
     width: 100%;
 }
-#footer .footer-icon {
+#footer #footer-icon {
     color: #66afef;
     display: inline-block;
     font-size: 18px;
     margin: 0 10px;
 }
-#footer .footer-wrap {
+#footer #footer-wrap {
     border-top: 1px solid #aaa;
     color: #5c6b72;
     margin: auto;
     width: 900px;
 }
-#footer .footer-wrap div {
+#footer #footer-wrap div {
     margin: 15px;
 }
 #home-card {
@@ -376,9 +326,42 @@
 #home-posts-wrap,
 #archives,
 .article,
-#footer .footer-wrap {
+#footer #footer-wrap {
     box-sizing: border-box;
 }
+#loading {
+    align-items: center;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 2147483647;
+}
+#loading h2,
+#loading p,
+#loading img {
+    margin: 10px;
+}
+#loading img {
+    border-radius: 0;
+    height: 50px;
+}
+#loading-circle {
+    align-items: center;
+    border: 10px solid #a3ddfb;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    height: 50vmin;
+    justify-content: center;
+    padding: 50px;
+    width: 50vmin;
+}
 #main {
     margin-right: calc(100% - 100vw);
     overflow: auto;
@@ -391,8 +374,8 @@
     position: fixed;
     top: 0;
     transition: background 0.25s ease-out, top 0.25s ease-out;
-    width: 100%;
-    z-index: 10005;
+    width: 100vw;
+    z-index: 10004;
 }
 #menu .desktop-menu {
     height: 50px;
@@ -408,11 +391,11 @@
     display: inline-block;
     margin-left: 30px;
 }
-#menu .phone-menu {
+#menu #mobile-menu {
     min-height: 50px;
     text-align: center;
 }
-#menu .phone-menu .curtain {
+#menu #mobile-menu .curtain {
     height: 100%;
     left: 0;
     position: fixed;
@@ -420,26 +403,26 @@
     width: 100%;
     z-index: -1;
 }
-#menu .phone-menu .items {
+#menu #mobile-menu .items {
     padding: 10px 0 20px;
-    z-index: 10003;
+    z-index: 10002;
 }
-#menu .phone-menu .items .item {
+#menu #mobile-menu .items .item {
     display: flex;
     justify-content: center;
     margin: auto;
     min-width: 200px;
     width: 80%;
 }
-#menu .phone-menu .items a {
+#menu #mobile-menu .items a {
     color: #555;
 }
-#menu .phone-menu .title {
+#menu #mobile-menu .title {
     color: #555;
     cursor: pointer;
-    z-index: 10004;
+    z-index: 10003;
 }
-#menu.hidden-menu {
+#menu.hidden {
     top: -70px !important;
 }
 #menu.menu-color {
@@ -450,38 +433,32 @@
 #menu.menu-color a {
     color: #fff !important;
 }
-#search-bar {
-    margin: 0 auto 50px;
-}
-#search-mask {
-    background: #f6f8fa;
-    height: 150px;
-    margin: auto;
-    margin-bottom: -25px;
-    margin-top: -125px;
-    width: 100%;
-}
-#showimg {
+#preview {
     align-items: center;
     background-color: #fffc;
     display: flex;
     height: 100vh;
     justify-content: center;
     left: 0;
-    opacity: 0;
     position: fixed;
     top: 0;
-    transition: opacity 0.25s, visibility 0.25s;
-    visibility: hidden;
     width: 100vw;
-    z-index: 10006;
+    z-index: 10005;
 }
-#showimg-content {
+#preview-content {
     box-shadow: 0 0 50px 10px #d9d9d980;
     margin: auto;
     max-height: 95%;
     max-width: 95%;
 }
+#search-bar {
+    margin-bottom: 50px;
+    z-index: 10001;
+}
+#timeline-wrap {
+    display: flex;
+    flex-direction: column-reverse;
+}
 * {
     margin: 0;
     padding: 0;
@@ -527,24 +504,32 @@ 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,
+.fade-leave-active {
+    transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
     opacity: 0;
 }
 .icon {
@@ -575,7 +560,15 @@ body::-webkit-scrollbar-track {
 }
 .into-enter-active,
 .into-leave-active {
-    animation: into 0.6s;
+    transition: opacity 0.5s, transform 0.5s;
+}
+.into-enter-from,
+.into-leave-to {
+    opacity: 0;
+    transform: scale(1.1);
+}
+.katex {
+    overflow: auto;
 }
 .language {
     background: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
@@ -589,14 +582,18 @@ body::-webkit-scrollbar-track {
     position: absolute;
     top: 0;
 }
-.katex {
-    overflow: auto;
-}
 .page-num,
 .icon-link a,
 .friend-link a {
     transition: background 0.25s, color 0.25s;
 }
+.page-num:hover,
+.icon-link a:hover,
+.friend-link a:hover,
+.categories-tags a:hover,
+.go-post:hover {
+    opacity: 1;
+}
 .slide-enter-active,
 .slide-leave-active {
     transition: margin-top 0.3s, opacity 0.3s;
@@ -608,7 +605,7 @@ body::-webkit-scrollbar-track {
 }
 .timeline {
     margin-bottom: 30px;
-    transition: margin-top 0.5s, opacity 0.25s;
+    transition: margin-top 0.5s, opacity 0.3s, visibility 0.3s;
 }
 .timeline-content {
     background: #fff;
@@ -661,7 +658,7 @@ a {
     text-decoration: none;
 }
 a:hover,
-.content .copycode:hover {
+.content .code-copy:hover {
     opacity: 0.8;
 }
 b,
@@ -697,7 +694,7 @@ iframe,
 .friend-link a,
 .icon-link a,
 .language,
-.copycode {
+.code-copy {
     user-select: none;
 }
 code {
@@ -720,13 +717,6 @@ h6 {
     font-weight: bold;
     margin: 15px 0;
 }
-.page-num:hover,
-.icon-link a:hover,
-.friend-link a:hover,
-.categories-tags a:hover,
-.go-post:hover {
-    opacity: 1;
-}
 h2 {
     font-size: 27px;
 }
@@ -801,6 +791,38 @@ ul li,
 ol li {
     margin: 8px 0;
 }
+@keyframes loop1 {
+    from {
+        transform: rotate(30deg);
+    }
+    to {
+        transform: rotate(390deg);
+    }
+}
+@keyframes loop2 {
+    from {
+        transform: rotate(60deg);
+    }
+    to {
+        transform: rotate(420deg);
+    }
+}
+@keyframes loop3 {
+    from {
+        transform: rotate(90deg);
+    }
+    to {
+        transform: rotate(450deg);
+    }
+}
+@keyframes loop4 {
+    from {
+        transform: rotate(120deg);
+    }
+    to {
+        transform: rotate(480deg);
+    }
+}
 @media (min-width: 900px) {
     #home-card {
         margin-right: auto;
@@ -851,12 +873,12 @@ ol li {
     #menu .desktop-menu {
         display: block;
     }
-    #menu .phone-menu {
+    #menu #mobile-menu {
         display: none;
     }
     .article,
     #archives,
-    #footer .footer-wrap {
+    #footer #footer-wrap {
         width: 900px;
     }
     .home-posts-wrap-no-card #home-posts {
@@ -932,14 +954,14 @@ ol li {
     #home-posts-wrap,
     .article,
     #archives,
-    #footer .footer-wrap {
+    #footer #footer-wrap {
         width: 100%;
     }
     #menu .desktop-menu,
     #home-card {
         display: none;
     }
-    #menu .phone-menu {
+    #menu #mobile-menu {
         display: block;
     }
     ul,

package/source/js/lib/crypto.js

@@ -0,0 +1,38 @@
+mixins.crypto = {
+    data() {
+        return { crypto: "", check: false };
+    },
+    methods: {
+        SHA(word) {
+            return CryptoJS.SHA256(word).toString();
+        },
+        decrypt(word, secret, shasum) {
+            try {
+                let res = CryptoJS.AES.decrypt(word, secret).toString(CryptoJS.enc.Utf8);
+                return { check: this.SHA(res) === shasum, decrypted: res };
+            } catch {
+                return { check: false };
+            }
+        },
+    },
+    watch: {
+        crypto(value) {
+            let input = this.$refs.crypto,
+                content = this.$refs.content;
+            let { decrypted, check } = this.decrypt(
+                input.dataset.encrypted,
+                value,
+                input.dataset.shasum
+            );
+            this.check = check;
+            if (check) {
+                input.classList.remove("fail");
+                input.classList.add("success");
+                input.disabled = true;
+                content.innerHTML = decrypted;
+                this.render();
+            } else input.classList.add("fail");
+        },
+    },
+};
+mixins.push(cryptoMixin);

package/source/js/lib/highlight.js

@@ -0,0 +1,31 @@
+mixins.highlight = {
+    data() {
+        return { copying: false, renderers: [this.highlight] };
+    },
+    created() {
+        hljs.configure({ ignoreUnescapedHTML: true });
+    },
+    methods: {
+        highlight() {
+            let that = this;
+            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="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");
+                    await navigator.clipboard.writeText(code);
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    this.classList.remove("copied");
+                    that.copying = false;
+                });
+                let content = i.querySelector(".code-content");
+                hljs.highlightElement(content);
+            }
+        },
+    },
+};

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

@@ -0,0 +1,17 @@
+mixins.math = {
+    data() {
+        return { renderers: [this.math] };
+    },
+    methods: {
+        math() {
+            renderMathInElement(document.body, {
+                delimiters: [
+                    { left: "$$", right: "$$", display: true },
+                    { left: "$", right: "$", display: false },
+                    { left: "\\(", right: "\\)", display: false },
+                    { left: "\\[", right: "\\]", display: true },
+                ],
+            });
+        },
+    },
+};

package/source/js/lib/preview.js

@@ -0,0 +1,25 @@
+mixins.preview = {
+    data() {
+        return { previewShow: false, renderers: [this.preview] };
+    },
+    methods: {
+        preview() {
+            let that = this;
+            let preview = this.$refs.preview,
+                content = this.$refs.previewContent;
+            let images = document.querySelectorAll("img");
+            for (let i of images)
+                i.addEventListener("click", function () {
+                    content.alt = this.alt;
+                    content.src = this.src;
+                    that.previewShow = true;
+                });
+            preview.addEventListener("click", () => {
+                this.previewShow = false;
+            });
+            window.addEventListener("resize", () => {
+                this.previewShow = false;
+            });
+        },
+    },
+};

package/source/js/lib/search.js

@@ -0,0 +1,25 @@
+mixins.search = {
+    data() {
+        return { rawSearch: "" };
+    },
+    watch: {
+        search(value) {
+            let timeline = this.$refs.timeline.childNodes;
+            for (let i of timeline)
+                if (!value || i.dataset.title.includes(value)) {
+                    i.style.opacity = 1;
+                    i.style.visibility = "visible";
+                    i.style.marginTop = 0;
+                } else {
+                    i.style.opacity = 0;
+                    i.style.visibility = "hidden";
+                    i.style.marginTop = -i.offsetHeight - 30 + "px";
+                }
+        },
+    },
+    computed: {
+        search() {
+            return this.rawSearch.toLowerCase().replace(/s+/gm, "");
+        },
+    },
+};

package/source/js/main.js

@@ -0,0 +1,38 @@
+const app = Vue.createApp({
+    mixins: Object.values(mixins),
+    data() {
+        return { loading: true, showMenu: false, barLocal: 0 };
+    },
+    created() {
+        window.addEventListener("load", () => {
+            this.loading = false;
+        });
+    },
+    mounted() {
+        window.addEventListener("scroll", this.handleScroll, true);
+        this.render();
+    },
+    methods: {
+        render() {
+            if (typeof this.renderers === "undefined") return;
+            for (let i of this.renderers) i();
+        },
+        handleScroll() {
+            let menu = this.$refs.menu,
+                wrap = this.$refs.homePostsWrap;
+            let newlocal = document.documentElement.scrollTop;
+            if (this.barLocal < newlocal) {
+                this.showMenu = false;
+                menu.classList.add("hidden");
+            } else menu.classList.remove("hidden");
+            if (wrap) {
+                if (newlocal <= window.innerHeight - 100) menu.classList.add("menu-color");
+                else menu.classList.remove("menu-color");
+                if (newlocal <= 400) wrap.style.marginTop = -newlocal / 5 + "px";
+                else wrap.style.marginTop = "-80px";
+            }
+            this.barLocal = newlocal;
+        },
+    },
+});
+app.mount("#layout");

package/layout/loading.ejs

@@ -1,9 +0,0 @@
-<div id="loading" style="height: 100vh; width: 100vw; left: 0; top: 0; position: fixed; display: flex; z-index: 2147483647; background: #fff; transition: opacity 0.3s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none">
-    <div style="width: 50vmin; height: 50vmin; margin: auto; padding: 50px; border-radius: 50%; display: flex; border: solid 10px #a3ddfb">
-        <div style="margin: auto; text-align: center">
-            <h2>LOADING</h2>
-            <p>加载过慢请开启缓存，浏览器默认开启</p>
-            <img src="<%- url_for("/images/loading.gif") %>" style="height: 50px; border-radius: 0">
-        </div>
-    </div>
-</div>