theme-particlex · SaltedFishesNG · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 9, 2025
diff --git a/README.md b/README.md
@@ -83,9 +83,6 @@ avatar: /images/avatar.jpg
 background:
     - /images/background.jpg
 
-# Loading image
-loading: /images/loading.gif
-
 # Optional colors for category and tag
 colors:
     - "#ffa2c4"

diff --git a/_config.yml b/_config.yml
@@ -8,9 +8,6 @@ avatar: /images/avatar.jpg
 background:
     - /images/background.jpg
 
-# Loading image
-loading: /images/loading.gif
-
 # Optional colors for category and tag
 colors:
     - "#ffa2c4"
@@ -67,7 +64,7 @@ footer:
 # Polyfill
 # https://polyfill.io
 polyfill:
-    enable: true
+    enable: false
     features:
         - default
 
@@ -76,6 +73,7 @@ polyfill:
 highlight:
     enable: true
     style: github
+    styleDark: github-dark
 
 # KaTeX math rendering
 math:

diff --git a/layout/footer.ejs b/layout/footer.ejs
@@ -1,18 +1,14 @@
-<footer id="footer">
-    <div id="footer-wrap">
-        <div>
-            &copy;
-            <%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
-            <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/theme-particlex/hexo-theme-particlex">ParticleX Theme</a>
-        </div>
-        <% if (theme.footer.ICP.enable) { %>
+<footer>
+    <div>
+        &copy;<%= theme.footer.since %> - <%= date(Date.now(), "YYYY") %> <%= config.title %>
+        <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/theme-particlex/hexo-theme-particlex">ParticleX Theme</a>
+    </div>
+    <% if (theme.footer.ICP.enable) { %>
         <div>
             备案号：
             <% if (theme.footer.ICP.link) { %>
@@ -21,6 +17,5 @@
             <%= theme.footer.ICP.code %>
             <% } %>
         </div>
-        <% } %>
-    </div>
+    <% } %>
 </footer>
diff --git a/layout/import.ejs b/layout/import.ejs
@@ -1,56 +1,66 @@
 <link rel="preconnect" href="https://s4.zstatic.net" />
-<script src="https://s4.zstatic.net/ajax/libs/vue/3.3.7/vue.global.prod.min.js"></script>
-<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
+<script src="https://s4.zstatic.net/ajax/libs/vue/3.5.18/vue.global.prod.min.js"></script>
+<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
 <link rel="preconnect" href="https://fonts.googleapis.cn" />
 <link rel="preconnect" href="https://fonts.gstatic.cn" crossorigin />
 <link
     rel="stylesheet"
-    href="https://fonts.googleapis.cn/css2?family=Fira+Code:wght@400;500;600;700&family=Lexend:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap"
+    href="https://fonts.googleapis.cn/css2?family=Fira+Code:wght@500&family=Lexend:wght@500;700&family=Noto+Sans+SC:wght@500&display=swap"
 />
+<link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />
 <script> const mixins = {}; </script>
+<% if (type === "index") { %>
+    <link rel="stylesheet" href="<%- url_for("/css/home.css") %>" />
+    <script src="<%- url_for("/js/lib/home.js") %>"></script>
+<% } %>
+<% if (type === "archives" | type === "categories" | type === "tags") { %>
+    <link rel="stylesheet" href="<%- url_for("/css/archive.css") %>" />
+<% } %>
+<% if (type === "archives" && theme.search.enable) { %>
+    <script src="<%- url_for("/js/lib/search.js") %>"></script>
+<% } %>
 <% if (theme.polyfill.enable) { %>
-<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
+    <script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=<%- theme.polyfill.features %>"></script>
 <% } %>
 <% if (theme.highlight.enable) { %>
-<script src="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="https://s4.zstatic.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
-<link
-    rel="stylesheet"
-    href="https://s4.zstatic.net/ajax/libs/highlight.js/11.9.0/styles/<%- theme.highlight.style %>.min.css"
-/>
-<script src="<%- url_for("/js/lib/highlight.js") %>"></script>
+    <script src="https://s4.zstatic.net/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
+    <script src="https://s4.zstatic.net/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
+    <link
+        media="(prefers-color-scheme: light)"
+        rel="stylesheet"
+        href="https://s4.zstatic.net/ajax/libs/highlight.js/11.11.1/styles/<%- theme.highlight.style %>.min.css"
+    />
+    <link
+        media="(prefers-color-scheme: dark)"
+        rel="stylesheet"
+        href="https://s4.zstatic.net/ajax/libs/highlight.js/11.11.1/styles/<%- theme.highlight.styleDark %>.min.css"
+    />
+    <script src="<%- url_for("/js/lib/highlight.js") %>"></script>
 <% } %>
 <% if (theme.math.enable) { %>
-<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
-<script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
-<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css" />
-<script src="<%- url_for("/js/lib/math.js") %>"></script>
+    <script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
+    <script src="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
+    <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/KaTeX/0.16.9/katex.min.css" />
+    <script src="<%- url_for("/js/lib/math.js") %>"></script>
 <% } %>
 <% if (theme.preview.enable) { %>
-<script src="<%- url_for("/js/lib/preview.js") %>"></script>
+    <script src="<%- url_for("/js/lib/preview.js") %>"></script>
 <% } %>
 <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %>
