光輝咖碼

Pi Coding Agent 完整指南：極簡終端 AI 程式助手入門與實戰工作流（2026）

2026-07-28T08:20:00Z

你是不是也遇過這種情況：開了某個 AI 程式助手，它硬要你走「先規劃 → 再開子代理 → 再審查」的流程，結果改一個小 bug 也要等它跑完一整串儀式？

市面上很多 Coding Agent 越來越像「整套 IDE 替代品」，而不是「幫你省時間的夥伴」。如果你想要的是：極簡、快、能嵌進自己習慣的終端工作流，那值得認識 Pi Coding Agent（pi.dev）。

這篇會帶你從「它是什麼」一路走到「怎麼裝、怎麼設定、怎麼跟 Cursor 分工」——讀完你可以決定要不要試，以及該用哪種工作流模式。

什麼是 Pi Coding Agent？

Pi Coding Agent 是跑在終端機（Terminal）裡的 AI 程式開發助手，由 Earendil Inc. 維護。它的設計哲學可以濃縮成一句話：

世界上有很多 Agent 框架，但這一個是你的——工具來適應你，不是你來適應工具。

跟 Devin、重度多代理編排系統不同，Pi 走的是 「極簡核心 + 按需擴充」：

核心只有四個工具：read、write、edit、bash
不內建 sub-agent、Plan mode、全專案向量索引
能力靠你自己加：AGENTS.md、Skills、Extensions、Pi Packages

白話說：你在專案資料夾打 pi，就能用自然語言叫 AI 讀檔、改 code、跑測試；要不要加 MCP、子代理、網頁搜尋，全由你決定。

四層架構（看懂 Pi 在幹嘛）

層級	做什麼
CLI / TUI	終端互動、顯示 token 與狀態、高風險操作的人工確認
Agent 協調	ReAct 迴圈：想 → 做 → 看結果 → 再修正
工具與上下文	四工具 + Extension 注入的 RAG / MCP
持久化	Session 樹狀歷史、JSONL 日誌，可 fork、可匯出

把 AI 直接放在終端的好處很實際：不用再「複製錯誤訊息 → 貼到聊天窗 → 複製修復 code 回來」。Linter 報錯、測試失敗，Agent 可以直接讀輸出並迭代修正。

Pi vs Cursor vs Claude Code：該選誰？

Pi 不是 Cursor 的平替，而是不同取捨。下面這張表幫你 30 秒判斷：

維度	Pi Coding Agent	Claude Code	Cursor Agent
核心工具	4 個（read/write/edit/bash）	10+ 內建	IDE + MCP + 多模型
上下文來源	AGENTS.md + Extension 注入	CLAUDE.md + 選擇性讀檔	全專案向量索引 + `@`
Sub-agents	無（Package 自建）	內建 Task	Background Agent
Plan mode	無（Prompt Template 替代）	內建	Composer 規劃
RAG / 索引	社群 Extension（如 pi-local-rag）	grep + 讀檔	自動 codebase embedding
Session	樹狀分支 + compact	線性 + compact	多 chat tab
部署	CLI / RPC / SDK 嵌入	CLI only	Desktop IDE
Token 效率	極小 system prompt	中等	較高
最適合	終端實驗、SDK 嵌入、可版本控制的 Agent 設定	Anthropic 生態深度使用者	日常 IDE 多檔編輯

依場景選工具

你的情境	建議
大型 monorepo、要靠自動索引	Cursor / Claude Code
Side project、終端一把梭	Pi
本地模型、低 VRAM、要控 token	Pi
Agent 設定要進 Git（`AGENTS.md`、`.pi/`）	Pi
自建產品要嵌 Agent（SDK）	Pi
UI 調像素、邊預覽邊改	Cursor

實戰分工（很多人兩邊都裝）：主專案用 Cursor 改 UI、多檔 refactor；Pi 負責終端批次任務、長跑腳本、低成本實驗。同一目錄同一時間只讓一邊寫檔——並行時用 git worktree 隔離。

四種運作模式

Pi 不只有「開 TUI 聊天」：

模式	怎麼用	適合
Interactive（互動）	專案目錄執行 `pi`	日常對話、除錯、改 code
Print / JSON	`pi -p "分析此 repo"`、`--mode json`	腳本自動化、結構化事件流
RPC	stdin/stdout JSON 協議	非 Node 系統整合
SDK	嵌入自己的 TS 應用	自建 Agent 產品

互動模式裡還有兩個很多人愛用的即時控制：

Steering（Enter）：Agent 還在跑時，你可以立刻送新指令糾偏；目前工具執行完就切方向，不會傻等整條鏈跑完。
Follow-up（Alt + Enter）：排程下一則訊息，等當前任務完成後自動接上。

長對話別硬撐——用 /compact 壓縮舊訊息，或 /tree 開分支試另一條路，歷史都留在同一個 session 檔裡。

上下文工程：Pi 真正厲害的地方

AI 回得好不好，八成看上下文怎麼塞。Pi 的策略是：Harness 保持極簡，上下文全部可組合、可版本控制。

1. Context Files（`AGENTS.md` / `SYSTEM.md`）

Pi 啟動時會串接多層指令檔：

載入順序	路徑	用途
全域	`~/.pi/agent/AGENTS.md`	個人通用規範
父目錄	向上遞迴的 `AGENTS.md`	Monorepo 子專案繼承
當前目錄	`./AGENTS.md`	專案專屬規則

SYSTEM.md 可完全替換或追加預設 system prompt——適合鎖語言、安全邊界、角色人設。

實戰建議再配一份 APPEND_SYSTEM.md（放 ~/.pi/agent/）：跨專案行為，例如「先讀本地、危險操作先問、不確定就停下來問人」。它的權重通常高於專案 AGENTS.md。

範例（專案根 AGENTS.md）：

# Project Instructions
- 改 code 後跑 `npm run check`。
- 不要動 production 設定檔。
- 不確定時先問我。

2. Skills：按需載入的能力包

Skills 是 Markdown 檔，frontmatter 有 name 和 description。Pi 只在 system prompt 放摘要；Agent 要用 read 才載入全文——避免一次塞爆 context。

手動觸發：/skill:git-workflow。發現路徑：~/.pi/agent/skills/、.pi/skills/、.agents/skills/（專案 skills 需 trust 專案）。

3. Prompt Templates：可重用的 `/` 指令

帶參數的 Markdown 模板，例如 /review src/auth.ts 展開成完整審查 prompt。支援 $1、$ARGUMENTS 等替換。適合標準化 code review、部署 checklist。

4. Extensions：動態注入 RAG

TypeScript 模組可訂閱 context 事件，在每次 LLM 呼叫前改 message 陣列。社群 pi-local-rag 就是典型：本地 BM25 + 向量混合檢索，按 turn 注入相關 chunks，不動 system prompt，維持 KV-cache 效率。

Project Trust（安全邊界）

專案含 .pi/ 或 .agents/skills/ 時，Pi 會問你是否 trust。未信任前只載入 context files；信任後才載入專案 extensions——避免惡意 repo 配置執行任意程式碼。

為什麼 Pi 刻意不內建 MCP、子代理、Plan mode？

這不是「功能缺失」，是設計選擇：

刻意省略	為什麼	需要時怎麼辦
MCP	傳統整合可吃掉半個 context	`pi install npm:pi-mcp-adapter`
Sub-agents	避免核心膨脹、強制工作流	`pi install npm:pi-subagents`
Plan mode	不想 opinionated 規劃儀式	Prompt Template 或 `/plan` Extension
IDE 整合	專注終端 Harness	RPC / SDK 給外部嵌

官方態度很直白：Ask Pi to build it, or install a package.

套件安裝範例：

pi install npm:pi-mcp-adapter    # MCP 生態，~200 token 代理工具
pi install npm:pi-subagents      # scout → planner → worker 鏈
pi install npm:pi-web-access     # 網頁搜尋與抓取

套件選型：不要一開始裝滿排行榜

pi.dev/packages 已有 50+ 社群套件。最佳實務是 Tier 0 起步，痛點出現再加。

Tier	組合	適合
Tier 0	僅 `AGENTS.md`	小 patch、學習四工具
Tier 1	+ `pi-mcp-adapter` + `pi-subagents`	日常 feature、review 迴圈
Tier 2	+ `pi-web-access` / `pi-codex-goal` / `context-mode`	長任務、context 膨脹

pi-mcp-adapter：MCP 但不炸 context

傳統 MCP 可能一個 server 就 10k+ tokens。pi-mcp-adapter 用單一 mcp 代理工具（約 200 token）按需發現與呼叫：

mcp({ search: "screenshot" })
mcp({ describe: "chrome_devtools_take_screenshot" })
mcp({ tool: "chrome_devtools_take_screenshot", args: '{"format": "png"}' })

Server 預設 lazy 啟動（第一次呼叫才連線）。常用工具可設 directTools 升級為一級工具。

pi-subagents：子代理怎麼編排

內建 8 種角色：scout、researcher、planner、worker、reviewer、oracle 等。支援 單一、鏈式（chain）、並行（parallel） 三種模式。

實戰 prompt 範例：

Use scout to map the auth flow, then planner for an implementation plan.
Run parallel reviewers: correctness, tests, and unnecessary complexity.

注意：parallel 模式 token 成本會倍增；裝了套件也不會自動跑 reviewer——要在 prompt 或 AGENTS.md 裡明確要求。

五階段實戰工作流

Pi 沒有「唯一官方流程」，但下面這套在實戰中最穩：

Phase 0  設定層（一次性）
   AGENTS.md + APPEND_SYSTEM.md + 精選 packages
        ↓
Phase 1  任務釐清
   自然語言目標 → 大任務用 create_goal 或 planner
        ↓
Phase 2  探索（唯讀）
   scout / read+grep / web-access
        ↓
Phase 3  實作
   worker 或主 session 小步 edit
        ↓
Phase 4  驗證閉環
   bash 跑 test/lint → reviewer → 修正
        ↓
Phase 5  上下文維護
   /compact、/tree 分支、context-mode（長 session）

三個反模式請避開：

一開始裝滿熱門榜——context 與認知負擔暴增
長專案只靠對話記憶——應寫進 AGENTS.md、goal 檔或 plan.md
沒給驗證條件就「改到好」——一定要指定 test/lint 成功才算完

探索階段原則：計畫寫進檔案（plan.md、context.md），先讀本地，不足再 web，大改前先跟人確認。

安裝與第一次實戰（約 10 分鐘）

前置：Node.js ≥ 22.19.0。

# 方式 A：官方 npm（方便鎖版本）
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 方式 B：macOS / Linux 一鍵腳本
curl -fsSL https://pi.dev/install.sh | sh

確認：

node -v    # ≥ 22.19.0
pi --help

登入模型（憑證存 ~/.pi/agent/auth.json）：

cd /path/to/your-sandbox-project   # 先用可弄髒的 side project
pi
/login

支援 Claude / ChatGPT / Copilot 訂閱 OAuth，或各廠 API Key。CI 可用環境變數，例如 export ANTHROPIC_API_KEY=...。

第一次驗證：

Summarize this repository and tell me how to run its checks.

進階試試：@README.md 附加檔案、!npm run lint 跑 shell、pi -p "Summarize" 非互動模式。

新手常見踩坑

狀況	怎麼修
`pi: command not found`	確認 npm global `bin` 在 PATH
沒 API key	在 Pi 內 `/login` 或設 env
AI 亂改重要檔	用 sandbox repo + `AGENTS.md` 限制
聊越久越糊	`/compact` 或 `/new`
想要 MCP 但沒有	`pi install npm:pi-mcp-adapter`

