hexo-theme-particlex 2.2.2 → 2.2.4

package/README.md

@@ -263,7 +263,7 @@ highlightStyle: github # Highlight style
 
     Waline 是一个简单、安全的评论系统
 
-    详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi0201.top/posts/bcb4ff00.html)
+    详见：[在 ParticleX 上使用 Waline | Yuzi's Blog](https://blog.yuzi.dev/posts/bcb4ff00.html)
 
     **注意如果不需要 `locale` 参数，请在 `locale:` 后添加一个 `{}`**
 

package/layout/card.ejs

@@ -1,7 +1,7 @@
 <div id="card-div">
     <div class="card-style" style="width: 300px">
         <div class="avatar">
-            <img src="<%- theme.avatar %>" alt="avatar">
+            <img src="<%- url_for(theme.avatar) %>" alt="avatar">
         </div>
         <div class="name">
             <%= config.author %>
@@ -13,7 +13,7 @@
         <div class="icon-links">
             <% Object.keys(theme.card.iconLinks).forEach(key => { %>
             <span class="icon-link">
-                <a href="<%- theme.card.iconLinks[key].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>
                 </a>
             </span>
@@ -23,11 +23,11 @@
         <% if (Object.keys(theme.card.friendLinks).length) { %>
         <div class="friend-links">
             <% Object.keys(theme.card.friendLinks).forEach(key => { %>
-            <span class="friend-link">
-                <a href="<%- theme.card.friendLinks[key] %>">
+            <div class="friend-link">
+                <a href="<%- url_for(theme.card.friendLinks[key]) %>">
                     <%= key %>
                 </a>
-            </span>
+            </div>
             <% }); %>
         </div>
         <% } %>

package/layout/current.ejs

@@ -1,10 +1,8 @@
 <div class="page-current">
     <div class="prev">
         <% if (page.current != 1) { %>
-        <a href="<%- url_for(page.prev_link) %>">
-            <span class="page-num">
-                <i class="fa-solid fa-caret-left fa-fw"></i>
-            </span>
+        <a class="page-num" href="<%- url_for(page.prev_link) %>">
+            <i class="fa-solid fa-caret-left fa-fw"></i>
         </a>
         <% } %>
     </div>
@@ -12,27 +10,21 @@
         <% if (page.current != 1) { %>
         <span>
             <% if (page.current - 3 >= 1) { %>
-            <a href="<%- config.root %>"><span class="page-num">1</span></a>
+            <a class="page-num" href="<%- config.root %>">1</a>
             <span class="page-omit">...</span>
             <% } %>
             <% if (page.current - 2 >= 1) { %>
                 <% if (page.current - 2 == 1) { %>
-                <a href="<%- config.root %>">
-                    <span class="page-num">1</span>
-                </a>
+                <a class="page-num" href="<%- config.root %>">1</a>
                 <% } %>
                 <% if (page.current - 2 != 1) { %>
-                <a href="<%- url_for("page/" + (page.current - 2)) %>">
-                    <span class="page-num">
-                        <%= page.current - 2 %>
-                    </span>
+                <a class="page-num" href="<%- url_for("page/" + (page.current - 2)) %>">
+                    <%= page.current - 2 %>
                 </a>
                 <% } %>
             <% } %>
-            <a href="<%- url_for(page.prev_link) %>">
-                <span class="page-num">
-                    <%= page.prev %>
-                </span>
+            <a class="page-num" href="<%- url_for(page.prev_link) %>">
+                <%= page.prev %>
             </a>
         </span>
         <% } %>
@@ -41,24 +33,18 @@
         </span>
         <% if (page.current != page.total) { %>
         <span>
-            <a href="<%- url_for(page.next_link) %>">
-                <span class="page-num">
-                    <%= page.next %>
-                </span>
+            <a class="page-num" href="<%- url_for(page.next_link) %>">
+                <%= page.next %>
             </a>
             <% if (page.current + 2 <= page.total) { %>
-            <a href="<%- url_for("page/" + (page.current + 2)) %>">
-                <span class="page-num">
-                    <%= page.current + 2 %>
-                </span>
+            <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>
-            <a href="<%- url_for("page/" + page.total) %>">
-                <span class="page-num">
-                    <%= page.total %>
-                </span>
+            <a class="page-num" href="<%- url_for("page/" + page.total) %>">
+                <%= page.total %>
             </a>
             <% } %>
         </span>
@@ -66,10 +52,8 @@
     </div>
     <div class="next">
         <% if (page.current != page.total) { %>
-        <a href="<%- url_for(page.next_link) %> ">
-            <span class="page-num">
-                <i class="fa-solid fa-caret-right fa-fw"></i>
-            </span>
+        <a class="page-num" href="<%- url_for(page.next_link) %> ">
+            <i class="fa-solid fa-caret-right fa-fw"></i>
         </a>
         <% } %>
     </div>

package/layout/layout.ejs

@@ -30,7 +30,7 @@
         <meta name="author" content="<%- config.author %>">
         <meta name="description" content="<%- config.description %>">
         <meta name="keywords" content="<%- config.keywords %>">
-        <link rel="icon" href="<%- theme.avatar %>">
+        <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">

package/layout/loading.ejs

@@ -1,11 +1,11 @@
-<div id="loading" style="height: 100vh; width: 100vw; position: fixed; display: flex; z-index: 2147483647; justify-content: space-between; background: #fff; transition: all 0.3s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none">
+<div id="loading" style="height: 100vh; width: 100vw; position: fixed; display: flex; z-index: 2147483647; justify-content: space-between; background: #fff; transition: opacity 0.3s ease-out, visibility 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none">
     <div style="position: fixed; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center">
         <div id="loadcontent" style="width: 50vmin; height: 50vmin; padding: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: solid 10px #a3ddfb; text-align: center">
             <div>
                 <h2>LOADING...</h2>
                 <p style="word-break: keep-all">加载过慢请开启缓存（浏览器默认开启）</p>
                 <div>
-                    <img alt="loading" src="<%- url_for("/images/loading.gif") %>" style="width: 60px">
+                    <img alt="loading" src="<%- url_for("/images/loading.gif") %>" style="height: 50px">
                 </div>
             </div>
         </div>

package/layout/script.ejs

@@ -48,8 +48,9 @@
     ></script>
     <% } %>
     <% if (theme.waline.enable) { %>
-    <script src="https://cdn.staticfile.org/waline/2.9.1/waline.min.js"></script>
-    <link rel="stylesheet" href="https://cdn.staticfile.org/waline/2.9.1/waline.min.css">
+    <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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-particlex",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "A concise Hexo theme, based on Particle.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/source/css/particlex.css

@@ -1,50 +1,50 @@
 @keyframes into {
-    0% {
+    from {
         opacity: 0;
         transform: scale(1.1);
     }
-    100% {
+    to {
         opacity: 1;
         transform: scale(1);
     }
 }
 @keyframes loading {
-    0% {
+    from {
         opacity: 0;
     }
-    100% {
+    to {
         opacity: 1;
     }
 }
 @keyframes loop1 {
-    0% {
+    from {
         transform: rotate(30deg);
     }
-    100% {
+    to {
         transform: rotate(390deg);
     }
 }
 @keyframes loop2 {
-    0% {
+    from {
         transform: rotate(60deg);
     }
-    100% {
+    to {
         transform: rotate(420deg);
     }
 }
 @keyframes loop3 {
-    0% {
+    from {
         transform: rotate(90deg);
     }
-    100% {
+    to {
         transform: rotate(450deg);
     }
 }
 @keyframes loop4 {
-    0% {
+    from {
         transform: rotate(120deg);
     }
-    100% {
+    to {
         transform: rotate(480deg);
     }
 }
@@ -75,7 +75,7 @@
     border-radius: 10px;
     color: #fff;
     padding: 10px 15px;
-    transition: all 0.25s;
+    transition: background 0.25s, border 0.25s, color 0.25s;
 }
 #archives .categories-tags span a:hover {
     background: #fff !important;
@@ -115,9 +115,9 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
+    position: absolute;
     height: 100vh;
     left: 0;
-    position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
@@ -140,7 +140,6 @@
     height: 140px;
     margin: auto;
     text-align: center;
-    transition: all 0.25s;
     width: 140px;
 }
 #home-card .card-style .avatar img {
@@ -155,13 +154,14 @@
     margin: 20px auto;
     width: 85%;
 }
-#home-card .card-style .friend-links .friend-link a {
-    border-radius: 15px;
-    color: #5c6b72;
-    display: inline-block;
-    line-height: 30px;
+#home-card .card-style .friend-links .friend-link {
     margin-bottom: 5px;
-    width: 100%;
+}
+#home-card .card-style .friend-links a {
+    display: block;
+    border-radius: 5px;
+    color: #5c6b72;
+    padding: 8px 0;
 }
 #home-card .card-style .icon-links .icon-link {
     margin: 5px;
@@ -170,10 +170,10 @@
     border-radius: 5px;
     color: #5c6b72;
     font-size: 18px;
-    padding: 3px 5px;
+    padding: 5px;
 }
 #home-card .card-style .icon-links a:hover,
-#home-card .card-style .friend-links .friend-link a:hover {
+#home-card .card-style .friend-links a:hover {
     background: #66afef;
     color: #fff;
 }
@@ -272,7 +272,7 @@
     width: 35px;
 }
 #home-posts .page-current .page-num:hover {
-    background: #92cafa;
+    background: #66afef;
     color: #fff;
 }
 #home-posts .page-current .prev,
@@ -288,7 +288,7 @@
     border-radius: 20px;
     box-shadow: 0 0 20px #d9d9d980;
     position: relative;
-    transition: all 0.25s;
+    transition: box-shadow 0.25s, transform 0.25s;
 }
 #home-posts .post .category-and-date {
     color: #5c6b72;
@@ -331,7 +331,7 @@
     padding: 10px 24px;
     position: absolute;
     right: -5px;
-    transition: all 0.25s ease-out;
+    transition: box-shadow 0.25s ease-out, right 0.25s ease-out;
 }
 #home-posts .post .go-post:hover {
     box-shadow: -2px -2px 10px 0 #9abbf77a;
@@ -382,7 +382,7 @@ footer .footer-wrap {
     line-height: 50px;
     position: fixed;
     top: 0;
-    transition: all 0.25s ease-out;
+    transition: background 0.25s ease-out, top 0.25s ease-out;
     width: 100%;
     z-index: 10005;
 }
@@ -428,6 +428,7 @@ footer .footer-wrap {
 }
 #menu .phone-menu .items {
     padding: 10px 0 20px;
+    position: relative;
     z-index: 10003;
 }
 #menu .phone-menu .items .item {
@@ -444,6 +445,7 @@ footer .footer-wrap {
     color: #555;
     cursor: pointer;
     text-transform: uppercase;
+    position: relative;
     z-index: 10004;
 }
 #search-bar {
@@ -466,9 +468,9 @@ footer .footer-wrap {
     justify-content: center;
     left: 0;
     opacity: 0;
-    position: fixed !important;
+    position: fixed;
     top: 0;
-    transition: all 0.25s;
+    transition: opacity 0.25s, visibility 0.25s;
     visibility: hidden;
     width: 100%;
     z-index: 10006;
@@ -509,9 +511,11 @@ footer .footer-wrap {
     margin: 20px 0;
 }
 .content {
-    transition: all 0.5s;
+    transition: opacity 0.25s;
 }
 .content .code-content {
+    background: none;
+    font: 500 13px/2 "Fira Code", "Noto Sans SC", monospace;
     overflow: auto;
     padding: 50px 30px 20px;
 }
@@ -535,10 +539,6 @@ footer .footer-wrap {
 .content .copycode:not(.copied) i:last-child {
     opacity: 0;
 }
-.content .hljs {
-    background: none;
-    font: 13px/2 "Fira Code", "Noto Sans SC", monospace;
-}
 .content .language {
     background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
     border-radius: 0 0 10px 10px;
@@ -566,7 +566,7 @@ footer .footer-wrap a {
     background: #bddcf76b;
     border-radius: 4px;
     color: #4b616b;
-    font: 14px/2.5 "Fira Code", "Noto Sans SC", monospace;
+    font: 500 14px/2.5 "Fira Code", "Noto Sans SC", monospace;
     padding: 4px 8px;
 }
 .content h1,
@@ -638,7 +638,14 @@ footer .footer-wrap a {
 .page-num,
 .icon-link a,
 .friend-link a {
-    transition: all 0.25s;
+    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 {
@@ -807,7 +814,7 @@ input.ipt {
     height: 50px;
     position: relative;
     text-indent: 20px;
-    transition: all 0.25s;
+    transition: background 0.25s, border 0.25s, box-shadow 0.25s;
     width: 100%;
 }
 input.ipt:focus {