hexo-theme-particlex 2.4.11 → 2.5.0

package/README.md

@@ -69,7 +69,6 @@ theme: particlex
 avatar: # Avatar image
 headBlockEnable: true # Home page info block
 background: # Home page background image
-highlightStyle: github # Highlight style
 ```
 
 -   导航栏
@@ -170,9 +169,21 @@ highlightStyle: github # Highlight style
             - default
     ```
 
--   渲染数学公式
+-   代码高亮
 
-    使用 KaTeX 渲染数学公式，默认关闭
+    使用 Highlight.js 代码高亮
+
+    样式可以在[这里](https://highlightjs.org/static/demo)选择，默认为 GitHub
+
+    ```yaml
+    highlight:
+        enable: false
+        style: github
+    ```
+
+-   数学渲染
+
+    使用 KaTeX 渲染数学公式
 
     ```yaml
     math:
@@ -194,7 +205,7 @@ highlightStyle: github # Highlight style
 
 -   搜索
 
-    嵌入到 Archives 中的搜索，默认关闭
+    嵌入到 Archives 中的搜索
 
     目前只支持搜索文档标题（我太弱了）
 

package/_config.yml

@@ -10,10 +10,6 @@ headBlockEnable: true
 # Home page background image
 background:
 
-# Highlight style
-# https://highlightjs.org
-highlightStyle: github
-
 # ParticleX theme icon is adopts the Font Awesome 6
 # https://fontawesome.com/search
 
@@ -76,6 +72,12 @@ polyfill:
     features:
         - default
 
+# Highlight.js
+# https://highlightjs.org
+highlight:
+    enable: true
+    style: github
+
 # Rendering math with KaTeX
 math:
     enable: false

package/layout/archives.ejs

@@ -4,46 +4,53 @@
 %>
 <div id="archives">
     <% if (theme.search.enable) { %>
-    <div id="search-mask" style="z-index: <%- posts.length + 1 %>"></div>
-    <input id="search-bar" class="input" placeholder="搜索" style="z-index: <%- posts.length + 2 %>">
+    <input id="search-bar" class="input" placeholder="搜索" v-model="rawSearch" />
     <% } %>
-    <% posts.forEach((post, id) => { %>
-    <div class="timeline" style="z-index: <%- posts.length - id %>" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
-        <div class="timeline-tail"></div>
-        <div class="timeline-content">
-            <div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
-            <a href="<%- url_for(post.path) %>">
-                <h3><%= post.title %></h3>
-            </a>
-            <div class="info">
-                <% if (post.categories && post.categories.data.length !== 0) { %>
-                <span class="category">
-                    <a href="<%- url_for(post.categories.data[0].path) %>">
+    <div id="timeline-wrap" ref="timeline">
+        <% posts.reverse().forEach((post, id) => { %>
+        <div class="timeline" data-title="<%- post.title.toLowerCase().replace(/\s+/gm, "") %>">
+            <div class="timeline-tail"></div>
+            <div class="timeline-content">
+                <div class="item-time"><%= date(post.date, "YYYY/M/D") %></div>
+                <a href="<%- url_for(post.path) %>">
+                    <h3><%= post.title %></h3>
+                </a>
+                <div class="info">
+                    <% if (post.categories && post.categories.data.length !== 0) { %>
+                    <span class="category">
+                        <a href="<%- url_for(post.categories.data[0].path) %>">
+                            <span class="icon">
+                                <i class="fa-solid fa-bookmark fa-fw"></i>
+                            </span>
+                            <%= post.categories.data[0].name %>
+                        </a>
+                    </span>
+                    <% } %>
+                    <% if (post.tags && post.tags.data.length !== 0) { %>
+                    <span class="tags">
                         <span class="icon">
-                            <i class="fa-solid fa-bookmark fa-fw"></i>
+                            <i class="fa-solid fa-tags fa-fw"></i>
                         </span>
-                        <%= post.categories.data[0].name %>
-                    </a>
-                </span>
-                <% } %>
-                <% if (post.tags && post.tags.data.length !== 0) { %>
-                <span class="tags">
-                    <span class="icon">
-                        <i class="fa-solid fa-tags fa-fw"></i>
-                    </span>
-                    <% 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);
-                        %>
-                        <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                        <% 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);
+                            %>
+                            <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
+                        </span>
+                        <% }); %>
                     </span>
-                    <% }); %>
-                </span>
-                <% } %>
+                    <% } %>
+                </div>
             </div>
         </div>
+        <% }); %>
     </div>
-    <% }); %>
 </div>

package/layout/card.ejs

@@ -1,7 +1,7 @@
 <div id="card-div">
     <div class="card-style" style="width: 300px">
         <div class="avatar">
-            <img src="<%- url_for(theme.avatar) %>" alt="avatar">
+            <img src="<%- url_for(theme.avatar) %>" alt="avatar" />
         </div>
         <div class="name"><%= config.author %></div>
         <div class="description">
@@ -12,7 +12,9 @@
             <% Object.keys(theme.card.iconLinks).forEach(key => { %>
             <span class="icon-link">
                 <a href="<%- url_for(theme.card.iconLinks[key].link) %>">
-                    <i class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"></i>
+                    <i
+                        class="fa-<%- theme.card.iconLinks[key].theme %> fa-<%- theme.card.iconLinks[key].name %> fa-fw"
+                    ></i>
                 </a>
             </span>
             <% }); %>

package/layout/categories.ejs

@@ -51,7 +51,13 @@
                     <% post.tags.data.forEach(data => { %>
                     <span class="tag">
                         <%
-                            const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                            const color = [
+                                "color: #ffa2c4",
+                                "color: #00bcd4",
+                                "color: #03a9f4",
+                                "color: #00a596",
+                                "color: #ff7d73",
+                            ];
                             let num = Math.floor(Math.random() * color.length);
                         %>
                         <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>

package/layout/{script.ejs → comment.ejs}

@@ -1,9 +1,4 @@
-<script src="<%- url_for("/js/functions.js") %>"></script>
-<script src="<%- url_for("/js/particlex.js") %>"></script>
-<% 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>
     let clientID = "<%- theme.gitalk.clientID %>",
         clientSecret = "<%- theme.gitalk.clientSecret %>";
@@ -48,9 +43,6 @@
 ></script>
 <% } %>
 <% if (theme.waline.enable) { %>
-<script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css">
-<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css">
 <script>
     Waline.init({
         el: "#waline-container",
@@ -69,7 +61,6 @@
 </script>
 <% } %>
 <% if (theme.twikoo.enable) { %>
-<script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
 <script>
     twikoo.init({
         el: "#twikoo-container",
@@ -80,4 +71,3 @@
     })
 </script>
 <% } %>
-<% } %>

package/layout/footer.ejs

@@ -1,14 +1,17 @@
 <footer id="footer">
-    <div class="footer-wrap">
+    <div id="footer-wrap">
         <div>
             &copy;
             <%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
-            <span class="footer-icon">
+            <span id="footer-icon">
                 <i class="fa-solid fa-font-awesome fa-fw"></i>
             </span>
             &commat;<%= config.author %>
         </div>
-        <div>Based on the <a href="https://hexo.io">Hexo Engine</a> &amp; <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a></div>
+        <div>
+            Based on the <a href="https://hexo.io">Hexo Engine</a> &amp;
+            <a href="https://github.com/argvchs/hexo-theme-particlex">ParticleX Theme</a>
+        </div>
         <% if (theme.footer.ICP.enable) { %>
         <div>
             备案号：

package/layout/import.ejs

@@ -0,0 +1,44 @@
+<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>
+<% if (theme.highlight.enable) { %>
+<script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
+<link
+    rel="stylesheet"
+    href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlight.style %>.min.css"
+/>
+<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.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") { %>
+<script src="<%- url_for("/js/lib/search.js") %>"></script>
+<% } %>
+<% if (page.comments && type === "post") { %>
+<% 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" />
+<% } %>
+<% if (theme.waline.enable) { %>
+<script src="https://cdn.staticfile.org/waline/2.14.7/waline.min.js"></script>
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline.min.css" />
+<link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.14.7/waline-meta.min.css" />
+<% } %>
+<% if (theme.twikoo.enable) { %>
+<script src="https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js"></script>
+<% } %>
+<% } %>
+<script src="<%- url_for("/js/lib/preview.js") %>"></script>
+<link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />

package/layout/index.ejs

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

package/layout/layout.ejs

@@ -24,45 +24,42 @@
 <!DOCTYPE html>
 <html lang="<%- config.language %>">
     <head>
-        <meta charset="UTF-8">
+        <meta charset="UTF-8" />
         <title><%= title %></title>
-        <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">
-        <link rel="icon" href="<%- url_for(theme.avatar) %>">
-        <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script>
-        <script src="https://cdn.staticfile.org/highlight.js/11.7.0/highlight.min.js"></script>
-        <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.7.0/styles/<%- theme.highlightStyle %>.min.css">
-        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.2.1/css/all.min.css">
-        <% 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">
-        <% } %>
-        <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-        <script src="https://cdn.staticfile.org/crypto-js/4.1.1/crypto-js.min.js"></script>
-        <% } %>
-        <link rel="stylesheet" href="<%- url_for("/css/fonts.min.css") %>">
-        <link rel="stylesheet" href="<%- url_for("/css/particlex.css") %>">
+        <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" />
+        <link rel="icon" href="<%- url_for(theme.avatar) %>" />
+        <%- partial("import", { type }) %>
     </head>
     <body>
-        <%- partial("loading") %>
         <div id="layout">
+            <transition name="fade">
+            <div id="loading" v-show="loading">
+                <div id="loading-circle">
+                    <h2>LOADING</h2>
+                    <p>加载过慢请开启缓存&ensp;浏览器默认开启</p>
+                    <img src="<%- url_for("/images/loading.gif") %>" />
+                </div>
+            </div>
+            </transition>
             <transition name="into">
-            <div id="main" v-show="showpage" style="display: -not-none">
+            <div id="main" v-show="!loading">
                 <%- partial("menu") %>
                 <%- partial(type) %>
                 <%- partial("footer") %>
             </div>
             </transition>
-            <div id="showimg">
-                <img id="showimg-content">
+            <transition name="fade">
+            <div id="preview" ref="preview" v-show="previewShow">
+                <img id="preview-content" ref="previewContent" />
             </div>
+            </transition>
         </div>
-        <%- partial("script", { type }) %>
+        <script src="<%- url_for("/js/main.js") %>"></script>
+        <% if (type === "post" && page.comments) { %>
+        <%- partial("comment") %>
+        <% } %>
     </body>
 </html>

package/layout/menu.ejs

@@ -1,4 +1,4 @@
-<nav id="menu">
+<nav id="menu" ref="menu">
     <div class="desktop-menu">
         <a class="title" href="<%- config.root %>">
             <span><%= config.title.toUpperCase() %></span>
@@ -10,14 +10,14 @@
         </a>
         <% }); %>
     </div>
-    <div :class="&quot;phone-menu &quot; + menushow" id="phone-menu">
-        <div class="curtain" @click="menushow = !menushow" v-show="menushow"></div>
-        <div class="title" @click="menushow = !menushow">
+    <div id="mobile-menu">
+        <div class="curtain" v-show="showMenu" @click="showMenu = !showMenu"></div>
+        <div class="title" @click="showMenu = !showMenu">
             <i class="fa-solid fa-bars fa-fw"></i>
             <span>&emsp;<%= config.title.toUpperCase() %></span>
         </div>
         <transition name="slide">
-        <div class="items" v-show="menushow">
+        <div class="items" v-show="showMenu">
             <% Object.keys(theme.menu).forEach(key => { %>
             <a href="<%- url_for(theme.menu[key].src) %>">
                 <div class="item">

package/layout/post.ejs

@@ -27,7 +27,13 @@
             <% page.tags.data.forEach(data => { %>
             <span class="tag">
                 <%
-                    const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                    const color = [
+                        "color: #ffa2c4",
+                        "color: #00bcd4",
+                        "color: #03a9f4",
+                        "color: #00a596",
+                        "color: #ff7d73",
+                    ];
                     let num = Math.floor(Math.random() * color.length);
                 %>
                 <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>
@@ -39,15 +45,25 @@
     <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
     <%
         const CryptoJS = crypto();
-        function sha(str) {
-            return CryptoJS.SHA256(str).toString();
+        function SHA(word) {
+            return CryptoJS.SHA256(word).toString();
         }
-        function encrypt(str, key) {
-            return CryptoJS.AES.encrypt(str, key).toString();
+        function encrypt(word, secret) {
+            return CryptoJS.AES.encrypt(word, secret).toString();
         }
     %>
-    <input id="crypto" class="input" placeholder="文章被加密，请输入密码" data-encrypt="<%- encrypt(page.content, page.secret) %>" data-shasum="<%- sha(page.content) %>">
-    <div class="content" v-pre style="opacity: 0"></div>
+    <input
+        id="crypto"
+        class="input"
+        ref="crypto"
+        placeholder="文章被加密，请输入密码"
+        data-encrypted="<%- encrypt(page.content, page.secret) %>"
+        data-shasum="<%- SHA(page.content) %>"
+        v-model="crypto"
+    />
+    <transition name="fade">
+    <div class="content" ref="content" v-show="check"></div>
+    </transition>
     <% } else { %>
     <div class="content" v-pre>
         <%- page.content %>

package/layout/posts.ejs

@@ -61,7 +61,13 @@
         <% post.tags.data.forEach(data => { %>
         <span class="tag">
             <%
-                const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                const color = [
+                    "color: #ffa2c4",
+                    "color: #00bcd4",
+                    "color: #03a9f4",
+                    "color: #00a596",
+                    "color: #ff7d73",
+                ];
                 let num = Math.floor(Math.random() * color.length);
             %>
             <a href="<%- url_for(data.path) %>" style="<%- color[num] %>">

package/layout/tags.ejs

@@ -51,7 +51,13 @@
                     <% post.tags.data.forEach(data => { %>
                     <span class="tag">
                         <%
-                            const color = ["color: #ffa2c4", "color: #00bcd4", "color: #03a9f4", "color: #00a596", "color: #ff7d73"];
+                            const color = [
+                                "color: #ffa2c4",
+                                "color: #00bcd4",
+                                "color: #03a9f4",
+                                "color: #00a596",
+                                "color: #ff7d73",
+                            ];
                             let num = Math.floor(Math.random() * color.length);
                         %>
                         <a href="<%- url_for(data.path) %>" style="<%- color[num] %>"><%= data.name %></a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.4.11",
+  "version": "2.5.0",
   "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;
@@ -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: 0 auto 50px;
+    z-index: 10001;
+}
+#timeline-wrap {
+    display: flex;
+    flex-direction: column-reverse;
+}
 * {
     margin: 0;
     padding: 0;
@@ -547,6 +524,14 @@ body::-webkit-scrollbar-track {
 .copycode: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 {
     color: #5c6b72;
     margin-right: 5px;
@@ -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;
@@ -690,6 +687,7 @@ audio,
 iframe,
 #home-head,
 #menu,
+#loading,
 .katex,
 .go-post,
 .page-current,
@@ -720,13 +718,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 +792,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 +874,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 +955,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,41 @@
+const cryptoMixin = {
+    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,32 @@
+const highlightMixin = {
+    data() {
+        return { copying: false };
+    },
+    mounted() {
+        hljs.configure({ ignoreUnescapedHTML: true });
+    },
+    methods: {
+        highlight() {
+            let that = this;
+            let codes = document.getElementsByTagName("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 () {
+                    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.getElementsByClassName("code-content")[0];
+                hljs.highlightElement(content);
+            }
+        },
+    },
+};
+mixins.push(highlightMixin);

package/source/js/lib/math.js

@@ -0,0 +1,15 @@
+const mathMixin = {
+    methods: {
+        math() {
+            renderMathInElement(document.body, {
+                delimiters: [
+                    { left: "$$", right: "$$", display: true },
+                    { left: "$", right: "$", display: false },
+                    { left: "\\(", right: "\\)", display: false },
+                    { left: "\\[", right: "\\]", display: true },
+                ],
+            });
+        },
+    },
+};
+mixins.push(mathMixin);

package/source/js/lib/preview.js

@@ -0,0 +1,26 @@
+const previewMixin = {
+    data() {
+        return { previewShow: false };
+    },
+    methods: {
+        preview() {
+            let that = this;
+            let preview = this.$refs.preview,
+                content = this.$refs.previewContent,
+                images = document.getElementsByTagName("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;
+            });
+        },
+    },
+};
+mixins.push(previewMixin);

package/source/js/lib/search.js

@@ -0,0 +1,28 @@
+const searchMixin = {
+    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, "");
+        },
+    },
+};
+mixins.push(searchMixin);

package/source/js/main.js

@@ -0,0 +1,47 @@
+const app = Vue.createApp({
+    mixins,
+    data() {
+        return {
+            loading: true,
+            showMenu: false,
+            barLocal: 0,
+        };
+    },
+    created() {
+        window.addEventListener("load", () => {
+            this.loading = false;
+        });
+    },
+    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" });
+        },
+        handleScroll() {
+            let menu = this.$refs.menu,
+                wrap = this.$refs.wrap;
+            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;
+        },
+        render() {
+            if (typeof this.highlight !== "undefined") this.highlight();
+            if (typeof this.math !== "undefined") this.math();
+            this.preview();
+        },
+    },
+});
+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>

package/source/js/functions.js

@@ -1,71 +0,0 @@
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-let copying = false;
-function highlight() {
-    hljs.configure({ ignoreUnescapedHTML: true });
-    let codes = document.getElementsByTagName("pre");
-    for (let i of codes) {
-        let lang = [...i.classList, ...i.firstChild.classList][0] || "plaintext";
-        i.innerHTML = `<div class="code-content">${i.innerHTML}</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 () {
-            if (copying) return;
-            copying = true;
-            this.classList.add("copied");
-            await navigator.clipboard.writeText(this.parentElement.firstChild.innerText);
-            await sleep(1000);
-            this.classList.remove("copied");
-            copying = false;
-        });
-        hljs.highlightElement(i.getElementsByClassName("code-content")[0]);
-    }
-}
-function showimg() {
-    let wrap = document.getElementById("showimg"),
-        content = document.getElementById("showimg-content"),
-        images = document.querySelectorAll(".article .content img");
-    function show(image) {
-        content.alt = image.alt;
-        content.src = image.src;
-        wrap.style.opacity = 1;
-        wrap.style.visibility = "visible";
-    }
-    function hide() {
-        wrap.style.opacity = 0;
-        wrap.style.visibility = "hidden";
-    }
-    for (let i of images)
-        i.addEventListener("click", function () {
-            show(this);
-        });
-    wrap.addEventListener("click", hide);
-    window.addEventListener("resize", hide);
-}
-function rendermath() {
-    if (typeof renderMathInElement !== "undefined")
-        renderMathInElement(document.body, {
-            delimiters: [
-                { left: "$$", right: "$$", display: true },
-                { left: "$", right: "$", display: false },
-                { left: "\\(", right: "\\)", display: false },
-                { left: "\\[", right: "\\]", display: true },
-            ],
-        });
-}
-function renderall() {
-    highlight();
-    showimg();
-    rendermath();
-}
-function sha(str) {
-    return CryptoJS.SHA256(str).toString();
-}
-function decrypt(str, key, shasum) {
-    try {
-        let res = CryptoJS.AES.decrypt(str, key).toString(CryptoJS.enc.Utf8);
-        return { decrypt: res, check: sha(res) === shasum };
-    } catch {
-        return { check: false };
-    }
-}