工具	適合誰	一句話
Pi Coding Agent	想控 context、終端 workflow、SDK 嵌入	極簡四工具 + 按需擴充，本文明星推薦
Cursor	日常 IDE 多檔編輯、UI 調整	索引與預覽強，跟 Pi 互補而非互斥
Claude Code	Anthropic 訂閱深度使用者	終端 Agent，內建功能較多、較 opinionated
pi-mcp-adapter	要用 MCP 又怕 context 爆炸	Pi 生態 MCP 首選
pi-subagents	需要 scout/reviewer 鏈	補 Pi 不內建子代理的缺口

結語：回歸極簡，但別回歸低效

Pi Coding Agent 重新定義了「AI 助手該怎麼存在於開發流程裡」——不試圖接管整個 IDE，而是當一個快、可配置、可版本控制的終端夥伴。

三個 takeaway：

極簡核心（四工具）換來 token 效率與完整上下文控制權
能力按需加（Packages / Skills / Extensions），不要一開始裝滿
跟 Cursor 分工：IDE 改 UI、Pi 跑終端批次與實驗——同一 worktree 別兩邊同時寫

若你厭倦了沉重、黑盒、硬塞工作流的 AI 工具，建議先用 sandbox 專案試一輪：到 pi.dev 安裝 → /login → 寫一份 AGENTS.md → 跑一個小任務驗證四工具閉環。覺得順了，再按需加 pi-mcp-adapter 與 pi-subagents。

PageSpeed Insights 與 Core Web Vitals 2026 完全指南

2026-07-07T02:00:00Z

網站速度不只影響使用者體驗，也與 Google 搜尋排名相關。要衡量與改善效能，PageSpeed Insights（PSI） 仍是最常用的免費工具——但 2024 年後 Core Web Vitals 已從 FID 改為 INP，很多人還在用舊觀念解讀分數。

本文整理 2026 年門檻、實地數據（CrUX）與實驗室數據（Lighthouse）的差異，以及 WordPress／靜態網站各自該優先處理什麼。若你只想先動手，可直接跳到「30 分鐘優化 Checklist」。

PageSpeed Insights 是什麼

PageSpeed Insights 是 Google 提供的免費網頁效能檢測工具，輸入網址即可取得：

實地數據（Field Data）：來自 Chrome User Experience Report（CrUX），反映真實使用者在過去 28 天內的體驗。
實驗室數據（Lab Data）：由 Lighthouse 在模擬環境中跑分，適合診斷「為什麼慢」，但不等於搜尋排名依據。

重點：Google 評估 Core Web Vitals 是否達標，看的是 實地數據第 75 百分位數（p75），不是 Lighthouse 分數。Lighthouse 90 分但 CrUX 顯示「需要改善」的情況很常見。

Core Web Vitals 2026：三項指標與門檻

2024 年 3 月起，INP（Interaction to Next Paint） 正式取代 FID，成為互動性指標。目前三項 Core Web Vitals 如下：

指標	衡量面向	良好（Good）	需要改善	不佳（Poor）
LCP 最大內容繪製	載入速度	≤ 2.5 秒	2.5–4.0 秒	> 4.0 秒
INP 互動至下次繪製	互動回應	≤ 200 毫秒	200–500 毫秒	> 500 毫秒
CLS 累積版面位移	視覺穩定	≤ 0.1	0.1–0.25	> 0.25

要通過 Core Web Vitals 評估，三項指標必須同時在「良好」門檻內（p75）。任一項落在「需要改善」或「不佳」，整體即視為未通過。

LCP：最大內容繪製

LCP 測量頁面主要內容（通常是 hero 圖、大標題或主要文字區塊）出現在螢幕上的時間。

常見拖慢原因：

伺服器回應慢（TTFB 過高）
未壓縮或未預載的大圖
阻塞渲染的 CSS / JavaScript
字型載入延遲

PSI 近年提供 LCP 子項目診斷（TTFB、資源載入延遲、元素渲染延遲），可快速判斷瓶頸在伺服器還是前端。

INP：取代 FID 的互動指標

舊版 FID 只量測「第一次」互動的延遲；INP 則看頁面上所有互動中最慢的一次，更能反映整體操作流暢度。

常見拖慢原因：

過多或過大的 JavaScript（長任務 > 50ms）
第三方腳本（廣告、追蹤、聊天外掛）
主執行緒被同步運算佔用

診斷建議：用 Chrome DevTools → Performance 錄製，在手機模擬模式下點擊選單、按鈕、表單，找出最慢的互動。

CLS：累積版面位移

CLS 衡量版面在載入過程中「意外跳動」的程度，例如廣告插入、圖片沒預留高度、字型切換（FOIT/FOUT）。

修正方向：

圖片與影片設定 width / height 或 aspect-ratio
廣告與嵌入內容預留固定空間
使用 font-display: swap 並搭配相近的 fallback 字型

實地數據 vs Lighthouse：該信哪個

	實地數據（CrUX）	實驗室數據（Lighthouse）
資料來源	真實 Chrome 使用者	模擬裝置與網路
用途	判斷是否達 CWV 門檻	找出具體優化項目
更新頻率	約 28 天滾動窗口	每次重新分析即時
新站 / 低流量站	可能顯示「沒有足夠資料」	仍可取得分數

實務流程：

先看 Search Console →「體驗」→ Core Web Vitals 報表（整站概況）。
對問題 URL 跑 PSI，確認實地數據哪一項未達標。
往下捲看 Lighthouse「診斷」與「建議」，逐項修復。
部署後等待 CrUX 更新（通常需數週）再驗證。

30 分鐘優化 Checklist

依影響力由高到低排列，適合多數內容型網站：

伺服器與快取（優先）

[ ] 啟用 HTTPS 與 HTTP/2 / HTTP/3
[ ] 使用 CDN 或邊緣快取
[ ] WordPress 站：啟用全頁快取（LiteSpeed Cache、WP Rocket 或主機內建快取）
[ ] 靜態站：確認託管商有邊緣快取（如 Cloudflare、Netlify）

圖片與字型

[ ] 轉換為 WebP / AVIF，並設定適當尺寸
[ ] 對 LCP 圖片使用 <link rel="preload">
[ ] 字型子集化，避免載入整個字型家族

JavaScript 與 CSS

[ ] 延遲載入非關鍵 JS（defer / async）
[ ] 移除未使用的 CSS 與外掛腳本
[ ] 審查第三方腳本（GA、廣告、社群外掛）

版面穩定

[ ] 所有媒體元素預留尺寸
[ ] 避免在首屏上方動態插入橫幅

WordPress 站的常見路徑

若你使用 WordPress，效能優化通常分三層：

主機：優先選支援 HTTP/2／HTTP/3、物件快取，或 LiteSpeed／同等高效 Web Server 的方案。
快取外掛：全頁快取、圖片 WebP／延遲載入、CSS／JS 延遲；Guest Mode 類功能可加速未登入訪客。
內容：精簡外掛、媒體庫定期清理「尚無關聯」圖檔（先備份）、避免首屏塞過多第三方腳本。

若考慮脫離 WordPress 的維護成本，可參考 WordPress vs Eleventy 的遷移經驗——靜態站天生在 LCP 與 INP 上有結構優勢。遷移內容時可用 eleventy-import（或先從 WP 匯出 WXR 再轉換）。

轉址與重複內容（簡記）

改版或刪文後，用主機 Redirects／.htaccess 做 301，避免 404 流失權重。
多篇搶同一關鍵字時，合併成一篇支柱文並把舊 URL 301 過來，比硬留薄文更有效。

工具對照表

工具	類型	適合用途
PageSpeed Insights	實地 + 實驗室	單頁快速檢測
Google Search Console	實地（整站）	監控通過率與問題 URL
Chrome DevTools → Performance	實驗室	深入追蹤 INP / 長任務
web-vitals JS 函式庫	自訂 RUM	送 GA4 做長期監控

常見迷思

Q：Lighthouse 滿分就代表 SEO 沒問題？
A：不一定。Lighthouse 是實驗室環境；排名相關的是 CrUX 實地數據。兩者都要看。

Q：FID 還會出現在 PSI 嗎？
A：部分舊報表或診斷可能仍提及 FID，但 Core Web Vitals 評估已改用 INP。優化時以 INP 為準。

Q：新站沒有 CrUX 資料怎麼辦？
A：先用 Lighthouse 修到合理分數，上線累積流量後再依 Search Console 調整。流量極低的頁面可能長期沒有實地數據，這是正常現象。

Q：改完多久才會在 PSI 看到改善？
A：Lighthouse 即時反映；CrUX 實地數據通常需數週才會更新。

結語

2026 年解讀 PageSpeed Insights 的關鍵字是：實地數據優先、INP 取代 FID、三項同時達標。先把 LCP 與伺服器/快取处理好，再處理 JavaScript 對 INP 的影響，最後補 CLS 的版面預留——這個順序在多數部落格與內容站上最省時間。

若你的 WordPress 站 LCP 長期卡在「需要改善」，先從主機快取與圖片著手；若已考慮遷移靜態站，本站 11ty 入門教學可作為下一步參考。

把文章從 WordPress 搬出來：eleventy-import 的匯出方式

2025-12-15T10:00:00Z

eleventy-import，終於可以把 WordPress 資料好好搬出來

11ty 的作者真的很懂這個痛點，直接自己寫了一個官方匯入工具：eleventy-import。

在真正遇到它之前，我其實也走過不少冤枉路。

一開始的想法很直覺：

👉 用 WordPress 外掛把文章匯出成 Markdown，再慢慢整理。

問題是——事情完全沒那麼單純。

為什麼一般 WordPress 匯出方式這麼痛苦？

之前試過幾個 WordPress 匯出外掛，產生出來的檔案大多有這些問題：

夾雜大量 WordPress 專用標籤
各種外掛留下來的 短代碼（shortcode）
XML / HTML 混在一起，格式不統一
有的圖片是外掛語法，還有各種奇怪的包法

最麻煩的是：

👉 這些雜物沒有固定格式，根本沒辦法用一支 script 全部清乾淨

每篇文章都像在開盲盒，例外狀況多到讓人直接放棄。

於是這件事就這樣被擱著了。

官方出手：11ty 的 WordPress 轉移教學

直到有一天，在 11ty 官網亂逛時，看到這一頁：

👉 https://www.11ty.dev/docs/migrate/wordpress/

不只寫了完整教學，作者本人還拍了一支影片，標題是「Escape From WordPress」，整個就是用意非常明顯 😂

影片在這裡：

https://www.youtube.com/watch?v=WuH5QYCdh6w

看到這裡才發現：

👉 原來 11ty 早就把「從 WordPress 逃離」這件事想好了。

使用 eleventy-import 匯出 WordPress 文章

直接執行一行指令

使用方式非常暴力，也非常爽快：

npx @11ty/import wordpress https://your-site.com/

或者如果習慣 pnpm

pnpm dlx @11ty/import wordpress https://your-site.com/

第一次看到這行指令的反應是：

不是吧？就這樣？

沒了？

結果真的就 完成了，YA。

匯出後的目錄結構

eleventy-import 會直接幫你輸出成 11ty 最愛的格式：

your_project/
  assets/
    image1
    image2

  article1.md
  article2.md

幾個我覺得「非常關鍵」的點：

每一篇文章都是 乾淨的 Markdown
所有圖片自動整理進 assets/ 目錄
文章內的圖片連結也已經幫你改好
幾乎沒有 WordPress 遺毒

一句話總結：

👉 這個輸出結果，完全就是為了「直接丟進 11ty」而設計的。

下一步：選擇 11ty Starter

文章資料已經乾乾淨淨了，接下來就是選一個起始專案。

eleventy-base-blog

GitHub：

eleventy-base

優點：

官方範例，結構清楚
幾乎沒有多餘抽象
非常適合「想自己慢慢加功能」的人
好改、不綁架設計

缺點：

功能極簡
SEO、樣式、搜尋、圖片優化都要自己補
一開始看起來有點「什麼都沒有」

