Pages
使用 @docusaurus/plugin-content-pages 套件可以輕鬆建立獨立頁面。對於依照官方教學以 classic 模式創建的 Docusaurus 專案，已預設安裝 @docusaurus/preset-classic 套件，因此不需要額外安裝 @docusaurus/plugin-content-pages。但如果專案尚未安裝上述任一套件該套件，可使用以下指令進行安裝：
# npm
npm install --save @docusaurus/plugin-content-pages
# yarn
yarn add @docusaurus/plugin-content-pages
提示
💡 詳細設定可參考 📦 plugin-content-pages
建立 Page
用來作為單獨頁面的文件放置於 src/pages ，單獨頁面文檔可以是 .js、.mdx 或 .md 檔。除了直接放置在該目錄下之外，也可以在該目錄下創建資料夾，並將頁面檔案放置在裡面，最終的頁面路徑會包含資料夾的名稱。
src/pages/index.js→localhost:3000/src/pages/foo.md→localhost:3000/foosrc/pages/foo/bar.js→localhost:3000/foo/bar
React page
使用 React 來編寫的頁面需要導出一個 React component，若沒有在最外層使用 Layout component ，那頁面將不會套上任何主題樣式（navbar, footer, css）
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>
);
}
title: 顯示於分頁的文字description: 於<head><meta></head>中
Markdown page
---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---
# Hello
How are you?
title: 顯示於分頁的文字description: 於<head><meta></head>中hide_table_of_contents: 是否隱藏目錄
Routing
在 /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/
Docusaurus Docusaurus 建議將樣式與特定頁面組件放在其同一個目錄中，如下資料夾結構所示：
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 文件都會生成相應的網站路徑。如果要在該目錄中創建可重用組件，可以使用排除選項（默認情況下，前綴為 _ 的文件、測試文件（.test.js）和 tests 目錄中的文件不會轉換為頁面）。