{"id":859,"date":"2026-06-13T17:14:28","date_gmt":"2026-06-13T09:14:28","guid":{"rendered":"https:\/\/blog.nanoturtle.cn\/?page_id=859"},"modified":"2026-07-07T09:25:42","modified_gmt":"2026-07-07T01:25:42","slug":"%e4%b8%bb%e9%a1%b5","status":"publish","type":"page","link":"https:\/\/blog.nanoturtle.cn\/","title":{"rendered":"\u4e3b\u9875"},"content":{"rendered":"\n\n<div class=\"aligncenter wp-block-avatar wp-duotone-f78da7-8ed1fc-1\"><img onerror=\"this.onerror=null;this.src='https:\/\/blog.nanoturtle.cn\/wp-content\/plugins\/wpavatar\/assets\/images\/default-avatar.png';\" alt='NanoTurtle\u7684\u5934\u50cf' src='https:\/\/cravatar.com\/avatar\/b509ebfb89ae6d57e5465809b6f5856a?s=96&#038;d=identicon&#038;r=g&#038;cache-key=b509ebfb89ae6d57e5465809b6f5856a' srcset='https:\/\/cravatar.com\/avatar\/b509ebfb89ae6d57e5465809b6f5856a?s=192&#038;d=identicon&#038;r=g&#038;cache-key=b509ebfb89ae6d57e5465809b6f5856a 2x' class='avatar avatar-96 photo wp-block-avatar__image' height='96' width='96'  data-timeout=\"5\"\/><\/div>\n\n\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-d05cb3ef wp-block-group-is-layout-flex\"><\/div>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u6253\u5b57\u673a\u591a\u8bed\u8a00\u6b22\u8fce<\/title>\n    <!-- \n        \u6781\u7b80\u6253\u5b57\u6548\u679c\u6a21\u5757\uff1a\u65e0\u5168\u5c40\u6837\u5f0f\u6c61\u67d3\uff0c\u65e0\u6807\u9898\u3001\u65e0\u5bf9\u7167\u8868\u3002\n        \u4ec5\u5c55\u793a\u52a8\u6001\u591a\u8bed\u8a00\u201c\u6b22\u8fce\uff01\u201d + \u5149\u6807\u95ea\u70c1\u6548\u679c\u3002\u81ea\u52a8\u8f6e\u64ad\u3002\n        \u6240\u6709\u95ee\u5019\u8bed\u5747\u4e3a\u201c\u6b22\u8fce\u201d\u7684\u5bf9\u5e94\u7ffb\u8bd1\uff0c\u5b57\u53f7\u8c03\u6574\u81f3 H4 \u5927\u5c0f\uff08\u7ea61.25rem\uff09\u3002\n    -->\n    <style>\n        \/* \u6240\u6709\u6837\u5f0f\u5b8c\u5168\u9650\u5b9a\u5728 .pure-typer \u5bb9\u5668\u5185\u90e8\uff0c\u907f\u514d iframe \u5d4c\u5957\u65f6\u4e0e\u4e3b\u7ad9\u51b2\u7a81 *\/\n        .pure-typer {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            min-height: 120px;\n            width: 100%;\n            padding: 0.75rem;\n            margin: 0;\n            background: transparent;\n            font-family: system-ui, 'Segoe UI', 'Roboto', 'SF Mono', 'Fira Code', monospace;\n        }\n\n        \/* \u6253\u5b57\u533a\u57df\u6838\u5fc3 - \u66f4\u7d27\u51d1\u7684\u5706\u89d2\u4e0e\u5185\u8fb9\u8ddd\uff0c\u9002\u5e94\u5c0f\u5b57\u53f7 *\/\n        .typer-core {\n            text-align: center;\n            background: #ffffff;\n            border-radius: 24px;\n            padding: 1rem 1.5rem;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n            transition: all 0.2s;\n            border: 1px solid #eef2f8;\n        }\n\n        \/* \u52a8\u6001\u6587\u672c\u5bb9\u5668\uff0c\u5b57\u53f7\u4e3a H4 \u7ea7\u522b\uff08\u7ea61.25rem\uff09 *\/\n        .greeting-line {\n            display: inline-flex;\n            align-items: baseline;\n            justify-content: center;\n            flex-wrap: wrap;\n            gap: 2px;\n            font-size: 1.25rem;      \/* \u6807\u51c6 H4 \u5927\u5c0f *\/\n            font-weight: 550;\n            color: #1f3b48;\n            line-height: 1.4;\n            letter-spacing: 0.3px;\n        }\n\n        \/* \u6253\u5b57\u5185\u5bb9\u533a - \u7b49\u5bbd\u5b57\u4f53\u589e\u5f3a\u6253\u5b57\u611f *\/\n        .dynamic-text {\n            font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n            background: linear-gradient(135deg, #1e3b4a, #2c6280);\n            background-clip: text;\n            -webkit-background-clip: text;\n            color: transparent;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        \/* \u5149\u6807\u6837\u5f0f\uff1a\u9ad8\u5ea6\u4e0e H4 \u5b57\u53f7\u5339\u914d\uff0c\u89c6\u89c9\u8212\u9002 *\/\n        .cursor {\n            display: inline-block;\n            width: 2px;\n            height: 1.2rem;\n            background-color: #2c7da0;\n            margin-left: 4px;\n            border-radius: 2px;\n            vertical-align: middle;\n            animation: blink 1s step-end infinite;\n            box-shadow: 0 0 3px rgba(44,125,160,0.4);\n        }\n\n        @keyframes blink {\n            0%, 100% { opacity: 1; }\n            50% { opacity: 0; }\n        }\n\n        \/* \u54cd\u5e94\u5f0f\uff1a\u624b\u673a\u8fd8\u53ef\u7a0d\u5fae\u518d\u8c03\u5c0f\uff0c\u4fdd\u6301\u7f8e\u89c2 *\/\n        @media (max-width: 560px) {\n            .greeting-line {\n                font-size: 1.1rem;\n            }\n            .cursor {\n                height: 1rem;\n            }\n            .typer-core {\n                padding: 0.75rem 1rem;\n            }\n        }\n\n        \/* \u786e\u4fdd\u5185\u90e8\u76d2\u5b50\u6a21\u578b\u4e0d\u5f71\u54cd\u5916\u90e8 *\/\n        .pure-typer *,\n        .pure-typer *::before,\n        .pure-typer *::after {\n            box-sizing: border-box;\n        }\n    <\/style>\n\n \n    <!-- \u7eaf\u6253\u5b57\u6a21\u5757\uff1a\u65e0\u6807\u9898\u3001\u65e0\u4efb\u4f55\u591a\u4f59\u6587\u5b57 -->\n    <div class=\"pure-typer\">\n        <div class=\"typer-core\">\n            <div class=\"greeting-line\">\n                <span class=\"dynamic-text\" id=\"typingMessage\">\u6b22\u8fce\uff01<\/span>\n                <span class=\"cursor\"><\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            \/\/ ---------- \u591a\u8bed\u8a00\u6570\u636e\u96c6\uff08\u5168\u90e8\u6539\u4e3a\u201c\u6b22\u8fce\u201d\u7684\u5bf9\u5e94\u7ffb\u8bd1\uff0c\u517130+\u79cd\u8bed\u8a00\uff09----------\n            const languages = [\n\n                { greeting: \"\u6b22\u8fce\uff01\" },           \/\/ \u4e2d\u6587\n                { greeting: \"Welcome!\" },         \/\/ \u82f1\u8bed\n                { greeting: \"\u00a1Bienvenido!\" },     \/\/ \u897f\u73ed\u7259\u8bed\n                { greeting: \"Bienvenue !\" },      \/\/ \u6cd5\u8bed\n                { greeting: \"Willkommen!\" },      \/\/ \u5fb7\u8bed\n                { greeting: \"Benvenuto!\" },       \/\/ \u610f\u5927\u5229\u8bed\n                { greeting: \"\u3044\u3089\u3063\u3057\u3083\u3044\u307e\u305b\uff01\" }, \/\/ \u65e5\u8bed\uff08\u6b22\u8fce\u5149\u4e34\uff09\n                { greeting: \"\ud658\uc601\ud569\ub2c8\ub2e4!\" },       \/\/ \u97e9\u8bed\n                { greeting: \"\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c!\" },\/\/ \u4fc4\u8bed\n                { greeting: \"\u0938\u094d\u0935\u093e\u0917\u0924 \u0939\u0948!\" },       \/\/ \u5370\u5730\u8bed\n                { greeting: \"\u0623\u0647\u0644\u0627\u064b \u0648\u0633\u0647\u0644\u0627\u064b!\" },    \/\/ \u963f\u62c9\u4f2f\u8bed\n                { greeting: \"Bem-vindo!\" },       \/\/ \u8461\u8404\u7259\u8bed\n                { greeting: \"Welkom!\" },          \/\/ \u8377\u5170\u8bed\n                { greeting: \"Witaj!\" },           \/\/ \u6ce2\u5170\u8bed\n                { greeting: \"\u039a\u03b1\u03bb\u03c9\u03c3\u03ae\u03c1\u03b8\u03b5\u03c2!\" },      \/\/ \u5e0c\u814a\u8bed\n                { greeting: \"Ho\u015f geldin!\" },      \/\/ \u571f\u8033\u5176\u8bed\n                { greeting: \"V\u00edtejte!\" },         \/\/ \u6377\u514b\u8bed\n                { greeting: \"V\u00e4lkommen!\" },       \/\/ \u745e\u5178\u8bed\n                { greeting: \"Tervetuloa!\" },      \/\/ \u82ac\u5170\u8bed\n                { greeting: \"Velkommen!\" },       \/\/ \u4e39\u9ea6\u8bed\n                { greeting: \"\u0e22\u0e34\u0e19\u0e14\u0e35\u0e15\u0e49\u0e2d\u0e19\u0e23\u0e31\u0e1a!\" },    \/\/ \u6cf0\u8bed\n                { greeting: \"Ch\u00e0o m\u1eebng!\" },       \/\/ \u8d8a\u5357\u8bed\n                { greeting: \"Selamat datang!\" },  \/\/ \u5370\u5c3c\u8bed\n                { greeting: \"\u05d1\u05e8\u05d5\u05da \u05d4\u05d1\u05d0!\" },        \/\/ \u5e0c\u4f2f\u6765\u8bed\n                { greeting: \"\u00dcdv\u00f6z\u00f6lj\u00fck!\" },      \/\/ \u5308\u7259\u5229\u8bed\n                { greeting: \"Vitajte!\" },         \/\/ \u65af\u6d1b\u4f10\u514b\u8bed\n                { greeting: \"Bun venit!\" },       \/\/ \u7f57\u9a6c\u5c3c\u4e9a\u8bed\n                { greeting: \"\u041b\u0430\u0441\u043a\u0430\u0432\u043e \u043f\u0440\u043e\u0441\u0438\u043c\u043e!\" }, \/\/ \u4e4c\u514b\u5170\u8bed\n                { greeting: \"Wilkum!\" },          \/\/ \u5362\u68ee\u5821\u8bed \/ \u4f4e\u5730\u5fb7\u8bed\n                { greeting: \"Tere tulemast!\" },   \/\/ \u7231\u6c99\u5c3c\u4e9a\u8bed\n                { greeting: \"Laipni l\u016bdzam!\" },   \/\/ \u62c9\u8131\u7ef4\u4e9a\u8bed\n                { greeting: \"Sveiki atvyk\u0119!\" }    \/\/ \u7acb\u9676\u5b9b\u8bed\n            ];\n\n            \/\/ DOM \u5143\u7d20\n            const typingSpan = document.getElementById('typingMessage');\n            \n            \/\/ \u8f6e\u64ad\u63a7\u5236\n            let currentIndex = 0;\n            let typingInterval = null;      \/\/ \u6253\u5b57\u5b9a\u65f6\u5668\n            let timeoutNext = null;          \/\/ \u5207\u6362\u5230\u4e0b\u4e00\u6761\u7684\u5ef6\u65f6\n            let isTyping = false;             \/\/ \u662f\u5426\u6b63\u5728\u6253\u5b57\u4e2d\n            let currentFullText = \"\";\n            let currentPos = 0;\n            \n            \/\/ \u6e05\u9664\u6240\u6709\u6253\u5b57\u4efb\u52a1\uff0c\u907f\u514d\u51b2\u7a81\n            function clearTypingTasks() {\n                if (typingInterval) {\n                    clearInterval(typingInterval);\n                    typingInterval = null;\n                }\n                if (timeoutNext) {\n                    clearTimeout(timeoutNext);\n                    timeoutNext = null;\n                }\n                isTyping = false;\n            }\n            \n            \/\/ \u6838\u5fc3\u6253\u5b57\u6548\u679c\uff1a\u9010\u5b57\u6253\u5370\u6307\u5b9a\u6587\u672c\n            function startTypingEffect(fullText, onComplete) {\n                \/\/ \u505c\u6b62\u4e4b\u524d\u7684\u6253\u5b57\u8fdb\u7a0b\n                if (typingInterval) {\n                    clearInterval(typingInterval);\n                    typingInterval = null;\n                }\n                currentFullText = fullText;\n                currentPos = 0;\n                typingSpan.innerText = \"\";       \/\/ \u6e05\u7a7a\u663e\u793a\n                isTyping = true;\n                \n                \/\/ \u5c06\u6587\u672c\u8f6c\u6362\u4e3a\u5b57\u7b26\u6570\u7ec4\uff08\u652f\u6301Unicode\u5982\u963f\u62c9\u4f2f\u8bed\u3001\u6cf0\u8bed\u7b49\uff09\n                const chars = Array.from(fullText);\n                const total = chars.length;\n                \n                typingInterval = setInterval(() => {\n                    if (currentPos < total) {\n                        currentPos++;\n                        const displayed = chars.slice(0, currentPos).join('');\n                        typingSpan.innerText = displayed;\n                    }\n                    \n                    if (currentPos >= total) {\n                        \/\/ \u6253\u5370\u5b8c\u6210\n                        clearInterval(typingInterval);\n                        typingInterval = null;\n                        isTyping = false;\n                        if (onComplete && typeof onComplete === 'function') {\n                            onComplete();\n                        }\n                    }\n                }, 70);  \/\/ \u6bcf\u4e2a\u5b57\u7b26\u95f4\u969470\u6beb\u79d2\uff0c\u6d41\u7545\u81ea\u7136\n            }\n            \n            \/\/ \u81ea\u52a8\u5207\u6362\u5230\u4e0b\u4e00\u4e2a\u8bed\u8a00\uff08\u65e0\u9650\u5faa\u73af\uff09\n            function nextLanguage() {\n                \/\/ \u8ba1\u7b97\u4e0b\u4e00\u4e2a\u7d22\u5f15\n                const nextIdx = (currentIndex + 1) % languages.length;\n                currentIndex = nextIdx;\n                const nextLang = languages[currentIndex];\n                if (!nextLang) return;\n                \n                \/\/ \u5f00\u59cb\u6253\u5370\u4e0b\u4e00\u6761\u95ee\u5019\u8bed\n                startTypingEffect(nextLang.greeting, () => {\n                    \/\/ \u6253\u5370\u5b8c\u6bd5\uff0c\u7b49\u5f851.8\u79d2\u540e\u6267\u884c\u4e0b\u4e00\u6b21\u5207\u6362\uff08\u7528\u6237\u53ef\u611f\u77e5\u5b8c\u6574\u6b22\u8fce\u8bed\uff09\n                    timeoutNext = setTimeout(() => {\n                        nextLanguage();\n                    }, 1800);\n                });\n            }\n            \n            \/\/ \u521d\u59cb\u5316\uff1a\u4ece\u7b2c\u4e00\u6761\u5f00\u59cb\uff0c\u5e76\u81ea\u52a8\u8f6e\u64ad\n            function init() {\n                if (languages.length === 0) return;\n                currentIndex = 0;\n                const firstGreeting = languages[0].greeting;\n                startTypingEffect(firstGreeting, () => {\n                    \/\/ \u7b2c\u4e00\u6761\u6253\u5b8c\uff0c\u7b49\u5f851.8\u79d2\u540e\u5207\u6362\u5230\u4e0b\u4e00\u6761\n                    timeoutNext = setTimeout(() => {\n                        nextLanguage();\n                    }, 1800);\n                });\n            }\n            \n            \/\/ \u6e05\u7406\u6240\u6709\u5b9a\u65f6\u5668\uff08\u9632\u6b62iframe\u5378\u8f7d\u6216\u9875\u9762\u5173\u95ed\u65f6\u6b8b\u7559\uff09\n            function cleanAll() {\n                if (typingInterval) clearInterval(typingInterval);\n                if (timeoutNext) clearTimeout(timeoutNext);\n                typingInterval = null;\n                timeoutNext = null;\n            }\n            \n            window.addEventListener('beforeunload', () => {\n                cleanAll();\n            });\n            \n            \/\/ \u542f\u52a8\u6253\u5b57\u8f6e\u64ad\n            init();\n        })();\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\">\u9875\u9762\u5bfc\u822a<\/h2>\n\n\n<nav class=\"is-responsive items-justified-center wp-block-navigation is-content-justification-center is-layout-flex wp-container-core-navigation-is-layout-fe48e5de wp-block-navigation-is-layout-flex\" aria-label=\"\u5bfc\u822a\u680f\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"\\u83dc\\u5355\"}'><button aria-haspopup=\"dialog\" aria-label=\"\u6253\u5f00\u83dc\u5355\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-2\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"\u5173\u95ed\u83dc\u5355\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-2-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive items-justified-center wp-block-navigation\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/\"><span class=\"wp-block-navigation-item__label\">\u4e3b\u9875<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/%e6%96%87%e7%ab%a0\/\"><span class=\"wp-block-navigation-item__label\">\u6587\u7ae0<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5\/\"><span class=\"wp-block-navigation-item__label\">\u53cb\u60c5\u94fe\u63a5<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/%e4%bd%9c%e5%93%81%c2%b7works\/\"><span class=\"wp-block-navigation-item__label\">\u4f5c\u54c1\u00b7Works<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/contacts\/\"><span class=\"wp-block-navigation-item__label\">Contacts<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/%e7%94%bb%e5%bb%8a%c2%b7gallery\/\"><span class=\"wp-block-navigation-item__label\">\u753b\u5eca\u00b7Gallery<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/blog.nanoturtle.cn\/index.php\/whoami\/\"><span class=\"wp-block-navigation-item__label\">\u6211\u662f\u8c01\uff1f<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\">\u63a8\u8350\u6587\u7ae0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">\u6280\u672f\u7c7b &amp;&amp; \u7269\u54c1\u5206\u4eab<\/h3>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-8f761849 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-mdx-post mdx-post-cot\" data-mdxposturl=\"https:\/\/blog.nanoturtle.cn\/index.php\/2026\/05\/17\/arch-linux-steam-guide\/\"><div class=\"mdx-post-wait-out-c2\"><div class=\"mdx-post-wait-out-c mdui-valign\"><div class=\"mdx-github-wait-out\"><div class=\"mdx-github-wait\"><a href=\"https:\/\/blog.nanoturtle.cn\/index.php\/2026\/05\/17\/arch-linux-steam-guide\/\"><div class=\"mdui-spinner\"><\/div><\/a><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-mdx-post mdx-post-cot\" data-mdxposturl=\"https:\/\/blog.nanoturtle.cn\/index.php\/2026\/05\/19\/share\/\"><div class=\"mdx-post-wait-out-c2\"><div class=\"mdx-post-wait-out-c mdui-valign\"><div class=\"mdx-github-wait-out\"><div class=\"mdx-github-wait\"><a href=\"https:\/\/blog.nanoturtle.cn\/index.php\/2026\/05\/19\/share\/\"><div class=\"mdui-spinner\"><\/div><\/a><\/div><\/div><\/div><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><\/h3>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n   \n    <style>\n        \/* \u57fa\u7840\u91cd\u7f6e\u4e0e\u5b57\u4f53 *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n        }\n        body {\n            background-color: #f6f8fa;\n            color: #24292e;\n            line-height: 1.5;\n            padding: 20px;\n            min-height: 100vh;\n        }\n\n        \/* \u4e3b\u5bb9\u5668 *\/\n        .github-showcase-container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 20px 15px;\n        }\n        \n        \/* \u72b6\u6001\u63d0\u793a\u533a *\/\n        .status-area {\n            text-align: center;\n            margin-bottom: 20px;\n            padding: 10px;\n            border-radius: 8px;\n            background-color: #f8f9fa;\n            border: 1px solid #e1e4e8;\n        }\n        .status-area .loading {\n            color: #0969da;\n            font-weight: 500;\n        }\n        .status-area .error {\n            color: #cf222e;\n            font-weight: 500;\n        }\n        .status-area .success {\n            color: #2da44e;\n            font-weight: 500;\n        }\n        \n        .showcase-header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        .showcase-header h2 {\n            font-size: 2.2em;\n            color: #24292e;\n            margin-bottom: 8px;\n        }\n        .showcase-header p {\n            color: #57606a;\n            font-size: 1.1em;\n        }\n\n        \/* \u54cd\u5e94\u5f0f\u7f51\u683c - \u6838\u5fc3\u5e03\u5c40 *\/\n        .github-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 20px;\n            width: 100%;\n        }\n\n        \/* \u901a\u7528\u5361\u7247\u6837\u5f0f *\/\n        .github-card {\n            background-color: #ffffff;\n            border-radius: 12px;\n            border: 1px solid #e1e4e8;\n            padding: 22px;\n            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);\n            transition: all 0.3s ease;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n        .github-card:hover {\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);\n            transform: translateY(-4px);\n            border-color: #d0d7de;\n        }\n\n        \/* \u5361\u7247\u6807\u9898\u533a *\/\n        .card-header {\n            display: flex;\n            align-items: center;\n            margin-bottom: 16px;\n            padding-bottom: 12px;\n            border-bottom: 1px solid #f0f0f0;\n        }\n        .card-icon {\n            width: 24px;\n            height: 24px;\n            margin-right: 10px;\n            color: #2da44e;\n        }\n        .card-header h3 {\n            margin: 0;\n            font-size: 1.3em;\n            color: #24292e;\n        }\n\n        \/* \u5361\u7247\u5185\u5bb9\u533a *\/\n        .card-content {\n            flex-grow: 1;\n            font-size: 0.95em;\n            color: #444;\n        }\n        .profile-bio {\n            margin-bottom: 15px;\n            line-height: 1.6;\n        }\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 12px;\n            margin-top: 10px;\n        }\n        .stat-item {\n            text-align: center;\n            padding: 10px;\n            background: #f6f8fa;\n            border-radius: 8px;\n        }\n        .stat-value {\n            font-size: 1.8em;\n            font-weight: bold;\n            color: #0969da;\n        }\n        .stat-label {\n            font-size: 0.85em;\n            color: #57606a;\n            margin-top: 4px;\n        }\n        .lang-list, .repo-list, .activity-list {\n            list-style: none;\n        }\n        .lang-list li, .repo-list li, .activity-list li {\n            padding: 8px 0;\n            border-bottom: 1px solid #f0f0f0;\n            display: flex;\n            justify-content: space-between;\n        }\n        .lang-list li:last-child, .repo-list li:last-child, .activity-list li:last-child {\n            border-bottom: none;\n        }\n        .lang-name {\n            font-weight: 500;\n        }\n        .lang-percent {\n            color: #2da44e;\n            font-weight: 600;\n        }\n        .repo-name {\n            color: #0969da;\n            text-decoration: none;\n            font-weight: 500;\n        }\n        .repo-name:hover {\n            text-decoration: underline;\n        }\n        .repo-desc {\n            color: #57606a;\n            font-size: 0.85em;\n            margin-top: 4px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n        }\n        .activity-item {\n            font-size: 0.9em;\n            line-height: 1.4;\n        }\n        .activity-type {\n            color: #2da44e;\n            font-weight: 600;\n        }\n        .activity-repo {\n            color: #0969da;\n        }\n        .activity-time {\n            color: #57606a;\n            font-size: 0.85em;\n        }\n        .contribution-grid {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            gap: 4px;\n            margin-top: 10px;\n        }\n        .contrib-cell {\n            width: 16px;\n            height: 16px;\n            border-radius: 3px;\n            background-color: #ebedf0;\n        }\n        .contrib-cell.lvl-1 { background-color: #9be9a8; }\n        .contrib-cell.lvl-2 { background-color: #40c463; }\n        .contrib-cell.lvl-3 { background-color: #30a14e; }\n        .contrib-cell.lvl-4 { background-color: #216e39; }\n\n        \/* \u5361\u7247\u5e95\u90e8\u6309\u94ae *\/\n        .card-footer {\n            margin-top: 20px;\n            text-align: center;\n        }\n        .github-btn {\n            display: inline-block;\n            padding: 8px 16px;\n            background-color: #2da44e;\n            color: white;\n            text-decoration: none;\n            border-radius: 6px;\n            font-weight: 600;\n            font-size: 0.9em;\n            transition: background-color 0.2s;\n        }\n        .github-btn:hover {\n            background-color: #2c974b;\n        }\n\n        \/* \u54cd\u5e94\u5f0f\u65ad\u70b9 *\/\n        \/* \u5e73\u677f (\u2264 992px) *\/\n        @media (max-width: 992px) {\n            .github-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 18px;\n            }\n            .github-card {\n                padding: 18px;\n            }\n            .showcase-header h2 {\n                font-size: 1.9em;\n            }\n        }\n\n        \/* \u624b\u673a (\u2264 768px) *\/\n        @media (max-width: 768px) {\n            .github-grid {\n                grid-template-columns: 1fr;\n                gap: 16px;\n            }\n            .github-card {\n                padding: 16px;\n            }\n            .github-showcase-container {\n                padding: 16px 10px;\n            }\n            .showcase-header h2 {\n                font-size: 1.7em;\n            }\n            .showcase-header p {\n                font-size: 1em;\n            }\n            .card-header h3 {\n                font-size: 1.2em;\n            }\n        }\n\n        \/* \u5c0f\u5c4f\u624b\u673a (\u2264 480px) *\/\n        @media (max-width: 480px) {\n            .github-card {\n                padding: 14px;\n                border-radius: 10px;\n            }\n            .github-showcase-container {\n                padding: 14px 8px;\n            }\n            .stats-grid {\n                grid-template-columns: 1fr;\n                gap: 10px;\n            }\n        }\n    <\/style>\n\n\n    <div class=\"github-showcase-container\">\n        <!-- \u72b6\u6001\u63d0\u793a\u533a -->\n        <div class=\"status-area\" id=\"status-message\">\n            <span class=\"loading\">\u6b63\u5728\u83b7\u53d6 NanoTurtle1145 \u7684 GitHub \u6570\u636e&#8230;<\/span>\n        <\/div>\n        \n        <header class=\"showcase-header\">\n            <h2 id=\"dynamic-title\">NanoTurtle1145 \u7684 GitHub \u52a8\u6001<\/h2>\n            <p id=\"dynamic-subtitle\">\u4ee5\u4e0b\u662f\u4ece GitHub API \u83b7\u53d6\u7684\u5b9e\u65f6\u6570\u636e<\/p>\n        <\/header>\n\n        <div class=\"github-grid\">\n            <!-- \u677f\u5757 1: \u4e2a\u4eba\u8d44\u6599\u6982\u89c8 -->\n            <div class=\"github-card\">\n                <div class=\"card-header\">\n                    <svg class=\"card-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                        <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"><\/path>\n                    <\/svg>\n                    <h3>\u4e2a\u4eba\u8d44\u6599\u6982\u89c8<\/h3>\n                <\/div>\n                <div class=\"card-content\" id=\"profile-card\">\n                    <p class=\"profile-bio\">\u6b63\u5728\u52a0\u8f7d\u4e2a\u4eba\u8d44\u6599&#8230;<\/p>\n                    <div class=\"stats-grid\">\n                        <div class=\"stat-item\">\n                            <div class=\"stat-value\" id=\"stat-repos\">&#8211;<\/div>\n                            <div class=\"stat-label\">\u516c\u5f00\u4ed3\u5e93<\/div>\n                        <\/div>\n                        <div class=\"stat-item\">\n                            <div class=\"stat-value\" id=\"stat-followers\">&#8211;<\/div>\n                            <div class=\"stat-label\">\u7c89\u4e1d<\/div>\n                        <\/div>\n                        <div class=\"stat-item\">\n                            <div class=\"stat-value\" id=\"stat-following\">&#8211;<\/div>\n                            <div class=\"stat-label\">\u5173\u6ce8\u4e2d<\/div>\n                        <\/div>\n                        <div class=\"stat-item\">\n                            <div class=\"stat-value\" id=\"stat-gists\">&#8211;<\/div>\n                            <div class=\"stat-label\">\u4ee3\u7801\u7247\u6bb5<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"card-footer\">\n                    <a href=\"https:\/\/github.com\/NanoTurtle1145\" target=\"_blank\" id=\"profile-link\" class=\"github-btn\" rel=\"noopener\">\u8bbf\u95ee GitHub<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- \u677f\u5757 2: \u70ed\u95e8\u4ed3\u5e93 -->\n            <div class=\"github-card\">\n                <div class=\"card-header\">\n                    <svg class=\"card-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z\"><\/path>\n                    <\/svg>\n                    <h3>\u70ed\u95e8\u4ed3\u5e93<\/h3>\n                <\/div>\n                <div class=\"card-content\">\n                    <ul class=\"repo-list\" id=\"repo-list\">\n                        <li>\u6b63\u5728\u52a0\u8f7d\u4ed3\u5e93\u4fe1\u606f&#8230;<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"card-footer\">\n                    <a href=\"https:\/\/github.com\/NanoTurtle1145?tab=repositories\" target=\"_blank\" id=\"repos-link\" class=\"github-btn\" rel=\"noopener\">\u67e5\u770b\u6240\u6709\u4ed3\u5e93<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- \u677f\u5757 3: \u8bed\u8a00\u7edf\u8ba1 -->\n            <div class=\"github-card\">\n                <div class=\"card-header\">\n                    <svg class=\"card-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M7.75 0a.75.75 0 01.75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 010 2.672l-2.07 1.75a1.75 1.75 0 01-1.13.414H8.5v5.25a.75.75 0 11-1.5 0V10H2.75A1.75 1.75 0 011 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 017.75 0zM6.5 6.5v-3h-3.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25h3.75v-3H15V5.5H8.75a.25.25 0 00-.25.25v3.5c0 .138.112.25.25.25H15v-1H8.75a.75.75 0 01-.75-.75V6.5h-1.5z\"><\/path>\n                    <\/svg>\n                    <h3>\u4e3b\u8981\u4f7f\u7528\u8bed\u8a00<\/h3>\n                <\/div>\n                <div class=\"card-content\">\n                    <p>\u6700\u8fd1\u4e00\u5e74\u5728\u516c\u5f00\u4ed3\u5e93\u4e2d\u7684\u4ee3\u7801\u8bed\u8a00\u5206\u5e03\u3002<\/p>\n                    <ul class=\"lang-list\" id=\"lang-list\">\n                        <li>\u6b63\u5728\u52a0\u8f7d\u8bed\u8a00\u6570\u636e&#8230;<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"card-footer\">\n                    <a href=\"https:\/\/github.com\/NanoTurtle1145?tab=repositories&amp;language=&amp;type=source\" target=\"_blank\" id=\"langs-link\" class=\"github-btn\" rel=\"noopener\">\u6309\u8bed\u8a00\u7b5b\u9009<\/a>\n                <\/div>\n            <\/div>\n\n            <!-- \u677f\u5757 4: \u8fd1\u671f\u6d3b\u52a8 -->\n            <div class=\"github-card\">\n                <div class=\"card-header\">\n                    <svg class=\"card-icon\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z\"><\/path>\n                    <\/svg>\n                    <h3>\u8fd1\u671f\u6d3b\u52a8<\/h3>\n                <\/div>\n                <div class=\"card-content\">\n                    <p>\u6700\u8fd1 5 \u6761\u516c\u5f00\u6d3b\u52a8\u8bb0\u5f55\u3002<\/p>\n                    <ul class=\"activity-list\" id=\"activity-list\">\n                        <li>\u6b63\u5728\u52a0\u8f7d\u6d3b\u52a8\u8bb0\u5f55&#8230;<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"card-footer\">\n                    <a href=\"https:\/\/github.com\/NanoTurtle1145\" target=\"_blank\" id=\"activity-link\" class=\"github-btn\" rel=\"noopener\">\u67e5\u770b\u6240\u6709\u6d3b\u52a8<\/a>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u56fa\u5b9a\u7528\u6237\u540d\n        const GITHUB_USERNAME = 'NanoTurtle1145';\n        \n        \/\/ DOM \u5143\u7d20\u5f15\u7528\n        const statusMessage = document.getElementById('status-message');\n        const dynamicTitle = document.getElementById('dynamic-title');\n        const dynamicSubtitle = document.getElementById('dynamic-subtitle');\n\n        \/\/ \u5361\u7247\u5185\u5bb9\u533a\u57df\u5f15\u7528\n        const profileCard = document.getElementById('profile-card');\n        const profileLink = document.getElementById('profile-link');\n        const statRepos = document.getElementById('stat-repos');\n        const statFollowers = document.getElementById('stat-followers');\n        const statFollowing = document.getElementById('stat-following');\n        const statGists = document.getElementById('stat-gists');\n\n        const repoList = document.getElementById('repo-list');\n        const reposLink = document.getElementById('repos-link');\n\n        const langList = document.getElementById('lang-list');\n        const langsLink = document.getElementById('langs-link');\n\n        const activityList = document.getElementById('activity-list');\n        const activityLink = document.getElementById('activity-link');\n\n        \/\/ \u66f4\u65b0\u72b6\u6001\u4fe1\u606f\n        function updateStatus(message, type = 'loading') {\n            statusMessage.innerHTML = `<span class=\"${type}\">${message}<\/span>`;\n        }\n\n        \/\/ \u83b7\u53d6\u7528\u6237\u6570\u636e\n        async function fetchUserData(username) {\n            updateStatus('\u6b63\u5728\u83b7\u53d6\u7528\u6237\u4fe1\u606f...', 'loading');\n            try {\n                const response = await fetch(`https:\/\/api.github.com\/users\/${username}`);\n                if (!response.ok) {\n                    throw new Error(`\u7528\u6237 '${username}' \u4e0d\u5b58\u5728\u6216\u65e0\u6cd5\u8bbf\u95ee\u3002`);\n                }\n                return await response.json();\n            } catch (error) {\n                console.error('\u83b7\u53d6\u7528\u6237\u6570\u636e\u5931\u8d25:', error);\n                updateStatus(`\u83b7\u53d6\u7528\u6237\u6570\u636e\u5931\u8d25: ${error.message}`, 'error');\n                return null;\n            }\n        }\n\n        \/\/ \u83b7\u53d6\u4ed3\u5e93\u6570\u636e\n        async function fetchRepos(username) {\n            updateStatus('\u6b63\u5728\u83b7\u53d6\u4ed3\u5e93\u4fe1\u606f...', 'loading');\n            try {\n                const response = await fetch(`https:\/\/api.github.com\/users\/${username}\/repos?sort=stars&per_page=5`);\n                if (!response.ok) throw new Error('\u83b7\u53d6\u4ed3\u5e93\u5931\u8d25\u3002');\n                return await response.json();\n            } catch (error) {\n                console.error('\u83b7\u53d6\u4ed3\u5e93\u6570\u636e\u5931\u8d25:', error);\n                updateStatus('\u83b7\u53d6\u4ed3\u5e93\u5931\u8d25\uff0c\u663e\u793a\u6a21\u62df\u6570\u636e\u3002', 'error');\n                \/\/ \u8fd4\u56de\u6a21\u62df\u6570\u636e\n                return [\n                    { \n                        name: 'blog-nanoturtle', \n                        html_url: 'https:\/\/github.com\/NanoTurtle1145\/blog-nanoturtle',\n                        description: '\u4e2a\u4eba\u535a\u5ba2\u4e0e\u77e5\u8bc6\u7ba1\u7406\u7cfb\u7edf',\n                        stargazers_count: 127\n                    },\n                    { \n                        name: 'dev-toolkit', \n                        html_url: 'https:\/\/github.com\/NanoTurtle1145\/dev-toolkit',\n                        description: '\u63d0\u9ad8\u6548\u7387\u7684\u5f00\u53d1\u8005\u5de5\u5177\u5305',\n                        stargazers_count: 89\n                    },\n                    { \n                        name: 'algorithm-vis', \n                        html_url: 'https:\/\/github.com\/NanoTurtle1145\/algorithm-vis',\n                        description: '\u7b97\u6cd5\u53ef\u89c6\u5316\u4e0e\u5b66\u4e60\u5de5\u5177',\n                        stargazers_count: 56\n                    }\n                ];\n            }\n        }\n\n        \/\/ \u83b7\u53d6\u4e8b\u4ef6\u6d3b\u52a8\u6570\u636e\n        async function fetchEvents(username) {\n            updateStatus('\u6b63\u5728\u83b7\u53d6\u6d3b\u52a8\u8bb0\u5f55...', 'loading');\n            try {\n                const response = await fetch(`https:\/\/api.github.com\/users\/${username}\/events\/public?per_page=5`);\n                if (!response.ok) throw new Error('\u83b7\u53d6\u6d3b\u52a8\u8bb0\u5f55\u5931\u8d25\u3002');\n                return await response.json();\n            } catch (error) {\n                console.error('\u83b7\u53d6\u6d3b\u52a8\u6570\u636e\u5931\u8d25:', error);\n                updateStatus('\u83b7\u53d6\u6d3b\u52a8\u5931\u8d25\uff0c\u663e\u793a\u6a21\u62df\u6570\u636e\u3002', 'error');\n                \/\/ \u8fd4\u56de\u6a21\u62df\u6570\u636e\n                const now = new Date();\n                return [\n                    {\n                        type: 'PushEvent',\n                        repo: { name: 'NanoTurtle1145\/blog-nanoturtle' },\n                        created_at: new Date(now.getTime() - 2 * 60 * 60 * 1000).toISOString()\n                    },\n                    {\n                        type: 'CreateEvent',\n                        repo: { name: 'NanoTurtle1145\/dev-toolkit' },\n                        created_at: new Date(now.getTime() - 1 * 24 * 60 * 60 * 1000).toISOString()\n                    },\n                    {\n                        type: 'WatchEvent',\n                        repo: { name: 'torvalds\/linux' },\n                        created_at: new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000).toISOString()\n                    }\n                ];\n            }\n        }\n\n        \/\/ \u4ece\u4ed3\u5e93\u6570\u636e\u4e2d\u8ba1\u7b97\u8bed\u8a00\u7edf\u8ba1\n        function calculateLanguages(repos) {\n            const langMap = {};\n            let totalRepos = 0;\n            \n            repos.forEach(repo => {\n                if (repo.language) {\n                    langMap[repo.language] = (langMap[repo.language] || 0) + 1;\n                    totalRepos += 1;\n                }\n            });\n            \n            \/\/ \u5982\u679c\u6ca1\u6709\u8bed\u8a00\u6570\u636e\uff0c\u4f7f\u7528\u6a21\u62df\u6570\u636e\n            if (totalRepos === 0) {\n                return [\n                    { name: 'Python', percentage: '42.9' },\n                    { name: 'JavaScript', percentage: '14.3' },\n                    { name: 'HTML', percentage: '14.3' },\n                    { name: 'C++', percentage: '14.3' },\n                    { name: 'PowerShell', percentage: '14.3' }\n                ];\n            }\n            \n            const langArray = Object.entries(langMap).map(([name, count]) => ({\n                name,\n                percentage: ((count \/ totalRepos) * 100).toFixed(1)\n            }));\n            \n            return langArray.sort((a, b) => parseFloat(b.percentage) - parseFloat(a.percentage)).slice(0, 5);\n        }\n\n        \/\/ \u66f4\u65b0\u4e2a\u4eba\u8d44\u6599\u5361\u7247\n        function updateProfileCard(user) {\n            const bioElement = profileCard.querySelector('.profile-bio') || document.createElement('p');\n            bioElement.className = 'profile-bio';\n            bioElement.textContent = user.bio || `GitHub \u7528\u6237 ${user.login}`;\n            if (!profileCard.contains(bioElement)) {\n                profileCard.prepend(bioElement);\n            }\n\n            statRepos.textContent = user.public_repos || '0';\n            statFollowers.textContent = user.followers || '0';\n            statFollowing.textContent = user.following || '0';\n            statGists.textContent = user.public_gists || '0';\n            profileLink.href = user.html_url || `https:\/\/github.com\/${GITHUB_USERNAME}`;\n        }\n\n        \/\/ \u66f4\u65b0\u4ed3\u5e93\u5217\u8868\n        function updateRepoList(repos) {\n            repoList.innerHTML = '';\n            if (repos.length === 0) {\n                const li = document.createElement('li');\n                li.textContent = '\u6682\u65e0\u516c\u5f00\u4ed3\u5e93\u3002';\n                repoList.appendChild(li);\n                return;\n            }\n            repos.forEach(repo => {\n                const li = document.createElement('li');\n                li.innerHTML = `\n                    <div>\n                        <a href=\"${repo.html_url}\" class=\"repo-name\" target=\"_blank\">${repo.name}<\/a>\n                        <div class=\"repo-desc\">${repo.description || '\u6682\u65e0\u63cf\u8ff0'}<\/div>\n                    <\/div>\n                    <span style=\"color:#2da44e;\">\u2605 ${repo.stargazers_count || 0}<\/span>\n                `;\n                repoList.appendChild(li);\n            });\n            reposLink.href = `https:\/\/github.com\/${GITHUB_USERNAME}?tab=repositories`;\n        }\n\n        \/\/ \u66f4\u65b0\u8bed\u8a00\u5217\u8868\n        function updateLangList(langStats) {\n            langList.innerHTML = '';\n            if (langStats.length === 0) {\n                const li = document.createElement('li');\n                li.textContent = '\u6682\u65e0\u8bed\u8a00\u6570\u636e\u3002';\n                langList.appendChild(li);\n                return;\n            }\n            langStats.forEach(lang => {\n                const li = document.createElement('li');\n                li.innerHTML = `\n                    <span class=\"lang-name\">${lang.name}<\/span>\n                    <span class=\"lang-percent\">${lang.percentage}%<\/span>\n                `;\n                langList.appendChild(li);\n            });\n            langsLink.href = `https:\/\/github.com\/${GITHUB_USERNAME}?tab=repositories&language=&type=source`;\n        }\n\n        \/\/ \u66f4\u65b0\u6d3b\u52a8\u5217\u8868\n        function updateActivityList(events) {\n            activityList.innerHTML = '';\n            if (events.length === 0) {\n                const li = document.createElement('li');\n                li.textContent = '\u6682\u65e0\u8fd1\u671f\u6d3b\u52a8\u3002';\n                activityList.appendChild(li);\n                return;\n            }\n            events.forEach(event => {\n                const li = document.createElement('li');\n                const eventTypeMap = {\n                    'PushEvent': '\u63a8\u9001',\n                    'CreateEvent': '\u521b\u5efa',\n                    'WatchEvent': '\u661f\u6807',\n                    'ForkEvent': '\u590d\u523b',\n                    'IssuesEvent': '\u8bae\u9898',\n                    'PublicEvent': '\u516c\u5f00',\n                    'PullRequestEvent': '\u62c9\u53d6\u8bf7\u6c42'\n                };\n                const eventType = eventTypeMap[event.type] || event.type;\n                const repoName = event.repo ? event.repo.name.split('\/')[1] : '\u672a\u77e5\u4ed3\u5e93';\n                const timeAgo = timeSince(new Date(event.created_at));\n                li.className = 'activity-item';\n                li.innerHTML = `\n                    <span class=\"activity-type\">${eventType}<\/span> \u4e86\n                    <a href=\"https:\/\/github.com\/${event.repo.name}\" class=\"activity-repo\" target=\"_blank\">${repoName}<\/a>\n                    <div class=\"activity-time\">${timeAgo}<\/div>\n                `;\n                activityList.appendChild(li);\n            });\n            activityLink.href = `https:\/\/github.com\/${GITHUB_USERNAME}`;\n        }\n\n        \/\/ \u8ba1\u7b97\u76f8\u5bf9\u65f6\u95f4\n        function timeSince(date) {\n            const seconds = Math.floor((new Date() - date) \/ 1000);\n            let interval = seconds \/ 31536000;\n            if (interval > 1) return Math.floor(interval) + \" \u5e74\u524d\";\n            interval = seconds \/ 2592000;\n            if (interval > 1) return Math.floor(interval) + \" \u4e2a\u6708\u524d\";\n            interval = seconds \/ 86400;\n            if (interval > 1) return Math.floor(interval) + \" \u5929\u524d\";\n            interval = seconds \/ 3600;\n            if (interval > 1) return Math.floor(interval) + \" \u5c0f\u65f6\u524d\";\n            interval = seconds \/ 60;\n            if (interval > 1) return Math.floor(interval) + \" \u5206\u949f\u524d\";\n            return Math.floor(seconds) + \" \u79d2\u524d\";\n        }\n\n        \/\/ \u4e3b\u51fd\u6570\uff1a\u83b7\u53d6\u5e76\u66f4\u65b0\u6240\u6709\u6570\u636e\n        async function updateAllData() {\n            try {\n                const userData = await fetchUserData(GITHUB_USERNAME);\n                if (!userData) {\n                    updateStatus('\u65e0\u6cd5\u83b7\u53d6\u7528\u6237\u6570\u636e\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\u6216\u7528\u6237\u540d\u3002', 'error');\n                    return;\n                }\n\n                const reposData = await fetchRepos(GITHUB_USERNAME);\n                const eventsData = await fetchEvents(GITHUB_USERNAME);\n                const langStats = calculateLanguages(reposData);\n\n                updateProfileCard(userData);\n                updateRepoList(reposData);\n                updateLangList(langStats);\n                updateActivityList(eventsData);\n\n                dynamicTitle.textContent = `${userData.name || userData.login} \u7684 GitHub \u52a8\u6001`;\n                dynamicSubtitle.textContent = `\u6700\u540e\u66f4\u65b0\u4e8e ${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;\n\n                updateStatus('\u6570\u636e\u52a0\u8f7d\u5b8c\u6210\uff01', 'success');\n                \n                \/\/ 3\u79d2\u540e\u9690\u85cf\u6210\u529f\u6d88\u606f\n                setTimeout(() => {\n                    statusMessage.style.opacity = '0';\n                    setTimeout(() => {\n                        statusMessage.style.display = 'none';\n                    }, 500);\n                }, 3000);\n            } catch (error) {\n                updateStatus(`\u83b7\u53d6\u6570\u636e\u65f6\u51fa\u9519: ${error.message}`, 'error');\n            }\n        }\n\n        \/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u81ea\u52a8\u83b7\u53d6\u6570\u636e\n        document.addEventListener('DOMContentLoaded', () => {\n            setTimeout(updateAllData, 500);\n        });\n\n        \/\/ \u6bcf5\u5206\u949f\u81ea\u52a8\u5237\u65b0\u6570\u636e\n        setInterval(updateAllData, 5 * 60 * 1000);\n    <\/script>\n<style>\n\/* \u6df1\u8272\u6a21\u5f0f\u9002\u914d *\/\n@media (prefers-color-scheme: dark) {\n    body {\n        background-color: #0d1117;\n        color: #c9d1d9;\n    }\n    \n    .status-area {\n        background-color: #161b22;\n        border-color: #30363d;\n    }\n    \n    .status-area .loading {\n        color: #58a6ff;\n    }\n    \n    .status-area .error {\n        color: #f85149;\n    }\n    \n    .status-area .success {\n        color: #3fb950;\n    }\n    \n    .showcase-header h2 {\n        color: #c9d1d9;\n    }\n    \n    .showcase-header p {\n        color: #8b949e;\n    }\n    \n    .github-card {\n        background-color: #161b22;\n        border-color: #30363d;\n        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);\n    }\n    \n    .card-header {\n        color: #c9d1d9;\n        border-bottom-color: #30363d;\n    }\n    \n    .profile-stats .stat-item {\n        background-color: #0d1117;\n    }\n    \n    .stat-number {\n        color: #58a6ff;\n    }\n    \n    .stat-label {\n        color: #8b949e;\n    }\n    \n    .repo-item {\n        border-bottom-color: #30363d;\n    }\n    \n    .repo-name {\n        color: #58a6ff;\n    }\n    \n    .repo-desc {\n        color: #8b949e;\n    }\n    \n    .repo-stars {\n        color: #e3b341;\n    }\n    \n    .language-item {\n        border-bottom-color: #30363d;\n    }\n    \n    .language-name {\n        color: #c9d1d9;\n    }\n    \n    .language-percent {\n        color: #8b949e;\n    }\n    \n    .language-bar {\n        background-color: #30363d;\n    }\n    \n    .activity-item {\n        border-bottom-color: #30363d;\n    }\n    \n    .activity-type {\n        color: #3fb950;\n    }\n    \n    .activity-repo {\n        color: #58a6ff;\n    }\n    \n    .activity-time {\n        color: #8b949e;\n    }\n    \n    .btn {\n        background-color: #238636;\n        color: #ffffff;\n    }\n    \n    .btn:hover {\n        background-color: #2ea043;\n    }\n}\n<\/style>\n\n\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>GitHub\u8d21\u732e\u70ed\u529b\u56fe &#8211; NanoTurtle1145<\/title>\n    <style>\n        \/* \u57fa\u7840\u91cd\u7f6e\u4e0e\u5b57\u4f53 *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n        }\n        \n        body {\n            background-color: #f6f8fa;\n            color: #24292e;\n            line-height: 1.5;\n            padding: 20px;\n            min-height: 100vh;\n        }\n        \n        \/* \u4e3b\u5bb9\u5668 *\/\n        .heatmap-container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 20px 15px;\n        }\n        \n        \/* \u5934\u90e8\u533a\u57df *\/\n        .heatmap-header {\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        \n        .heatmap-header h2 {\n            font-size: 2.2em;\n            color: #24292e;\n            margin-bottom: 8px;\n        }\n        \n        .heatmap-header p {\n            color: #57606a;\n            font-size: 1.1em;\n        }\n        \n        \/* \u70ed\u529b\u56fe\u5361\u7247 *\/\n        .heatmap-card {\n            background-color: #ffffff;\n            border-radius: 12px;\n            border: 1px solid #e1e4e8;\n            padding: 30px;\n            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);\n            transition: all 0.3s ease;\n            overflow: hidden;\n        }\n        \n        .heatmap-card:hover {\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\n        }\n        \n        \/* \u70ed\u529b\u56fe\u4e3b\u4f53 *\/\n        .heatmap-body {\n            position: relative;\n            overflow-x: auto;\n            padding-bottom: 10px;\n        }\n        \n        \/* iframe\u5bb9\u5668 *\/\n        .iframe-container {\n            width: 100%;\n            text-align: center;\n            margin: 20px 0;\n        }\n        \n        .iframe-container iframe {\n            border: none;\n            border-radius: 8px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        \n        .iframe-container iframe:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n        }\n        \n        \/* \u56fe\u4f8b *\/\n        .heatmap-legend {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 20px;\n            margin-top: 30px;\n            font-size: 0.9em;\n            color: #57606a;\n        }\n        \n        .legend-item {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        \n        .legend-color {\n            width: 16px;\n            height: 16px;\n            border-radius: 3px;\n        }\n        \n        .legend-text {\n            font-size: 0.9em;\n        }\n        \n        \/* \u63a7\u5236\u6309\u94ae *\/\n        .control-buttons {\n            display: flex;\n            justify-content: center;\n            gap: 15px;\n            margin-top: 25px;\n        }\n        \n        .control-btn {\n            padding: 10px 20px;\n            background-color: #2da44e;\n            color: white;\n            border: none;\n            border-radius: 6px;\n            font-weight: 600;\n            font-size: 0.9em;\n            cursor: pointer;\n            transition: background-color 0.2s, transform 0.2s;\n        }\n        \n        .control-btn:hover {\n            background-color: #2c974b;\n            transform: translateY(-1px);\n        }\n        \n        .control-btn:active {\n            transform: translateY(0);\n        }\n        \n        \/* \u54cd\u5e94\u5f0f\u65ad\u70b9 *\/\n        @media (max-width: 768px) {\n            .heatmap-container {\n                padding: 15px 10px;\n            }\n            \n            .heatmap-card {\n                padding: 20px;\n            }\n            \n            .heatmap-header h2 {\n                font-size: 1.8em;\n            }\n            \n            .iframe-container iframe {\n                width: 100%;\n                height: 200px;\n            }\n            \n            .control-buttons {\n                flex-wrap: wrap;\n            }\n            \n            .control-btn {\n                flex: 1 0 100%;\n                margin-bottom: 10px;\n            }\n            \n            .heatmap-legend {\n                flex-wrap: wrap;\n                gap: 10px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .heatmap-card {\n                padding: 15px;\n            }\n        }\n    \n\/* \u6df1\u8272\u6a21\u5f0f\u9002\u914d *\/\n@media (prefers-color-scheme: dark) {\n    body {\n        background-color: #0d1117;\n        color: #c9d1d9;\n    }\n    \n    .heatmap-header h2 {\n        color: #c9d1d9;\n    }\n    \n    .heatmap-header p {\n        color: #8b949e;\n    }\n    \n    .heatmap-card {\n        background-color: #161b22;\n        border-color: #30363d;\n        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);\n    }\n    \n    .heatmap-legend {\n        color: #8b949e;\n    }\n    \n    .control-btn {\n        background-color: #238636;\n    }\n    \n    .control-btn:hover {\n        background-color: #2ea043;\n    }\n}\n\n\/* \u6df1\u8272\u6a21\u5f0f\u7c7b\uff08\u7528\u4e8e\u624b\u52a8\u5207\u6362\uff09 *\/\nbody.dark-mode {\n    background-color: #0d1117;\n    color: #c9d1d9;\n}\n\nbody.dark-mode .heatmap-header h2 {\n    color: #c9d1d9;\n}\n\nbody.dark-mode .heatmap-header p {\n    color: #8b949e;\n}\n\nbody.dark-mode .heatmap-card {\n    background-color: #161b22;\n    border-color: #30363d;\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);\n}\n\nbody.dark-mode .heatmap-legend {\n    color: #8b949e;\n}\n\nbody.dark-mode .control-btn {\n    background-color: #238636;\n}\n\nbody.dark-mode .control-btn:hover {\n    background-color: #2ea043;\n}\n<\/style>\n\n\n    <div class=\"heatmap-container\">\n        <header class=\"heatmap-header\">\n            <h2>GitHub\u8d21\u732e\u70ed\u529b\u56fe<\/h2>\n            <p>NanoTurtle1145 \u7684\u7f16\u7801\u6d3b\u8dc3\u5ea6\u53ef\u89c6\u5316<\/p>\n        <\/header>\n        \n        <div class=\"heatmap-card\">\n            <!-- \u70ed\u529b\u56fe\u4e3b\u4f53 -->\n            <div class=\"heatmap-body\">\n                <!-- iframe\u5bb9\u5668 -->\n                <div class=\"iframe-container\">\n                    <iframe loading=\"lazy\" id=\"github-heatmap\" src=\"https:\/\/ghchart.rshah.org\/NanoTurtle1145\" width=\"960\" height=\"200\" title=\"GitHub\u8d21\u732e\u70ed\u529b\u56fe - NanoTurtle1145\" onload=\"updateIframeSize()\">\n                    <\/iframe>\n                <\/div>\n                \n                <!-- \u63a7\u5236\u6309\u94ae -->\n                <div class=\"control-buttons\">\n                    <button class=\"control-btn\" onclick=\"refreshHeatmap()\">\u5237\u65b0\u70ed\u529b\u56fe<\/button>\n                    <button class=\"control-btn\" onclick=\"openInNewTab()\">\u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00<\/button>\n                    <button class=\"control-btn\" onclick=\"toggleDarkMode()\">\u5207\u6362\u6df1\u8272\u6a21\u5f0f<\/button>\n                <\/div>\n                \n                <!-- \u56fe\u4f8b -->\n                <div class=\"heatmap-legend\">\n                    <div class=\"legend-item\">\n                        <div class=\"legend-color\" style=\"background-color: #ebedf0;\"><\/div>\n                        <span class=\"legend-text\">\u8f83\u5c11<\/span>\n                    <\/div>\n                    <div class=\"legend-item\">\n                        <div class=\"legend-color\" style=\"background-color: #9be9a8;\"><\/div>\n                        <span class=\"legend-text\"><\/span>\n                    <\/div>\n                    <div class=\"legend-item\">\n                        <div class=\"legend-color\" style=\"background-color: #40c463;\"><\/div>\n                        <span class=\"legend-text\"><\/span>\n                    <\/div>\n                    <div class=\"legend-item\">\n                        <div class=\"legend-color\" style=\"background-color: #30a14e;\"><\/div>\n                        <span class=\"legend-text\"><\/span>\n                    <\/div>\n                    <div class=\"legend-item\">\n                        <div class=\"legend-color\" style=\"background-color: #216e39;\"><\/div>\n                        <span class=\"legend-text\">\u8f83\u591a<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <script>\n        \/\/ DOM\u5143\u7d20\u5f15\u7528\n        const heatmapIframe = document.getElementById('github-heatmap');\n        \n        \/\/ \u6df1\u8272\u6a21\u5f0f\u72b6\u6001\n        let isDarkMode = false;\n        \n        \/\/ \u66f4\u65b0iframe\u5c3a\u5bf8\uff08\u54cd\u5e94\u5f0f\uff09\n        function updateIframeSize() {\n            const containerWidth = document.querySelector('.iframe-container').offsetWidth;\n            const iframe = document.getElementById('github-heatmap');\n            \n            \/\/ \u4fdd\u6301\u539f\u59cb\u5bbd\u9ad8\u6bd4\n            const originalWidth = 960;\n            const originalHeight = 200;\n            \n            if (containerWidth < originalWidth) {\n                const scale = containerWidth \/ originalWidth;\n                iframe.style.width = containerWidth + 'px';\n                iframe.style.height = (originalHeight * scale) + 'px';\n            } else {\n                iframe.style.width = originalWidth + 'px';\n                iframe.style.height = originalHeight + 'px';\n            }\n        }\n        \n        \/\/ \u5237\u65b0\u70ed\u529b\u56fe\n        function refreshHeatmap() {\n            const iframe = document.getElementById('github-heatmap');\n            const originalSrc = iframe.src;\n            \n            \/\/ \u6dfb\u52a0\u65f6\u95f4\u6233\u9632\u6b62\u7f13\u5b58\n            iframe.src = originalSrc.split('?')[0] + '?t=' + new Date().getTime();\n            \n            \/\/ \u663e\u793a\u5237\u65b0\u6d88\u606f\n            showMessage('\u70ed\u529b\u56fe\u5df2\u5237\u65b0', 'success');\n        }\n        \n        \/\/ \u5728\u65b0\u6807\u7b7e\u9875\u6253\u5f00\n        function openInNewTab() {\n            window.open('https:\/\/ghchart.rshah.org\/NanoTurtle1145', '_blank');\n        }\n        \n        \/\/ \u5207\u6362\u6df1\u8272\u6a21\u5f0f\n        function toggleDarkMode() {\n            isDarkMode = !isDarkMode;\n            \n            if (isDarkMode) {\n                \/\/ \u5e94\u7528\u6df1\u8272\u6a21\u5f0f\n                document.body.style.backgroundColor = '#0d1117';\n                document.body.style.color = '#c9d1d9';\n                document.querySelector('.heatmap-card').style.backgroundColor = '#161b22';\n                document.querySelector('.heatmap-card').style.borderColor = '#30363d';\n                \n                \/\/ \u4fee\u6539\u6807\u9898\u989c\u8272\n                document.querySelector('.heatmap-header h2').style.color = '#c9d1d9';\n                document.querySelector('.heatmap-header p').style.color = '#8b949e';\n                \n                showMessage('\u5df2\u5207\u6362\u5230\u6df1\u8272\u6a21\u5f0f', 'success');\n            } else {\n                \/\/ \u6062\u590d\u6d45\u8272\u6a21\u5f0f\n                document.body.style.backgroundColor = '#f6f8fa';\n                document.body.style.color = '#24292e';\n                document.querySelector('.heatmap-card').style.backgroundColor = '#ffffff';\n                document.querySelector('.heatmap-card').style.borderColor = '#e1e4e8';\n                \n                \/\/ \u6062\u590d\u6807\u9898\u989c\u8272\n                document.querySelector('.heatmap-header h1').style.color = '#24292e';\n                document.querySelector('.heatmap-header p').style.color = '#57606a';\n                \n                showMessage('\u5df2\u5207\u6362\u5230\u6d45\u8272\u6a21\u5f0f', 'success');\n            }\n        }\n        \n        \/\/ \u663e\u793a\u6d88\u606f\n        function showMessage(message, type = 'info') {\n            \/\/ \u521b\u5efa\u6d88\u606f\u5143\u7d20\n            const messageEl = document.createElement('div');\n            messageEl.textContent = message;\n            messageEl.style.position = 'fixed';\n            messageEl.style.top = '20px';\n            messageEl.style.right = '20px';\n            messageEl.style.padding = '12px 20px';\n            messageEl.style.borderRadius = '8px';\n            messageEl.style.fontWeight = '600';\n            messageEl.style.zIndex = '1000';\n            messageEl.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';\n            \n            \/\/ \u8bbe\u7f6e\u989c\u8272\n            if (type === 'success') {\n                messageEl.style.backgroundColor = '#2da44e';\n                messageEl.style.color = 'white';\n            } else if (type === 'error') {\n                messageEl.style.backgroundColor = '#cf222e';\n                messageEl.style.color = 'white';\n            } else {\n                messageEl.style.backgroundColor = '#0969da';\n                messageEl.style.color = 'white';\n            }\n            \n            \/\/ \u6dfb\u52a0\u5230\u9875\u9762\n            document.body.appendChild(messageEl);\n            \n            \/\/ 3\u79d2\u540e\u79fb\u9664\n            setTimeout(() => {\n                messageEl.style.opacity = '0';\n                messageEl.style.transition = 'opacity 0.5s';\n                setTimeout(() => {\n                    document.body.removeChild(messageEl);\n                }, 500);\n            }, 3000);\n        }\n        \n        \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u7684\u521d\u59cb\u5316\n        window.addEventListener('DOMContentLoaded', () => {\n            \/        \/\/ \u81ea\u52a8\u68c0\u6d4b\u7cfb\u7edf\u6df1\u8272\u6a21\u5f0f\n        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n            toggleDarkMode();\n        }\n        \n        \/\/ \u76d1\u542c\u7cfb\u7edf\u6df1\u8272\u6a21\u5f0f\u53d8\u5316\n        if (window.matchMedia) {\n            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n                if (e.matches !== isDarkMode) {\n                    toggleDarkMode();\n                }\n            });\n        }\n\/ \u66f4\u65b0iframe\u5c3a\u5bf8\n            updateIframeSize();\n            \n            \/\/ \u76d1\u542c\u7a97\u53e3\u5927\u5c0f\u53d8\u5316\n            window.addEventListener('resize', updateIframeSize);\n            \n            \/\/ \u663e\u793a\u6b22\u8fce\u6d88\u606f\n            setTimeout(() => {\n                showMessage('GitHub\u8d21\u732e\u70ed\u529b\u56fe\u5df2\u52a0\u8f7d\u5b8c\u6210\uff01', 'success');\n            }, 1500);\n        });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Feeds<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/blog.nanoturtle.cn\/?feed=rss2\">https:\/\/blog.nanoturtle.cn\/?feed=rss2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6253\u5b57\u673a\u591a\u8bed\u8a00\u6b22\u8fce \u6b22\u8fce\uff01 \u9875\u9762\u5bfc\u822a \u63a8\u8350\u6587\u7ae0 \u6280\u672f\u7c7b &amp;&amp; \u7269\u54c1\u5206\u4eab \u6b63\u5728\u83b7\u53d6 NanoTur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":311,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_excerptai":0,"_xhaitool_aitasks":false,"_xhaitool_aitasks_status":false,"_aiimage_cueword":"","_aiimage_status":0,"_xhai_excerpt":"","footnotes":""},"class_list":["post-859","page","type-page","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984.png",900,900,false],"thumbnail":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984-150x150.png",150,150,true],"medium":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984-300x300.png",300,300,true],"medium_large":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984-768x768.png",768,768,true],"large":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984.png",900,900,false],"1536x1536":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984.png",900,900,false],"2048x2048":["https:\/\/cn-sy1.rains3.com\/ntblog\/2026\/03\/IMG_7984.png",900,900,false]},"uagb_author_info":{"display_name":"NanoTurtle","author_link":"https:\/\/blog.nanoturtle.cn\/author\/nanoturtle\/"},"uagb_comment_info":0,"uagb_excerpt":"\u6253\u5b57\u673a\u591a\u8bed\u8a00\u6b22\u8fce \u6b22\u8fce\uff01 \u9875\u9762\u5bfc\u822a \u63a8\u8350\u6587\u7ae0 \u6280\u672f\u7c7b &amp;&amp; \u7269\u54c1\u5206\u4eab \u6b63\u5728\u83b7\u53d6 NanoTur&hellip;","_links":{"self":[{"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/pages\/859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/comments?post=859"}],"version-history":[{"count":57,"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/pages\/859\/revisions"}],"predecessor-version":[{"id":999,"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/pages\/859\/revisions\/999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/media\/311"}],"wp:attachment":[{"href":"https:\/\/blog.nanoturtle.cn\/index.php\/wp-json\/wp\/v2\/media?parent=859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}