-<script src="https://s4.zstatic.net/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
-<script src="<%- url_for("/js/lib/crypto.js") %>"></script>
-<% } %>
-<% if (type === "archives" && theme.search.enable) { %>
-<script src="<%- url_for("/js/lib/search.js") %>"></script>
+    <script src="https://s4.zstatic.net/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
+    <script src="<%- url_for("/js/lib/crypto.js") %>"></script>
 <% } %>
 <% if (type === "post" && page.comments) { %>
-<% if (theme.gitalk.enable) { %>
-<script src="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.js"></script>
-<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.css" />
-<% } %>
-<% if (theme.waline.enable) { %>
-<script src="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.js"></script>
-<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.css" />
-<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline-meta.min.css" />
-<% } %>
-<% if (theme.twikoo.enable) { %>
-<script src="https://s4.zstatic.net/ajax/libs/twikoo/1.6.31/twikoo.all.min.js"></script>
+    <% if (theme.gitalk.enable) { %>
+    <script src="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.js"></script>
+    <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/gitalk/1.8.0/gitalk.min.css" />
+    <% } %>
+    <% if (theme.waline.enable) { %>
+    <script src="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.js"></script>
+    <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline.min.css" />
+    <link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/waline/2.15.8/waline-meta.min.css" />
+    <% } %>
+    <% if (theme.twikoo.enable) { %>
+    <script src="https://s4.zstatic.net/ajax/libs/twikoo/1.6.31/twikoo.all.min.js"></script>
+    <% } %>
 <% } %>
-<% } %>
-<% if (type === "index") { %>
-<script src="<%- url_for("/js/lib/home.js") %>"></script>
-<% } %>
-<link rel="stylesheet" href="<%- url_for("/css/main.css") %>" />
diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -18,30 +18,19 @@
     <meta charset="utf-8" />
     <title><%= title %></title>
     <meta name="author" content="<%- config.author %>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#92cafa">
+	<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#054072">
     <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>
     <div id="layout">
-        <transition name="fade">
-            <div id="loading" v-show="loading">
-                <div id="loading-circle">
-                    <h2>LOADING</h2>
-                    <p>加载过慢请开启缓存 浏览器默认开启</p>
-                    <img src="<%- url_for(theme.loading) %>" />
-                </div>
-            </div>
-        </transition>
         <%- partial("menu") %>
-        <div id="main" :class="loading ? 'into-enter-from': 'into-enter-active'">
+        <div id="main">
             <%- partial(type) %>
-            <%- partial("footer") %>
         </div>
         <% if (theme.preview.enable) { %>
         <transition name="fade">
@@ -55,5 +44,6 @@
     <% if (type === "post" && page.comments) { %>
     <%- partial("comment") %>
     <% } %>
+    <%- partial("footer") %>
 </body>
 </html>
diff --git a/source/css/archive.css b/source/css/archive.css
@@ -0,0 +1,90 @@
+:root {
+	--archive-color: #5c6b72;
+	--archive-bg: #fff;
+	--archive-shadow: #00000017;
+}
+@media (prefers-color-scheme:dark) {
+	:root {
+		--archive-color: #cbc6bf;
+		--archive-bg: #2e3031;
+		--archive-shadow: #ffffff17;
+	}
+}
+#archives {
+    margin: auto;
+    margin-top: 100px;
+    padding: 20px;
+}
+#archives .categories-tags {
+    margin: auto;
+    margin-bottom: 50px;
+    max-width: 900px;
+    text-align: center;
+    width: 100%;
+}
+#archives .categories-tags span {
+    display: inline-block;
+    margin: 10px;
+}
+#archives .categories-tags span .icon {
+    color: #fff;
+    margin-left: 0;
+    margin-right: 10px;
+}
+#archives .categories-tags span a {
+    border: #ffffff80 1px solid;
+    border-radius: 10px;
+    color: #fff;
+    padding: 10px 15px;
+    transition: background 0.25s, border 0.25s, color 0.25s;
+}
+#archives .categories-tags span a:hover {
+    background: var(--archive-bg) !important;
+    border: #a5c2f5 1px solid;
+    color: var(--archive-color);
+}
+#archives .category,
+#archives .tags .tag,
+.article .info .category,
+.article .info .tags,
+.article .info .tags .tag {
+    display: inline-block;
+    margin-right: 10px;
+}
+#archives .icon {
+	color: var(--archive-color);
+}
+#archives h3 {
+    margin: 10px 0;
+}
+#search-bar {
+    margin-bottom: 50px;
+    z-index: 1;
+}
+#timeline-wrap {
+    display: flex;
+    flex-direction: column-reverse;
+}
+.timeline {
+    margin-bottom: 30px;
+    transition: margin-top 0.5s, opacity 0.3s, visibility 0.3s;
+}
+.timeline-content {
+    background: var(--archive-bg);
+    border: 1px solid #0002;
+    border-radius: 3px;
+    margin-left: 17.5px;
+    padding: 24px;
+    transition: box-shadow 0.5s;
+}
+.timeline-content:hover {
+    box-shadow: 0 2px 8px var(--archive-shadow);
+}
+.timeline-tail {
+    background: var(--archive-bg);
+    border: 2px solid #a5c2f5;
+    border-radius: 50%;
+    height: 7px;
+    position: absolute;
+    width: 7px;
+}