mirror of https://github.com/YunYouJun/valaxy
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:
parent
4f9468f3ed
commit
af0c541c49
|
@ -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'
|
||||
|
|
|
@ -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
|
||||
:::
|
||||
|
|
|
@ -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).
|
||||
|
|
|
@ -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
|
||||
:::
|
||||
|
|
Loading…
Reference in New Issue