docs: en translation (#187)

* docs: update FAQ translation

* docs: update built-ins translation

* docs: update migration translation

* docs: update third-party translation

* docs: update third-party translation
This commit is contained in:
梦飞翔 2023-02-21 19:49:46 +08:00 committed by GitHub
parent 4f9468f3ed
commit af0c541c49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 266 additions and 17 deletions

View File

@ -6,8 +6,11 @@ categories:
end: false
---
## 改变构建形式
## 改变构建形式 {lang="zh-CN"}
## Change Generated Directory Style {lang="en"}
::: zh-CN
Valaxy 默认将 `xxx.md` 构建为 `/xxx.html`
如果您更希望默认构建为 `/xxx/index.html` 的形式。
@ -15,6 +18,15 @@ Valaxy 默认将 `xxx.md` 构建为 `/xxx.html`。
可以修改 `vite-ssg` 的配置。
在用户目录下的 `vite.config.ts` 中设置:
:::
::: en
Valaxy builds `xxx.md` as `/xxx.html` by default.
If you prefer to build them as `/xxx/index.html`, you can modify the configuration of `vite-ssg`.
Set it in `vite.config.ts` under the user directory as follows:
:::
```ts
import { defineConfig } from 'vite'

View File

@ -6,19 +6,48 @@ categories:
end: false
---
::: zh-CN
Valaxy 内置了几个简单的组件。
你可以在写文章或者创作主题时直接使用。
:::
## 基础组件
::: en
Valaxy has several simple components built in.
You can use them directly when writing articles or themes.
:::
## 基础组件 {lang="zh-CN"}
## Basic Components {lang="en"}
::: zh-CN
> 面向主题开发者,你通常不需要直接使用
- `ValaxyMain`: 页面基础布局
- `ValaxyMd`: Markdown 渲染内容
:::
## 辅助组件
::: en
> For theme developers, you usually don't need to use them directly.
- `ValaxyMain`: Basic page layout
- `ValaxyMd`: Rendered Markdown content
:::
## 辅助组件 {lang="zh-CN"}
## Helper Components {lang="en"}
::: zh-CN
> 面向用户,可直接使用
TODO
:::
::: en
> For users, can be used directly.
TODO
:::

View File

@ -7,16 +7,31 @@ end: false
top: 99
---
## 搜索
## 搜索 {lang="zh-CN"}
### 本地搜索(基于 fuse.js
## Search {lang="en"}
### 本地搜索(基于 fuse.js {lang="zh-CN"}
### Local Search (Based on fuse.js) {lang="en"}
::: zh-CN
Valaxy 内置了基于 [fuse.js](https://fusejs.io/) 的离线搜索(须预先通过 `valaxy fuse` 构建生成本地缓存)。
> `valaxy fuse` 默认将 `fuse` 生成在 `dist` 目录下,如果你想在本地预览效果,你可以将 `dist/fuse-list.json` 拷贝至 `public/` 文件夹下。
:::
#### 使用
::: en
Valaxy has built-in local search based on [fuse.js](https://fusejs.io/). The local cache should be generated in advance via `valaxy fuse`.
> `valaxy fuse` generates `fuse` in the `dist` directory by default. If you want to preview it locally, you can copy `dist/fuse-list.json` to `public` folder.
:::
#### 使用 {lang="zh-CN"}
#### Setup {lang="en"}
::: zh-CN
```ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
@ -30,6 +45,23 @@ export default defineSiteConfig({
```
- 在你的 `package.json` 中添加 fuse 生成脚本
:::
::: en
```ts
// site.config.ts
import { defineSiteConfig } from 'valaxy'
export default defineSiteConfig({
search: {
enable: true,
// Set type to 'fuse'
type: 'fuse',
},
})
```
- Add fuse generation script in your `package.json`
:::
```json {7,10}
{
@ -50,16 +82,31 @@ export default defineSiteConfig({
}
```
### Algolia 搜索
### Algolia 搜索 {lang="zh-CN"}
### Algolia DocSearch {lang="en"}
::: zh-CN
Algolia 是一个在线第三方搜索服务,您需要自行申请相关 ID 和 Secret。
> [DocSearch](https://docsearch.algolia.com/) 申请通常只接受技术文档。
Valaxy 提供了一个快速集成插件 [valaxy-addon-algolia](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-algolia)(目前仅支持 DocSearch
:::
## 图片预览Medium Zoom
::: en
Algolia is an online third-party search service. You need to apply for the `ID` and `Secret` by yourself.
> [DocSearch](https://docsearch.algolia.com/) Only technical document applications are accepted generally.
Valaxy provides a quick integration plug-in: [valaxy-addon-algolia](https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-algolia) (Currently only DocSearch is supported).
:::
## 图片预览Medium Zoom {lang="zh-CN"}
## Image Preview (Medium Zoom) {lang="en"}
::: zh-CN
Valaxy 内置了 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 进行图片预览,默认关闭。
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
@ -70,6 +117,18 @@ Valaxy 内置了 [medium-zoom](https://github.com/francoischalifour/medium-zoom)
- `options`: 与 [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options) 一致
譬如开启 Medium Zoom
:::
::: en
Valaxy has built-in [medium-zoom](https://github.com/francoischalifour/medium-zoom) to preview the pictures, which is disabled by default.
> [Medium Zoom Demo](https://medium-zoom.francoischalifour.com/)
- mediumZoom
- `enable`: Set to true to enable it
- `selector`: Custom CSS selector
- `options`: Refer to [options | medium-zoom](https://github.com/francoischalifour/medium-zoom#options)
:::
```ts
// site.config.ts
@ -80,7 +139,13 @@ export default defineSiteConfig({
})
```
::: zh-CN
除此之外,你也可以单独控制是否在某篇文章中开启。
:::
::: en
In addition, you can also enable it in a certain article independently.
:::
```md
---
@ -89,13 +154,25 @@ medium_zoom: true
---
```
## 音乐播放器
## 音乐播放器 {lang="zh-CN"}
## Music Player {lang="en"}
::: zh-CN
> 基于 [Aplayer](https://github.com/DIYgod/APlayer) 与 [MetingJS](https://github.com/metowolf/MetingJS) 实现
譬如在文章中引入网易云某首歌曲ID 为歌曲 ID
在文章头部添加:
:::
::: en
> Implementd based on [Aplayer](https://github.com/DIYgod/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
For example, add a song from Netease Cloud in a article:
Enable it in the FrontMatter of the article:
:::
```md
---
@ -103,7 +180,13 @@ aplayer: true
---
```
::: zh-CN
在文中引入:
:::
::: en
Add the component to the article:
:::
```html
<meting-js
@ -114,7 +197,13 @@ aplayer: true
</meting-js>
```
::: zh-CN
效果如下:
:::
::: en
Here is a demo:
:::
<meting-js
id="22736708"
@ -125,8 +214,11 @@ aplayer: true
> More info see [Option | MetingJS](https://github.com/metowolf/MetingJS#option)
## 谷歌统计
## 谷歌统计 {lang="zh-CN"}
## Google Statistics {lang="en"}
::: zh-CN
> 可参见 [扩展 Client 上下文|自定义扩展](/guide/custom/extend#%25E6%2589%25A9%25E5%25B1%2595-client-%25E4%25B8%258A%25E4%25B8%258B%25E6%2596%2587)
你可以通过直接使用 Vue 插件的方式引入谷歌统计。
@ -162,5 +254,44 @@ export const install: UserModule = ({ isClient, app, router }) => {
}
}
```
:::
::: en
> Refer to [Custom Extensions | Extending Client Context](/guide/custom/extend#extending-client-context)
You can add Google Statistics by using Vue plug-in directly.
For example:
- Install the dependency: `pnpm add vue-gtag-next`
- Create `setup/main.ts`
```ts
// setup/main.ts
import { defineAppSetup } from 'valaxy'
import { install as installGtag } from './gtag'
export default defineAppSetup((ctx) => {
installGtag(ctx)
})
```
- Create `setup/gtag.ts`
```ts
import VueGtag, { trackRouter } from 'vue-gtag-next'
import type { UserModule } from 'valaxy'
export const install: UserModule = ({ isClient, app, router }) => {
if (isClient) {
app.use(VueGtag, {
property: { id: 'G-1LL0D86CY9' },
})
trackRouter(router)
}
}
```
:::
More info see [vue-gtag-next](https://github.com/MatteoGabriele/vue-gtag-next).

View File

@ -6,10 +6,15 @@ categories:
end: true
---
## 迁移步骤
## 迁移步骤 {lang="zh-CN"}
### 迁移内容
## Migration Steps {lang="en"}
### 迁移内容 {lang="zh-CN"}
### Migrate Contents {lang="zh-CN"}
::: zh-CN
Hexo 博客目录与 Valaxy 博客目录对应关系如下,将相关内容复制至对应文件夹即可。
> 譬如**迁移文章**,即将 Hexo `source/_posts` 目录下内容复制至 Valaxy `pages/posts` 目录下。
@ -19,26 +24,71 @@ Hexo 博客目录与 Valaxy 博客目录对应关系如下,将相关内容复
|文章Markdown 文件)|`source/_posts`|`pages/posts`|
|页面Markdown / Html|`source`|`pages`|
|静态资源(`*.js` / `*.css` / `CNAME` etc.|`source`|`public`|
:::
### 迁移配置
::: en
The relationship between Hexo blog directory and Valaxy blog directory is shown in the table below. Just copy the relevant contents to the corresponding folder.
> For example: **To migrate articles**, just copy files from Hexo's `source/_posts` to Valaxy's `pages/posts` directory.
|Contents|Hexo|Valaxy|
|---|---|---|
|Posts (Markdown files)|`source/_posts`|`pages/posts`|
|Pages (Markdown / Html files)|`source`|`pages`|
|Static assets (`*.js` / `*.css` / `CNAME` etc.)|`source`|`public`|
:::
### 迁移配置 {lang="zh-CN"}
### Migrate Configurations {lang="en"}
::: zh-CN
参考 [Valaxy 配置文档](/guide/config) 将 Hexo `_config.yml` 配置文件中的内容,迁移至 `valaxy.config.ts` 文件中。
> 配置示例:[demo/yun/valaxy.config.ts](https://github.com/YunYouJun/valaxy/blob/main/demo/yun/valaxy.config.ts)、[yunyoujun.github.io/valaxy.config.ts](https://github.com/YunYouJun/yunyoujun.github.io/blob/valaxy/valaxy.config.ts)
> `valaxy.config.ts` 提供了完备的类型提示,这意味着你在 VSCode 中可以直接鼠标悬浮查看各参数注释。
:::
## 示例
::: en
Refer to [Valaxy Config](/guide/config) to migrate configurations from Hexo's `_config.yml` to Valaxy's `valaxy.config.ts`.
> Examples of configuration: [demo/yun/valaxy.config.ts](https://github.com/YunYouJun/valaxy/blob/main/demo/yun/valaxy.config.ts), [yunyoujun.github.io/valaxy.config.ts](https://github.com/YunYouJun/yunyoujun.github.io/blob/valaxy/valaxy.config.ts).
> `valaxy.config.ts` provides a complete type prompt, which means that you can hover on configuration fields directly to view the comments in VSCode.
:::
## 示例 {lang="zh-CN"}
## Example {lang="en"}
::: zh-CN
更复杂的迁移示例,您还可以对比 [yunyoujun.github.io | GitHub](https://github.com/YunYouJun/yunyoujun.github.io) 仓库 [hexo](https://github.com/YunYouJun/yunyoujun.github.io/tree/hexo) 分支与 [valaxy](https://github.com/YunYouJun/yunyoujun.github.io/tree/valaxy) 的异同。
:::
## 常见问题
::: en
For more complex migration examples, you can also compare [hexo branch](https://github.com/YunYouJun/yunyoujun.github.io/tree/hexo) and [valaxy branch](https://github.com/YunYouJun/yunyoujun.github.io/tree/valaxy) in [yunyoujun.github.io | GitHub](https://github.com/YunYouJun/yunyoujun.github.io) to see the similarities and differences.
:::
### 摘要截断符
## 常见问题 {lang="zh-CN"}
## Common Problems {lang="en"}
### 摘要截断符 {lang="zh-CN"}
### Read More Separator {lang="en"}
::: zh-CN
默认为 `<!-- more -->``more` 前后需有空格。
:::
### Markdown 换行
::: en
Default to `<-- More -->`, there are spaces before and after `more`.
:::
### Markdown 换行 {lang="zh-CN"}
### Newline in Markdown {lang="en"}
::: zh-CN
Valaxy 的 Markdown 解析基于 [`markdown-it`](https://github.com/markdown-it/markdown-it) 实现。
`markdown-it` 的策略在 Markdown 中换行后渲染的内容并没有换行:
@ -62,3 +112,30 @@ Valaxy 的 Markdown 解析基于 [`markdown-it`](https://github.com/markdown-it/
第一行(末尾有两个空格)
换行了
:::
::: en
Markdown rendering in Valaxy is based on [`markdown-it`](https://github.com/markdown-it/markdown-it).
The default strategy of `markdown-it` does not wrap the rendered content when wrapping in Markdown:
```md
first line
second line but not wrapped
```
first line
second line but not wrapped
---
If you want to move the second line to a new line, add two spaces at the end of the first line:
```md
first line (with two spaces at the end)
second line got wrapped corrently
```
first line (with two spaces at the end)
second line got wrapped corrently
:::