add multilingual support

2025-04-27 16:17:45 +08:00
parent 1e0bb29742
commit 9c9f002965
18 changed files with 738 additions and 18 deletions
--- a/content/_index.en.md
+++ b/content/_index.en.md
--- a/content/_index.zh.md
+++ b/content/_index.zh.md
--- a/content/about/index.zh.md
+++ b/content/about/index.zh.md
@@ -0,0 +1,8 @@
+---
+title: "关于我们"
+date: 2023-04-20
+draft: false
+layout: page
+---
+
+# About Us
--- a/content/archives/index.en.html
+++ b/content/archives/index.en.html
--- a/content/archives/index.zh.html
+++ b/content/archives/index.zh.html
@@ -0,0 +1,6 @@
+---
+title: "归档"
+date: 2023-04-20
+draft: false
+layout: archives
+---
--- a/content/post/2019-08-08-text-and-typography/index.en.md
+++ b/content/post/2019-08-08-text-and-typography/index.en.md
--- a/content/post/2019-08-08-text-and-typography/index.zh.md
+++ b/content/post/2019-08-08-text-and-typography/index.zh.md
@@ -0,0 +1,199 @@
+---
+title: 文本和排版
+date: 2019-08-08 11:33:00 +0800
+draft: false
+description: >-
+  文本、排版、数学公式、图表、流程图、图片、视频等示例。
+categories:
+  - 博客
+  - 演示
+tags:
+  - 排版
+pin: true
+math: true
+image:
+  path: devices-mockup.png
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
+  alt: Chirpy主题在多个设备上的响应式渲染。
+---
+
+## 标题
+
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+# H1 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
+
+## H2 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
+
+### H3 — 标题 {data-toc-skip=true .mt-4 .mb-0 }
+
+#### H4 — 标题 {data-toc-skip=true .mt-4 }
+<!-- markdownlint-restore -->
+
+## 段落
+
+这是一个段落示例。在这里，我们可以看到段落是如何在Markdown中呈现的。段落是由一个或多个连续的文本行组成，它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素，良好的排版可以提高可读性和美观度。
+
+## 列表
+
+### 有序列表
+
+1. 第一点
+2. 第二点
+3. 第三点
+
+### 无序列表
+
+- 章节
+  - 节
+    - 段落
+
+### 待办列表
+
+- [ ] 任务
+  - [x] 步骤 1
+  - [x] 步骤 2
+  - [ ] 步骤 3
+
+### 描述列表
+
+太阳
+: 地球绕其运行的恒星
+
+月亮
+: 地球的天然卫星，通过反射太阳光可见
+
+## 引用块
+
+> 这行显示*引用块*。
+
+## 提示框
+
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
+> 这是一个显示`tip`类型提示的例子。
+{.prompt-tip }
+
+> 这是一个显示`info`类型提示的例子。
+{.prompt-info }
+
+> 这是一个显示`warning`类型提示的例子。
+{.prompt-warning }
+
+> 这是一个显示`danger`类型提示的例子。
+{.prompt-danger }
+<!-- markdownlint-restore -->
+
+## 表格
+
+| 公司                          | 联系人          | 国家 |
+| :--------------------------- | :--------------- | ------: |
+| Alfreds Futterkiste          | Maria Anders     | 德国 |
+| Island Trading               | Helen Bennett    | 英国 |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli | 意大利 |
+
+## 链接
+
+<http://127.0.0.1:4000>
+
+## 脚注
+
+点击钩子将定位到脚注[^footnote]，这里是另一个脚注[^fn-nth-2]。
+
+## 内联代码
+
+这是`内联代码`的一个例子。
+
+## 文件路径
+
+这里是 {{< markdown/filepath src="/path/to/the/file.extend" >}}。
+
+## 代码块
+
+### 通用
+
+```text
+这是一个通用代码片段，没有语法高亮和行号。
+```
+
+### 特定语言
+
+```bash
+if [ $? -ne 0 ]; then
+  echo "命令执行不成功。";
+  #执行必要操作 / 退出
+fi;
+```
+
+### 特定文件名
+
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography";
+```
+{: file='_sass/jekyll-theme-chirpy.scss'}
+
+## 数学公式
+
+数学公式由[**MathJax**](https://www.mathjax.org/)提供支持：
+
+$$
+\begin{equation}
+  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
+  \label{eq:series}
+\end{equation}
+$$
+
+我们可以引用公式如\eqref{eq:series}。
+
+当$a \ne 0$时，$ax^2 + bx + c = 0$有两个解，它们是
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  为mermaid添加甘特图功能
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## 图片
+
+### 默认（带标题）
+
+![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" }
+_全屏宽度和居中对齐_
+
+### 左对齐
+
+![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### 向左浮动
+
+![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+这是一段文本示例，用于演示图片向左浮动时的效果。在这种情况下，文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用，特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术，可以有效利用空间并增强内容的可读性。
+
+### 向右浮动
+
+![桌面视图](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+这是一段文本示例，用于演示图片向右浮动时的效果。在这种情况下，文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人，并引导读者的视线在页面上流畅移动。记住，浮动元素需要适当的空间才能发挥最佳效果。
+
+### 暗/亮模式 & 阴影
+
+下面的图片将根据主题偏好切换暗/亮模式，注意它有阴影效果。
+
+![仅亮模式](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![仅暗模式](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## 视频
+
+{{< embed/youtube id="Balreaj8Yqs" >}}
+
+## 反向脚注
+
+[^footnote]: 脚注源
+[^fn-nth-2]: 第二个脚注源 
--- a/content/post/2019-08-08-write-a-new-post/index.en.md
+++ b/content/post/2019-08-08-write-a-new-post/index.en.md
--- a/content/post/2019-08-08-write-a-new-post/index.zh.md
+++ b/content/post/2019-08-08-write-a-new-post/index.zh.md
@@ -0,0 +1,251 @@
+---
+title: 撰写新文章
+date: 2019-08-08 14:10:00 +0800
+description: >-
+  文本、排版、数学公式、图表、流程图、图片、视频等示例。
+categories:
+  - 博客
+  - 教程
+tags:
+  - 写作
+pin: True
+---
+
+本教程将指导您如何在 _Chirpy_ 模板中撰写文章，即使您以前使用过Jekyll，也值得阅读，因为许多功能需要设置特定变量。
+
+## 命名和路径
+
+创建一个名为 `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} 的新文件，并将其放在根目录的 `_posts`{: .filepath} 中。请注意，`EXTENSION`{: .filepath} 必须是 `md`{: .filepath} 和 `markdown`{: .filepath} 之一。如果您想节省创建文件的时间，请考虑使用插件 [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) 来完成此操作。
+
+## 前言
+
+基本上，您需要在文章顶部填写[前言](https://jekyllrb.com/docs/front-matter/)，如下所示：
+
+```yaml
+---
+title: 标题
+date: YYYY-MM-DD HH:MM:SS +/-TTTT
+categories: [主分类, 子分类]
+tags: [标签]     # 标签名称应始终为小写
+---
+```
+
+> 文章的_布局_默认已设置为`post`，因此无需在前言块中添加变量_layout_。
+{: .prompt-tip }
+
+### 日期的时区
+
+为了准确记录文章的发布日期，您不仅应该设置 `_config.yml`{: .filepath} 的 `timezone`，还应在其前言块的 `date` 变量中提供文章的时区。格式：`+/-TTTT`，例如 `+0800`。
+
+### 分类和标签
+
+每篇文章的 `categories` 设计为最多包含两个元素，而 `tags` 中的元素数量可以从零到无穷大。例如：
+
+```yaml
+---
+categories: [动物, 昆虫]
+tags: [蜜蜂]
+---
+```
+
+### 作者信息
+
+文章的作者信息通常不需要在 _前言_ 中填写，默认情况下，它们将从配置文件的 `social.name` 和 `social.links` 的第一个条目中获取。但您也可以按如下方式覆盖它：
+
+在 `_data/authors.yml` 中添加作者信息（如果您的网站没有此文件，请创建一个）。
+
+```yaml
+<作者ID>:
+  name: <全名>
+  twitter: <作者的推特>
+  url: <作者的主页>
+```
+{: file="_data/authors.yml" }
+
+然后使用 `author` 指定单个条目或 `authors` 指定多个条目：
+
+```yaml
+---
+author: <作者ID>                     # 单个条目
+# 或
+authors: [<作者1ID>, <作者2ID>]   # 多个条目
+---
+```
+
+话虽如此，键 `author` 也可以识别多个条目。
+
+> 从文件 `_data/authors.yml`{: .filepath } 读取作者信息的好处是页面将有元标签 `twitter:creator`，这丰富了 [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) 并有利于SEO。
+{: .prompt-info }
+
+### 文章描述
+
+默认情况下，文章的第一句话用于在首页的文章列表、_进一步阅读_ 部分以及RSS源的XML中显示。如果您不想为文章显示自动生成的描述，可以使用 _前言_ 中的 `description` 字段自定义它，如下所示：
+
+```yaml
+---
+description: 文章的简短摘要。
+---
+```
+
+此外，`description` 文本也将显示在文章页面的文章标题下方。
+
+## 目录
+
+默认情况下，目录（TOC）显示在文章的右侧面板上。如果您想全局关闭它，请转到 `_config.yml`{: .filepath} 并将变量 `toc` 的值设置为 `false`。如果您想为特定文章关闭TOC，请将以下内容添加到文章的[前言](https://jekyllrb.com/docs/front-matter/)中：
+
+```yaml
+---
+toc: false
+---
+```
+
+## 评论
+
+评论的全局设置由 `_config.yml`{: .filepath} 文件中的 `comments.provider` 选项定义。一旦为此变量选择了评论系统，所有文章将启用评论。
+
+如果您想关闭特定文章的评论，请将以下内容添加到文章的**前言**中：
+
+```yaml
+---
+comments: false
+---
+```
+
+## 媒体
+
+在 _Chirpy_ 中，我们将图片、音频和视频称为媒体资源。
+
+### URL前缀
+
+有时，我们必须为一篇文章中的多个资源定义重复的URL前缀，这是一项可以通过设置两个参数来避免的繁琐任务。
+
+- 如果您使用CDN托管媒体文件，可以在 `_config.yml`{: .filepath } 中指定 `cdn`。然后，站点头像和文章的媒体资源的URL将以CDN域名为前缀。
+
+  ```yaml
+  cdn: https://cdn.com
+  ```
+  {: file='_config.yml' .nolineno }
+
+- 要为当前文章/页面范围指定资源路径前缀，请在文章的 _前言_ 中设置 `media_subpath`：
+
+  ```yaml
+  ---
+  media_subpath: /path/to/media/
+  ---
+  ```
+  {: .nolineno }
+
+选项 `site.cdn` 和 `page.media_subpath` 可以单独使用或组合使用，以灵活组合最终的资源URL：`[site.cdn/][page.media_subpath/]file.ext`
+
+### 图片
+
+#### 标题
+
+在图片的下一行添加斜体，然后它将成为标题并显示在图片底部：
+
+```markdown
+![图片描述](/path/to/image)
+_图片标题_
+```
+{: .nolineno}
+
+#### 尺寸
+
+为防止图片加载时页面内容布局发生偏移，我们应该为每张图片设置宽度和高度。
+
+```markdown
+![桌面视图](/assets/img/sample/mockup.png){: width="700" height="400" }
+```
+{: .nolineno}
+
+> 对于SVG，您至少必须指定其 _宽度_，否则它不会被渲染。
+{: .prompt-info }
+
+从 _Chirpy v5.0.0_ 开始，`height` 和 `width` 支持缩写（`height` → `h`，`width` → `w`）。以下示例与上述效果相同：
+
+```markdown
+![桌面视图](/assets/img/sample/mockup.png){: w="700" h="400" }
+```
+{: .nolineno}
+
+#### 位置
+
+默认情况下，图片居中，但您可以使用 `normal`、`left` 和 `right` 类之一指定位置。
+
+> 一旦指定了位置，就不应添加图片标题。
+{: .prompt-warning }
+
+- **普通位置**
+
+  在下面的示例中，图片将左对齐：
+
+  ```markdown
+  ![桌面视图](/assets/img/sample/mockup.png){: .normal }
+  ```
+  {: .nolineno}
+
+- **向左浮动**
+
+  ```markdown
+  ![桌面视图](/assets/img/sample/mockup.png){: .left }
+  ```
+  {: .nolineno}
+
+- **向右浮动**
+
+  ```markdown
+  ![桌面视图](/assets/img/sample/mockup.png){: .right }
+  ```
+  {: .nolineno}
+
+#### 暗/亮模式
+
+您可以使图片跟随暗/亮模式的主题偏好。这需要您准备两张图片，一张用于暗模式，一张用于亮模式，然后为它们分配特定的类（`dark` 或 `light`）：
+
+```markdown
+![仅亮模式](/path/to/light-mode.png){: .light }
+![仅暗模式](/path/to/dark-mode.png){: .dark }
+```
+
+#### 阴影
+
+程序窗口的截图可以考虑显示阴影效果：
+
+```markdown
+![桌面视图](/assets/img/sample/mockup.png){: .shadow }
+```
+{: .nolineno}
+
+#### 预览图片
+
+如果您想在文章顶部添加图片，请提供分辨率为 `1200 x 630` 的图片。请注意，如果图片的宽高比不符合 `1.91 : 1`，图片将被缩放和裁剪。
+
+了解这些先决条件后，您可以开始设置图片的属性：
+
+```yaml
+---
+image:
+  path: /path/to/image
+  alt: 图片替代文本
+---
+```
+
+请注意，[`media_subpath`](#url前缀) 也可以传递给预览图片，也就是说，当它已经设置好时，属性 `path` 只需要图片文件名。
+
+为了简单使用，您也可以只使用 `image` 来定义路径。
+
+```yml
+---
+image: /path/to/image
+---
+```
+
+#### LQIP
+
+对于预览图片：
+
+```yaml
+---
+image:
+  lqip: /path/to/lqip-file # 或base64 URI
+``` 
--- a/content/post/2019-08-09-getting-started/index.en.md
+++ b/content/post/2019-08-09-getting-started/index.en.md
--- a/content/post/2019-08-09-getting-started/index.zh.md
+++ b/content/post/2019-08-09-getting-started/index.zh.md
@@ -0,0 +1,151 @@
+---
+title: 开始使用
+date: 2019-08-09 20:55:00 +0800
+draft: false
+description: >-
+  通过这个全面概述开始学习Chirpy的基础知识。
+  您将学习如何安装、配置和使用您的第一个基于Chirpy的网站，以及如何将其部署到网络服务器。
+categories:
+  - 博客
+  - 教程
+tags:
+  - 入门指南
+pin: true
+---
+
+## 创建站点仓库
+
+创建站点仓库时，根据您的需求有两种选择：
+
+### 选项1. 使用起始模板（推荐）
+
+这种方法简化了升级过程，隔离了不必要的文件，非常适合那些想专注于写作而不需要太多配置的用户。
+
+1. 登录GitHub并导航到[**起始模板**][starter]。
+2. 点击<kbd>Use this template</kbd>按钮，然后选择<kbd>Create a new repository</kbd>。
+3. 将新仓库命名为`<username>.github.io`，其中`username`替换为您的小写GitHub用户名。
+
+### 选项2. 复刻主题
+
+这种方法便于修改功能或UI设计，但在升级时会遇到挑战。除非您熟悉Jekyll并计划对此主题进行大量修改，否则不要尝试这种方法。
+
+1. 登录GitHub。
+2. [复刻主题仓库](https://github.com/cotes2020/jekyll-theme-chirpy/fork)。
+3. 将新仓库命名为`<username>.github.io`，其中`username`替换为您的小写GitHub用户名。
+
+## 设置环境
+
+创建仓库后，是时候设置您的开发环境了。主要有两种方法：
+
+### 使用开发容器（Windows系统推荐）
+
+开发容器使用Docker提供隔离环境，这可以防止与您的系统冲突，并确保所有依赖项都在容器内管理。
+
+**步骤**:
+
+1. 安装Docker：
+   - 在Windows/macOS上，安装[Docker Desktop][docker-desktop]。
+   - 在Linux上，安装[Docker Engine][docker-engine]。
+2. 安装[VS Code][vscode]和[Dev Containers扩展][dev-containers]。
+3. 克隆您的仓库：
+   - 对于Docker Desktop：启动VS Code并[在容器卷中克隆您的仓库][dc-clone-in-vol]。
+   - 对于Docker Engine：在本地克隆您的仓库，然后通过VS Code[在容器中打开它][dc-open-in-container]。
+4. 等待开发容器设置完成。
+
+### 本地设置（类Unix操作系统推荐）
+
+对于类Unix系统，您可以本地设置环境以获得最佳性能，不过您也可以使用开发容器作为替代方案。
+
+**步骤**:
+
+1. 按照[Jekyll安装指南](https://jekyllrb.com/docs/installation/)安装Jekyll，并确保已安装[Git](https://git-scm.com/)。
+2. 将您的仓库克隆到本地机器。
+3. 如果您复刻了主题，安装[Node.js][nodejs]并在根目录中运行`bash tools/init.sh`来初始化仓库。
+4. 在仓库根目录中运行命令`bundle`来安装依赖项。
+
+## 使用方法
+
+### 启动Jekyll服务器
+
+要在本地运行站点，请使用以下命令：
+
+```terminal
+$ bundle exec jekyll serve
+```
+
+> 如果您使用的是开发容器，必须在**VS Code**终端中运行该命令。
+{: .prompt-info }
+
+几秒钟后，本地服务器将在<http://127.0.0.1:4000>上可用。
+
+### 配置
+
+根据需要更新`_config.yml`{: .filepath}中的变量。一些典型选项包括：
+
+- `url`
+- `avatar`
+- `timezone`
+- `lang`
+
+### 社交联系选项
+
+社交联系选项显示在侧边栏底部。您可以在`_data/contact.yml`{: .filepath}文件中启用或禁用特定联系方式。
+
+### 自定义样式表
+
+要自定义样式表，请将主题的`assets/css/jekyll-theme-chirpy.scss`{: .filepath}文件复制到Jekyll站点的相同路径中，并在文件末尾添加您的自定义样式。
+
+### 自定义静态资源
+
+静态资源配置在版本`5.1.0`中引入。静态资源的CDN在`_data/origin/cors.yml`{: .filepath}中定义。您可以根据您的网站发布地区的网络状况替换其中一些。
+
+如果您更喜欢自托管静态资源，请参考[_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme)仓库。
+
+## 部署
+
+部署前，检查`_config.yml`{: .filepath}文件并确保正确配置了`url`。如果您更喜欢[**项目站点**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites)且不使用自定义域名，或者您想通过GitHub Pages以外的Web服务器上的基本URL访问您的网站，请记得将`baseurl`设置为项目名称，以斜杠开头，例如`/project-name`。
+
+现在您可以选择以下方法之一来部署您的Jekyll站点。
+
+### 使用Github Actions部署
+
+准备以下内容：
+
+- 如果您使用的是GitHub免费计划，请保持站点仓库公开。
+- 如果您已将`Gemfile.lock`{: .filepath}提交到仓库，并且您的本地机器不是运行Linux，请更新锁定文件的平台列表：
+
+  ```console
+  $ bundle lock --add-platform x86_64-linux
+  ```
+
+接下来，配置_Pages_服务：
+
+1. 在GitHub上进入您的仓库。选择_Settings_标签，然后点击左侧导航栏中的_Pages_。在**Source**部分（_Build and deployment_下），从下拉菜单中选择[**GitHub Actions**][pages-workflow-src]。
+   ![构建源](pages-source-light.png){: .light .border .normal w='375' h='140' }
+   ![构建源](pages-source-dark.png){: .dark .normal w='375' h='140' }
+
+2. 将任何提交推送到GitHub以触发_Actions_工作流。在仓库的_Actions_标签中，您应该看到正在运行的_Build and Deploy_工作流。一旦构建完成并成功，站点将自动部署。
+
+现在您可以访问GitHub提供的URL来访问您的站点。
+
+### 手动构建和部署
+
+对于自托管服务器，您需要在本地机器上构建站点，然后将站点文件上传到服务器。
+
+导航到源项目的根目录，并使用以下命令构建您的站点：
+
+```console
+$ JEKYLL_ENV=production bundle exec jekyll b
+```
+
+除非您指定了输出路径，否则生成的站点文件将放置在项目根目录的`_site`{: .filepath}文件夹中。将这些文件上传到您的目标服务器。
+
+[nodejs]: https://nodejs.org/
+[starter]: https://github.com/cotes2020/chirpy-starter
+[pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
+[docker-desktop]: https://www.docker.com/products/docker-desktop/
+[docker-engine]: https://docs.docker.com/engine/install/
+[vscode]: https://code.visualstudio.com/
+[dev-containers]: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
+[dc-clone-in-vol]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume
+[dc-open-in-container]: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container 
--- a/content/post/2019-08-11-customize-the-favicon/index.en.md
+++ b/content/post/2019-08-11-customize-the-favicon/index.en.md
--- a/content/post/2019-08-11-customize-the-favicon/index.zh.md
+++ b/content/post/2019-08-11-customize-the-favicon/index.zh.md
@@ -0,0 +1,43 @@
+---
+title: 自定义网站图标
+date: 2019-08-11 00:34:00 +0800
+description: >-
+  通过这个全面概述开始学习Chirpy的基础知识。
+  您将学习如何安装、配置和使用您的第一个基于Chirpy的网站，以及如何将其部署到网络服务器。
+categories:
+  - 博客
+  - 教程
+tags:
+  - 网站图标
+pin: true
+---
+
+[**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/)的[网站图标](https://www.favicon-generator.org/about/)放置在`assets/img/favicons/`{: .filepath}目录中。您可能想用自己的图标替换它们。以下部分将指导您创建和替换默认网站图标。
+
+## 生成网站图标
+
+准备一张尺寸为512x512或更大的正方形图像（PNG、JPG或SVG），然后前往在线工具[**Real Favicon Generator**](https://realfavicongenerator.net/)，点击<kbd>Select your Favicon image</kbd>按钮上传您的图像文件。
+
+在下一步中，网页将显示所有使用场景。您可以保留默认选项，滚动到页面底部，点击<kbd>Generate your Favicons and HTML code</kbd>按钮生成网站图标。
+
+## 下载与替换
+
+下载生成的包，解压并从提取的文件中删除以下两个文件：
+
+- {{< markdown/filepath src="browserconfig.xml" >}}
+- {{< markdown/filepath src="site.webmanifest" >}}
+
+然后将剩余的图像文件（{{< markdown/filepath src=".PNG" >}}和{{< markdown/filepath src=".ICO" >}}）复制到您的Jekyll站点的{{< markdown/filepath src="assets/img/favicons/" >}}目录中，覆盖原始文件。如果您的Jekyll站点还没有这个目录，只需创建一个。
+
+下表将帮助您理解网站图标文件的变化：
+
+| 文件             | 来自在线工具                  | 来自Chirpy |
+|---------------------|:---------------------------------:|:-----------:|
+| `*.PNG`             | ✓                                 | ✗           |
+| `*.ICO`             | ✓                                 | ✗           |
+
+<!-- markdownlint-disable-next-line -->
+>  ✓ 表示保留，✗ 表示删除。
+{.prompt-info }
+
+下次构建站点时，网站图标将被自定义版本替换。 
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,8 +1,21 @@
 baseURL = 'https://example.org/'
-languageCode = 'en-us'
 title = 'Chirpy'
 enableGitInfo = true

+defaultContentLanguage = "en"
+defaultContentLanguageInSubdir = false
+
+[languages]
+  [languages.zh]
+    languageName = "中文"
+    languageCode = "zh-CN"
+    weight = 1
+
+  [languages.en]
+    languageName = "English"
+    languageCode = "en"
+    weight = 2
+
 [pagination]
  pagerSize = 5

@@ -36,36 +49,66 @@ enableGitInfo = true
 [[module.imports]]
 path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"

-[[menu.main]]
+[[languages.en.menu.main]]
  name = "Home"
  url = "/"
  weight = 10
  pre = "fa-house"

-[[menu.main]]
+[[languages.en.menu.main]]
  name = "Categories"
  url = "/categories/"
  weight = 20
  pre = "fa-stream"

-[[menu.main]]
+[[languages.en.menu.main]]
  name = "Tags"
  url = "/tags/"
  weight = 30
  pre = "fa-tags"

-[[menu.main]]
+[[languages.en.menu.main]]
  name = "Archives"
  url = "/archives/"
  weight = 40
  pre = "fa-archive"

-[[menu.main]]
+[[languages.en.menu.main]]
  name = "About"
  url = "/about/"
  weight = 50
  pre = "fa-info-circle"

+[[languages.zh.menu.main]]
+  name = "主页"
+  url = "/"
+  weight = 10
+  pre = "fa-house"
+
+[[languages.zh.menu.main]]
+  name = "分类"
+  url = "/categories/"
+  weight = 20
+  pre = "fa-stream"
+
+[[languages.zh.menu.main]]
+  name = "标签"
+  url = "/tags/"
+  weight = 30
+  pre = "fa-tags"
+
+[[languages.zh.menu.main]]
+  name = "归档"
+  url = "/archives/"
+  weight = 40
+  pre = "fa-archive"
+
+[[languages.zh.menu.main]]
+  name = "关于"
+  url = "/about/"
+  weight = 50
+  pre = "fa-info-circle"
+
 [params]
  theme_version = "5.2.0"
  toc = true
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -48,11 +48,8 @@
          {{ if .Params.image }}
            {{ $src := .Params.image.path | default .Params.image }}
            {{ if not (findRE "//" $src) }}
-              {{ $media_subpath := .Params.media_subpath | default "" }}
-              {{ $src = path.Join $media_subpath $src }}
-              
-              {{ $page_path := path.Dir .RelPermalink }}
-              {{ $src = path.Join $page_path $src }}
+              {{ $src = .Resources.GetMatch ( .Params.image.path | default .Params.image ) }}
+              {{ $src = $src.RelPermalink }}
            {{ end }}

            {{ $alt := .Params.image.alt | default "Preview Image" | htmlEscape }}
--- a/layouts/partials/language-selector.html
+++ b/layouts/partials/language-selector.html
@@ -0,0 +1,10 @@
+<div class="language-selector">
+  <select class="language-dropdown" onchange="location = this.value;">
+    {{ $currentLang := .Site.Language.Lang }}
+    {{ range .Site.Languages }}
+      <option value="/{{ .Lang }}/" {{ if eq .Lang $currentLang }}selected{{ end }}>
+        {{ .LanguageName }} ({{ .Lang }})
+      </option>
+    {{ end }}
+  </select>
+</div>
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,7 +1,7 @@
 <!-- The Side Bar -->
 <aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
    <header class="profile-wrapper">
-      <a href="{{ "/" | relURL }}" id="avatar" class="rounded-circle">
+      <a href="{{ .Site.Home.RelPermalink }}" id="avatar" class="rounded-circle">
        {{- if .Site.Params.avatar -}}
          {{- $avatar := resources.Get .Site.Params.avatar -}}
          {{- if $avatar -}}
@@ -12,7 +12,7 @@
        {{- end -}}
      </a>
  
-      <a class="site-title d-block" href="{{ "/" | relURL }}">{{ .Site.Title }}</a>
+      <a class="site-title d-block" href="{{ .Site.Home.RelPermalink }}">{{ .Site.Title }}</a>
      {{ if .Site.Params.tagline }}
        <p class="site-subtitle fst-italic mb-0">{{ .Site.Params.tagline }}</p>
      {{ end }}
@@ -22,14 +22,24 @@
    <nav class="flex-column flex-grow-1 w-100 ps-0">
      <ul class="nav">
        {{ range .Site.Menus.main }}
-          <li class="nav-item{{ if eq .URL $.RelPermalink }} active{{ end }}">
-            <a href="{{ .URL | relURL }}" class="nav-link">
+          {{ $active := false }}
+          {{ if eq ($.Site.GetPage .URL).RelPermalink $.RelPermalink }}
+            {{ $active = true }}
+          {{ end }}
+          <li class="nav-item{{ if $active }} active{{ end }}">
+            <a href="{{ .URL | relLangURL }}" class="nav-link">
              <i class="fa-fw fas {{ .Pre }}"></i>
-              <span>{{ (i18n (printf "tabs.%s" .Identifier) | default .Name) | upper }}</span>
+              <span>{{ .Name | upper }}</span>
            </a>
          </li>
          <!-- .nav-item -->
        {{ end }}
+        <li class="nav-item">
+          <a class="nav-link">
+            <i class="fa-fw fas fa-language"></i>
+            {{ partial "language-selector.html" . }}
+          </a>
+        </li>
      </ul>
    </nav>

@@ -56,7 +66,7 @@
          {{ $emailParts := split .id "@" }}
          {{ $url = printf "javascript:location.href = 'mailto:' + ['%s','%s'].join('@')" (index $emailParts 0) (index $emailParts 1) }}
        {{ else if eq .type "rss" }}
-          {{ $url = "index.xml" | relURL }}
+          {{ $url = "index.xml" | relLangURL }}
        {{ else }}
          {{ $url = .url }}
        {{ end }}
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -1,6 +1,7 @@
 {{ define "main" }}
  {{ $enable_toc := and (.Params.toc | default site.Params.toc) (gt (len .TableOfContents) 100) }}
  {{ $lang := .Site.Language.Lang }}
+  {{ $page := . }}

  <article class="px-1" data-toc="{{ $enable_toc }}">
    <header>
@@ -25,7 +26,8 @@
        {{ end }}

        {{ with .Params.image }}
-          {{ $src := printf "src=\"%s\"" ( .path | default . ) }}
+          {{ $src := $page.Resources.GetMatch ( .path | default . ) }}
+          {{ $src = printf "src=\"%s\"" $src.RelPermalink }}
          {{ $class := "class=\"preview-img" }}
          {{ if .no_bg }}{{ $class = printf "%s no-bg\"" $class }}{{ else }}{{ $class = printf "%s\"" $class }}{{ end }}
          {{ $alt := printf "alt=\"%s\"" ( .alt | default "Preview Image" ) }}