功能導覽 on Spectra Demo

Markdown 排版全展示

Sat, 15 Mar 2025 00:00:00 +0000

標題層級

這篇文章用了 h2、h3、h4 三層標題。右邊的目錄（桌面版）或上方的摺疊目錄（手機版）會自動抓這些標題。

這是 H3

這是 H4

一般來說三層就夠了。層級太多反而讓結構變複雜。

文字格式

基本的文字樣式：

粗體 — 用 **文字**
斜體 — 用 *文字*
~~刪除線~~ — 用 ~~文字~~
行內程式碼 — 用反引號包起來
超連結 — 用 [文字](網址)

這些可以混著用，像是 粗體裡面放 程式碼 或是 斜體加上連結。

清單

無序清單

第一項
第二項
- 巢狀項目 A
- 巢狀項目 B
  - 再往下一層也行
第三項

有序清單

打開編輯器
新增一個 Markdown 檔案
開始寫
存檔
部署

任務清單

選好主題
設定基本架構
寫第一篇文章
部署到線上

引言

簡潔是可靠的前提條件。 — Edsger W. Dijkstra

引言區塊在 Spectra 裡會有左邊的裝飾線和微妙的背景色。多行也沒問題：

圖片、封面、還有放大檢視

Sat, 01 Mar 2025 00:00:00 +0000

封面圖

你現在看到這篇文章最上面那張大圖，就是封面圖。設定方式很簡單，在 front matter 裡面加一行：

cover: "images/demo01.jpg"

封面圖會自動加上漸層遮罩，讓標題文字不會被背景吃掉。如果不想要封面圖，留空字串 "" 就好。

插入圖片

Markdown 標準語法就能插入圖片：

![替代文字](/images/example.webp)

圖片會自動套用圓角樣式。alt 文字除了無障礙用途，在圖片載入失敗的時候也會顯示出來，記得填。

點擊放大

Spectra 內建 lightbox 功能。點一下文章裡的圖片，它會放大到全螢幕，背景會暗下來。再點一下或按 Esc 就能關閉。

不需要額外設定，所有文章內的圖片都自動支援。

試試看點上面這張圖。

圖片格式建議

不同格式各有適合的場景：

格式	適合用途	檔案大小	透明度
WebP	照片、截圖	小	支援
SVG	圖示、向量圖	極小	支援
PNG	需要透明背景的截圖	中等	支援
JPG	照片	中等	不支援

一般來說，照片用 WebP 壓到 200KB 以下就夠了。圖示和簡單的示意圖用 SVG 最理想。

圖片放在哪

圖片檔案放在 static/images/ 目錄下，引用路徑用 /images/檔名。

your-site/
├── content/
│ └── posts/
│ └── my-post.md
└── static/
 └── images/
 ├── demo01.jpg
 └── sample-architecture.svg

響應式

圖片會自動縮放到容器寬度，手機上不會超出畫面。你不需要手動設定寬度。

在文章裡放數學公式

Sat, 15 Feb 2025 00:00:00 +0000

啟用方式

在文章最上面的 front matter 加上 math: true，就這樣。Spectra 會自動載入 KaTeX，不用裝額外的東西。

行內公式

把公式包在兩個 $ 之間，它就會出現在文字中間。

比如說，歐拉公式 $e^{i\pi} + 1 = 0$ 被很多人說是數學裡最美的等式。質能等價 $E = mc^2$ 大概是知名度最高的物理公式了。

行內公式不會斷行，所以太長的公式建議用區塊格式。

區塊公式

用兩個 $$ 把公式包起來，它會獨立成一行，置中顯示。

高斯積分：

$$\int_{-\infty}^{\infty} e^{-x^2}\, dx = \sqrt{\pi}$$

這個結果挺神奇的 — 一個跟 $e$ 有關的積分，答案裡面居然跑出 $\pi$。

常見公式示範

貝氏定理

統計和機器學習繞不開的東西：

$$P(A \mid B) = \frac{P(B \mid A)\, P(A)}{P(B)}$$

白話講：看到新證據之後，你對某件事的信心應該怎麼更新。

二次公式

國中就學過的，但寫成 LaTeX 的時候看起來特別正式：

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

矩陣

矩陣乘法：

$$\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}$$

求和與連乘

自然數平方和：

程式碼區塊可以做到這些事

Sat, 01 Feb 2025 00:00:00 +0000

基本款：語法高亮

在三個反引號後面寫語言名稱，Spectra 就會自動幫你上色。右上角會出現語言標籤和複製按鈕。

寫法：

```python
def hello():
 print("Hello, World!")
```

效果：

from pathlib import Path

def find_large_files(directory, threshold_mb=100):
 """找出指定目錄下超過門檻的檔案。"""
 large = []
 for f in Path(directory).rglob("*"):
 if f.is_file() and f.stat().st_size > threshold_mb * 1024 * 1024:
 large.append((f.name, f.stat().st_size / (1024 * 1024)))
 return sorted(large, key=lambda x: x[1], reverse=True)

試試看按右上角的複製按鈕，貼出來不會帶到行號。

加上行號

在語言名稱後面加 {linenos=true}，就會出現行號。左上角的 # 按鈕可以切換行號顯示。

寫法：

```go {linenos=true}
package main

func main() {
 fmt.Println("hello")
}
```

效果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


package main

import (
 "fmt"
 "net/http"
 "time"
)

func main() {
 client := &http.Client{Timeout: 10 * time.Second}
 resp, err := client.Get("https://example.com")
 if err != nil {
 fmt.Println("request failed:", err)
 return
 }
 defer resp.Body.Close()
 fmt.Println("status:", resp.StatusCode)
}

高亮特定行

用 hl_lines 指定要高亮的行號。可以寫單行或範圍，被高亮的行會有明顯的邊框標記。