eleventy-excellent

網站：

eleventy-excellent

優點：

幾乎什麼都幫你準備好了
包含 SEO、圖片處理、效能最佳化
設計完成度高，很快就能上線

缺點：

設計與架構選擇比較多是「作者的想法」
想大改時，需要先理解一整套設計哲學
對我來說，反而有點太滿了

最後選擇

一開始其實是用 eleventy-excellent，因為真的很省事。

但實際調整一陣子後發現：

👉 一定會有一些地方「不是自己想要的方式」

而要改動那些地方，反而得先拆作者原本的設計。

最後決定回頭選擇 eleventy-base-blog：

從最簡單的開始，

需要什麼，再一個一個加。

啟動 11ty，驗收成果

把剛剛匯出的文章與 assets 目錄，放進：

content/blog/

然後啟動專案：

pnpm run start

打開瀏覽器，直接進：

http://localhost:8080/文章名稱/

你會看到一件很神奇的事：

文章內容完整
圖片全部正常
但樣式幾乎全沒了

這一刻這是感動萬分！。

因為這代表：

👉 資料真的已經完全脫離 WordPress 了。

若你還在 WordPress 端，也可先用後台「工具 → 匯出」產生 WXR，再轉成 Markdown；本站實務路線是直接用 eleventy-import 一次帶走文章與圖片。

從這一刻起，是全新的開始

這樣的網站：

快到不行，幾乎是秒開
什麼功能都沒有
但結構乾淨、可控、沒有包袱

這就是取捨啊。

WordPress 的功能真的很方便，

但當你選擇 11ty，簡單也不是壞事。

用效能、掌控感，交換即插即用的便利性。

接下來，才是真正有趣的地方。我想要網站愈來愈有趣，而不是愈來愈失去興趣。

WordPress vs Eleventy：我為什麼把部落格遷到 11ty

2025-12-08T10:00:00Z

WordPress 作為全球最受歡迎的內容管理系統，已經幫助數百萬人建立了自己的網站。然而，近年來靜態網站生成器如 11ty 也逐漸受到開發者和內容創作者的青睞。這兩種工具各有優缺點，選擇哪一個取決於你的需求、技術背景和維護意願。

本文將比較 WordPress 與 11ty，從多個面向分析兩者的差異，幫助你做出最適合的選擇。

基本概念與定位

WordPress：成熟的全功能 CMS

WordPress 是一個功能完整的內容管理系統，提供完整的後端管理介面、資料庫儲存、動態內容生成等功能。它最初設計為部落格平台，但現在已經演變成一個全功能的 CMS，可以建立任何類型的網站。

11ty：現代化的靜態網站生成器

11ty（Eleventy）是一個以 JavaScript 為基礎的靜態網站生成器。它不依賴資料庫，而是將內容檔案轉換為靜態 HTML 檔案，在建置時生成完整網站。

主要差異比較

技術架構

WordPress 的動態架構

資料庫驅動：所有內容都儲存在 MySQL/PostgreSQL 等資料庫中
動態生成：每次頁面請求時，PHP 會從資料庫提取資料並動態生成 HTML
依賴關係：需要 PHP 運行環境、資料庫伺服器、Web 伺服器（如 Apache/Nginx）

11ty 的靜態架構

檔案驅動：內容以 Markdown、HTML 等檔案格式儲存
預先建置：在開發階段就生成所有靜態檔案
獨立部署：只需要靜態檔案伺服器，無需資料庫或特定運行環境

開發體驗

WordPress：視覺化編輯優先

優點：

所見即所得編輯器：古騰堡編輯器讓非技術人員也能輕鬆編輯內容
即時預覽：修改後立即在前端看到效果
外掛生態：有數萬個外掛可以快速增加功能

缺點：

學習曲線：雖然編輯簡單，但要客製化主題仍需學習 PHP、WordPress Hook 等
外掛相容性：不同外掛間可能衝突，需要花時間測試和調試

(現代 PHP 和 WordPress 也改善很多開發流程和工具了) 參考：如何使用 Herd 在本機架設 WordPress 網站

11ty：程式化開發體驗

優點：

版本控制友好：所有內容和設定都以檔案形式存在，可以用 Git 完整管理
完全客製化：從頭到尾控制每一個細節
現代開發工具鏈：可以使用 npm scripts、現代 CSS 框架、模組化 JavaScript

缺點：

學習門檻：需要基本程式設計知識
建置步驟：每次修改都需要重新建置才能看到效果

效能表現

WordPress：需要持續優化

初始載入：動態生成內容導致首次載入較慢
快取需求：需要安裝快取外掛（如 WP Rocket、LiteSpeed Cache）來改善效能
伺服器負載：高流量時需要更多伺服器資源

11ty：天生高效能

極快載入：純靜態檔案，CDN 快取效果極佳
低伺服器成本：可以使用免費的靜態託管服務
無資料庫查詢：沒有資料庫延遲問題

在相同的機器規格上，11ty會消耗較少資源，也不需要資料庫的建置，但你也可以購買專用主機，直接提升效能。

安全性考量

WordPress：常見攻擊目標

風險點：

外掛漏洞：許多安全性問題來自過時或有漏洞的外掛
PHP 環境：動態執行的本質帶來更多攻擊面
資料庫安全：需要保護資料庫免於攻擊

優點：

活躍社群：有大量安全性外掛和監控工具
定期更新：核心系統和外掛都會定期修補漏洞

11ty：本質安全

優點：

最小攻擊面：沒有資料庫、沒有動態執行，極難被入侵
內容驗證：建置時可以驗證所有內容和程式碼
相依性控制：可以精確控制所有第三方程式庫

考量點：

建置安全：需要保護建置過程和部署金鑰
第三方服務：如果整合外部服務（如表單、評論），需要注意這些服務的安全性

11ty 的好處是沒有後台登入功能，會被破解的地方就是主機本身，如果主機使用不夠安全，用什麼架構都一樣不安全。

維護成本與複雜度

WordPress：持續維護需求高

定期任務：

軟體更新：核心、主題、外掛都需要定期更新
安全性修補：監控並修補已知漏洞
效能優化：定期檢查和優化網站速度
備份管理：資料庫和檔案的備份策略

雖然都很簡單的定期更新，就是很繁雜，但外掛版本和 WordPress 版本和 PHP 版本之間的相容性需要考量。

11ty：一次性設定，長期穩定

維護內容：

內容更新：只需要編輯 Markdown 檔案
相依性更新：偶爾更新 npm 套件
重新部署：修改後重新建置和部署

內容管理與協作

WordPress：多人協作友好

角色權限系統：支援不同層級的使用者權限
即時協作：多個編輯者可以同時工作
審核流程：支援草稿、審核、發布流程

以我個人的情境來說（主要是一人維護與發文），WordPress 的角色權限與協作流程屬於「用得到很強，用不到就比較像是額外的系統功能」。相對地，我更在意的是內容變更是否能被精準追蹤與回溯。

而且你也很難追蹤另一個 WordPress 使用者動了什麼東西，改了什麼設定。

11ty：開發者導向協作

Git 工作流程：任何微小變動都清清楚楚，輕易追蹤管理版本。
內容即程式碼：內容和程式碼使用相同工具管理
版本歷史：完整的內容修改歷史記錄

適合的使用情境

選擇 WordPress 的情境

非技術使用者：如果你不熟悉程式設計，但需要快速建立網站
複雜功能需求：需要會員系統、電子商務、複雜表單等動態功能
多人協作內容：有多個內容編輯者，需要完善的權限管理
預算有限：不想花時間學習技術，希望快速上線
經常變更內容：網站內容需要頻繁更新，希望即時生效

選擇 11ty 的情境

技術背景使用者：熟悉 HTML、CSS、JavaScript，有程式設計基礎
效能至上：對網站載入速度有極高要求
安全性重視：希望最小化安全風險
長期維護考量：希望降低長期維護成本
個人/小型專案：部落格、作品集、文件網站等
版本控制需求：需要完整的內容版本歷史和協作流程

這些只是比較適合的點，並不代表這個功能一定得用某個技術才行。

實際案例分析

WordPress 適合案例

新聞網站：需要頻繁更新內容、多個編輯者協作
企業網站：需要 CMS 整合、聯絡表單、會員系統
電子商務：需要購物車、付款閘道、庫存管理
社群平台：需要用戶生成內容、評論系統

11ty 適合案例

個人部落格：內容創作者專注於寫作而非維護
產品文件：技術文件、API 文件等需要版本控制
作品集網站：設計師、開發者的個人展示網站
公司官網：簡單的企業介紹頁面，重視品牌形象

事實上 11ty 能做的事，WordPress 都做得到，但選擇 11ty 通常不是太功能上的選擇，很多是想在技術上架構上簡單透明一點。

遷移與轉換考量

從 WordPress 遷移到 11ty

優點：

大幅改善效能和安全性
降低託管成本
獲得更多控制權

挑戰：

需要將動態功能改為靜態或外部服務
失去所見即所得編輯體驗
需要學習新的工作流程

從 11ty 遷移到 WordPress

優點：

快速增加複雜功能
降低內容編輯門檻
支援更多非技術使用者

挑戰：

效能下降
維護複雜度增加
安全性風險提高

結論：沒有絕對的「最好」

WordPress 和 11ty 代表兩種不同的網站建置哲學：

WordPress 強調易用性和功能完整性，適合需要快速上線、複雜功能、或多人協作的專案
11ty 強調效能、安全性和開發體驗，適合技術背景的使用者和重視長期維護的專案

最終的選擇應該基於：

你的技術能力：熟悉程式設計嗎？
專案需求：需要哪些功能？預算多少？
維護意願：願意投入多少時間在網站維護上？
成長規劃：網站未來可能如何演變？

建議你可以先評估自己的需求，必要時甚至可以考慮混合使用兩者。例如，使用 11ty 建立主要內容網站，WordPress 作為後台內容管理系統。

無論選擇哪一個工具，重點是找到最適合自己工作流程和需求的解決方案。技術工具應該服務於內容創作，而不是成為創作的障礙。

WordPress 看很多了，來看看幾個 11ty 的網站

https://chrisburnell.com/
https://www.zachleat.com/
https://eleventy-excellent.netlify.app/

相關資源：

YouTube 批量取消訂閱：一鍵清理訂閱清單教學

2023-12-22T18:40:39Z

這篇文章將帶領大家透過一個實際案例，使用 Google YouTube API、OAuth、Svelte 和 TailwindCSS 建立一個簡單、方便的工具來批量取消訂閱 YouTube 頻道。

原因

像我這樣，訂閱了上百個 YouTube 頻道，卻發現大多數時間都在滑過不看的內容，這不僅分散注意力，也減少了尋找有趣內容的效率。

土法煉鋼一個一個點頻道退訂，大概退了一二十個頻道後，終於還是受不了，這樣點真的很累。YouTube 的管理介面對於批量操作真不友好，搜尋很多網路解法，並沒有找到方便好用又快速的方式。

不如自己來寫個工具，構想大概就用個簡單頁面顯示我的訂閱，然後使用 YouTube API 刪除挑選的訂閱。查看一下 Google 文件，果然有簡單的 API 可以用，那就開始吧。

參考 Subscriptions API

開發計畫

任何開發計畫第一件事，一定是把本機開發環境弄好，讓開發節奏順暢。

預計使用 SvelteKit 開發一個純網頁的前端應用，不需要後端 Server，只需要能呼叫 YouTube API 就行。

應該會需要使用 OAuth 授權，才能取得訂閱頻道清單。

畫面要簡單也不能太醜，TailwindCSS 能快速解決。

準備 Google API

要使用 Google API，首先需要在 Google Cloud Platform 上建立一個新的專案，然後在該專案中啟用 YouTube Data API v3。

建立新專案

登入 Google Cloud Console，建立一個新專案。

