add multilingual support

This commit is contained in:
geekifan
2025-04-27 16:17:45 +08:00
parent 1e0bb29742
commit 9c9f002965
18 changed files with 738 additions and 18 deletions

0
content/_index.en.md Normal file
View File

0
content/_index.zh.md Normal file
View File

View File

@ -0,0 +1,8 @@
---
title: "关于我们"
date: 2023-04-20
draft: false
layout: page
---
# About Us

View File

@ -0,0 +1,6 @@
---
title: "归档"
date: 2023-04-20
draft: false
layout: archives
---

View File

@ -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]: 第二个脚注源

View File

@ -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
```

View File

@ -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

View File

@ -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 }
下次构建站点时,网站图标将被自定义版本替换。