版本：3.5.2

建立網頁

本節將深入了解如何使用 Docusaurus 建立網頁。

使用 @docusaurus/plugin-content-pages 外掛程式，您可以建立單獨獨立網頁，例如展示網頁、試用區網頁或支援網頁。您可以使用 React 元件，或 Markdown。

備註

頁面沒有側邊欄，只有文件有。

資訊

查看Pages Plugin API 參考文件，以取得選項的完整清單。

新增 React 頁面

React 用作建立頁面的 UI 程式庫。每個頁面元件都應該輸出一個 React 元件，而且你可以運用 React 的表達能力來建立豐富且互動的內容。

建立檔案 /src/pages/helloReact.js

/src/pages/helloReact.js
import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          Edit <code>pages/helloReact.js</code> and save to reload.
        </p>
      </div>
    </Layout>
  );
}

儲存檔案後，開發伺服器會自動重新載入變更。現在開啟 https://127.0.0.1:3000/helloReact，你將會看到剛才建立的新頁面。

每個頁面都沒有任何造型。如果想要顯示導覽列和/或頁尾，則需要從 @theme/Layout 匯入 Layout 元件，並將內容包在這個元件中。

提示

你也可以使用 .tsx 附檔名來建立 TypeScript 頁面 (helloReact.tsx)。

新增 Markdown 頁面

建立檔案 /src/pages/helloMarkdown.md

/src/pages/helloMarkdown.md
---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---

# Hello

How are you?

同樣地，將在 https://127.0.0.1:3000/helloMarkdown 建立一個頁面。

Markdown 頁面沒有 React 頁面來的靈活，因為它總是用主題版面。

以下是Markdown 頁面範例。

提示

你也可以在 Markdown 頁面中使用 React 的所有功能，請參閱 MDX 文件。

路由

如果你熟悉其他靜態網站產生器，例如 Jekyll 和 Next，你會覺得這個路由方法很熟悉。你在 /src/pages/ 目錄下建立的任何 JavaScript 檔案，將會自動轉換成網站頁面，遵循 /src/pages/ 目錄階層。例如

/src/pages/index.js → [baseUrl]
/src/pages/foo.js → [baseUrl]/foo
/src/pages/foo/test.js → [baseUrl]/foo/test
/src/pages/foo/index.js → [baseUrl]/foo/

在這個基於組件的開發世代，我們鼓勵你將樣式、標記和行為一起併入組件中。每個頁面都是一個組件，如果你需要自訂頁面設計和樣式，我們建議將樣式和頁面組件併入它自己的目錄中。舉例來說，若要建立一個「支援」頁面，你可以執行下列其中一項

加入一個 /src/pages/support.js 檔案
建立一個 /src/pages/support/ 目錄和一個 /src/pages/support/index.js 檔案。

建議採用後者，因為它能讓你將與頁面相關的檔案放在該目錄中。舉例來說，一個僅打算用於「支援」頁面的 CSS 模組檔案 (styles.module.css)。

備註

這只是一個建議的目錄結構，你仍然需要手動匯入組件模組 (support/index.js) 中的 CSS 模組檔案。

默認情況下，任何以 _ 開頭的 Markdown 或 JavaScript 檔案都會被忽略，而且不會為該檔案建立路由（請參閱 exclude 選項）。

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.

警告

src/pages/ 目錄中的所有 JavaScript/TypeScript 檔案都會為其產生對應的網址路徑。如果你想在該目錄中建立可重複使用的組件，請使用 exclude 選項（默認情況下，以 _ 為字首的檔案、測試檔案 (.test.js) 和 __tests__ 目錄中的檔案不會變成頁面）。

重複路由

你可能會意外建立多個預計會在同一個路由上存取的頁面。發生這種情況時，Docusaurus 會在執行 yarn start 或 yarn build 時警告你重複路由（此行為可透過 onDuplicateRoutes 設定進行設定），但網站仍然會成功建立。最後建立的頁面可以存取，但它會覆寫其他有衝突的頁面。若要解決此問題，你應該修改或移除任何有衝突的路由。

新增 React 頁面​

新增 Markdown 頁面​

路由​

重複路由​

新增 React 頁面

新增 Markdown 頁面

路由

重複路由