如何实现Hugo记住用户语言选择（基于i18n与active类）

问题说明 #

Hugo自带的i18n支持多语言自动生成，但当前语言选择功能存在缺陷：用户切换语言后关闭浏览器，再次打开会恢复默认英文。需要基于现有带active类的语言选择HTML结构，实现语言选择的持久化存储，直到用户主动切换。

现有语言选择HTML结构：

<ul>
      <li>
        <a href="#">en<span>▾</span></a>
        <ul>
          <li>
            <a class="active" href="/">English</a>
          </li>
          <li>
            <a href="/fr/">French</a>
          </li>
        </ul>
      </li>
</ul>

实现方案 #

1. 给语言链接添加标识（方便JS识别） #

先给每个语言切换链接加上data-lang属性，关联对应的语言代码：

<ul>
  <li>
    <a href="#">en<span>▾</span></a>
    <ul>
      <li>
        <a class="active" href="/" data-lang="en">English</a>
      </li>
      <li>
        <a href="/fr/" data-lang="fr">French</a>
      </li>
    </ul>
  </li>
</ul>

2. 用localStorage实现持久化逻辑 #

添加JavaScript代码，处理语言选择的存储和页面加载时的恢复：

document.addEventListener('DOMContentLoaded', function() {
  const langLinks = document.querySelectorAll('[data-lang]');
  
  // 页面加载时读取保存的语言设置
  const savedLang = localStorage.getItem('preferredLang');
  if (savedLang) {
    const targetLink = document.querySelector(`[data-lang="${savedLang}"]`);
    // 如果当前页面不是用户保存的语言，自动跳转
    if (targetLink && !targetLink.classList.contains('active')) {
      window.location.href = targetLink.href;
    }
  }
  
  // 监听语言切换点击事件，保存选择到localStorage
  langLinks.forEach(link => {
    link.addEventListener('click', function() {
      const selectedLang = this.getAttribute('data-lang');
      localStorage.setItem('preferredLang', selectedLang);
    });
  });
});

3. Hugo模板层面优化（可选） #

为了让页面加载时更快恢复用户语言，可以在模板的<head>中添加内联脚本，提前检查存储并跳转：

<script>
  (function() {
    const savedLang = localStorage.getItem('preferredLang');
    const currentLang = '{{ .Site.Language.Lang }}';
    if (savedLang && savedLang !== currentLang) {
      // 动态获取对应语言的站点URL
      const langUrl = '{{ range .Site.Languages }}{{ if eq .Lang "__LANG__" }}{{ .RelURL }}{{ end }}{{ end }}'.replace('__LANG__', savedLang);
      window.location.href = langUrl;
    }
  })();
</script>

这样用户每次切换语言时，选择会被存在浏览器的localStorage中，下次打开页面时会自动跳转到用户上次选择的语言版本，同时active类也会对应更新。

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