Spectra Demo

我對深色模式的執著

Thu, 15 May 2025 00:00:00 +0000

一切都要黑的

手機、電腦、IDE、瀏覽器、筆記軟體、通訊軟體。只要有深色模式的選項，我一定會開。

不是為了什麼科學理由。就是覺得好看。

深色背景上的亮色文字，看起來有一種「正在做正事」的感覺。白底黑字反而像在看 Word 文件。完全是主觀偏好，但很多人好像有類似的感覺。

深色模式真的比較護眼嗎

老實說，沒有很強的科學證據支持這個說法。

目前的研究大概是這樣：

暗環境下用深色模式，眼睛確實比較不刺眼 — 因為螢幕整體亮度低
亮環境下（像是白天的辦公室），淺色模式反而比較好讀 — 因為對比度的關係
深色模式不會「治療」或「預防」近視，那是兩回事
影響眼睛疲勞的主要因素是螢幕亮度、字體大小、閱讀距離和休息頻率，不是背景顏色

所以「深色模式護眼」這個說法，大概只在特定情境下成立。

但它確實省電

在 OLED 螢幕上，深色模式可以省下不少電。因為 OLED 的黑色像素是完全關閉的，不發光就不耗電。

Google 自己做過測試，YouTube 在深色模式下最多可以省 60% 的螢幕耗電。

不過這只對 OLED 有效。LCD 螢幕的背光板一直亮著，深色淺色耗電差不多。

深色模式設計比你想的難

做過深色模式的人都知道，不是把背景改成黑色、文字改成白色就好了。

幾個容易踩到的坑：

純黑背景太刺眼

#000000 的純黑配上 #FFFFFF 的純白，對比度太強。長時間看下來反而比淺色模式更累。

比較好的做法是用深灰色當背景，像是 #1a1a2e 或 #0b0f19，然後文字用偏灰的白色 #e4e8f1。

顏色直接搬過來會出事

淺色模式下好看的藍色，搬到深色背景上可能太亮、太刺眼。通常需要降低飽和度，或者微調色相。

層次感不能只靠陰影

淺色模式可以用陰影來做層次。深色模式下陰影幾乎看不到，要改用邊框或微妙的背景色差來區分層級。

圖片要處理

原本在白色背景下好看的圖片，放到深色背景上可能會「浮」起來。加一層圓角和微妙的邊框可以改善，或者直接用帶有深色背景的圖片。

我的偏好設定

作業系統：深色
IDE / 編輯器：深色（One Dark Pro 或 GitHub Dark）
瀏覽器：深色
終端機：永遠都是深色的
社群媒體：深色
通訊軟體：深色
文件編輯：看情況，有時候淺色反而好讀

唯一例外是需要精確看顏色的設計工作 — 深色模式下顏色的感知會偏掉，那時候會切回淺色。

SSD 跟 HDD 差在哪

Thu, 01 May 2025 00:00:00 +0000

最直覺的差異

換過 SSD 的人都知道那個感覺 — 開機從一分鐘變成十秒，軟體秒開，整台電腦像換了一台。

SSD 和 HDD 的速度差距就是這麼大。

運作原理

HDD（Hard Disk Drive）

HDD 裡面有實際在旋轉的金屬碟片，讀寫頭在碟片上方來回移動，有點像唱片機。

碟片轉速通常是 5400 或 7200 RPM（每分鐘轉速）。資料要讀的時候，讀寫頭得先「跑到」對的位置，然後等碟片轉到對的地方。這就是為什麼 HDD 有機械延遲。

你仔細聽的話，HDD 運作的時候會有「喀喀喀」的聲音 — 那是讀寫頭在移動。

SSD（Solid State Drive）

SSD 沒有任何機械零件。資料存在快閃記憶體晶片上，讀寫靠電子訊號，不需要等任何東西「移動到位」。

它是沒有馬達、碟片、讀寫頭的。所以它安靜、抗震、省電、而且快很多。

速度比較

項目	HDD	SATA SSD	NVMe SSD
連續讀取	80-160 MB/s	500-550 MB/s	3,000-7,000 MB/s
連續寫入	80-160 MB/s	450-520 MB/s	2,000-5,000 MB/s
隨機讀取（IOPS）	75-100	90,000-100,000	500,000-1,000,000
開機時間（約）	30-60 秒	10-15 秒	8-12 秒

NVMe SSD 比 HDD 快了 幾十倍。就算是 SATA 介面的 SSD，也快了 3-5 倍。

USB-C 為什麼統一天下

Tue, 15 Apr 2025 00:00:00 +0000

以前的日子

十幾年前出門要帶一堆線。手機一條 Micro USB，相機一條 Mini USB，筆電一個 DC 充電孔，外接螢幕一條 HDMI，隨身碟是 USB-A。每條線長得都不一樣，借都借不到。

現在一條 USB-C 可以搞定大部分的事。充電、傳檔案、接螢幕、接耳機，全部走同一個孔。

到底怎麼走到這一步的？

接頭演進

接頭	年份	特徵	狀態
USB-A	1996	扁平長方形，要對方向才插得進去	還在用（電腦端）
Mini USB	2000	小型梯形，常見於早期相機、MP3	幾乎淘汰
Micro USB	2007	更薄，Android 手機標配好多年	快淘汰了
USB-C	2014	橢圓形，正反都能插	現在的主流

一個接頭，三件事

