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

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, 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 指定要高亮的行號。可以寫單行或範圍，被高亮的行會有明顯的邊框標記。

展示 on Spectra Demo