在建立的專案中，導航到「API 與服務」>「啟用 API 和服務」。

搜尋並選擇「YouTube Data API v3」，然後啟用它。

OAuth 設定

在相同的專案中，建立憑證，以便存取已啟用的 API。

設置 OAuth 同意畫面，提供必要的應用資訊。

在 OAuth 用戶端設置中，新增授權的重定向 URI，這將用於 OAuth 流程。

這是本機的測試 callback 網址，可以新增 URI 分別對應不同執行環境。

這個專案需要額外授權，所以需要經過 Google 審核，不然就只能自己使用，或者設定測試人員，分享給別人使用，最多 100 個人。

SvelteKit 初始專案

使用以下命令來建立一個新的 SvelteKit 專案：

pnpm create svelte@latest youtube-app

這將建立一個基礎的 SvelteKit 專案，你可以開始新增自己的程式碼。

code .

使用 Visual Studio Code 開啟專案。

TailwindCSS 美化介面

為了快速而美觀地構建 UI，這裡將使用 TailwindCSS。以下是整合 TailwindCSS 的步驟：

安裝 tailwindcss 及其相關依賴項目：

pnpm install -D tailwindcss postcss autoprefixer

然後產生 tailwind.config.js 和 postcss.config.js 檔案：

pnpm dlx tailwindcss init -p

安裝 DaisyUI（一個基於 Tailwind 的組件庫）：

pnpm i -D daisyui@latest

修改 svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

建立一個 ./src/app.css 檔案

@tailwind base;
@tailwind components;
@tailwind utilities;

建立 ./src/routes/+layout.svelte 檔案並匯入新建立的 app.css 檔案：

<script>
  import "../app.css";
</script>

<slot />

參考教學來源

第一個畫面

萬事俱備，先啟動 Server 看看

pnpm dev

接下來建立一個簡單的登入頁面，允許使用者透過 Google 認證來登入。使用剛剛設定的 OAuth 設定來實現這一點。

修改 ./src/routes/+page.svelte

<script lang="ts">
  // 重定向 URI, 在 OAuth 驗證流程中使用
  const redirect_uri = 'http://localhost:5173/oauth2callback'
  // 替換你自己的 client_id
  const client_id = 'your_client_id'

  /*
   * 創建表單以從 Google 的 OAuth 2.0 伺服器請求 access token。
   */
  function oauthSignIn() {
    // Google 的 OAuth 2.0 端點，用於請求 access token
    var oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";

    // 創建 <form> 元素，提交參數到 OAuth 2.0 端點。
    var form = document.createElement("form");
    form.setAttribute("method", "GET"); // 以 GET 請求發送。
    form.setAttribute("action", oauth2Endpoint);

    interface Params {
      [key: string]: string;
    }

    // 傳遞給 OAuth 2.0 端點的參數。
    var params: Params = {
      client_id,
      redirect_uri,
      response_type: "token",
      scope: "https://www.googleapis.com/auth/youtubepartner",
    };

    // 將表單參數添加為隱藏的輸入值。
    for (var p in params) {
      var input = document.createElement("input");
      input.setAttribute("type", "hidden");
      input.setAttribute("name", p);
      input.setAttribute("value", params[p]);
      form.appendChild(input);
    }

    // 將表單添加到頁面並提交，以打開 OAuth 2.0 端點。
    document.body.appendChild(form);
    form.submit();
  }
</script>

<h1 class="text-3xl m-4">Mass Unsubscribe YouTube</h1>
<p>
  <button class="btn btn-warning" on:click={oauthSignIn}>使用 Google 帳號登入</button>
</p>

頻道管理介面

接下來將新增一個頁面來展示使用者的 YouTube 頻道訂閱列表，並允許他們選擇要取消訂閱的頻道。

修改 ./src/routes/oauth2callback/+page.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { page } from "$app/stores";

  // 從 URL 字串中解析出存取令牌
  function getAccessTokenFromString(str: string) {
    const regex = /#access_token=([^&]*)/;
    const match = str.match(regex);
    return match ? match[1] : null;
  }

  // 取得當前頁面 URL 的存取令牌
  const accessToken = getAccessTokenFromString($page.url.hash);

  // 這裡放置你的 API 金鑰
  const key = 'key'

  // 存放訂閱頻道的陣列
  let subscriptions: any[] = [];

  // 頁面載入時執行
  onMount(() => {
    // 從 YouTube API 取得訂閱頻道
    fetch(
      `https://youtube.googleapis.com/youtube/v3/subscriptions?part=snippet&mine=true&key=${key}&maxResults=50`,
      {
        method: "GET",
        headers: {
          Authorization: "Bearer " + accessToken,
        },
      },
      )
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .then((data) => {
        subscriptions.push(...data.items);
        subscriptions = [...subscriptions];
        return nextPage(data.nextPageToken);
      })
      .catch((error) => {
        console.log(error);
      });
  })

  // 處理分頁，取得更多訂閱頻道
  function nextPage(token: string) {
    if (token) {
      console.log(token);
      fetch(
        `https://youtube.googleapis.com/youtube/v3/subscriptions?part=snippet&mine=true&key=${key}&maxResults=50&pageToken=${token}`,
        {
          method: "GET",
          headers: {
            Authorization: "Bearer " + accessToken,
          },
        },
      )
        .then((response) => {
          console.log(response);
          return response.json();
        })
        .then((data) => {
          subscriptions.push(...data.items);
          subscriptions = [...subscriptions];
          return nextPage(data.nextPageToken);
        })
    }
  }

  // 取消訂閱指定的頻道
  function unsubscribe(id: string) {
    fetch(
        `https://youtube.googleapis.com/youtube/v3/subscriptions?id=${id}`,
        {
          method: "DELETE",
          headers: {
            Authorization: "Bearer " + accessToken,
          },
        },
      )
        .then((response) => {
          console.log(response);
          if(response.status == 204) {
            subscriptions = subscriptions.filter((sub) => sub.id != id)
          }
        })
  }

  // 取消訂閱所有頻道
  function unsubscribeAll() {
    if (window.confirm("Do you really want to unsubscribe all channels?")) {
      let i = 0
      subscriptions.forEach((sub) => {
        setTimeout(() => {
          unsubscribe(sub.id)
          console.log(`unsubscribe ${sub.snippet.title}`);
        }, 2000 * i);
        i++
      })
    }
  }
</script>

  <h1 class="text-center text-4xl mt-4">You have {subscriptions.length} subscriptions</h1>

  <ul>

    {#each subscriptions as sub}
    <li class="m-12 border-2 p-4 flex flex-col">
      <a href="https://www.youtube.com/channel/{sub.snippet.resourceId.channelId}" target="_blank" class="self-center">
        <img src="{sub.snippet.thumbnails.default.url}" alt="" class="h-24"> 
      </a>
      <h2 class="text-center text-xl p-2">{sub.snippet.title}</h2>
      <p>{sub.snippet.description}</p>
      <button class="btn btn-warning mt-2 self-end" on:click={()=>{unsubscribe(sub.id)}}>unsubscribe</button>
    </li>
    {/each}

    <button class="btn btn-error w-full" on:click={unsubscribeAll}>Unsubscribe All</button>
  </ul>

目前為止，這個網頁應用已經開發完成。

參考教學： Using OAuth 2.0 for JavaScript Web Applications

實際測試畫面

因為這是未發布的測試應用程式，需要加入測試帳號才能使用，或者也可以直接發布，一樣可以進行測試。

新增要測試使用的 google 帳號

最多可以新增 100 個。

打開本機網址 http://localhost:5173/

選擇帳戶

安全驗證

尚未經過 Google 驗證，所以會出現警告訊息，保護使用者資料。

確認授權

查看目前所有訂閱頻道

點擊【unsubscribe】就會直接取消訂閱選擇的頻道。
點擊【Unsubscribe All】就會取消訂閱所有的頻道。

如何構建與發布

待續...

TypeScript 入門 5 分鐘：零基礎快速上手指南

2023-11-26T19:59:54Z

歡迎來到 TypeScript 的世界，一個讓 JavaScript 面面俱到的超級英雄！在這篇文章中，我們將一探 TypeScript 的奧秘，並學習如何在 macOS 上搭建開發環境和執行 TypeScript 程式。準備好開始吧！

如何建立 TypeScript 開發環境

在 macOS 上搭建 TypeScript 開發環境就像是準備一頓豐盛的晚餐，你需要一些基本的食材和調味料。這裡，我們的食材包括 Node.js 和一個適當的 TypeScript 配置。

安裝 Node.js

首先，你需要安裝 Node.js。Node.js 就像是廚房中的烤箱，是執行 JavaScript（和 TypeScript）的基本工具。

前往 Node.js 官網。
選擇適合 macOS 的版本下載並安裝。

也許你知道什麼是 Homebrew，那就簡單了。

brew install node

安裝 TypeScript Compiler (tsc)

tsc 即 TypeScript 編譯器，是 TypeScript 生態系統中的關鍵工具。TypeScript 編譯器負責將 TypeScript 程式碼（包含型別註釋和現代 JavaScript 特性）轉換成純 JavaScript 程式碼，這樣的程式碼能夠在任何 JavaScript 環境中執行，比如瀏覽器或 Node.js。

要使用 tsc，你通常會透過 Node.js package manager 在全域或在你的專案中本地安裝 TypeScript。

pnpm add typescript -g

然後運行 tsc 命令，後跟你想編譯的檔案名稱。例如：

tsc hello.ts

以下是 tsc 的主要功能：

編譯：tsc 讀取 TypeScript 檔案（.ts 或包含 JSX 時的 .tsx），並輸出 JavaScript 檔案（.js）。它根據 tsconfig.json 檔案或命令列參數指定的選項進行編譯
型別檢查：在編譯過程中，tsc 會檢查型別錯誤，如果程式碼不符合指定的型別約束，它將發出警告。這一步對於在開發過程早期捕獲錯誤至關重要
配置：您可以使用 tsconfig.json 檔案對編譯器進行微調，其中包括設定哪些檔案包含在內、編譯到哪個版本的 JavaScript、是否產生來源映射（source maps）以便於除錯等
整合：tsc 可以整合到建置過程中，並得到各種 IDE 的支援，提供即時的錯誤資訊和程式碼編寫回饋

初始化 tsconfig

接下來，我們需要初始化 TypeScript 的配置文件 tsconfig.json。這個文件就像是食譜，告訴 TypeScript 如何處理你的代碼。

tsconfig.json 是 TypeScript 專案的配置檔案，它指導 TypeScript 編譯器（tsc）如何編譯 TypeScript 程式碼。這個檔案允許開發者設定編譯選項，並定義哪些檔案應該被包含或排除在編譯過程之外。

打開終端機（Terminal），執行以下命令來初始化 TypeScript 配置：

tsc --init

這會在你的專案目錄中建立一個 tsconfig.json 檔案。

一個基本的 tsconfig.json 可能看起來像這樣：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist"
  }
}

這個配置會告訴 TypeScript 編譯器目標是 ES5 版本的 JavaScript，並使用 CommonJS 模組系統。"strict": true 開啟所有嚴格的型別檢查選項，確保編譯過程中進行嚴格的型別檢查。

如何運行 TypeScript

TypeScript 的世界充滿了多種執行程式碼的方式，就像你可以用不同的烹飪方式來準備一道菜。

使用 node

事實上你無法使用 node 直接執行 TypeScript 程式，必須先使用 tsc 將 TypeScript 編譯成 JavaScript 程式，然後才可以使用 node 執行。

首先，安裝 TypeScript：

pnpm add typescript -g

然後，使用 tsc 編譯你的 TypeScript 文件：

tsc hello.ts

這會生成一個 hello.js 文件。現在，使用 Node.js 運行這個文件：

node hello.js

使用 ts-node

