diff options
Diffstat (limited to 'docs/src/pages/zh-TW')
| -rw-r--r-- | docs/src/pages/zh-TW/examples.md | 9 | ||||
| -rw-r--r-- | docs/src/pages/zh-TW/getting-started.md | 73 | ||||
| -rw-r--r-- | docs/src/pages/zh-TW/installation.md | 163 | ||||
| -rw-r--r-- | docs/src/pages/zh-TW/quick-start.md | 73 | ||||
| -rw-r--r-- | docs/src/pages/zh-TW/themes.astro | 53 |
5 files changed, 0 insertions, 371 deletions
diff --git a/docs/src/pages/zh-TW/examples.md b/docs/src/pages/zh-TW/examples.md deleted file mode 100644 index 0feb9779a..000000000 --- a/docs/src/pages/zh-TW/examples.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 範例 -lang: zh-Hant-TW ---- - -如果喜歡從做中學，可以看看放在 Github 的[範例資源庫](https://github.com/withastro/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! --> diff --git a/docs/src/pages/zh-TW/getting-started.md b/docs/src/pages/zh-TW/getting-started.md deleted file mode 100644 index c01cce59a..000000000 --- a/docs/src/pages/zh-TW/getting-started.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 新手上路 -lang: zh-Hant-TW ---- - -Astro 是利用現代技術的靜態網站生成工具。可以從[首頁](https://astro.build/)或[釋出版本貼文](https://astro.build/blog/introducing-astro)來了解 Astro 的用途。此頁面是 Astro 文件與所有相關資源的概要。 - -## 試玩 Astro - -試用 Astro 最簡單的方法，就是在機器的新資料夾裡執行 `npm init astro`。我們製作的 CLI 精靈會協助開啟全新的 Astro 專案。 - -簡易又迅速 5 步驟就開始使用 Astro 的方法，請看 [快速開始指南](quick-start)。 - -或者，閱讀[安裝指南](/installation)，有安裝 Astro 的完整流程。 - -### 示範專案 - -比較喜歡從範例來學 Astro 的話，請看放在 Github 的[範例資源庫](https://github.com/withastro/astro/tree/main/examples)。 - -這裡的範例都可以在本地端機器執行 `npm init astro` 並加上 CLI Flag: `--template`。 -`--template` Flag 也支援第三方、社群的範本。 - -```bash -# 執行 init 精靈，並使用官方範本 -npm init astro -- --template [OFFICIAL_EXAMPLE_NAME] -# 執行 init 精靈，並使用社群範本 -npm init astro -- --template [GITHUB_USER]/[REPO_NAME] -npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example -``` - -### 線上玩玩看 - -有興趣在瀏覽器試玩 Astro 的話，可以在 Stackblitz、CodeSandbox、Gitpod 或 GitHub Codespaces 使用線上程式碼編輯器。點選[範例資源庫](https://github.com/withastro/astro/tree/main/examples)裡任一個範例的 "Open in Stackblitz" 連結。或者，[點此](https://stackblitz.com/fork/astro)在 Stackblitz 開啟新專案。 - -## 學習 Astro - -每個來到 Astro 的人來自不同背景，使得學習方式也不同。不管是喜歡更為理論，還是實際的方法，希望都可以覺得這部分很有用。 - -- 如果喜歡**從做中學**，從[範例資源庫](https://github.com/withastro/astro/tree/main/examples)開始。 -- 如果喜歡**一步一步學習概念**，就從[基本概念與指南](/core-concepts/project-structure)開始。 - -就像任何還不熟悉的技術，Astro 會有一些學習曲線。只不過，只要練習和一些耐心，我們確信很快就會熟悉。 - -### 學習 `.astro` 語法 - -開始學習 Astro 的時候，會看到很多檔案副檔名是 `.astro`。這是 **Astro 的元件語法**：近似於 HTML 的特殊檔案格式，Astro 用來當作範本。設計成有 HTML 或 JSX 經驗的人都覺得和藹可親。 - -[Astro 元件](/core-concepts/astro-components)指南會很有幫助，介紹 Astro 的語法，也是最好的學習方式。 - -### API 參考手冊 - -如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `<Markdown />` 和 `<Code />`。 - -### 先前版本的文件 - -這份文件就肯定是根據 Astro 最新的穩定版本。一但達到 1.0 里程碑，會增加查閱過去文件版本的功能。 - -## 獲得最新訊息 - -推特帳號 [@astrodotbuild](https://twitter.com/astrodotbuild) 是 Astro 團隊撰寫的官方更新消息來源。 - -我們也會把釋出版本公告貼在 [Discord 社群](https://astro.build/chat) 的 #announcements 頻道。 - -不是每個 Astro 釋出版本都會有一篇專屬的部落格貼文。然而，還是可以在 [Astro 的 Repository 裡的 `CHANGELOG.md` 檔案](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)，找到每個釋出版本的詳細變動記錄。 - -## 還漏了什麼嗎？ - -如果文件裡有東西沒寫到，或是覺得有些地方很難理解，請[開文件的 Issue](https://github.com/withastro/astro/issues/new/choose)，附上改進建議，或推文到推特帳號 [@astrodotbuild](https://twitter.com/astrodotbuild)。我們喜愛聽到回饋！ - -## 參考 - -這份新手上路指南一開始是根據 [React](https://reactjs.org/) 的新手上路指南。 diff --git a/docs/src/pages/zh-TW/installation.md b/docs/src/pages/zh-TW/installation.md deleted file mode 100644 index ef7129919..000000000 --- a/docs/src/pages/zh-TW/installation.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 安裝 -lang: zh-Hant-TW ---- - -有幾種方式把 Astro 安裝在新專案。 - -## 環境需求 - -- **Node.js** - `v14.15.0` 和 `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/withastro/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](#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` 的專案 Manifest 進行管理。如果不熟悉 `package.json` 檔案，強烈建議先將 [npm 文件](https://docs.npmjs.com/creating-a-package-json-file)快速讀過一遍。 - -### 安裝 Astro - -按照上方的指示之後，應該有個資料夾，裡面只有 `package.json` 一個檔案。現在即可在專案裡設定 Astro。 - -```bash -npm install astro -``` - -取代 `package.json` 檔案裡，從 `npm init` 產生、一開始就有的 "script" 部分： - -```diff - "scripts": { -- "test": "echo \"Error: no test specified\" && exit 1" -+ "dev": "astro dev", -+ "build": "astro build", -+ "preview": "astro preview" - }, -} -``` - -[`dev`](#start-astro) 指令在 `http://localhost:3000` 啟動 Astro 開發伺服器。一但專案已經準備好，[`build`](#build-astro) 指令將專案輸出至 `dist/` 資料夾。[在「部署指南」深入閱讀部署 Astro](/guides/deploy)。 - -### 建立第一個頁面 - -打開偏好的文字編輯器，接著在專案裡新增檔案： - -1. 在 `src/pages/index.astro` 新增檔案 -2. 在檔案裡複製貼上以下程式碼片段（包含橫槓 `---` ）： - -```astro ---- -// 在程式碼 fence 之間寫的 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 就會有網址是 `http://localhost/about` 的新頁面。 - -## [啟動 Astro](#start-astro) - -```bash -npm run dev -``` - -Astro 會為應用程式打開 `http://localhost:3000` 的伺服器。在瀏覽器開啟網址，就會看到 Astro 的「Hello World」。 - -## [Build Astro](#build-astro) - -```bash -npm run build -``` - -這樣就會指揮 Astro 開始 Build 網站，存在磁碟裡。現在，應用程式已經放在 `dist/` 資料夾裡準備好了。 - -### 下一步 - -成功了！現在即可開始開發！ - -我們建議花點時間更熟悉 Astro 的運作方式。只要在文件裡進一步探索，建議看看這些： - -📚 深入了解 Astro 的專案架構：[專案架構指南。](/core-concepts/project-structure) - -📚 深入了解 Astro 的元件語法：[Astro 元件指南。](/core-concepts/astro-components) - -📚 深入了解 Astro 根據檔案產生的路徑：[路徑指南。](core-concepts/astro-pages) diff --git a/docs/src/pages/zh-TW/quick-start.md b/docs/src/pages/zh-TW/quick-start.md deleted file mode 100644 index ecd402422..000000000 --- a/docs/src/pages/zh-TW/quick-start.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: 快速開始 -lang: zh-Hant-TW ---- - -```shell -# 環境需求：檢查 Node.js 版本是 14.15.0+ 或 16+。 -node --version - -# 開新專案資料夾，並且直接移動到該處 -mkdir my-astro-project && cd $_ - -# 準備發射... -npm init astro - -# 安裝相依套件 -npm install - -# 開始開發！ -npm run dev -``` - -```shell -# 做好之後：把靜態網站 build 進 `dist/` -npm run build -``` - -若想要知道還有哪些方法能夠以 Astro 來做專案，請[閱讀安裝指南](installation)。 - -## 開始專案 - -專案目錄裡，在終端機輸入以下指令： - -```bash -npm run dev -``` - -現在，Astro 就會開啟應用程式的伺服器，位置是 [http://localhost:3000](http://localhost:3000)。在瀏覽器打開這網址，就會看到 Astro 的 「Hello, World」。 - -伺服器會即時監聽 `src/` 資料夾的檔案異動，所以在開發過程的更新毋需重新啟動應用程式。 - -## Build 專案 - -若要將專案 Build 起來，移至資料夾裡面，在終端機輸入指令： - -```bash -npm run build -``` - -這樣就會指揮 Astro 開始 Build 網站，存在磁碟裡。現在，應用程式已經放在 `dist/` 資料夾裡準備好了。 - -## 部署專案 - -Astro 網站是靜態的，所以可以發布至慣用的主機： - -- [Vercel](https://vercel.com/) -- [Netlify](https://www.netlify.com/) -- [S3 bucket](https://aws.amazon.com/s3/) -- [Google Firebase](https://firebase.google.com/) -- [「部署指南」有更多部署 Astro 的細節。](/guides/deploy) - -## 下一步 - -成功了！現在即可開始開發！ - -我們建議花點時間更熟悉 Astro 的運作方式。只要在文件裡進一步探索，建議看看這些： - -📚 深入了解 Astro 的專案架構：[專案架構指南。](/core-concepts/project-structure) - -📚 深入了解 Astro 的元件語法：[Astro 元件指南。](/core-concepts/astro-components) - -📚 深入了解 Astro 根據檔案產生的路徑：[路徑指南。](core-concepts/astro-pages) diff --git a/docs/src/pages/zh-TW/themes.astro b/docs/src/pages/zh-TW/themes.astro deleted file mode 100644 index c1908fbc8..000000000 --- a/docs/src/pages/zh-TW/themes.astro +++ /dev/null @@ -1,53 +0,0 @@ ---- -import Layout from '../../layouts/MainLayout.astro'; -import Card from '../../components/Card.astro'; -import { Markdown } from 'astro/components'; -import themes from '../../data/themes.json'; -import components from '../../data/components.json'; ---- - -<Layout content={{ title: '佈景主題' }} hideRightSidebar> - <style> - .card-grid { - display: grid; - grid-column-gap: 15px; - grid-row-gap: 15px; - grid-auto-flow: dense; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } - </style> - <Markdown> - ## 精選佈景主題 - </Markdown> - <div class="card-grid"> - {themes.featured.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## 官方佈景主題 - - Astro 維護的文件網站、作品集 ⋯ 等官方佈景主題。 - </Markdown> - <div class="card-grid"> - {themes.official.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## 社群佈景主題 - - 趕緊來看看社群開發的佈景主題！ - </Markdown> - <div class="card-grid"> - {themes.community.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## 精選套件 - - 我們的套件生態持續成長！所有精選社群套件都可以在 [npm](https://www.npmjs.com/search?q=keywords%3Aastro-component) 發掘。 - </Markdown> - <div class="card-grid"> - {components.community.map((item) => <Card data={item} />)} - </div> - <Markdown> - > 想要讓自己的作品成為精選嗎？[在 Discord 分享！](https://astro.build/chat) - > 我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。 - </Markdown> -</Layout> |