如何为Jekyll站点实现基于浏览器语言的首次重定向？

首先明确一点：Jekyll本身没有内置这种自动重定向机制，因为它是静态站点生成器，所有页面都是预先生成的静态文件，没有服务器端的动态处理能力。要实现这个需求，最靠谱的方式是用前端JavaScript来完成，下面是具体的实现步骤和代码：

核心思路 #

通过前端JS读取浏览器的首选语言列表，匹配你站点支持的语言，自动重定向到对应语言的子文件夹页面；同时用Cookie保存用户手动选择的语言，避免后续访问重复触发重定向。

具体实现步骤 #

1. 在默认语言页面添加JS代码 #

在你的默认语言首页（比如根目录的index.html，或者插件生成的默认语言子文件夹首页）插入以下JavaScript代码：

// 配置：和你的插件语言配置保持一致
const supportedLanguages = ['en', 'fr', 'es']; // 替换成你站点支持的语言代码
const defaultLanguage = supportedLanguages[0]; // 插件设置的默认语言

// 获取浏览器首选的主语言代码（比如从"en-US"提取"en"）
function getBrowserPreferredLanguage() {
  const navLang = navigator.language || navigator.userLanguage;
  return navLang.split('-')[0];
}

// 匹配站点支持的语言
function getMatchingLanguage() {
  const browserLang = getBrowserPreferredLanguage();
  
  // 先尝试精确匹配
  if (supportedLanguages.includes(browserLang)) {
    return browserLang;
  }
  
  // 再尝试匹配主语言（比如用户语言是"en-GB"，匹配站点的"en"）
  for (const lang of supportedLanguages) {
    if (browserLang.startsWith(lang.split('-')[0])) {
      return lang;
    }
  }
  
  // 无匹配则返回默认语言
  return defaultLanguage;
}

// 页面加载完成后执行重定向逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 检查用户是否已手动选择过语言（通过Cookie记录）
  const savedLang = document.cookie.split('; ')
    .find(row => row.startsWith('site_selected_lang='))
    ?.split('=')[1];

  if (savedLang) {
    // 如果用户已有选择，且当前不在对应页面则重定向
    const targetPath = savedLang === defaultLanguage ? '/' : `/${savedLang}/`;
    if (window.location.pathname !== targetPath) {
      window.location.href = targetPath;
    }
    return;
  }

  // 无用户选择时，使用浏览器偏好语言
  const targetLang = getMatchingLanguage();
  const targetPath = targetLang === defaultLanguage ? '/' : `/${targetLang}/`;

  // 仅当当前路径不匹配时才重定向
  if (window.location.pathname !== targetPath) {
    window.location.href = targetPath;
    // 可选：保存用户语言到Cookie，有效期1年
    document.cookie = `site_selected_lang=${targetLang}; path=/; max-age=31536000`;
  }
});

2. 适配你的站点路径结构 #

根据插件生成的路径调整代码细节：

• 如果你的默认语言内容在根目录（而非子文件夹），代码里的targetPath判断已经处理了这种情况
• 如果默认语言也在子文件夹（比如/en/），把代码里的targetPath逻辑改成：const targetPath = /${targetLang}/;，同时移除默认语言的特殊判断

3. 降级方案 #

考虑到部分用户可能禁用JavaScript，一定要在页面上保留手动切换语言的入口（比如导航栏的语言选择按钮），作为自动重定向的补充方案。

测试方法 #

你可以在浏览器开发者工具中修改语言偏好来测试：

• Chrome：打开DevTools → Settings → Languages → 添加/调整语言顺序
• Firefox：设置 → 常规 → 语言和外观 → 语言 → 调整顺序

内容的提问来源于stack exchange，提问作者Vladyslav Zavalykhatko