ts-node 是一個方便的工具，可以直接執行 TypeScript 程式碼，無需先將其編譯為 JavaScript。這就像是一個即食餐點，快速且方便。

安裝 ts-node：

pnpm add ts-node -g

然後直接執行你的 TypeScript 檔案：

ts-node hello.ts

TypeScript Playground

如果你不想在本地安裝任何東西，TypeScript Playground 是一個線上沙盒工具，讓你可以寫 TypeScript 並即時看到結果。

訪問 TypeScript Playground 並開始玩轉 TypeScript！

Deno

Deno 是一個現代的 JavaScript/TypeScript 執行環境，內建了很多好玩的特性。它就像是一個高科技廚房，擁有你需要的一切。

安裝 Deno：

pnpm add deno -g

然後，編寫你的第一個 TypeScript 程式，並使用 Deno 執行它。

Deno 會自動處理 TypeScript 的編譯工作。

// hello.ts
console.log("Hello from Deno!");

執行它：

deno run hello.ts

Bun

Bun 是一個新興的 JavaScript 執行環境，專注於效能和開發者體驗。想像一下，一個超級充電的廚房機器人幫助你烹飪！

安裝 Bun：

pnpm add bun -g

編寫你的 TypeScript 程式：

// hello.ts
console.log("Hello from Bun!");

使用 Bun 執行它：

bun run hello.ts

恭喜你，你已經完成了 TypeScript 的入門課程！現在，你可以開始探索這個強大語言的更多可能性了。記住，編程就像烹飪一樣，要不斷嘗試新的配方和工具。祝你在 TypeScript 的旅程中玩得開心！ 🚀🎉

PHP 新手入門：10 個實戰練習題快速上手

2023-11-09T04:28:13Z

PHP 程式語法的基礎教學：一步步帶你深入 PHP 的世界，從基礎語法到進階函數，通過每個章節的簡短範例與註解，幫助打造堅實的開發根基。

為什麼要學習 PHP？

PHP 是一種廣泛使用的伺服器端腳本語言，特別適合網頁開發。它易於學習，功能強大，並且有豐富的社群支援。無論你是想要建立動態網站、開發 Web 應用程式，還是想要進入後端開發領域，PHP 都是一個很好的起點。

基本語法

PHP 的開始與結束標籤

PHP 腳本以 <?php 開始，並以 ?> 結束。如果一個文件完全由 PHP 編寫，則結束標籤可以省略，這有助於避免在輸出中意外添加空格或換行。

最佳實踐：

在純 PHP 檔案中，建議省略結束標籤 ?>，這樣可以避免在檔案末尾意外輸出空白字元，這些空白字元可能會導致 header 已經發送後無法修改的問題。

<?php
// 這是 PHP 代碼的開始
echo "Hello, World!";
// 這是 PHP 代碼的結束
?>

如何在網頁中嵌入 PHP 代碼

PHP 代碼可以嵌入 HTML 文件中，以創建動態內容。PHP 代碼可以放置在 HTML 標籤之間。

<!DOCTYPE html>
<html>
<head>
  <title>PHP Test</title>
</head>
<body>
  <?php echo "<p>Hello, World!</p>"; ?>
</body>
</html>

基本的輸出命令：echo 與 print

echo 和 print 是 PHP 中的兩個基本輸出命令。echo 是一個語言結構，可以快速輸出一個或多個字符串。print 也是類似的，但它只能輸出一個字符串，並且始終返回 1。

兩者的差異：

echo 可以輸出多個字符串，執行速度稍快
print 只能輸出一個字符串，但可以作為表達式使用（因為它會返回值）

在實際開發中，echo 更常被使用，因為它更靈活且執行效率較高。

<?php
echo "Hello, ", "World!"; // 輸出多個字符串
print "I'm about to learn PHP!"; // 輸出一個字符串
?>

註釋的正確使用方法

註釋是解釋代碼或防止執行代碼的重要工具。PHP 中有單行註釋和多行註釋。

<?php
// 這是單行註釋

/*
這是多行註釋
可以跨越多行。
*/
?>

變數

變數的宣告與命名規則

在 PHP 中，所有變數都以 $ 符號開始，其後是變數的名稱。變數名稱必須以字母或下底線開頭，後面可以跟字母、數字或下底線。

<?php
$varName = "John"; // 正確的變數宣告
$_varName = "Doe"; // 以下劃線開頭的變數宣告
?>

不同類型的變數（整數、浮點數、字串、布林值等）

PHP 支持多種數據類型，包括整數、浮點數（或雙精度數）、字串和布林值。

<?php
$integer = 42; // 整數
$float = 42.24; // 浮點數
$string = "Hello World"; // 字串
$boolean = true; // 布林值
?>

變數的作用域（local、global、static）

變數的作用域決定了在哪裡可以訪問該變數。在 PHP 中，變數可以有局部作用域、全局作用域或靜態作用域。

作用域說明：

局部變數（Local）：在函數內部宣告的變數，只能在該函數內部使用
全局變數（Global）：在函數外部宣告的變數，可以在函數外部使用，但在函數內部需要使用 global 關鍵字才能訪問
靜態變數（Static）：在函數內部使用 static 關鍵字宣告的變數，其值在函數調用之間會保留

<?php
$globalVar = "global"; // 全局變數

function testFunction() {
  global $globalVar; // 在函數內訪問全局變數需要使用 global 關鍵字
  $localVar = "local"; // 局部變數
  echo $globalVar; // 現在可以正常訪問全局變數
}

testFunction();
?>

預定義的超全局變數

PHP 提供了許多預定義的超全局變數，這些變數在全局範圍內始終可用，不需要使用 global 關鍵字就可以在任何地方訪問。

常用的超全局變數：

$_GET：從 URL 參數獲取數據
$_POST：從表單 POST 請求獲取數據
$_SESSION：存儲會話數據
$_COOKIE：獲取 Cookie 數據
$_SERVER：包含伺服器和執行環境的資訊

<?php
// 使用 $_GET 超全局變數從 URL 獲取數據
// 例如：http://example.com/index.php?name=John
if (isset($_GET['name'])) {
    echo "Hi " . $_GET['name'] . "!";
}
?>

安全提醒：

使用超全局變數時，務必進行資料驗證和過濾，以防止安全漏洞（如 XSS 攻擊）。可以使用 htmlspecialchars() 或 filter_input() 函數來處理輸入資料。

更多超全局變數請參考：Predefined Variables

條件判斷

if、else 與 elseif 的基本使用

if 語句用於根據條件執行代碼。如果條件為真，則執行代碼；else 與 elseif 提供了額外的條件判斷。

<?php
$age = 20;

if ($age >= 18) {
    echo "您是成年人。";
} elseif ($age < 18 && $age > 0) {
    echo "您是未成年人。";
} else {
    echo "無效的年齡。";
}
?>

switch 語句的使用場景

當您需要依據同一變數的值，來區分多個條件時，switch 語句是一個更好的選擇。它比多個 if-elseif 語句更清晰、更容易維護。

使用 switch 的優點：

程式碼更簡潔易讀
執行效率通常比多個 if-elseif 更高
更容易維護和擴展

<?php
$today = "Monday";

switch ($today) {
    case "Monday":
        echo "今天是星期一。";
        break;
    case "Tuesday":
        echo "今天是星期二。";
        break;
    // 其他情況...
    default:
        echo "查無此日。";
}
?>

比較與邏輯運算符的使用

比較運算符（如 ==, !=, >, <）用於比較兩個值，而邏輯運算符（如 &&, ||, !）用於組合比較運算符。

重要的比較運算符：

==：相等（只比較值，不比較類型）
===：全等（比較值和類型）
!= 或 <>：不等於
!==：不全等

建議：

在 PHP 中，建議使用 === 和 !== 進行嚴格比較，這樣可以避免類型轉換帶來的意外結果。

<?php
$age = 20;
$hasPermission = true;

if ($age >= 18 && $hasPermission) {
    echo "您可以進入。";
} else {
    echo "您無法進入。";
}
?>

迴圈

for

for 迴圈是當您知道迴圈應該執行的次數時使用。

<?php
for ($i = 0; $i < 5; $i++) {
    echo "迴圈次數: $i ";
}
?>

while

當您不知道迴圈應該執行的次數時，使用 while 迴圈。

<?php
$i = 0;
while ($i < 5) {
    echo "迴圈次數: $i ";
    $i++;
}
?>

do-while

do-while 迴圈至少執行一次代碼，然後才檢查條件。

<?php
$i = 0;
do {
    echo "迴圈次數: $i ";
    $i++;
} while ($i < 5);
?>

foreach

foreach 迴圈用於遍歷陣列的元素。

<?php
$colors = ["red", "green", "blue"];

foreach ($colors as $color) {
    echo "顏色: $color ";
}
?>

迴圈控制語句（break、continue）

break 用於立即退出迴圈，continue 用於跳過當前迴圈的剩餘代碼並開始下一次迴圈。

<?php
for ($i = 0; $i < 10; $i++) {
    if ($i == 3) continue; // 跳過數值 3
    if ($i == 8) break; // 當數值達到 8 時退出迴圈
    echo "迴圈次數: $i ";
}
?>

陣列

陣列的創建與基本操作（添加、刪除、排序）

陣列是存儲多個值的變數。在 PHP 中，有多種方式可以創建和操作陣列。

<?php
// 創建陣列
$fruits = array("apple", "banana", "cherry");

// 添加元素
$fruits[] = "durian";

// 刪除元素
unset($fruits[1]); // 移除 "banana"

// 排序
sort($fruits); // 升序排序
?>

數值與關聯陣列的區別

數值陣列使用數字作為索引（從 0 開始），而關聯陣列使用您指定的 KEY（可以是字串）。

選擇建議：

使用數值陣列：當你需要按順序存儲數據，且不需要特定的鍵名時
使用關聯陣列：當你需要用有意義的鍵名來存取數據時（例如：用戶 ID、產品名稱等）

<?php
// 數值陣列
$colors = array("red", "green", "blue");

// 關聯陣列
$ages = array("Peter"=>22, "Clark"=>32, "John"=>28);
?>

陣列的遍歷方法

遍歷陣列即是訪問陣列中的每個元素。foreach 是最常用的遍歷方法。

<?php
// 關聯陣列的遍歷
foreach ($ages as $name => $age) {
    echo "$name is $age years old.";
}
?>

進階陣列

陣列的內建函數

PHP 提供了許多內建函數來操作陣列。

<?php
// array_filter 用於過濾陣列
$numbers = [1, 2, 3, 4, 5];
$even = array_filter($numbers, function($number) {
    return $number % 2 == 0;
});

// array_map 用於對每個元素應用回調函數
$squared = array_map(function($number) {
    return $number * $number;
}, $numbers);
?>

陣列的合併、分割與比較

合併陣列可以使用 array_merge，分割陣列可以使用 array_slice，比較陣列可以使用 array_diff 和 array_intersect。

<?php
// 合併陣列
$combined = array_merge($fruits, $colors);

// 分割陣列
$sliced = array_slice($combined, 1, 3);

// 比較陣列
$difference = array_diff($combined, $fruits);
?>

函數

自定義函數的創建與參數

在 PHP 中，自定義函數是一種封裝代碼以便重用的方式。函數可以接受參數，這些參數可以是任何類型的數據。

<?php
// 定義一個函數
function greet($name) {
    return "Hello, " . $name . "!";
}

// 調用函數
echo greet("World"); // 輸出: Hello, World!
?>

返回值的類型與作用

函數可以返回值，返回值可以是任何類型，包括數組和對象。

<?php
// 定義一個函數返回數組
function getFruitColors() {
    return array('apple' => 'red', 'banana' => 'yellow');
}

// 獲取返回值
$fruitColors = getFruitColors();
echo $fruitColors['apple']; // 輸出: red
?>

匿名函數與閉包（anonymous or closures）

