新手如何为纯HTML个人博客实现手动翻译的多语言功能？

核心思路 #

采用同路径+对应文件名的文件夹结构，让每个页面的翻译版本和原页面一一绑定，这样就能直接设置精准的切换链接，而非跳转到语言首页。

第一步：整理文件结构 #

• 根目录存放默认语言（比如英文）的所有页面：index.html、my-first-post.html、about.html
• 为每种语言创建独立文件夹，比如西班牙语对应es/，法语对应fr/，文件夹内存放翻译后的同名页面：es/index.html、es/my-first-post.html、es/about.html
• 关键规则：翻译后的页面文件名必须和原页面完全一致，确保内容能精准对应。

第二步：添加精准的语言切换链接 #

在每个页面的导航栏或固定位置，添加对应语言的切换链接，路径规则如下：

• 从默认语言页面（根目录）跳转到其他语言的对应页面：直接写「语言文件夹+文件名」，比如英文的my-first-post.html里，西班牙语切换链接写：

  <a href="es/my-first-post.html">Español</a>
  

• 从子语言文件夹的页面跳回默认语言页面：用../表示上级目录（根目录），比如西班牙语的es/my-first-post.html里，英文切换链接写：

  <a href="../my-first-post.html">English</a>
  

第三步：优化细节（可选但推荐） #

• 给每个页面的<html>标签添加lang属性，帮助搜索引擎识别语言：英文页面写<html lang="en">，西班牙语页面写<html lang="es">
• 把语言切换按钮放在统一位置（比如页面顶部导航右侧），让用户能快速找到切换入口

示例代码片段 #

英文文章页面（my-first-post.html）的导航部分：

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="my-first-post.html">My First Post</a>
    <span>Language:</span>
    <a href="es/my-first-post.html">Español</a>
  </nav>
</header>

西班牙语对应文章页面（es/my-first-post.html）的导航部分：

<header>
  <nav>
    <a href="../index.html">Inicio</a>
    <a href="../my-first-post.html">Mi Primera Entrada</a>
    <span>Idioma:</span>
    <a href="../my-first-post.html">English</a>
  </nav>
</header>

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