i18n: Add some zh-cn translation of exampleSite(docs) (#12)

---------

Co-authored-by: Xin <xin@imfing.com>
This commit is contained in:
纳兰音韵
2023-08-31 04:21:31 +08:00
committed by GitHub
parent 392c6f8dde
commit e1a2109a68
16 changed files with 859 additions and 0 deletions

View File

@ -0,0 +1,15 @@
---
linkTitle: 高级配置
title: 高级配置
prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language
---
此部分提供了 Hextra 的一些高级配置.
<!--more-->
{{< cards >}}
{{< card link="multi-language" title="多语言" icon="translate" >}}
{{< card link="customization" title="定制化" icon="pencil" >}}
{{< /cards >}}

View File

@ -0,0 +1,58 @@
---
title: 自定义 Hextra
linkTitle: 自定义
---
Hextra 在 `hugo.yaml` 中提供了一些自定义选项来配置主题.
本页介绍了可用选项以及如何进一步自定义主题.
<!--more-->
## 自定义 CSS
要添加自定义 CSS我们需要在站点中创建一个文件 `assets/css/custom.css`. Hextra 将自动加载该文件, 比如自定义字体:
```css {filename="assets/css/custom.css"}
.content {
font-family: "Times New Roman", Times, serif;
}
```
### 主题色
主题色可以通过设置 `--primary-hue` 变量来自定义:
```css {filename="assets/css/custom.css"}
:root {
--primary-hue: 100deg;
}
```
### 代码高亮
代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到. 可以使用以下命令生成样式表:
```bash
$ hugo gen chromastyles --style=github
```
可将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式.
## 自定义 Script
你可以添加以下文件以自定义 `script` 添加到每页的 `head` 或 `end`.
```
layouts/partials/custom/head-end.html
```
## 自定义布局
可以在站点的 `layouts` 目录中创建同名文件来覆盖主题的默认布局.
例如,要覆盖文档的 `single.html` 布局,在站点中创建文件 `layouts/docs/single.html`.
如需或许更多信息, 转至 [Hugo Templates](https://gohugo.io/templates/).
## 进一步定制 Hextra
没有找到你想修改的东西?在 GitHub 上[创建 Issues](https://github.com/imfing/hextra/issues) 或为 Hextra 贡献你的智慧!

View File

@ -0,0 +1,74 @@
---
title: "多语言"
weight: 1
prev: /docs/advanced
---
Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/) 创建多语言的网站.
<!--more-->
## 启用多语言支持
为了使我们的网站支持多语言,我们需要告诉 Hugo 需要支持的语言. 在站点配置文件中添加:
```yaml {filename="hugo.yaml"}
defaultContentLanguage: en
languages:
en:
languageName: English
weight: 1
fr:
languageName: Français
weight: 2
ja:
languageName: 日本語
weight: 3
```
## 按文件名管理翻译
Hugo 支持按文件名管理翻译. 例如, 如果我们有一个英文文件 `content/docs/_index.md`, 我们可以创建一个翻译为法语的文件 `content/docs/_index.fr.md`.
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="_index.fr.md" >}}
{{< filetree/file name="_index.ja.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
注意Hugo 还支持[按内容目录管理翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory).
## 翻译菜单项
要翻译导航栏中的菜单项,我们需要设置 `identifier` 字段:
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: documentation
name: Documentation
pageRef: /docs
weight: 1
- identifier: blog
name: Blog
pageRef: /blog
weight: 2
```
## 翻译字符串
要翻译其他地方的字符串, 我们需要将翻译添加到相应的 i18n 文件中:
```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite
```
## 更多参考
- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)