匿名函數，也稱為閉包，允許臨時創建一個沒有指定名稱的函數。閉包可以捕獲外部變數，這使得它們非常適合用於回調函數和高階函數。

使用場景：

作為回調函數傳遞給其他函數
在陣列操作中使用（如 array_map、array_filter）
創建事件處理器

<?php
// 匿名函數
$greet = function($name) {
    return "Hello, " . $name . "!";
};

// 調用匿名函數
echo $greet("PHP"); // 輸出: Hello, PHP!
?>

進階函數

引用傳遞與值傳遞的差異

在 PHP 中，默認情況下函數參數是通過值傳遞的。如果希望通過引用傳遞，可以在參數前加上 & 符號。

<?php
// 通過引用傳遞
function addExclamation(&$string) {
    $string .= "!";
}

$str = "Hello";
addExclamation($str);
echo $str; // 輸出: Hello!
?>

可變參數函數的使用

可變參數函數允許接受任意數量的參數。

<?php
// 可變參數函數
function sum(...$numbers) {
    return array_sum($numbers);
}

echo sum(1, 2, 3, 4); // 輸出: 10
?>

類型聲明與嚴格模式的使用

類型聲明允許函數指定參數和返回值的類型。自 PHP 7 起，可以啟用嚴格模式。

<?php
// 啟用嚴格模式
declare(strict_types=1);

function add(int $a, int $b): int {
    return $a + $b;
}

echo add(5, "5"); // 類型錯誤
?>

嚴格模式的重要性：

預設狀況下，PHP 會進行類型轉換，所以 add(5, "5") 不會有錯誤。但啟用了嚴格模式（declare(strict_types=1);）後，數字 5 和字串 "5" 被視為不同的類型，會產生類型錯誤。這有助於及早發現程式錯誤，提高程式碼品質。

生成器（generators）的使用

生成器提供了一種簡單的方式來實現迭代器，允許你通過 yield 關鍵字來生成一系列的值。

<?php
// 使用生成器
function getNumbers() {
    for ($i = 0; $i < 5; ++$i) {
        yield $i;
    }
}

foreach (getNumbers() as $number) {
    echo $number . PHP_EOL; // 輸出: 0 1 2 3 4
}
?>

總結

在學習了 PHP 的基礎知識後，您已經具備了開始建立網頁應用程式的能力。但是，程式設計和網頁開發是一個不斷進步的領域，有許多進階主題和相關技術等待您的探索。

下一步學習方向：

以下是一些您可以繼續學習的方向：

物件導向程式設計（OOP）

深入了解類別、物件、繼承、多態性和封裝等概念，這些都是物件導向程式設計的核心。透過OOP，您可以寫出更模組化、可重用和易於維護的代碼。

設計模式

設計模式是前人的心血結晶，實作經由驗證過的解決方案，解決特定問題領域。這些模式提供了一個重用軟件設計的方法，可以在許多不同情境中使用，而不必每次都重新發明輪子。

PHP 框架

學習如 Laravel、Symfony 或 CodeIgniter 等流行的PHP框架。這些框架提供了許多功能，如路由、模板引擎、ORM、安全性和緩存，可以幫助您更快速、更高效地開發複雜的應用程式。

資料庫

除了MySQL，您可以探索其他類型的資料庫，如 PostgreSQL、MongoDB 或 Redis。了解如何設計資料庫、執行複雜查詢和優化資料存取效能。

安全性

網站安全是一個廣泛且複雜的主題，包括了解如何防範 SQL 注入、跨站腳本（XSS）、跨站請求偽造（CSRF）和其他安全漏洞。

API 開發

學習如何創建和使用 Web API，包括 REST 和 GraphQL。了解如何設計良好的 API 介面，以及如何使用OAuth 等方式來保護您的 API 和資料。

測試和維護

學習自動化測試，包括單元測試、功能測試和集成測試，以確保您的代碼品質。了解如何使用版本控制系統，如 Git，來管理代碼變更和協作。

性能優化

探索如何優化 PHP 代碼的性能，包括使用 OPcache、瞭解資料庫索引、緩存策略和代碼剖析。

現代前端技術

PHP 通常用於後端開發，但了解前端技術如 HTML、CSS、JavaScript 及框架如 React 或 Vue.js，將使您成為一名全端開發者。

持續學習的重要性：

透過不斷學習和實踐，將能夠擴展更多技能，並在網頁開發的世界中保持競爭力。記住，程式設計是一個需要持續學習的領域，技術不斷更新，保持學習的熱忱和好奇心是成功的關鍵。

實作建議：

學習程式設計最好的方式就是動手實作。建議你：

從簡單的專案開始，逐步增加複雜度
閱讀其他人的程式碼，學習最佳實踐
參與開源專案，與其他開發者交流
建立自己的專案作品集

更多參考教學：PHP Language Reference

免費 SSL 憑證完全指南：Let's Encrypt vs ZeroSSL 2026 對比

2023-10-31T19:55:18Z

本文將介紹 3 個免費 SSL 憑證頒發機構，說明一般的申請和驗證步驟，最後並提供免費的檢測 SSL 工具，對個人或小型商業網站都可以參考。無論你是剛開始架設網站的新手，還是想要為現有網站增加安全性的站長，這篇文章都能幫助你了解如何免費獲得 SSL 憑證。

免費 SSL 憑證簡介

免費 SSL 憑證是一種網站安全工具，提供基礎的資料加密和身份驗證功能，但通常具有較短的有效期限（通常是 30-90 天）。這種憑證的主要優勢是費用低廉（甚至免費），使得預算有限或是初創的小型網站也能提供基本的網站安全，讓網站能夠使用 HTTPS 協定來保護用戶資料。

為什麼是必要的？

資料保護: 免費 SSL 憑證為用戶提供了最基本的資料加密，保護其隱私和敏感資訊。

增加信任度: 即使是免費的 SSL 憑證，也能讓您的網站在網址列中顯示 "https" 和鎖頭圖標，這通常會讓訪客感到更加安心，提升網站的可信度。

SEO 優勢: 搜尋引擎，如 Google，傾向於將使用 SSL 憑證的網站排在更高的位置。

符合基本規範: 許多線上服務和支付閘道要求網站必須使用 SSL 憑證，即使是免費的也能滿足最基本的需求。

簡單快速: 免費 SSL 憑證通常很容易申請和安裝，是一個為網站增加基本安全性的快速方法。

注意事項：

但值得注意的是，免費 SSL 憑證通常不提供高級的保障措施，例如延伸驗證（Extended Validation, EV）或組織驗證（Organization Validation, OV），而且需要較頻繁的續訂。對於涉及高度敏感資訊或大規模商業運營的網站，可能需要考慮使用付費的 SSL 憑證來獲得更全面和持久的保護。

如果您計劃架設一個新網站，使用免費 SSL 憑證是一個提供基本網站安全，同時又不需花費太多資源的好選擇。它能夠滿足大多數個人網站和小型商業網站的基本安全需求。

申請免費 SSL 憑證的一般步驟

申請免費的 SSL 憑證涉及幾個主要步驟，這些步驟會根據您選擇的提供商而有所不同。以下是一個通用的指南，詳細規定請參考各憑證頒發機構的官方文件：

1. 選擇 SSL 提供商：

研究並選擇最適合您需求的免費 SSL 憑證頒發機構。熱門選項包括 Let's Encrypt、Cloudflare 和 ZeroSSL。每個提供商都有其特色和適用場景，可以根據您的技術能力和需求來選擇。

2. 註冊帳戶：

訪問您選擇的提供商的官方網站，並註冊帳戶。大多數提供商都提供免費註冊，只需要基本的資訊即可。

3. 域名驗證：

通常需要證明您擁有域名的所有權。一般可以通過以下幾種方式之一來完成：

DNS TXT 記錄：在您的域名 DNS 設定中添加特定的 TXT 記錄
電子郵件驗證：接收並回覆驗證郵件
文件上傳驗證：在網站根目錄上傳驗證文件

4. 生成憑證：

一旦您的域名獲得驗證，就可以生成 SSL 憑證。某些服務會自動執行此步驟，而有些則需要手動觸發。

5. 安裝憑證：

獲得憑證後，需要將其安裝到網站伺服器上。這個過程會根據您的網站主機環境而有所不同。通常，需要上傳兩個文件：

憑證文件（通常是 .crt 或 .pem）
私鑰文件（通常是 .key）

6. 更新網站配置：

配置網站伺服器以使用您域名的 SSL 憑證。具體過程會根據是否使用 Apache、Nginx 或其他網站伺服器而有所不同。如果您使用 cPanel 可以簡化整個過程，或者使用虛擬主機提供的介面，一般都會提供自動安裝功能，讓設定更加便利。

7. 測試安裝：

使用 SSL 檢查工具確保 SSL 憑證已正確安裝。這一步非常重要，可以確保您的網站能夠正常使用 HTTPS。

8. 自動更新憑證設定：

設定自動憑證更新。許多提供商都提供這個功能或提供相關文檔。由於免費憑證的有效期通常較短（90 天），自動更新功能可以避免憑證過期的問題。

9. 監控：

即使已設定自動更新，也要留意憑證的到期日期，以確保服務不間斷。建議定期檢查憑證狀態，確保自動更新功能正常運作。

各提供商的特色：

當您想使用 Let's Encrypt 的免費 SSL 憑證時，一切都是自動化的，只需要使用 Certbot 這類的軟體，它會自動驗證您的域名並安裝憑證。這對於熟悉命令列操作的開發者來說非常方便。

如果您選擇 Cloudflare，步驟也很簡單。首先，將您網站的 DNS 設定改成 Cloudflare DNS。等 DNS 設定傳播完成後，Cloudflare 會自動為您應用 SSL 憑證。這個過程幾乎不需要任何手動操作，非常適合不熟悉技術細節的用戶。

至於 ZeroSSL，它提供一個非常友善的操作介面，也就是一個簡單易用的儀表板。但這個平台需要您手動下載憑證檔案，然後自行安裝到您的網站上。雖然需要多一個步驟，但介面清晰易懂，對於初學者來說也很友好。

所以，這三個平台各有各的優點，選擇哪個主要看您的需求和個人喜好。如果您偏好自動化，可以選擇 Let's Encrypt 或 Cloudflare；如果您需要更直觀的操作介面，ZeroSSL 可能是更好的選擇。

三大免費 SSL 憑證頒發機構

以下是一個比較各種免費 SSL 憑證提供商的表格，幫助您快速了解各提供商的特色：

提供商	自動化	更新周期	信任程度	附加服務	限制
Let’s Encrypt	是	90天	高	無	必須設定自動續期
Cloudflare	是	自動	高	CDN, DDoS防護	必須使用 Cloudflare 的 DNS
ZeroSSL	部分	90天	高	有付費選項	免費憑證需要手動續期

Let’s Encrypt

公司簡介:
Let's Encrypt 是一個開放和自動化的憑證頒發機構，由網際網路安全研究小組（Internet Security Research Group, ISRG）運營。成立於 2014 年，該組織致力於推動網路安全，特別是透過讓 SSL/TLS 憑證更容易獲得和管理。這家機構得到了 Mozilla、Cisco、EFF（電子前沿基金會）等多家大型企業和非營利組織的支持。它成立的主要目的是減少獲取和管理憑證的複雜性，這經常阻礙了網站所有者實施 HTTPS。更多詳細資訊可以在他們的官方網站上找到。

功能:
Let's Encrypt 旨在簡化 SSL 憑證的申請過程。使用 ACME（自動化憑證管理環境）協定，Let's Encrypt 可以自動驗證域名所有權，並發行和安裝憑證。頒發的是 DV（Domain Validation）憑證，主要用於確保資料傳輸過程的加密。憑證有 90 天的有效期，但提供自動續訂功能，從而減少了手動管理的需要。

