website: auto-route root by browser language; harden landing flag

changkun · changkun · commit 845f01f06933 · 2026-06-21T11:35:41.000+02:00
Make the site behave like a real bilingual site at the entry point. A
non-Chinese browser (or anyone whose remembered choice is English) hitting
the root now lands on the English page instead of a wall of Chinese; an
explicit 'zh' choice is honored and never bounced. The redirect runs as the
first thing in &lt;head&gt;, before the non-async vue script, so it is not blocked
on a download. Landing switchers write the choice to localStorage so the
auto-route respects it.

Also inline the landing flag's size so it can never depend on a cached
stylesheet rule (the cause of the giant-flag render after the button-&gt;anchor
change shipped while old CSS was still cached).
diff --git a/website/themes/moderncpp/layout/index.ejs b/website/themes/moderncpp/layout/index.ejs
@@ -14,12 +14,12 @@
 
 <div id="lang-switch">
   <% if (isEn) { %>
-    <a class="lang-btn" href="<%- url_for("/modern-cpp/") %>">
-      <span class="flag" style="content: url(/modern-cpp/assets/lang/cn.svg);"></span>中文
+    <a class="lang-btn" href="<%- url_for("/modern-cpp/") %>" onclick="try{localStorage.setItem('mcpp-lang','zh')}catch(e){}">
+      <span class="flag" style="content: url(/modern-cpp/assets/lang/cn.svg); display: inline-block; width: 15px; height: 15px; vertical-align: middle; margin-right: 6px; margin-bottom: 2px;"></span>中文
     </a>
   <% } else { %>
-    <a class="lang-btn" href="<%- url_for("/modern-cpp/en/") %>">
-      <span class="flag" style="content: url(/modern-cpp/assets/lang/en.svg);"></span>English
+    <a class="lang-btn" href="<%- url_for("/modern-cpp/en/") %>" onclick="try{localStorage.setItem('mcpp-lang','en')}catch(e){}">
+      <span class="flag" style="content: url(/modern-cpp/assets/lang/en.svg); display: inline-block; width: 15px; height: 15px; vertical-align: middle; margin-right: 6px; margin-bottom: 2px;"></span>English
     </a>
   <% } %>
 </div>
diff --git a/website/themes/moderncpp/layout/layout.ejs b/website/themes/moderncpp/layout/layout.ejs
@@ -1,10 +1,28 @@
-<% var isIndex = page.layout === 'index' || page.path === 'index.html' %>
-
+<%
+  var isEn = page.type == 'book-en-us' || page.type == 'about-en';
+  var isIndex = page.layout === 'index' || page.path === 'index.html';
+%>
 <!DOCTYPE html>
-<html lang="<%- page.type == 'book-en-us' ? 'en' : 'zh-CN' %>">
+<html lang="<%- isEn ? 'en' : 'zh-CN' %>">
   <head>
-    <title><%- page.title ? page.title + ' - ' : '' %><%- page.type == 'book-en-us' ? 'Modern C++ Tutorial: C++11 to C++26 On the Fly' : '现代 C++ 教程: 高速上手 C++11 到 C++26' %></title>
     <meta charset="utf-8">
+    <% if (isIndex && !isEn) { %>
+    <!-- Browser-language auto-routing: send non-Chinese browsers (or anyone
+         whose remembered choice is English) to the English landing. A stored
+         'zh' preference is honored and never bounced. Runs before any external
+         script so the redirect is not blocked on a network download. -->
+    <script>
+    (function () {
+      var pref = null;
+      try { pref = localStorage.getItem('mcpp-lang'); } catch (e) {}
+      if (pref === 'zh') return;
+      var enBrowser = (navigator.language || navigator.userLanguage || 'en')
+        .toLowerCase().indexOf('zh') !== 0;
+      if (pref === 'en' || enBrowser) { location.replace('/modern-cpp/en/'); }
+    })();
+    </script>
+    <% } %>
+    <title><%- page.title ? page.title + ' - ' : '' %><%- isEn ? 'Modern C++ Tutorial: C++11 to C++26 On the Fly' : '现代 C++ 教程: 高速上手 C++11 到 C++26' %></title>
     <meta name="description" content="<%- theme.site_description %>">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="shortcut icon" type="image/x-icon" href="/modern-cpp/assets/cover-2nd.png">
@@ -23,7 +41,7 @@
     <script async src="//changkun.de/urlstat/client.js"></script>
   </head>
   <body class="<%- isIndex ? '' : 'docs' -%>">
-    <% if (page.type == 'book-en-us') { %>
+    <% if (isEn) { %>
       <div id="mobile-bar" data-bg-text="Modern C++ Tutorial" <%- isIndex ? 'class="top"' : '' %>>
         <a class="menu-button"></a>
         <a class="logo" href="/modern-cpp/"></a>
