跳至主要内容

[note] Docusaurus 筆記

v2.1.0

CLI​

CLI @ Docusaurus

# 建立專案
$ npx create-docusaurus@latest my-website classic --typescript

$ npx docusaurus --version  # 檢視版本
$ yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest ... # 更新套件

建立專案​

$ npx @docusaurus/init@next init <website-name> classic
$ npx docusaurus --version

設定​

docusaurus.config.js

// docusaurus.config.js
themes: [
  require.resolve('@docusaurus/theme-live-codeblock'),
  require.resolve('@docusaurus/theme-search-algolia'),
  require.resolve('@docusaurus/theme-classic'),   // 不加有些程式碼高亮無法正常顯示
],

Guides​

Docs​

---
id: doc-with-tags
title: A doc with tags
tags:
  - Demo
  - Getting started

# 用來修改 URL
slug: /bonjour
sidebar_position: 1
---

Styling and Layout​

Styling and Layout @ docusaurus

可以在這裡提供主色系，計算出對應的其他顏色（例如，ligheter、darker），並且檢視亮色和深色主題下看起來的樣子。

Markdown Features​

Markdown Features

提示區塊（Admonitions）​

Admonitions

支援這幾類的提示：

  • note
  • tip
  • info
  • caution
  • danger

需要的話可以加上標題（title）：

:::note[這是標題]

內容放這裡面。

:::

程式碼區塊（Code Blocks）​

Code blocks

加上標題（title）​

```js title="這裡可以寫標題"
// [程式碼區塊]
```

畫記重點行（highlight）​

可以透過在程式碼中加上「註解」的方式來幫特定行數畫記重點（Highlighting with comments），這些註解並不會在最後顯示在程式碼區塊中：

  • 使用 // highlight-next-line，其下一行會被畫記
  • 使用 // highlight-start 搭配 // highlight-end 則其之間的程式碼都會被畫記

除了在程式碼中透過註解的方式來畫記重點外，也可以直接在 "metadata" 的地方進行標記（Highlighting with metadata string）：

```js {1,4-6,11}
// 第 1、4-6、11 行都會被畫記重點
```
提示

docusaurus 建議使用註解的方式來畫記程式碼，這樣就不用自己算要畫記的行數。

標題（Headings）​

headings

預設的情況下，docusaurus 會針對 title 自動產生對應的 id，例如 ### Hello World 會自動產生名為 hello-word 的 id（即，#hello-world），有些時候它產生的 id 可能並不是你想要的，這時候可以使用 {#<id>} 的方式來可以化 id：

```
### Hello World \{#my-hello-world}
```

需要的時候則可以使用 [link](#heading-id) 來連結到特定標題。

theme​

@docusaurus/theme-classic​

@docusaurus/theme-classic @ v2.alpha

// docusaurus.config.js
themes: [require.resolve('@docusaurus/theme-search-algolia')];

Discuss​