附加服務:
多個開源和商業應用已經整合了 Let’s Encrypt，可以簡化憑證的部署和管理。

優點和缺點：

Let's Encrypt 的主要優點包括易於使用、無需支付費用、以及大量的社群和商業支持。其自動續訂功能使得憑證管理更加無痛，幾乎不需要人工介入。

然而，它也有一些局限性。首先，其 90 天的憑證有效期相對較短。這需要網站所有者設定自動續訂，否則可能會導致憑證過期，造成網站無法正常運作。其次，Let's Encrypt 只提供 DV 憑證，而沒有提供 OV（組織驗證）或 EV（擴展驗證）憑證，這些通常用於更大型的企業或需要更高級別安全保證的網站。

您可能有興趣：多數 cPanel 主機可用 AutoSSL／Let's Encrypt 一鍵申請並自動續約；細節也可對照 ZeroSSL 教學。

ZeroSSL

公司簡介:
ZeroSSL 是一家專門提供 SSL/TLS 憑證的公司，於 2016 年成立。它是一家相對年輕但快速崛起的企業，專注於簡化 SSL 憑證的申請和管理過程。該公司總部位於歐洲，並以其用戶友善的介面和靈活的憑證選項聞名。為了更全面地了解 ZeroSSL，您可以造訪他們的官方網站。

功能:
ZeroSSL 提供多種類型的 SSL 憑證，包括域名驗證（DV）和擴展驗證（EV）憑證。他們的免費 SSL 憑證具有 90 天的有效期，並且支援自動續訂。除了基本的單一域名憑證之外，ZeroSSL 還提供通配符憑證，這允許您用單一個憑證保護無限數量的子域名。

附加服務:
ZeroSSL 有提供 REST API，這使得大型組織能夠更容易地整合和管理 SSL 憑證。

優點和缺點：

ZeroSSL 最大的優點是其簡單易用的介面和多樣的憑證選項，這使得它對於不同規模和需求的企業都很適用。而且，由於提供免費的 SSL 憑證，這使得小型網站和個人用戶能夠輕鬆地增加他們網站的安全性。

然而，該服務的免費憑證有 90 天的有效期限，這表示用戶需要定期續訂。雖然提供自動續訂功能，但免費版本需要手動下載和安裝憑證。另外，雖然他們提供多樣的憑證選項，但進階選項可能會變得相對昂貴。

您可能有興趣：ZeroSSL 教學，免費 SSL 憑證-申請與安裝步驟

Cloudflare

公司簡介:
Cloudflare 是一家美國公司，於 2009 年成立，專注於為網站提供內容分發網路（CDN）、網路安全、DDoS 保護和域名服務。Cloudflare 致力於改善網路的整體效能和安全性。公司的服務在全球有超過 200 個資料中心，為數以百萬計的網站提供支援。更多資訊可以在他們的官方網站上找到。

功能:
Cloudflare 提供了多種 SSL 憑證選項，包括基本的共享 SSL 憑證和自訂 SSL 憑證。他們的 Universal SSL 是免費的，並且在用戶啟用 Cloudflare 服務後自動發佈和續訂。此外，他們還提供對 HTTP/3、0-RTT 和 TLS 1.3 等現代安全標準的支援。

附加服務:
除了 SSL 服務之外，Cloudflare 還提供一系列其他安全和效能優化工具，包括 Web 應用程式防火牆（WAF）、圖像和影片優化、流量平衡以及安全性分析等。

優點和缺點：

Cloudflare 的主要優點是它為用戶提供了一個全面的安全和效能優化解決方案。其 SSL 服務能夠與其他安全功能緊密整合，提供額外的保護。另外，由於其全球資料中心網路，憑證分發和更新都非常迅速，幾乎是即時的。

然而，雖然基本的 SSL 服務是免費的，但進階功能和更高級別的安全憑證則需要額外支付。此外，使用 Cloudflare 的 SSL 服務需要將 DNS 設定轉移到 Cloudflare，這對於僅需要基本 SSL 憑證的小型網站來說，可能顯得過於繁瑣。但如果你同時需要 CDN 和 DDoS 防護等功能，Cloudflare 是一個很好的選擇。

SSL 檢查工具

SSL 檢查工具主要用於檢查網站的 SSL 憑證是否已正確安裝，以及是否存在任何設定問題或安全漏洞。以下是一些常用的 SSL 檢查工具，可以試試看檢查自己的網站：

1. SSL Labs' SSL Server Test

這是一個非常詳細的檢查工具，提供了包括憑證鏈完整性、協定支援、加密套件等方面的詳細資訊。它會給出一個評分（A+ 到 F），並提供詳細的改進建議。這是業界最受信任的 SSL 檢查工具之一。

2. Geocerts' SSL Checker

這個工具可以迅速檢查 SSL 憑證是否正確安裝，並提供有用的診斷資訊。它會顯示憑證的有效期、頒發機構、以及憑證鏈的完整性。

3. DigiCert® SSL Installation Diagnostics Tool

這是另一個由憑證頒發機構提供的工具，它能夠檢查憑證是否正確安裝，並提供其他相關的 SSL 設定資訊。即使您使用的不是 DigiCert 的憑證，這個工具也能提供有用的診斷資訊。

4. Wormly SSL Web Server Tester

這個工具提供基本的 SSL 檢查，包括憑證的有效期、憑證頒發機構等。它簡單易用，適合快速檢查憑證的基本狀態。

以上的工具各有特色和功能，您可以根據需求選擇適合的工具來進行 SSL 檢查。建議在安裝 SSL 憑證後，至少使用其中一個工具來驗證安裝是否成功，並確保沒有安全漏洞。

PHP 例外處理，幫你抓住所有例外錯誤

2023-10-14T05:43:38Z

基本概念

在 PHP 中，例外處理主要由三個關鍵字來實現，分別是 try、catch 和 finally。

`try` 區塊

這是預計可能會出問題的程式碼區塊。我們會將那些有風險的操作放在 try 區塊中。例如，開啟一個檔案或執行一個數學運算。

try {
    // 風險操作，例如開啟一個檔案
    $file = fopen("example.txt", "r");
}

`catch` 區塊

如果 try 區塊中的程式碼出了問題，控制流程會立即跳到 catch 區塊。在這裡，可以定義如何回應那些問題，例如顯示一個錯誤訊息。

catch (Exception $e) {
    // 處理例外，例如顯示錯誤訊息
    echo "An error occurred: " . $e->getMessage();
}

`finally` 區塊

不管 try 和 catch 區塊的結果如何，finally 區塊中的程式碼都會被執行。這是一個理想的地方來釋放資源或進行其他清理工作。

finally {
    // 釋放資源，例如關閉檔案
    if ($file) {
        fclose($file);
    }
}

把這三個元素結合起來，就擁有了一個完整的例外處理機制，能夠幫助你更穩健地設計和執行程式。

如何自訂 Exception

在 PHP 的內建例外類型中，可能會發現沒有一個能適合描述某些特定問題。這時，建立自訂的 Exception 類型就變得特別有用。自訂 Exception 不僅能讓你更精確地描述問題，還能提高程式的可讀性和維護性。

繼承 `Exception` 類別

在 PHP 中，所有例外都是 Exception 類別或其子類別的實例。所以，建立自訂例外首先需要繼承 Exception 類別。

class FileNotFoundException extends Exception {
    // 自訂邏輯
}

添加額外的方法和屬性

繼承了 Exception 之後，可以添加額外的方法和屬性以滿足特定需求。例如，添加一個方法來返回更詳細的錯誤訊息。

class FileNotFoundException extends Exception {
    public function detailedMessage() {
        return "File Not Found: " . $this->getMessage();
    }
}

使用自訂 Exception

建立了自訂 Exception 之後，就可以像使用內建 Exception 一樣在 try 和 catch 區塊中使用它。

try {
    // 假設 $fileExists 是一個檢查檔案是否存在的函數
    if (!$fileExists("example.txt")) {
        throw new FileNotFoundException("The file does not exist.");
    }
} catch (FileNotFoundException $e) {
    echo $e->detailedMessage();
}

透過這種方式，不僅能夠將特定的錯誤情況，用一個明確且具描述性的類別代表，還能在 catch 區塊中實施更精確的錯誤處理策略。

多重捕獲 Exceptions

在實際開發中，一段程式碼可能會出現多種不同的錯誤或異常。那麼，如何根據不同的錯誤類型採取不同的處理策略呢？這就需要使用到多重 catch 區塊。

使用多個 `catch` 區塊

PHP 允許在一個 try 區塊後面添加多個 catch 區塊。每個 catch 區塊都對應一種特定類型的 Exception。

try {
    // 這裡可能會發生多種錯誤
    // ...
} catch (FileNotFoundException $e) {
    echo "File-related error: " . $e->getMessage();
} catch (DivisionByZeroError $e) {
    echo "Math-related error: " . $e->getMessage();
} catch (Exception $e) {
    echo "General error: " . $e->getMessage();
}

順序的重要性

需特別注意的是，多個 catch 區塊會按照它們出現的順序來進行匹配。也就是說，最先匹配成功的 catch 區塊將被執行，其餘的將被忽略。所以，一般而言，應該將更具體的 Exception 類型放在前面，將更一般的 Exception 類型放在後面。

// 這樣是不好的
try {
    // ...
} catch (Exception $e) {
    // ...
} catch (FileNotFoundException $e) {
    // 這個區塊永遠不會被執行
}

因為 FileNotFoundException 繼承 Exception，導致 catch Exception 會先抓到 FileNotFoundException.

為何需要多重捕獲？

使用多重捕獲的好處是明確和靈活。可以為不同類型的錯誤定義不同的處理邏輯，使得程式更容易維護和理解。而且，這也為未來擴展程式提供了方便，可以隨時添加新的 catch 區塊來處理新類型的錯誤。

使用 `finally` 區塊

這個區塊的程式碼會在 try 和 catch 區塊執行完畢後，無論是否出現例外，都會被執行。

為何使用 `finally`？

為什麼我們需要 finally？答案是：資源管理和確保程式的健壯性。無論是檔案、數據庫連接，或是其他需要手動釋放的資源，finally 區塊提供一個統一的地方來進行清理工作。

$file = null;

try {
    $file = fopen("example.txt", "r");
    // 讀取和處理檔案
} catch (Exception $e) {
    echo "An error occurred: " . $e->getMessage();
} finally {
    if ($file) {
        fclose($file);
    }
}

在這個範例中，不論是成功開啟檔案還是捕獲到例外，finally 區塊都確保了檔案會被正確地關閉，避免檔案鎖住。

`finally` 的其他用途

除了資源管理，finally 區塊還經常用於記錄，或其他需要在 try 和 catch 執行後無條件執行的操作。例如，你可能需要記錄一個操作的完成狀態，無論是成功還是失敗。

try {
    // 嘗試進行某些操作
} catch (Exception $e) {
    // 處理錯誤
} finally {
    // 無論成功或失敗，都記錄操作狀態
    logOperationStatus();
}

使用 finally 區塊，可以確保某些重要的後續操作，或資源釋放動作會被執行，這不僅讓程式更健壯，也讓其更易於維護。

實用案例

假設我們正在建立一個圖書管理系統，這個系統需要實現書籍資料的新增、查詢、修改和刪除。

程式碼實現

首先，我們定義一個自訂的 DatabaseException 類別，描述處理與資料庫相關的問題。

class DatabaseException extends Exception {
    public function errorMessage() {
        return "Database Error: " . $this->getMessage();
    }
}

接著，在資料庫操作的函數中使用 try 和 catch。

