docs(translate)：translate getting-started.md into ZH (CN & TW) (#979)
* translate getting-started.md into ZH (CN & TW) * fix translate the title for getting-started.md * add zh CN & TW config in Docs * fix config "locale" * fix config.ts add route for CN & TW * fix installation.md Next Steps title 's level * translate quick-start.md & installation.md & examples.md into ZH (CN ) * Add lang variable to docs frontmatter for translations * Update docs/src/pages/zh-TW/getting-started.md Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz> Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
This commit is contained in:
Xinyuan Wang
GitHub
parent
c7aca2c9b2
commit
2bd178d4f9
9 changed files with 395 additions and 3 deletions
|
|
@ -55,6 +55,12 @@ const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => {
|
|||
<option value="fi">
|
||||
<span>Suomi</span>
|
||||
</option>
|
||||
<option value="zh-CN">
|
||||
<span>简体中文</span>
|
||||
</option>
|
||||
<option value="zh-TW">
|
||||
<span>繁体中文</span>
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -43,6 +43,17 @@ export const SIDEBAR = {
|
|||
{ text: 'Pika-aloitus', link: 'fi/quick-start' },
|
||||
{ text: 'Asennus', link: 'fi/installation' },
|
||||
],
|
||||
'zh-CN': [
|
||||
{ text: '起步', header: true },
|
||||
{ text: '入门指南', link: 'zh-CN/getting-started' },
|
||||
{ text: '快速入门', link: 'zh-CN/quick-start' },
|
||||
{ text: '安装指南', link: 'zh-CN/installation' },
|
||||
{ text: '模板样例', link: 'zh-CN/examples' },
|
||||
],
|
||||
'zh-TW': [
|
||||
{ text: '起步', header: true },
|
||||
{ text: '入門指南', link: 'zh-TW/getting-started' },
|
||||
],
|
||||
};
|
||||
|
||||
export const SITE = {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import Layout from '../layouts/MainLayout.astro';
|
|||
---
|
||||
|
||||
<script>
|
||||
// Redirect the user, based on their browser language.
|
||||
const KNOWN_LANGUAGES = ['en', 'nl', 'fi'];
|
||||
// This is some wip redirect code based on the browser language.
|
||||
// A vercel.json redirect is enforced in production, so no user should ever see this page.
|
||||
// Remove the vercel.json redirect when this is ready.
|
||||
const KNOWN_LANGUAGES = ['en', 'nl', 'fi','zh-CN','zh-TW'];
|
||||
let newLang = (window.navigator.userLanguage || window.navigator.language || 'en').substr(0, 2);
|
||||
if (newLang === 'en') {
|
||||
window.location.pathname = '/getting-started';
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ npm run build
|
|||
|
||||
This will instruct Astro to build your site and save it directly to disk. Your application is now ready in the `dist/` directory.
|
||||
|
||||
### Next Steps
|
||||
## Next Steps
|
||||
|
||||
Success! You're now ready to start developing!
|
||||
|
||||
|
|
|
|||
9
docs/src/pages/zh-CN/examples.md
Normal file
9
docs/src/pages/zh-CN/examples.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: 模板样例
|
||||
lang: zh-CN
|
||||
---
|
||||
|
||||
如果你喜欢通过实例来学习，请查看我们在GitHub上的[模板样例](https://github.com/snowpackjs/astro/tree/main/examples)
|
||||
|
||||
<!-- Once we merge astro-docs back into the main repo, we can actually fetch the list of examples at build-time by scanning the examples/ directory! -->
|
||||
62
docs/src/pages/zh-CN/getting-started.md
Normal file
62
docs/src/pages/zh-CN/getting-started.md
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: 入门指南
|
||||
lang: zh-CN
|
||||
---
|
||||
|
||||
Astro 是一个现代的静态网站生成工具. 你可以从 [我们的主页](https://astro.build/) 或者 [我们的 release 公告](https://astro.build/blog/introducing-astro) 中了解到 Astro 的全部内容,本页是 Astro 文档和所有相关资源的概述。
|
||||
|
||||
想快速了解一下什么是 Astro ? [浏览我们的主页](https://astro.build)
|
||||
|
||||
## 尝试一下 Astro
|
||||
|
||||
尝试 Astro 的最简单的方法是在新目录下运行 `npm init astro`。我们的 CLI 工具会帮助你创建启动一个新的 Astro 项目。
|
||||
|
||||
想要快速了解学习使用Astro， [快速入门](quick-start).
|
||||
|
||||
另外，请阅读我们的 [安装指南](/installation)，了解如何使用 Astro 进行安装的全部步骤。
|
||||
|
||||
### 在线游乐场
|
||||
|
||||
如果你有兴趣在浏览器中尝试 Astro，你可以使用一个在线代码游乐场。试试我们在 [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3) 上的 "Hello World！"模板。
|
||||
|
||||
注意：一些功能（例如：快速刷新）目前在 CodeSandbox 上是受限的。
|
||||
|
||||
## 学习 Astro
|
||||
|
||||
各种各样的人来自不同的背景，带来了不同的学习方式，来到 Astro。无论你喜欢的是理论性强的方法还是实践性强的方法，我们希望你会发现本节内容对你有帮助。
|
||||
|
||||
- 如果你喜欢在**实践中**学习，请从我们的 [实例库](https://github.com/snowpackjs/astro/tree/main/examples) 开始学习。
|
||||
|
||||
- 如果你喜欢**逐步学习概念**，请从我们的[基本概念和指南](/core-concepts/project-structure)开始。
|
||||
|
||||
像任何不熟悉的技术一样，Astro 也有一个轻量化的学习曲线。然而我们相信只要有耐心勤于练习你很快就会掌握诀窍的。
|
||||
|
||||
### 学习 `.astro` 语法
|
||||
|
||||
当你开始学习 Astro 时，你会看到许多文件使用`.astro`文件扩展名。这是**Astro的组件语法**：一种特殊的类似HTML 的文件格式，Astro 用于模板制作。这样设计是为了让任何有 HTML 或 JSX 经验的人更容易上手。
|
||||
|
||||
我们在 [Astro组件](/corecepts/astro-components) 上的有用指南向你介绍了 Astro 语法，这也是学习的最好方法。
|
||||
### API 参考文档
|
||||
|
||||
当你想了解某个特定的 Astro API 的更多细节时，这部分文档是有用的。例如 [配置参考](/reference/configuration-reference) 列出所有可能的配置选项供你使用。 [内置组件参考](/reference/builtin-components) 列出了所有可用的核心组件，如`<Markdown />`和`<Prism />`。
|
||||
|
||||
### 其他版本文档
|
||||
|
||||
本文档总是展示 Astro 的最新稳定版本。一旦我们达到 V1.0 的里程碑，我们将增加查看版本文件的能力。
|
||||
|
||||
## 了解最新消息
|
||||
|
||||
[@astrodotbuild](https://twitter.com/astrodotbuild) Twitter 账户是 Astro 团队的官方更新来源。
|
||||
|
||||
我们也在我们的 [Discord社区](https://astro.build/chat) 的 #announcements 频道中发布 release 公告。
|
||||
|
||||
当然并非每个 Astro 的发布都会有自己的 release 公告，你可以在 Astro 仓库的 [`CHANGELOG.md`文件](https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md) 中找到每个版本的详细更新日志。
|
||||
|
||||
## 勘误与建议
|
||||
|
||||
如果你在阅读的过程中发现文档中缺少什么，或者你发现某些部分令人困惑，请 [为文档提交问题](https://github.com/snowpackjs/astro/issues/new/choose) ，提出你的改进建议，或者在 [@astrodotbuild](https://twitter.com/astrodotbuild) Twitter账户上发推文。我们希望听到你的建议!
|
||||
|
||||
## 参考
|
||||
|
||||
本入门指南最初是基于 [React](https://reactjs.org/) 的入门指南。
|
||||
168
docs/src/pages/zh-CN/installation.md
Normal file
168
docs/src/pages/zh-CN/installation.md
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: 安装指南
|
||||
lang: zh-CN
|
||||
---
|
||||
|
||||
可以使用多种方式创建 Astro 新项目
|
||||
|
||||
## 环境要求
|
||||
|
||||
- **Node.js** - `v12.20.0`、`v14.13.1` 和 `v16.0.0`，或更高版本。
|
||||
- **文本编辑器** - 我们推荐使用 [VS Code](https://code.visualstudio.com/) 搭配 [Astro 官方插件](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。
|
||||
- **命令行终端** - Astro 主要是通过终端的命令行执行。
|
||||
|
||||
下方案例中使用 [`npm`](https://www.npmjs.com/) 为例。也可以使用 [`yarn`](https://yarnpkg.com/) 或 [`pnpm`](https://pnpm.io/) 等 npm 替代方案。
|
||||
|
||||
## 创建 Astro 工程
|
||||
|
||||
`npm init astro` 是在一个新项目中安装 Astro 的最简单的方法。
|
||||
|
||||
在终端运行这个命令，启动我们的 `create-astro` 安装工具，协助你建立一个新项目。
|
||||
|
||||
```shell
|
||||
# 用 NPM
|
||||
npm init astro
|
||||
|
||||
# Yarn
|
||||
yarn create astro
|
||||
```
|
||||
|
||||
[`create-astro`](https://github.com/snowpackjs/astro/tree/main/packages/create-astro) 工具让你从预设的 [启动模板](/examples) 中选择，或者你也可以直接从 Github 导入自己的 Astro 项目。
|
||||
|
||||
```bash
|
||||
# 提醒：把「my-astro-project」改为项目的名称。
|
||||
|
||||
# npm 6.x
|
||||
npm init astro my-astro-project --template starter
|
||||
# npm 7+（一定要多加上一组双横杠）
|
||||
npm init astro my-astro-project -- --template starter
|
||||
# yarn
|
||||
yarn create astro my-astro-project --template starter
|
||||
# 使用第三方模板
|
||||
npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]
|
||||
# 在 Repo 里，使用第三方模板
|
||||
npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]/path/to/template
|
||||
```
|
||||
|
||||
在 `create-astro` 搭建好你的项目后，记得用 npm 或你选择的软件包管理器安装你的项目依赖。在这个例子中，我们将使用 npm 。
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
你现在可以[开发](#start-astro)你的 Astro 项目。一旦你完成了 Astro 项目的开发，你就可以[构建](#build-astro)你的项目。然后Astro会把你的应用程序打包，并准备好静态文件，让你[部署](/guides/deploy)到你最喜欢的托管服务商。
|
||||
|
||||
## 手动安装
|
||||
|
||||
当然没有 `create-astro` 工具的协助，也可以创建 Astro 工程。 接下来就是要让 Astro 运行起来的一些额外步骤。
|
||||
|
||||
### 创建项目
|
||||
|
||||
```bash
|
||||
# 创建并进入新项目目录
|
||||
mkdir my-astro-project
|
||||
cd my-astro-project
|
||||
```
|
||||
|
||||
### 创建 `package.json`
|
||||
|
||||
```bash
|
||||
# 初始化项目并生成的默认的 package.json
|
||||
npm init --yes
|
||||
```
|
||||
Astro 被设计为与整个 npm 软件包生态系统一起工作。这是由项目根目录下的 `package.json` 管理的。
|
||||
|
||||
如果你不熟悉 `package.json` 文件，我们强烈建议你在[npm文档](https://docs.npmjs.com/creating-a-package-json-file)上快速阅读它。
|
||||
|
||||
### 安裝 Astro
|
||||
|
||||
按照上面的说明，你的工程目录下会新建一个 `package.json` 文件。
|
||||
|
||||
现在你可以在你的项目中安装 Astro
|
||||
|
||||
```bash
|
||||
npm install astro
|
||||
```
|
||||
|
||||
现在你可以把 `package.json` 文件中默认为你创建的 `scripts` 部分替换为以下内容。
|
||||
|
||||
```diff
|
||||
"scripts": {
|
||||
- "test": "echo \"Error: no test specified\" && exit 1"
|
||||
+ "start": "astro dev",
|
||||
+ "build": "astro build"
|
||||
},
|
||||
}
|
||||
```
|
||||
[`start`](#start-astro) 命令在 `http://localhost:3000` 上启动Astro开发服务器。一旦你的项目准备好了。
|
||||
|
||||
[`build`](#build-astro)命令将你的项目输出到 `dist/` 目录。[在部署指南中阅读更多关于部署 Astro 的内容。](/guides/deploy)
|
||||
|
||||
### 创建第一个页面
|
||||
|
||||
打开文本编辑器，在项目添加文件 ：
|
||||
|
||||
1. 新建 `src/pages/index.astro` 文件
|
||||
2. 在文件中复制粘贴以下代码片段（包含横杠 "---" ）
|
||||
|
||||
```astro
|
||||
---
|
||||
// 在 (`---`) 范围之内的 JS 或 TS 代码只在服务器上运行!
|
||||
console.log('See me in the Terminal')
|
||||
---
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<h1>Hello, World!</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style lang='css||scss'>
|
||||
body{
|
||||
h1{
|
||||
color:orange;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// 在在此输入的JS代码完全在浏览器上运行。
|
||||
console.log('See me in the devTools')
|
||||
</script>
|
||||
```
|
||||
|
||||
以上是 Astro 组件语法的一个例子，同時包含 HTML 和 JSX。
|
||||
|
||||
你可以在 `src/pages` 目录下创建更多的页面，Astro将使用该文件名在你的网站上创建新的页面。例如，通过在 `src/pages/about.astro` 创建一个新的文件（重复使用以前的片段），Astro 将生成一个新的页面，URL为：`http://localhost/about` 。
|
||||
|
||||
## [启动 Astro](#start-astro)
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)，
|
||||
在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面
|
||||
|
||||
服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。
|
||||
|
||||
## [Build Astro](#build-astro)
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在 `dist/` 目录中打包好了。
|
||||
|
||||
## 下一步
|
||||
|
||||
成功了！现在即可开始开发！
|
||||
|
||||
我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些：
|
||||
|
||||
📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure)
|
||||
|
||||
📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components)
|
||||
|
||||
📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages)
|
||||
72
docs/src/pages/zh-CN/quick-start.md
Normal file
72
docs/src/pages/zh-CN/quick-start.md
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: 快速入门
|
||||
lang: zh-CN
|
||||
---
|
||||
|
||||
```shell
|
||||
# 环境要求：确保 Node.js 版本是 12.20.0+、14.13.1+ 或 16 及以上。
|
||||
node --version
|
||||
|
||||
# 创建并进入新项目目录
|
||||
mkdir my-astro-project && cd $_
|
||||
|
||||
# 初始化项目
|
||||
npm init astro
|
||||
|
||||
# 安装项目依赖
|
||||
npm install
|
||||
|
||||
# 启动项目
|
||||
npm start
|
||||
|
||||
# 将项目打包到 dist 文件夹下
|
||||
npm run build
|
||||
```
|
||||
|
||||
如果想要知道还有哪些方法能够使用 Astro 来做开发，请阅读 [安装指南](installation)。
|
||||
|
||||
## 启动项目
|
||||
|
||||
工程目录下终端输入以下命令：
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)，
|
||||
在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面
|
||||
|
||||
服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。
|
||||
|
||||
## 打包项目
|
||||
|
||||
工程目录下终端输入以下命令：
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在`dist/`目录中打包好了。
|
||||
|
||||
## 部署项目
|
||||
|
||||
Astro 生成的网站是静态的可以发布常见的托管服务商：
|
||||
|
||||
- [Vercel](https://vercel.com/)
|
||||
- [Netlify](https://www.netlify.com/)
|
||||
- [S3 bucket](https://aws.amazon.com/s3/)
|
||||
- [Google Firebase](https://firebase.google.com/)
|
||||
- 查看 [部署指南](/guides/deploy) 了解更多细节
|
||||
|
||||
## 下一步
|
||||
|
||||
成功了！现在即可开始开发！
|
||||
|
||||
我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些：
|
||||
|
||||
📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure)
|
||||
|
||||
📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components)
|
||||
|
||||
📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages)
|
||||
62
docs/src/pages/zh-TW/getting-started.md
Normal file
62
docs/src/pages/zh-TW/getting-started.md
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
title: 入門指南
|
||||
lang: zh-TW
|
||||
---
|
||||
|
||||
Astro 是一個現代的靜態網站生成工具. 你可以從 [我們的主頁]（https://astro.build/） 或者 [我們的 release 公告]（https://astro.build/blog/introducing-astro） 中瞭解到 Astro 的全部內容，本頁是 Astro 文檔和所有相關資源的概述。
|
||||
|
||||
想快速瞭解一下什麼是 Astro ？ [瀏覽我們的主頁] (https://astro.build)
|
||||
|
||||
## 嘗試一下 Astro
|
||||
|
||||
嘗試 Astro 的最簡單的方法是在新目錄下運行 『npm init astro』。 我們的 CLI 工具會説明你創建啟動一個新的 Astro 專案。
|
||||
|
||||
想要快速了解學習使用Astro， [快速入門指南]（quick-start）.
|
||||
|
||||
另外，請閱讀我們的 [安裝指南]（/installation），瞭解如何使用 Astro 進行安裝的全部步驟。
|
||||
|
||||
### 在線遊樂場
|
||||
|
||||
如果你有興趣在瀏覽器中嘗試 Astro，你可以使用一個在線代碼遊樂場。 試試我們在 [CodeSandbox]（https://codesandbox.io/s/astro-template-hugb3） 上的 "Hello World！" 範本。
|
||||
|
||||
注意：一些功能（例如：快速刷新）目前在 CodeSandbox 上是受限的。
|
||||
|
||||
## 學習 Astro
|
||||
|
||||
各種各樣的人來自不同的背景，帶來了不同的學習方式，來到 Astro。 無論你喜歡的是理論性強的方法還是實踐性強的方法，我們希望你會發現本節內容對你有説明。
|
||||
|
||||
- 如果你喜歡在**實踐中**學習，請從我們的 [實例庫]（https://github.com/snowpackjs/astro/tree/main/examples） 開始學習。
|
||||
|
||||
- 如果你喜歡**逐步學習概念**，請從我們的[基本概念和指南]（/core-concepts/project-structure）開始。
|
||||
|
||||
像任何不熟悉的技術一樣，Astro 也有一個輕量化的學習曲線。 然而我們相信只要有耐心勤於練習你很快就會掌握訣竅的。
|
||||
|
||||
### 學習 '.astro' 語法
|
||||
|
||||
當你開始學習 Astro 時，你會看到許多檔使用『.astro』檔擴展名。 這是**Astro的元件語法**：一種特殊的類似HTML 的檔格式，Astro 用於範本製作。 這樣設計是為了讓任何有 HTML 或 JSX 經驗的人更容易上手。
|
||||
|
||||
我們在 [Astro元件]（/corecepts/astro-components） 上的有用指南向你介紹了 Astro 語法，這也是學習的最好方法。
|
||||
### API 參考文檔
|
||||
|
||||
當你想了解某個特定的 Astro API 的更多細節時，這部分文檔是有用的。 例如 [配置參考]（/reference/configuration-reference） 列出所有可能的配置選項供你使用。 [內置元件參考] （/reference/builtin-components） 列出了所有可用的核心元件，如『<Markdown />』和『<Prism />』。
|
||||
|
||||
### 其他版本文檔
|
||||
|
||||
本文檔總是展示 Astro 的最新穩定版本。 一旦我們達到 V1.0 的里程碑，我們將增加查看版本檔的能力。
|
||||
|
||||
## 瞭解最新消息
|
||||
|
||||
[@astrodotbuild] (https://twitter.com/astrodotbuild) Twitter 帳戶是 Astro 團隊的官方更新來源。
|
||||
|
||||
我們也在我們的 [Discord社區]（https://astro.build/chat） 的 #announcements 頻道中發佈 release 公告。
|
||||
|
||||
當然並非每個 Astro 的發佈都會有自己的 release 公告，你可以在 Astro 倉庫的 ['CHANGELOG.md'檔]（https://github.com/snowpackjs/astro/blob/main/packages/astro/CHANGELOG.md） 中找到每個版本的詳細更新日誌。
|
||||
|
||||
## 勘誤與建議
|
||||
|
||||
如果你在閱讀的過程中發現文檔中缺少什麼，或者你發現某些部分令人困惑，請 [為文檔提交問題]（https://github.com/snowpackjs/astro/issues/new/choose） ，提出你的改進建議，或者在 [@astrodotbuild]（https://twitter.com/astrodotbuild） Twitter帳戶上發推文。 我們希望聽到你的建議！
|
||||
|
||||
## 參考
|
||||
|
||||
本入門指南最初是基於 [React]（https://reactjs.org/） 的入門指南。
|
||||
Loading…
Reference in a new issue