/** * 中英文切换功能 * 支持导航栏和正文内容的语言切换 */ (function() { 'use strict'; // 语言配置 const LANGUAGE_CONFIG = { chinese: { code: 'zh', name: '中文', suffix: '_zh', selector: '[data-lang="zh"]' }, english: { code: 'en', name: 'English', suffix: '', selector: '[data-lang="en"]' } }; // 当前语言状态 let currentLanguage = 'chinese'; let isInitialized = false; /** * 检测当前页面的语言 */ function detectCurrentLanguage() { const htmlLang = document.documentElement.getAttribute('lang'); const currentPath = window.location.pathname; if ((htmlLang === 'zh-CN') && (currentPath.endsWith('_zh.html'))) return 'chinese'; if ((htmlLang === 'en') && (currentPath.endsWith('.html'))) return 'english'; return 'english'; } /** * 初始化语言切换UI(动态创建) */ function createLanguageSwitch() { // 检查是否已经存在 const existingSwitch = document.querySelector('.language-switch'); if (existingSwitch) { console.log('语言切换器已存在'); return; } // 查找侧边栏容器 const sidebar = document.querySelector('.wy-nav-side .wy-side-scroll'); if (!sidebar) { console.warn('未找到侧边栏容器'); return; } // 创建语言切换UI - "中文 | English" 格式 const languageSwitchHTML = `
|
`; // 将语言切换器添加到侧边栏底部 sidebar.insertAdjacentHTML('beforeend', languageSwitchHTML); console.log('语言切换器已动态创建'); } /** * 设置语言切换器事件 */ function setupLanguageSwitchEvents() { const languageSwitch = document.getElementById('language-switch'); if (!languageSwitch) return; const options = languageSwitch.querySelectorAll('.language-switch__option'); const slider = languageSwitch.querySelector('.language-switch__slider'); options.forEach(option => { option.addEventListener('click', function(e) { e.preventDefault(); const targetLang = this.getAttribute('data-lang'); if (targetLang !== currentLanguage) { switchLanguage(targetLang); } }); // 键盘支持 option.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); // 更新当前语言状态 updateLanguageSwitchState(); } /** * 更新语言切换器状态 */ function updateLanguageSwitchState() { const languageSwitch = document.getElementById('language-switch'); if (!languageSwitch) return; const options = languageSwitch.querySelectorAll('.language-switch__option'); options.forEach(option => { const lang = option.getAttribute('data-lang'); if (lang === currentLanguage) { option.classList.add('active'); option.setAttribute('aria-pressed', 'true'); } else { option.classList.remove('active'); option.setAttribute('aria-pressed', 'false'); } }); } /** * 切换语言 */ function switchLanguage(targetLang) { if (targetLang === currentLanguage) return; console.log(`切换语言: ${currentLanguage} -> ${targetLang}`); // 添加加载状态 const languageSwitch = document.getElementById('language-switch'); if (languageSwitch) { languageSwitch.classList.add('loading'); } // 获取当前页面信息 const currentPath = window.location.pathname; const currentUrl = window.location.href; // 构建目标URL let targetUrl = ''; if (targetLang === 'chinese') { // 切换到中文版本 if (currentPath.includes('_zh.html')) { // 如果已经是中文页面,不需要切换 targetUrl = currentUrl; } else if (currentPath.includes('.html') && !currentPath.includes('_zh.html')) { // 如果当前是英文页面,切换到中文页面 targetUrl = currentPath.replace('.html', '_zh.html'); } else if (currentPath.endsWith('/') || currentPath.endsWith('/index.html')) { // 如果当前是根目录或英文版目录页面,切换到中文版目录页面 targetUrl = currentPath.replace('/index.html', '/index_zh.html').replace(/\/$/, '/index_zh.html'); } else { // 其他情况,尝试构建中文版本URL targetUrl = currentPath + (currentPath.endsWith('/') ? '' : '/') + 'index_zh.html'; } } else { // 切换到英文版本 if (currentPath.includes('_zh.html')) { // 如果当前是中文页面,切换到英文页面 targetUrl = currentPath.replace('_zh.html', '.html'); } else if (currentPath.includes('.html') && !currentPath.includes('_zh.html')) { // 如果当前是英文页面,保持英文版本 targetUrl = currentUrl; } else if (currentPath.endsWith('/') || currentPath.endsWith('/index_zh.html')) { // 如果当前是根目录或中文版目录页面,切换到英文版目录页面 targetUrl = currentPath.replace('/index_zh.html', '/index.html').replace(/\/$/, '/index.html'); } else { // 其他情况,尝试构建英文版本URL targetUrl = currentPath + (currentPath.endsWith('/') ? '' : '/') + 'index.html'; } } // 如果目标URL与当前URL相同,只更新UI状态 if (targetUrl === currentUrl || targetUrl === window.location.href) { currentLanguage = targetLang; updateLanguageSwitchState(); if (languageSwitch) { languageSwitch.classList.remove('loading'); } return; } // 跳转到目标URL console.log(`跳转到: ${targetUrl}`); window.location.href = targetUrl; } /** * 更新导航栏语言显示 */ function updateNavigationLanguage() { const navLinks = document.querySelectorAll('.wy-menu a[href*="README"]'); navLinks.forEach(link => { const href = link.getAttribute('href'); const text = link.textContent.trim(); if (currentLanguage === 'chinese') { // 显示中文版本,隐藏英文版本 if (href.includes('_zh.html') || text.includes('(中文)')) { link.style.display = ''; link.closest('li').style.display = ''; } else if (href.includes('.html') && !href.includes('_zh.html') && text.includes('(English)')) { link.style.display = 'none'; link.closest('li').style.display = 'none'; } } else { // 显示英文版本,隐藏中文版本 if (href.includes('_zh.html') || text.includes('(中文)')) { link.style.display = 'none'; link.closest('li').style.display = 'none'; } else if (href.includes('.html') && !href.includes('_zh.html') && text.includes('(English)')) { link.style.display = ''; link.closest('li').style.display = ''; } } }); } /** * 初始化语言切换功能 */ function init() { if (isInitialized) return; console.log('初始化语言切换功能...'); // 检测当前语言 currentLanguage = detectCurrentLanguage(); console.log('检测到的当前语言:', currentLanguage); // 等待DOM加载完成 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', function() { setTimeout(initLanguageSwitch, 100); }); } else { setTimeout(initLanguageSwitch, 100); } isInitialized = true; } /** * 初始化语言切换器 */ function initLanguageSwitch() { createLanguageSwitch(); setupLanguageSwitchEvents(); updateNavigationLanguage(); // 如果侧边栏是动态加载的,等待一下再尝试 setTimeout(() => { if (!document.querySelector('.language-switch')) { console.warn('语言切换器仍未找到,请检查模板配置'); } }, 1000); } // 启动 init(); // 导出到全局作用域 window.LanguageSwitch = { switchLanguage: switchLanguage, getCurrentLanguage: () => currentLanguage, updateNavigation: updateNavigationLanguage }; })();