USB-C 可以同時處理三種訊號：

1. 充電（USB Power Delivery）

USB-C 搭配 PD 協議，最高可以供應 240W 的電力。這代表不只手機，連筆電都能用 USB-C 充電。

以前每台筆電都有自己專屬的充電器，現在很多品牌都改用 USB-C 了。出差只要帶一顆充電器。

2. 資料傳輸

USB-C 只是接頭的形狀，裡面跑的速度取決於支援的規格：

規格	速度	常見用途
USB 2.0	480 Mbps	充電線、便宜的傳輸線
USB 3.2 Gen 1	5 Gbps	隨身碟、外接硬碟
USB 3.2 Gen 2	10 Gbps	快速外接 SSD
USB4	40 Gbps	高速外接裝置
Thunderbolt 4	40 Gbps	外接顯卡、高階擴充座

注意：同樣是 USB-C 接頭，速度可以差 80 倍。這是很多人搞混的地方。

OLED 跟 LCD 到底差在哪

Tue, 01 Apr 2025 00:00:00 +0000

先講結論

OLED 畫面好看、對比高、反應快，但貴而且有烙印風險。LCD 便宜耐用，但黑色發灰、可視角度差一點。預算夠就 OLED，在意壽命就 LCD。

發光原理完全不同

這是最根本的差異。

LCD（Liquid Crystal Display）自己不會發光。它需要一整片背光板打光，液晶層負責擋光或讓光通過，有點像百葉窗控制陽光的感覺。

OLED（Organic Light-Emitting Diode）每個像素自己就會發光。不需要背光板，想亮哪個像素就亮哪個。

這個差異衍生出幾乎所有其他差異。

重點比較

項目	OLED	LCD
發光方式	像素自發光	背光板 + 液晶
黑色表現	純黑（關閉像素）	灰黑（背光漏光）
對比度	接近無限	1000:1 ~ 3000:1
反應速度	< 1ms	5~15ms
可視角度	幾乎不變色	偏角會色偏
亮度	中高	高（尤其全白畫面）
壽命	較短，有烙印疑慮	長
價格	貴	便宜
厚度	可以做很薄	需要背光模組

為什麼 OLED 黑色那麼黑

因為黑色代表的是把像素關掉，因此可以完全不發光。

LCD 做不到這件事。就算液晶層全部擋住了，背光板還是亮著，光會從邊緣漏出來。你在暗室裡看 LCD 螢幕顯示全黑畫面，會發現它其實是深灰色的。

這也是為什麼 OLED 在看電影、深色模式的時候特別有感覺 — 黑的地方是真的黑。

烙印是什麼

OLED 的有機材料會老化。如果同一個區域長時間顯示同樣的畫面（比如狀態列、Logo），那些像素會比周圍老化得快，留下殘影。

這就是「烙印」（burn-in）。

現在的 OLED 有各種防烙印機制 — 像素偏移、螢幕保護程式、自動亮度調整。日常使用其實不太容易遇到，但如果你的螢幕是拿來長時間顯示固定畫面的（像是商店的資訊看板），LCD 還是比較適合。

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

關於這個部落格

Wed, 01 Jan 2025 00:00:00 +0000

嗨

歡迎。這裡是一個用 Spectra 主題搭建的部落格。

Spectra 是一個帶有科幻風格的 Hugo 主題 — 深色模式下有微微的光暈效果，卡片滾動進場的時候會從模糊變清晰，整體的感覺是乾淨但帶一點未來感。

為什麼叫 Spectra

Spectra 是 spectrum 的複數形，光譜的意思。取這個名字是因為主題的設計圍繞著「光」：深色背景上的 accent glow、漸層色的導覽列、滑鼠經過時的邊框發光。

另一個原因是光譜代表多樣性 — 這個主題支援多種內容類型，從純文字到程式碼到數學公式，都能好好呈現。

為什麼不用現成的平台

Medium、方格子、Substack，這些平台都很方便，註冊完馬上就能寫。但用別人的平台總覺得少了點什麼 — 你沒辦法控制排版長什麼樣子、廣告會不會突然冒出來、哪天平台收掉了你的文章還在不在。

自己架站雖然麻煩一點，但所有東西都在自己手上。文章就是一堆 Markdown 檔案，放在 Git 裡面，搬到哪裡都能用。

技術細節

簡單列一下這個站怎麼搭的：

靜態網站產生器：Hugo
主題：Spectra
部署：Cloudflare Pages 或是 Github Pages
原始碼管理：Git + GitHub

整個網站沒有後端、沒有資料庫。就是 HTML、CSS、和一點 JS。

載入速度很快，維護成本幾乎是零。

分類

Mon, 01 Jan 0001 00:00:00 +0000

關於

Mon, 01 Jan 0001 00:00:00 +0000

嗨，我是一名開發者

歡迎來到我的個人空間。我是一名軟體工程師，熱愛用程式碼打造各種專案，並樂於分享學習心得。

這個部落格記錄了我在程式設計、技術探索，以及各種引起我好奇心的主題上的思考與實作。

技術棧

程式語言：Go、TypeScript、Python
前端：Hugo、React、Tailwind CSS
後端：REST APIs、PostgreSQL、Redis
DevOps：Docker、GitHub Actions、Linux

聯絡方式

歡迎透過側邊欄的社群連結與我聯繫，或在 GitHub 上開 issue。