Style(Blog): Change Blog`s Code box style

Author: actions-user

_layouts/post.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<article class="post-shell">
+<article class="post-shell" id="top">
     <header class="post-header">
         <p class="post-kicker">文章 / {% if page.categories.size > 0 %}{{ page.categories | join: " · " }}{% else %}未分类{% endif %}</p>
         <h1 class="post-title">{{ page.title }}</h1>
@@ -51,11 +51,22 @@ <h1 class="post-title">{{ page.title }}</h1>
     </div>
 
     <footer class="post-footer">
-        <a href="javascript:history.back()" class="back-link">
-            ← 返回列表
-        </a>
+        <div class="post-footer-links">
+            {% if page.previous and page.previous.url %}
+            <a href="{{ page.previous.url | relative_url }}" class="back-link">← 上一篇</a>
+            {% endif %}
+            <a href="javascript:history.back()" class="back-link">← 返回列表</a>
+            {% if page.next and page.next.url %}
+            <a href="{{ page.next.url | relative_url }}" class="back-link">下一篇 →</a>
+            {% endif %}
+            <a href="#top" class="back-link">回到顶部</a>
+        </div>
     </footer>
 
+    <button type="button" class="floating-back-to-top" id="floating-back-to-top" aria-label="返回顶部" title="返回顶部">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+
     <!--
     相关文章区域先注释掉，后续你要重做这里再打开即可。
     <section class="related-posts">
@@ -139,10 +150,40 @@ <h1 class="post-title">{{ page.title }}</h1>
         });
     }
 
+    function initFloatingBackToTop() {
+        const button = document.getElementById('floating-back-to-top');
+        if (!button) return;
+
+        const threshold = 320;
+        let ticking = false;
+
+        const updateVisibility = () => {
+            const shouldShow = window.scrollY > threshold;
+            button.classList.toggle('is-visible', shouldShow);
+            button.setAttribute('aria-hidden', shouldShow ? 'false' : 'true');
+            ticking = false;
+        };
+
+        const requestUpdate = () => {
+            if (ticking) return;
+            ticking = true;
+            window.requestAnimationFrame(updateVisibility);
+        };
+
+        button.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+
+        window.addEventListener('scroll', requestUpdate, { passive: true });
+        window.addEventListener('resize', requestUpdate);
+        updateVisibility();
+    }
+
     function init() {
         initAnchors();
         initCodeBlocks();
         initReadingStats();
+        initFloatingBackToTop();
     }
 
     if (document.readyState === 'loading') {
@@ -271,6 +312,92 @@ <h1 class="post-title">{{ page.title }}</h1>
         margin: 0;
     }
 
+    .code-terminal-wrapper {
+        margin: 22px 0;
+        border: 1px solid var(--glass-border);
+        border-radius: 16px;
+        overflow: hidden;
+        background: rgba(255, 255, 255, 0.76);
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(10px);
+    }
+
+    body.dark-mode .code-terminal-wrapper {
+        background: rgba(17, 21, 28, 0.92);
+    }
+
+    .code-terminal-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--glass-border);
+        background: rgba(0, 0, 0, 0.04);
+    }
+
+    body.dark-mode .code-terminal-header {
+        background: rgba(255, 255, 255, 0.04);
+    }
+
+    .terminal-buttons {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+    }
+
+    .terminal-buttons .btn {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        display: inline-block;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+    }
+
+    .terminal-buttons .btn.close { background: #ff5f57; }
+    .terminal-buttons .btn.min { background: #febc2e; }
+    .terminal-buttons .btn.max { background: #28c840; }
+
+    .copy-code-button {
+        border: 1px solid var(--glass-border);
+        background: rgba(255, 255, 255, 0.7);
+        color: var(--text-main);
+        border-radius: 999px;
+        padding: 5px 12px;
+        font-size: 0.8rem;
+        cursor: pointer;
+        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    }
+
+    body.dark-mode .copy-code-button {
+        background: rgba(255, 255, 255, 0.06);
+        color: var(--text-main);
+    }
+
+    .copy-code-button:hover {
+        background: var(--primary-color);
+        color: #fff;
+        border-color: var(--primary-color);
+    }
+
+    .code-terminal-wrapper .post-content pre,
+    .code-terminal-wrapper pre {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+    }
+
+    .code-terminal-wrapper pre code {
+        display: block;
+        padding: 18px 20px 20px;
+        background: transparent;
+        color: var(--text-main);
+        font-family: 'Consolas', monospace;
+        line-height: 1.75;
+    }
+
     .back-link {
         color: var(--primary-color);
         text-decoration: none;
@@ -284,9 +411,75 @@ <h1 class="post-title">{{ page.title }}</h1>
         text-align: center;
     }
 
+    .post-footer-links {
+        display: flex;
+        justify-content: center;
+        gap: 18px;
+        flex-wrap: wrap;
+    }
+
+    .post-footer-links .back-link {
+        font-weight: 700;
+    }
+
+    .floating-back-to-top {
+        position: fixed;
+        right: 24px;
+        bottom: 24px;
+        width: 48px;
+        height: 48px;
+        border: 1px solid var(--glass-border);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        color: var(--primary-color);
+        box-shadow: var(--shadow);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 50;
+        opacity: 0;
+        transform: translateY(12px) scale(0.96);
+        pointer-events: none;
+        transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
+        backdrop-filter: blur(8px);
+    }
+
+    .floating-back-to-top:hover {
+        background: var(--primary-color);
+        color: #fff;
+    }
+
+    body.dark-mode .floating-back-to-top {
+        background: rgba(17, 21, 28, 0.9);
+        color: var(--text-main);
+    }
+
+    body.dark-mode .floating-back-to-top:hover {
+        background: var(--primary-color);
+        color: #fff;
+    }
+
+    .floating-back-to-top.is-visible {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+    }
+
+    .floating-back-to-top i {
+        font-size: 0.95rem;
+    }
+
     @media (max-width: 900px) {
         .post-summary {
             text-align: left;
         }
+
+        .floating-back-to-top {
+            right: 16px;
+            bottom: 16px;
+            width: 44px;
+            height: 44px;
+        }
     }
 </style>