docs: Update documentation for multi-language support and language sw…

…itcher

Signed-off-by: longhao <hal.long@outlook.com>

changelog.d/template.rst

@@ -0,0 +1,18 @@
+{% for section, _ in sections.items() %}
+{% if section %}### {{ section }}
+
+{% endif %}
+{% if sections[section] %}
+{% for category, val in definitions.items() if category in sections[section] %}
+
+#### {{ definitions[category]['name'] }}
+
+{% for text, values in sections[section][category].items() %}
+* {{ text }} {{ values|join(', ') }}
+{% endfor %}
+{% endfor %}
+{% else %}
+No significant changes.
+
+{% endif %}
+{% endfor %}

docs/source/_static/custom.css

@@ -65,34 +65,62 @@
     color: var(--color-sidebar-link-text--hover);
 }
 
-/* Language switcher styles */
-.language-switcher-container {
+/* Language Switcher Styles - Furo Theme */
+.language-switcher {
+    position: fixed;
+    left: 1rem;
+    bottom: 1rem;
+    z-index: 10;
+    font-size: var(--font-size--small);
+    color: var(--color-foreground-secondary);
+    background: var(--color-background-primary);
+    border: 1px solid var(--color-background-border);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.language-switcher__label {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    color: var(--color-foreground-muted);
+}
+
+.language-switcher__options {
     display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0.5rem 1rem;
     gap: 0.5rem;
-    border-bottom: 1px solid var(--color-background-border);
+    align-items: center;
 }
 
-.language-switcher {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.3rem 0.6rem;
+.language-switcher__current {
+    font-weight: 500;
     color: var(--color-foreground-primary);
+}
+
+.language-switcher__option {
+    color: var(--color-link);
     text-decoration: none;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    transition: all 0.2s ease;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.125rem;
+    transition: background-color 0.2s ease;
 }
 
-.language-switcher:hover {
+.language-switcher__option:hover {
     background-color: var(--color-background-hover);
-    color: var(--color-brand-primary);
     text-decoration: none;
 }
 
+.language-switcher__option:not(:first-child)::before {
+    content: "|";
+    color: var(--color-background-border);
+    margin-right: 0.5rem;
+}
+
+/* Fix sidebar position to accommodate language switcher */
+.sidebar-container {
+    padding-bottom: 4rem;
+}
+
 /* Dark mode support */
 [data-theme="dark"] .language-switcher:hover {
     background-color: var(--color-background-hover);
@@ -195,3 +223,151 @@ table.docutils th {
 .sidebar-search-container {
     border-radius: 4px;
 }
+
+/* Fix Markdown Rendering */
+.rst-content .section ul {
+    list-style: disc;
+    margin-left: 2em;
+}
+
+.rst-content .section ul li {
+    margin-bottom: 0.5em;
+}
+
+.rst-content .section ul li > p {
+    margin: 0;
+}
+
+.rst-content code {
+    padding: 2px 5px;
+    background: var(--color-background-secondary);
+    border: 1px solid var(--color-background-border);
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+.rst-content pre {
+    padding: 12px 15px;
+    background: var(--color-background-secondary);
+    border: 1px solid var(--color-background-border);
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+/* Markdown Content Styles */
+.rst-content {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+/* Links */
+.rst-content a {
+    color: var(--color-link);
+    text-decoration: none;
+}
+
+.rst-content a:hover {
+    text-decoration: underline;
+}
+
+/* Lists */
+.rst-content ul {
+    margin-bottom: 1rem;
+}
+
+.rst-content ul li {
+    margin-bottom: 0.5rem;
+    list-style: disc;
+}
+
+/* Code */
+.rst-content code {
+    padding: 2px 5px;
+    background: var(--color-background-secondary);
+    border: 1px solid var(--color-background-border);
+    border-radius: 3px;
+    font-size: 90%;
+}
+
+.rst-content pre {
+    padding: 1rem;
+    background: var(--color-background-secondary);
+    border: 1px solid var(--color-background-border);
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+/* Badges */
+.rst-content img[src*="shields.io"],
+.rst-content img[src*="badge"],
+.rst-content img[src*="codecov.io"] {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 2px;
+    max-height: 20px;
+}
+
+/* Badge Links */
+.rst-content a:has(img) {
+    display: inline-block;
+    text-decoration: none !important;
+    margin: 0 2px;
+}
+
+.rst-content a:has(img):hover {
+    opacity: 0.8;
+}
+
+/* Table of Contents */
+.rst-content .toctree-wrapper ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.rst-content .toctree-wrapper li {
+    margin: 0;
+    padding: 0;
+}
+
+/* Emoji and Icons */
+.rst-content img[alt*="emoji"],
+.rst-content .emoji {
+    height: 1.2em;
+    width: 1.2em;
+    margin: 0 0.1em;
+    vertical-align: -0.2em;
+}
+
+/* Headings */
+.rst-content h1,
+.rst-content h2,
+.rst-content h3,
+.rst-content h4,
+.rst-content h5,
+.rst-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.rst-content h1 { font-size: 2em; }
+.rst-content h2 { font-size: 1.5em; }
+.rst-content h3 { font-size: 1.25em; }
+.rst-content h4 { font-size: 1em; }
+
+/* Paragraphs */
+.rst-content p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+/* Inline Elements */
+.rst-content strong {
+    font-weight: 600;
+}
+
+.rst-content em {
+    font-style: italic;
+}

docs/source/_templates/language_switcher.html

@@ -1,13 +1,16 @@
 {%- if language %}
-<button class="language-switcher" id="language-switcher" title="{{ _('Switch Language') }}">
-  {%- if language == "zh_CN" %}
-    <a href="{{ pathto('../' + (pagename[6:] if pagename.startswith('zh_CN/') else pagename), 1) }}" style="color: inherit; text-decoration: none;">
-      <span>EN</span>
-    </a>
-  {%- else %}
-    <a href="{{ pathto('zh_CN/' + pagename, 1) }}" style="color: inherit; text-decoration: none;">
-      <span>中</span>
-    </a>
-  {%- endif %}
-</button>
+<div class="language-switcher">
+  <div class="language-switcher__label">
+    {% if language == 'en_US' %}Language{% else %}语言{% endif %}
+  </div>
+  <div class="language-switcher__options">
+    <span class="language-switcher__current">{{ supported_languages[language]["name"] }}</span>
+    {% for alt_lang in alternate_languages %}
+      <a href="{{ pathto(alt_lang.url_prefix + '/' + (pagename[6:] if pagename.startswith(language + '/') else pagename), 1) }}"
+         class="language-switcher__option">
+        {{ alt_lang.name }}
+      </a>
+    {% endfor %}
+  </div>
+</div>
 {%- endif %}

docs/source/_templates/layout.html

@@ -0,0 +1,25 @@
+{% extends "!layout.html" %}
+
+{% block scripts %}
+{{ super() }}
+<script>
+    function switchLanguage(lang) {
+        var currentPath = window.location.pathname;
+        var newPath = currentPath.replace(/\/(en_US|zh_CN)\//, '/' + lang + '/');
+        window.location.href = newPath;
+    }
+</script>
+{% endblock %}
+
+{% block document %}
+<div class="language-switcher">
+    {% if language == 'en_US' %}Language:{% else %}语言：{% endif %}
+    <span class="current-lang">{{ supported_languages[language]["name"] }}</span>
+    {% for lang, info in supported_languages.items() %}
+        {% if lang != language %}
+            | <a href="javascript:switchLanguage('{{ lang }}')" class="lang-link">{{ info.name }}</a>
+        {% endif %}
+    {% endfor %}
+</div>
+{{ super() }}
+{% endblock %}