https://time-friend.com/zh/tags/i18n/Recent content in I18n on Time FriendHugozh-CNMon, 20 Jan 2025 14:21:00 +0000https://time-friend.com/zh/archive/blog-architecture-i18n/Mon, 20 Jan 2025 14:21:00 +0000https://time-friend.com/zh/archive/blog-architecture-i18n/<p>写技术博客有个尴尬: 中文内容国内读者看, 但海外流量也不少. 干脆中英文都上.</p> <p>这个博客是中英双语的. 同一篇文章有中文版和英文版, 各自有独立的 URL, 互不影响.</p> <p>i18n 分两层: 一是<strong>内容</strong>的国际化 (文章本身有中英文版本), 二是<strong>界面</strong>的国际化 (按钮, 菜单, 提示文字跟着语言切换).</p> <h1 id="内容国际化">内容国际化</h1> <h2 id="目录结构">目录结构</h2> <p>Hugo 的 <code>module.mounts</code> 来做语言映射:</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">module</span>: </span></span><span style="display:flex;"><span> <span style="color:#f92672">mounts</span>: </span></span><span style="display:flex;"><span> - <span style="color:#f92672">source</span>: <span style="color:#ae81ff">content/en</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">target</span>: <span style="color:#ae81ff">content</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">lang</span>: <span style="color:#ae81ff">en</span> </span></span><span style="display:flex;"><span> - <span style="color:#f92672">source</span>: <span style="color:#ae81ff">content</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">target</span>: <span style="color:#ae81ff">content</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">lang</span>: <span style="color:#ae81ff">zh</span> </span></span><span style="display:flex;"><span> <span style="color:#f92672">excludeFiles</span>: <span style="color:#e6db74">&#39;en/**&#39;</span> </span></span></code></pre></div><p>英文内容从 <code>content/en</code> 取, 中文内容从 <code>content</code> 取, 排除掉 <code>en/</code> 目录. 这样中文和英文文件互不干扰, 各自在独立的目录下.</p> <p>中文文章在 <code>content/archive/</code> 下, 英文文章在 <code>content/en/archive/</code> 下.</p> <h2 id="translationkey-配对">translationKey 配对</h2> <p>用 Hugo 的 <code>translationKey</code> 来配对文章. 同一篇文章的中英文版本用同一个 key:</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#75715e"># 中文文章</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">translationKey</span>: <span style="color:#ae81ff">zh0189</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#ae81ff">Git系列之关于add命令的一些事</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">slug</span>: <span style="color:#ae81ff">git-series-about-add-command</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e"># 英文文章</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">translationKey</span>: <span style="color:#ae81ff">zh0189</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">title</span>: <span style="color:#f92672">Git Series</span>: <span style="color:#ae81ff">About the Add Command</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">slug</span>: <span style="color:#ae81ff">git-series-about-add-command</span> </span></span></code></pre></div><p>Hugo 会自动把这两个页面识别为翻译对. 模板里用 <code>.Translations</code> 拿到对应语言的版本, 用来做语言切换.</p>