function addBook($title, $author) {
    try {
        // 嘗試連接資料庫
        $db = new PDO('mysql:host=localhost;dbname=library', 'username', 'password');

        // 嘗試新增書籍
        $stmt = $db->prepare("INSERT INTO books (title, author) VALUES (:title, :author)");
        $stmt->bindParam(':title', $title);
        $stmt->bindParam(':author', $author);
        $stmt->execute();

    } catch (PDOException $e) {
        throw new DatabaseException("Failed to add book: " . $e->getMessage());

    } finally {
        // 斷開資料庫連接
        $db = null;
    }
}

在使用這個 addBook 函數的地方，可以這樣處理例外：

try {
    addBook("1984", "George Orwell");
    echo "Book added successfully!";
} catch (DatabaseException $e) {
    echo $e->errorMessage();
}

這樣設計的好處

清晰的錯誤資訊：使用自訂的 DatabaseException，可以快速地識別出問題出在哪裡，並給出更有用的錯誤訊息。

資源管理：透過 finally 區塊，確保無論操作成功還是失敗，資料庫連接都會被正確地關閉。

更好的可維護性：將例外處理和業務邏輯分離，使得程式更易於維護和擴展。

常見問題

什麼是 PHP 例外處理？

例外處理是一種在 PHP 程式中處理錯誤和異常情況的機制。它使用 try, catch, 和 finally 這三個關鍵字來實現。

什麼是 `finally` 區塊 ?

finally 區塊中的程式碼會在 try 和 catch 區塊後無條件執行，通常用於資源管理和清理工作。

可以在一個 `try` 區塊後面有多個 `catch` 區塊嗎？

是的，可以使用多個 catch 區塊來捕獲和處理不同類型的例外。

如何自訂一個例外類型？

可以透過繼承內建的 Exception 類別來建立自訂的例外類型。

是否所有的錯誤都可以用例外處理來捕獲？

不是，例外處理不能捕獲所有類型的錯誤，例如語法錯誤或致命錯誤。

除了 PHP，還有哪些程式語言支持例外處理？

例外處理是一個通用的程式設計概念，多數現代程式語言（如 Java, Python, C# 等）都支持這一機制。

總結

本文探討了 PHP 中例外處理的各個方面，包括基本概念、自訂例外、多重捕獲、使用 finally 區塊，還透過一個實用案例來展示如何在實際開發中應用這些概念。

例外處理不僅能讓程式更健壯和可靠，還能提高其可維護性和可讀性，掌握這一技能是非常有價值的。因此，不論在哪個開發階段或從事哪種類型的專案，應用例外處理對程式開發與維護都有很大幫助。

參考資料

PHP 官方文件 – 例外處理
官方文件是最可靠的資源，提供了關於 PHP 例外處理的詳細說明。
網址：PHP: Exceptions – Manual
W3Schools – PHP Exception Handling
這個網站以簡單易懂的方式解釋了基礎的例外處理概念。
網址：W3Schools PHP Exception Tutorial
GeeksforGeeks – PHP Exception Handling
這個網站提供了一些實用的例子和解釋，適合進一步研究。
網址：GeeksforGeeks PHP Exception Handling

PHP static vs const：何時用哪個？完整對比

2023-10-12T22:46:53Z

什麼是 PHP `static` 關鍵字

概念與定義

在 PHP 中，static 是一個特殊的關鍵字，用於宣告靜態變數和方法。所謂「靜態」表示這些變數和方法屬於類別本身，而不是類別的任何特定實例。因此，無論您建立多少個類別的實例，靜態變數和方法都只有一個。

目的與好處

程式碼重用：由於 static 方法和變數是類別級別的，您不需要建立類別的實例就可以使用它們。這有助於減少重複的程式碼。

記憶體效率：靜態變數在所有實例間共享，因此它們同時也節省記憶體使用。尤其在您需要多個實例共享資料或狀態時非常有用。

基礎範例

// 定義一個帶有靜態變數的 Counter 類別
class Counter {
    // 定義一個靜態變數 $count
    public static $count = 0;
}

// 直接存取靜態變數 $count，不需要實例化 Counter 類別
Counter::$count = 10;
echo Counter::$count;  // 輸出 10，因為我們將其設為 10

進階範例

// 定義一個 Singleton 類別，用於確保只有一個實例存在
class Singleton {
    // 保存類別的唯一實例
    private static $instance;

    // 將建構函數設為 private，以防止直接建立實例
    private function __construct() {}

    // 用於回傳唯一實例的方法
    public static function getInstance() {
        // 如果實例不存在，建立它
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
}

// 取得 Singleton 類別的唯一實例
$singleton = Singleton::getInstance();

在這個進階範例中，我們使用 static 關鍵字來實作單例模式（Singleton）。這個模式確保了一個類別只有一個實例存在。getInstance 方法用於回傳這個唯一實例。

錯誤範例 – 在物件實例中修改靜態變數值

class Counter {
    public static $count = 0;

    public function modifyStaticVar() {
        // 錯誤：在實例方法中試圖修改靜態變數的值
        $this->count++;
    }
}

錯誤原因：
在實例方法中使用 $this-> 來存取靜態變數是不正確的。靜態變數應該使用 self::$ 或者 類名::$ 的方式來存取或修改。

錯誤範例 – 靜態方法使用實例變數

class MyClass {
    public $myVar = "Hello";

    public static function myStaticMethod() {
        // 錯誤：在靜態方法中使用實例變數
        echo $this->myVar;
    }
}

錯誤原因：
靜態方法不能使用 $this 來存取實例變數，因為靜態方法不依附於任何特定的實例。

什麼是 PHP `const` 關鍵字

概念與定義

const 關鍵字用於定義常數，這些常數一旦被設定，就不能改變。與 static 變數不同，const 變數是不可變的。

目的與好處

不變性：使用 const 可以確保資料的不變性。一旦一個 const 變數被設定，它就不能被更改，這有助於維護程式的穩定性。

可預測性：const 變數在整個程式生命週期中的值是不變的，這使得程式行為更加可預測。

基礎範例

// 定義一個 Circle 類別，用一個常數來保存圓周率 PI
class Circle {
    // 定義一個 const 變數 PI
    const PI = 3.14159265359;

    // 定義一個方法來計算圓的面積
    public function getArea($radius) {
        return self::PI * pow($radius, 2);
    }
}

// 建立一個 Circle 類別的實例
$c = new Circle();
// 輸出半徑為 5 的圓的面積
echo $c->getArea(5);  // 輸出 78.539816339744

進階範例

// 定義一個 MathConstants 類別，其中包含多個數學常數
class MathConstants {
    const E = 2.718281828459;
    const GOLDEN_RATIO = 1.618033988749895;
}

// 輸出常數 E 和 GOLDEN_RATIO
echo MathConstants::E;  // 輸出 2.718281828459
echo MathConstants::GOLDEN_RATIO;  // 輸出 1.618033988749895

在這個進階範例中，我們定義了一個 MathConstants 類別，其中包含了數學常數（e）和黃金比例。這些常數是透過 const 關鍵字定義的，因此它們是不可變的。

錯誤範例 – 嘗試修改常數

class Circle {
    const PI = 3.14159265359;
}

// 錯誤：嘗試修改一個 const 變數
Circle::PI = 3.15;

錯誤原因：
一旦 const 變數被定義，它的值就不能被更改。試圖修改一個 const 變數會導致語法錯誤。

錯誤範例 – 在方法中定義常數

class MyClass {
    public function setConstant() {
        // 錯誤：在方法中嘗試定義常數
        const MY_CONST = "Hello";
    }
}

錯誤原因：
const 變數必須在類別範疇（即類別的主體）內定義，而不能在方法或函數內部定義。

static 和 const 的主要差異

特性	`static`	`const`
定義範圍	可以在類別內部的任何地方（方法內或外）定義靜態變數或方法。	常數必須在類別範疇（即類別的主體）內定義，不能在方法或函數內部定義。
變數類型	可以是變數或方法。	僅限於變數。
可變性	靜態變數的值可以更改。	常數的值一旦被設定，就不能改變。
存取方式	透過 `self::`、`static::` 或類名來存取。	透過 `self::` 或類名來存取。
作用域	屬於類別作用域，所有實例共享同一個靜態變數或方法。	也屬於類別作用域，但因為是不可變的，所以更多地用於儲存不變的資料或設定。
記憶體效率	較高，因為所有實例共享一個靜態變數或方法。	由於常數的值是不可變的，因此在某種程度上也是記憶體效率的。
物件實例的存取	不應在物件實例的方法中使用 `$this->` 來存取靜態變數或方法。	可以在實例方法中使用 `self::` 來存取，但由於其不可變性，通常用於儲存固定的資料。

static vs const

這個表格概述了 static 和 const 的主要特性和差異，希望對您有所幫助！

性能對比

場景	static	const
記憶體	所有實例共享一份	編譯期常數，零執行時開銷
存取速度	略慢（執行時查找）	最快（編譯期解析）
OPcache	可快取	可快取

PHP 8.3+ 的 typed class constants 讓 const 更安全：public const string VERSION = '1.0';

使用場景實例

const：API 端點 URL、版本號、設定上限
static：計數器（static $count = 0）、快取實例、Singleton 模式

光輝咖碼

Pi Coding Agent 完整指南：極簡終端 AI 程式助手入門與實戰工作流（2026）

目錄

什麼是 Pi Coding Agent？

四層架構（看懂 Pi 在幹嘛）

Pi vs Cursor vs Claude Code：該選誰？

依場景選工具

四種運作模式

上下文工程：Pi 真正厲害的地方

1. Context Files（AGENTS.md / SYSTEM.md）

2. Skills：按需載入的能力包

3. Prompt Templates：可重用的 / 指令

4. Extensions：動態注入 RAG

Project Trust（安全邊界）

為什麼 Pi 刻意不內建 MCP、子代理、Plan mode？

套件選型：不要一開始裝滿排行榜

pi-mcp-adapter：MCP 但不炸 context

pi-subagents：子代理怎麼編排

五階段實戰工作流

安裝與第一次實戰（約 10 分鐘）

新手常見踩坑

推薦工具與資源

結語：回歸極簡，但別回歸低效

PageSpeed Insights 與 Core Web Vitals 2026 完全指南

目錄

PageSpeed Insights 是什麼

Core Web Vitals 2026：三項指標與門檻

LCP：最大內容繪製

INP：取代 FID 的互動指標

CLS：累積版面位移

實地數據 vs Lighthouse：該信哪個

30 分鐘優化 Checklist

伺服器與快取（優先）

圖片與字型

JavaScript 與 CSS

版面穩定

WordPress 站的常見路徑

轉址與重複內容（簡記）

工具對照表

常見迷思

結語

把文章從 WordPress 搬出來：eleventy-import 的匯出方式

目錄

eleventy-import，終於可以把 WordPress 資料好好搬出來

為什麼一般 WordPress 匯出方式這麼痛苦？

官方出手：11ty 的 WordPress 轉移教學

使用 eleventy-import 匯出 WordPress 文章

直接執行一行指令

匯出後的目錄結構

下一步：選擇 11ty Starter

eleventy-base-blog

eleventy-excellent

最後選擇

啟動 11ty，驗收成果

從這一刻起，是全新的開始

WordPress vs Eleventy：我為什麼把部落格遷到 11ty

目錄

基本概念與定位

WordPress：成熟的全功能 CMS

11ty：現代化的靜態網站生成器

主要差異比較

技術架構

WordPress 的動態架構

11ty 的靜態架構

開發體驗

WordPress：視覺化編輯優先

11ty：程式化開發體驗

效能表現

WordPress：需要持續優化

11ty：天生高效能

安全性考量

WordPress：常見攻擊目標

11ty：本質安全

維護成本與複雜度

WordPress：持續維護需求高

11ty：一次性設定，長期穩定

內容管理與協作

WordPress：多人協作友好

11ty：開發者導向協作

適合的使用情境

1. Context Files（`AGENTS.md` / `SYSTEM.md`）

3. Prompt Templates：可重用的 `/` 指令