package/source/js/particlex.js

@@ -1,98 +0,0 @@
-const app = Vue.createApp({
-    data() {
-        return {
-            showpage: false,
-            menushow: false,
-            cardtop: 100,
-            barlocal: 0,
-            composition: false,
-        };
-    },
-    created() {
-        window.addEventListener("load", () => {
-            this.showpage = true;
-            document.getElementById("loading").style.opacity = 0;
-        });
-    },
-    mounted() {
-        if (document.getElementById("home-head"))
-            document.getElementById("menu").className += " menu-color";
-        if (document.getElementById("crypto")) {
-            let input = document.getElementById("crypto");
-            input.addEventListener("input", () => {
-                if (!this.composition) this.handlecrypto();
-            });
-            input.addEventListener("compositionstart", () => {
-                this.composition = true;
-            });
-            input.addEventListener("compositionend", () => {
-                this.handlecrypto();
-                this.composition = false;
-            });
-        }
-        if (document.getElementById("search-bar")) {
-            let input = document.getElementById("search-bar");
-            input.addEventListener("input", () => {
-                if (!this.composition) this.handlesearch();
-            });
-            input.addEventListener("compositionstart", () => {
-                this.composition = true;
-            });
-            input.addEventListener("compositionend", () => {
-                this.handlesearch();
-                this.composition = false;
-            });
-        }
-        window.addEventListener("scroll", this.handlescroll, true);
-        renderall();
-    },
-    methods: {
-        homeclick() {
-            window.scrollTo({ top: window.innerHeight, behavior: "smooth" });
-        },
-        handlescroll() {
-            let newlocal = document.documentElement.scrollTop;
-            let menu = document.getElementById("menu");
-            let wrap = document.getElementById("home-posts-wrap");
-            if (this.barlocal < newlocal) {
-                menu.className = "hidden-menu";
-                this.menushow = false;
-            } else menu.className = "show-menu";
-            if (wrap) {
-                if (newlocal <= window.innerHeight - 100) menu.className += " menu-color";
-                if (newlocal <= 400) wrap.style.marginTop = newlocal / -5 + "px";
-                else wrap.style.marginTop = "-80px";
-            }
-            this.barlocal = newlocal;
-        },
-        handlecrypto() {
-            let input = document.getElementById("crypto"),
-                content = document.getElementsByClassName("content")[0];
-            let res = decrypt(input.dataset.encrypt, input.value, input.dataset.shasum);
-            if (res.check) {
-                input.disabled = true;
-                input.classList.remove("fail");
-                input.classList.add("success");
-                content.innerHTML = res.decrypt;
-                content.style.opacity = 1;
-                renderall();
-            } else input.classList.add("fail");
-        },
-        handlesearch() {
-            let input = document.getElementById("search-bar"),
-                timeline = document.getElementsByClassName("timeline"),
-                key = input.value.toLowerCase().replace(/s+/gm, "");
-            for (let i of timeline)
-                if (!key || i.dataset.title.includes(key)) {
-                    i.style.opacity = 1;
-                    i.style.pointerEvents = "";
-                    i.style.marginTop = "";
-                } else {
-                    i.style.opacity = 0;
-                    i.style.pointerEvents = "none";
-                    i.style.marginTop = -i.offsetHeight - 30 + "px";
-                }
-        },
-    },
-});
-app.mount("#layout");