feat: i18n

[changchiyou]

• https://github.com/liamzebedee/jekyll-i18n
• https://github.com/kurtsson/jekyll-multiple-languages-plugin

[changchiyou]

已上傳的圖像: 這種在 jekyll 框架上部屬到 github page 靜態網站中的中間有插入圖片的文字段落，如何用 i18n 或是其他工具支援翻譯功能？

---

ChatGPT: 要在Jekyll框架上部署的GitHub Pages静态网站中实现翻译功能（如插入图片的文字段落），你可以使用Jekyll的i18n插件或者其他方法来支持多语言。以下是使用i18n插件的步骤：

1. 安装并配置i18n插件： 确保你在Jekyll项目的_config.yml文件中包含以下配置以启用i18n插件：

gems:
  - jekyll-multiple-languages-plugin

languages:
  - en
  - zh

default_lang: en

1. 创建语言文件夹和文件： 在你的项目根目录下创建一个名为_data的文件夹，然后在该文件夹中为每种语言创建一个YAML文件，例如en.yml和zh.yml。这些文件将包含你的翻译内容。 en.yml文件示例：

copyright:
  notice: "I, %{author}, DO NOT own the copyrights of all resources on this website, especially images and data. This website is a combination of the gold efficiency calculation formula from %{league_wiki} with the design elements from %{wr_meta} featuring manually updated item data from %{wild_rift}."

zh.yml文件示例：

copyright:
  notice: "我，%{author}，不擁有此網站上所有資源的版權，特別是圖片和數據。此網站是基於%{league_wiki}的金效率計算公式與%{wr_meta}的設計元素結合，並手動更新%{wild_rift}的數據。"

1. 使用语言文件中的变量： 在你的网站模板中，你可以使用语言文件中的变量来显示翻译内容。使用_layouts中的模板文件作为例子：

<div class="copyright">
  <p>{{ site.data.locales[site.active_lang].copyright.notice | default: site.data.locales[site.default_lang].copyright.notice }}</p>
</div>

1. 插入图片和变量： 如果你的文本段落中需要插入图片和变量，可以使用下面的方式：

<div class="copyright">
  <p>{{ site.data.locales[site.active_lang].copyright.notice | replace: '%{author}', '<img src="https://github.com/favicon.ico" alt="changchiiyou">' | replace: '%{league_wiki}', '<img src="path_to_league_of_legend_wiki_image" alt="League of Legend Wiki">' | replace: '%{wr_meta}', '<img src="path_to_wr_meta_image" alt="WR META">' | replace: '%{wild_rift}', '<img src="path_to_wild_rift_image" alt="Wild Rift">' }}</p>
</div>

1. 切换语言： 你可以在页面中添加语言切换器，例如在导航栏中添加链接：

<nav>
  <ul>
    <li><a href="{{ site.baseurl }}/en">English</a></li>
    <li><a href="{{ site.baseurl }}/zh">中文</a></li>
  </ul>
</nav>

并在每个页面的头部添加语言前缀，例如：

---
layout: default
lang: en
---

通过以上步骤，你可以在Jekyll框架上为GitHub Pages静态网站添加翻译功能，支持带有图片和变量的文本段落。这样，用户可以通过切换语言来查看网站的不同语言版本。