From 9c9f002965841759b80421d92452a3d8561ca41f Mon Sep 17 00:00:00 2001 From: geekifan Date: Sun, 27 Apr 2025 16:17:45 +0800 Subject: [PATCH] add multilingual support --- content/_index.en.md | 0 content/_index.zh.md | 0 content/about/index.zh.md | 8 + .../archives/{index.html => index.en.html} | 0 content/archives/index.zh.html | 6 + .../{index.md => index.en.md} | 0 .../index.zh.md | 199 ++++++++++++++ .../{index.md => index.en.md} | 0 .../2019-08-08-write-a-new-post/index.zh.md | 251 ++++++++++++++++++ .../{index.md => index.en.md} | 0 .../2019-08-09-getting-started/index.zh.md | 151 +++++++++++ .../{index.md => index.en.md} | 0 .../index.zh.md | 43 +++ hugo.toml | 55 +++- layouts/index.html | 7 +- layouts/partials/language-selector.html | 10 + layouts/partials/sidebar.html | 22 +- layouts/post/single.html | 4 +- 18 files changed, 738 insertions(+), 18 deletions(-) create mode 100644 content/_index.en.md create mode 100644 content/_index.zh.md create mode 100644 content/about/index.zh.md rename content/archives/{index.html => index.en.html} (100%) create mode 100644 content/archives/index.zh.html rename content/post/2019-08-08-text-and-typography/{index.md => index.en.md} (100%) create mode 100644 content/post/2019-08-08-text-and-typography/index.zh.md rename content/post/2019-08-08-write-a-new-post/{index.md => index.en.md} (100%) create mode 100644 content/post/2019-08-08-write-a-new-post/index.zh.md rename content/post/2019-08-09-getting-started/{index.md => index.en.md} (100%) create mode 100644 content/post/2019-08-09-getting-started/index.zh.md rename content/post/2019-08-11-customize-the-favicon/{index.md => index.en.md} (100%) create mode 100644 content/post/2019-08-11-customize-the-favicon/index.zh.md create mode 100644 layouts/partials/language-selector.html diff --git a/content/_index.en.md b/content/_index.en.md new file mode 100644 index 0000000..e69de29 diff --git a/content/_index.zh.md b/content/_index.zh.md new file mode 100644 index 0000000..e69de29 diff --git a/content/about/index.zh.md b/content/about/index.zh.md new file mode 100644 index 0000000..deb009a --- /dev/null +++ b/content/about/index.zh.md @@ -0,0 +1,8 @@ +--- +title: "关于我们" +date: 2023-04-20 +draft: false +layout: page +--- + +# About Us diff --git a/content/archives/index.html b/content/archives/index.en.html similarity index 100% rename from content/archives/index.html rename to content/archives/index.en.html diff --git a/content/archives/index.zh.html b/content/archives/index.zh.html new file mode 100644 index 0000000..20db446 --- /dev/null +++ b/content/archives/index.zh.html @@ -0,0 +1,6 @@ +--- +title: "归档" +date: 2023-04-20 +draft: false +layout: archives +--- \ No newline at end of file diff --git a/content/post/2019-08-08-text-and-typography/index.md b/content/post/2019-08-08-text-and-typography/index.en.md similarity index 100% rename from content/post/2019-08-08-text-and-typography/index.md rename to content/post/2019-08-08-text-and-typography/index.en.md diff --git a/content/post/2019-08-08-text-and-typography/index.zh.md b/content/post/2019-08-08-text-and-typography/index.zh.md new file mode 100644 index 0000000..924ba7e --- /dev/null +++ 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主题在多个设备上的响应式渲染。 +--- + +## 标题 + + + +# 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 } + + +## 段落 + +这是一个段落示例。在这里，我们可以看到段落是如何在Markdown中呈现的。段落是由一个或多个连续的文本行组成，它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素，良好的排版可以提高可读性和美观度。 + +## 列表 + +### 有序列表 + +1. 第一点 +2. 第二点 +3. 第三点 + +### 无序列表 + +- 章节 + - 节 + - 段落 + +### 待办列表 + +- [ ] 任务 + - [x] 步骤 1 + - [x] 步骤 2 + - [ ] 步骤 3 + +### 描述列表 + +太阳 +: 地球绕其运行的恒星 + +月亮 +: 地球的天然卫星，通过反射太阳光可见 + +## 引用块 + +> 这行显示*引用块*。 + +## 提示框 + + + +> 这是一个显示`tip`类型提示的例子。 +{.prompt-tip } + +> 这是一个显示`info`类型提示的例子。 +{.prompt-info } + +> 这是一个显示`warning`类型提示的例子。 +{.prompt-warning } + +> 这是一个显示`danger`类型提示的例子。 +{.prompt-danger } + + +## 表格 + +| 公司 | 联系人 | 国家 | +| :--------------------------- | :--------------- | ------: | +| Alfreds Futterkiste | Maria Anders | 德国 | +| Island Trading | Helen Bennett | 英国 | +| Magazzini Alimentari Riuniti | Giovanni Rovelli | 意大利 | + +## 链接 + + + +## 脚注 + +点击钩子将定位到脚注[^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]: 第二个脚注源 \ No newline at end of file diff --git a/content/post/2019-08-08-write-a-new-post/index.md b/content/post/2019-08-08-write-a-new-post/index.en.md similarity index 100% rename from content/post/2019-08-08-write-a-new-post/index.md rename to content/post/2019-08-08-write-a-new-post/index.en.md diff --git 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 new file mode 100644 index 0000000..6e745a8 --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/content/post/2019-08-09-getting-started/index.md b/content/post/2019-08-09-getting-started/index.en.md similarity index 100% rename from content/post/2019-08-09-getting-started/index.md rename to content/post/2019-08-09-getting-started/index.en.md diff --git a/content/post/2019-08-09-getting-started/index.zh.md b/content/post/2019-08-09-getting-started/index.zh.md new file mode 100644 index 0000000..179b247 --- /dev/null +++ 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. 点击Use this template按钮，然后选择Create a new repository。 +3. 将新仓库命名为`.github.io`，其中`username`替换为您的小写GitHub用户名。 + +### 选项2. 复刻主题 + +这种方法便于修改功能或UI设计，但在升级时会遇到挑战。除非您熟悉Jekyll并计划对此主题进行大量修改，否则不要尝试这种方法。 + +1. 登录GitHub。 +2. [复刻主题仓库](https://github.com/cotes2020/jekyll-theme-chirpy/fork)。 +3. 将新仓库命名为`.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 } + +几秒钟后，本地服务器将在上可用。 + +### 配置 + +根据需要更新`_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 \ No newline at end of file diff --git a/content/post/2019-08-11-customize-the-favicon/index.md b/content/post/2019-08-11-customize-the-favicon/index.en.md similarity index 100% rename from content/post/2019-08-11-customize-the-favicon/index.md rename to content/post/2019-08-11-customize-the-favicon/index.en.md diff --git a/content/post/2019-08-11-customize-the-favicon/index.zh.md b/content/post/2019-08-11-customize-the-favicon/index.zh.md new file mode 100644 index 0000000..3800088 --- /dev/null +++ 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/)，点击Select your Favicon image按钮上传您的图像文件。 + +在下一步中，网页将显示所有使用场景。您可以保留默认选项，滚动到页面底部，点击Generate your Favicons and HTML code按钮生成网站图标。 + +## 下载与替换 + +下载生成的包，解压并从提取的文件中删除以下两个文件： + +- {{< 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` | ✓ | ✗ | + + +> ✓ 表示保留，✗ 表示删除。 +{.prompt-info } + +下次构建站点时，网站图标将被自定义版本替换。 \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 04c3474..f6094d1 100644 --- 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 diff --git a/layouts/index.html b/layouts/index.html index e75e36a..d28599c 100644 --- 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 }} diff --git a/layouts/partials/language-selector.html b/layouts/partials/language-selector.html new file mode 100644 index 0000000..27043c0 --- /dev/null +++ b/layouts/partials/language-selector.html @@ -0,0 +1,10 @@ +
+ +
\ No newline at end of file diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 564a4f7..d580103 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,7 +1,7 @@