feat: implement unified bilingual system with capsule language switcher

- Remove PageSpeed optimization article
- Add language toggle to navbar with refined capsule design
- Convert homepage to bilingual (EN default, ZH toggle)
- Update About page with bilingual support
- Update Archive/Tags pages with bilingual text
- Unify language switching mechanism using localStorage
- Redesign language switcher with sliding indicator animation
- Support both :has() CSS selector and JS fallback for slider position
- Default language is now English

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: calderbuild

_includes/footer.html

@@ -180,10 +180,13 @@
         window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}&title=${title}`, '_blank', 'width=600,height=400');
     }
     function shareToWechat() {
+        var lang = localStorage.getItem('preferredLanguage') || 'en';
+        var msgCopied = lang === 'zh' ? '链接已复制到剪贴板，请在微信中粘贴分享！' : 'Link copied! Paste in WeChat to share.';
+        var msgPrompt = lang === 'zh' ? '请复制以下链接在微信中分享：' : 'Copy this link to share on WeChat:';
         navigator.clipboard.writeText(window.location.href).then(function() {
-            alert('链接已复制到剪贴板，请在微信中粘贴分享！');
+            alert(msgCopied);
         }).catch(function() {
-            prompt('请复制以下链接在微信中分享：', window.location.href);
+            prompt(msgPrompt, window.location.href);
         });
     }
     function shareToWeibo() {
@@ -356,55 +359,38 @@
 
 <!-- Multi-Lingual -->
 {% if page.multilingual %}
-<!-- Handle Language Change -->
+<!-- Handle Language Change - Unified with localStorage -->
 <script type="text/javascript">
     // get nodes
     var $zh = document.querySelector(".zh");
     var $en = document.querySelector(".en");
-    var $select = document.querySelector("select");
 
-    // Changes at v1.8.1: include lang flag as a url query. This interop well with catalog hash anchors.
-    function getLang() { return new URLSearchParams(document.location.search).get("lang") }
-
-    function setLang(newLang) {
-        var params = new URLSearchParams(document.location.search)
-        params.set("lang", newLang)
-        document.location.search = params.toString()  // refresh.
+    // Get language from localStorage, default to English
+    function getLang() {
+        return localStorage.getItem('preferredLanguage') || 'en';
     }
 
-    // handle render
+    // handle render - Default to English
     function _render() {
-        var lang = getLang()
-        // en
-        if (lang == "en") {
-            $select.selectedIndex = 1;
-            $en.style.display = "block";
-            $en.classList.add("active");
-            $zh.style.display = "none";
-            $zh.classList.remove("active");
-            // default to zh-cn
+        var lang = getLang();
+
+        if (lang == "zh") {
+            // Show Chinese content
+            if ($zh) { $zh.style.display = "block"; $zh.classList.add("active"); }
+            if ($en) { $en.style.display = "none"; $en.classList.remove("active"); }
         } else {
-            $select.selectedIndex = 0;
-            $zh.style.display = "block";
-            $zh.classList.add("active");
-            $en.style.display = "none";
-            $en.classList.remove("active");
+            // Default: Show English content
+            if ($en) { $en.style.display = "block"; $en.classList.add("active"); }
+            if ($zh) { $zh.style.display = "none"; $zh.classList.remove("active"); }
         }
-        // interop with catalog 
-        generateCatalog(".catalog-body");
-    }
 
-    // handle select change
-    function onLanChange(index) {
-        if (index == 0) {
-            lang = "zh"
-        } else {
-            lang = "en"
+        // Regenerate catalog for current language
+        if (typeof generateCatalog === 'function') {
+            generateCatalog(".catalog-body");
         }
-        setLang(lang)
     }
 
-    // init
+    // init - render based on saved preference (default: English)
     _render();
 </script>
 {% endif %}

_includes/multilingual-sel.html

@@ -1,11 +1,18 @@
-                <!-- Language Switcher - Modern Toggle Buttons -->
-                <div class="language-switcher">
-                    <button class="lang-btn lang-btn-en active" data-lang="en" aria-label="Switch to English">
-                        <span class="lang-label">EN</span>
-                    </button>
-                    <span class="lang-separator">|</span>
-                    <button class="lang-btn lang-btn-zh" data-lang="zh" aria-label="切换到中文">
-                        <span class="lang-label">中文</span>
-                    </button>
-                </div>
-
+<!-- Language Switcher - Capsule Toggle Design -->
+<div class="lang-toggle" role="radiogroup" aria-label="Language selection">
+    <button class="lang-toggle__btn lang-toggle__btn--en active"
+            data-lang="en"
+            role="radio"
+            aria-checked="true"
+            aria-label="English">
+        <span class="lang-toggle__text">EN</span>
+    </button>
+    <button class="lang-toggle__btn lang-toggle__btn--zh"
+            data-lang="zh"
+            role="radio"
+            aria-checked="false"
+            aria-label="中文">
+        <span class="lang-toggle__text">中</span>
+    </button>
+    <span class="lang-toggle__slider" aria-hidden="true"></span>
+</div>

_includes/nav.html

@@ -51,6 +51,10 @@
                                 <span class="sr-only">Search</span>
                             </a>
                         </li>
+                        <!-- Language Switcher -->
+                        <li class="language-switcher-nav">
+                            {% include multilingual-sel.html %}
+                        </li>
                     </ul>
                 </div>
             </div>

_posts/2025-12-11-ai-pagespeed-ai-autopilot.md

@@ -7,20 +7,18 @@
 multilingual: true
 ---
 
-{% include multilingual-sel.html %}
+<!-- English Version (default) -->
+<div class="en post-container lang-en">
+    {% capture about_en %}{% include about/en.md %}{% endcapture %}
+    {{ about_en | markdownify }}
+</div>
 
-<!-- Chinese Version -->
-<div class="zh post-container">
+<!-- Chinese Version (hidden by default) -->
+<div class="zh post-container lang-zh" style="display:none;">
     {% capture about_zh %}{% include about/zh.md %}{% endcapture %}
     {{ about_zh | markdownify }}
 </div>
 
-<!-- English Version -->
-<div class="en post-container">
-    {% capture about_en %}{% include about/en.md %}{% endcapture %}
-    {{ about_en | markdownify }}
-</div>
-
 
 {% if site.disqus_username %}
 <!-- disqus 评论框 start -->

about.html

@@ -1,7 +1,7 @@
 ---
 title: Archive
 layout: default
-description: "技术探索 | 项目实战 | AI学习笔记"
+description: "Tech Insights | Project Cases | AI Learning Notes"
 header-img: "img/bg-little-universe.jpg"
 ---
 
@@ -19,7 +19,8 @@
 			<!-- Tags (as filter) -->
 			<div id='tag_cloud' class="tags tags-sup js-tags">
 				<a class="tag-button--all" data-encode="">
-					Show All
+					<span class="lang-en">Show All</span>
+					<span class="lang-zh" style="display:none;">显示全部</span>
 					<sup>{{site.posts.size}}</sup>
 				</a>