光輝咖碼

Pi Coding Agent：一個為開發者量身打造的極簡終端 AI 程式助手

2026-06-30T08:20:00Z

隨著大型語言模型（LLM）的快速發展，AI 程式助手（Coding Agents）已成為現代開發者不可或缺的工具。然而，市面上許多 AI 助手往往設計得非常龐大，強加了特定的工作流程（如強制的規劃模式、子代理系統等）。

如果你正在尋找一個極簡、快速、且能完全融入你既有工作流程的工具，那麼你一定要認識這款由 Earendil Inc. 開發的終端 AI 助手：Pi Coding Agent（pi.dev）。

什麼是 Pi Coding Agent？

Pi Coding Agent 是一款運行於終端機（Terminal）的極簡 AI 程式開發助手。它的核心哲學非常簡單：

「這世界上有許多 Agent 框架，但唯有這一個是專屬於你的。」（There are many agent harnesses, but this one is yours.）

與其要求開發者去適應 AI 工具的規範，Pi 設計的初衷是讓工具來適應你的既有工作流程。它去除了許多不必要的繁雜功能，僅保留最核心的執行邏輯，並透過極度彈性的擴充機制，讓開發者自行定義所需的行為。

Pi Coding Agent 的四大工作模式

為了適應不同的開發場景，Pi 提供了四種不同的運作模式：

Interactive（互動模式）：提供完整的 TUI（Terminal User Interface）互動介面，適合日常的對話、除錯與程式碼生成。
Print/JSON（列印與 JSON 模式）：你可以直接在指令列運行例如 pi -p "分析此檔案"，非常適合用來撰寫自動化腳本。使用 --mode json 還可以輸出結構化的事件流。
RPC（遠端程序呼叫）：支援透過標準輸入輸出（stdin/stdout）進行 JSON 協議傳輸，便於與非 Node.js 的系統整合。
SDK（軟體開發套件）：允許開發者將 Pi 的核心能力直接嵌入到自己的應用程式中。

核心亮點功能

1. 獨特的「Steer & Follow-up」即時引導機制

在許多 Agent 工具中，一旦按下送出，你只能靜靜等待它跑完所有步驟。如果發現它理解錯了，只能中斷並重來。 Pi 解決了這個痛點：

即時引導（Steering）：在 Agent 運行的過程中，按下 Enter 即可發送引導訊息。Pi 會在目前工具執行完畢後立即接收引導，並中斷其餘規劃。
排程跟進（Follow-up）：按下 Alt + Enter 可以排程 follow-up 訊息，等 Agent 跑完目前的任務後自動接著處理。

2. 樹狀結構的對話歷史與共享

Pi 的對話紀錄是以「樹狀結構（Tree-structured）」進行儲存的。你可以使用 /tree 指令導航至歷史對話的任意節點，並從該處拉出新的分支繼續對話。所有對話分支都會保存在同一個檔案中，你還可以使用 /export 匯出成 HTML，或是使用 /share 自動上傳至 GitHub Gist，生成一個可分享的網頁連結。

3. 上下文工程（Context Engineering）

AI 的回覆品質極度依賴 Prompt 與上下文管理。Pi 提供了極佳的上下文管理原語：

AGENTS.md：可以在專案根目錄、家目錄或任何父級目錄放置 AGENTS.md，Pi 會在啟動時自動載入，這非常適合用來存放專案特定的開發規範或架構細節。
SYSTEM.md：用於替換或附加預設的系統 Prompt。
自動壓縮（Compaction）：當對話歷史接近 LLM 的上下文上限時，Pi 會自動對舊訊息進行摘要壓縮。開發者也可以透過擴充功能（Extensions）自訂壓縮演算法。
Skills（技能）：透過 Markdown 檔案定義的即用型指令包，只在需要時才載入上下文，非常節省 Token。
Prompt 範本：輸入 /name 即可快速展開常用的 Prompt 範本。

為什麼 Pi 沒有內建 MCP、子代理與規劃模式？

這正是 Pi 與眾不同之處。Pi 刻意不內建以下功能，以維持核心的輕量與 Token 高效能：

無 MCP（Model Context Protocol）
無子代理（Sub-agents）
無權限彈窗提示
無內建規劃模式（Plan Mode）

那如果需要這些功能該怎麼辦？自己動手加！ Pi 提供了極為強大的「擴充（Extensions）」與「套件（Packages）」機制。所有的擴充功能都是 TypeScript 模組，可以自由讀寫 tools、指令、快速鍵甚至 TUI 介面。

例如，你可以寫一個擴充功能來呼叫子代理，或者直接在終端機安裝社群開發好的套件：

# 安裝來自 npm 的套件
pi install npm:@foo/pi-tools

# 甚至安裝可以在終端機玩 DOOM 的套件
pi install git:github.com/badlogic/pi-doom

如何安裝與開始使用 Pi？

安裝 Pi 極為簡單，它支援多種安裝方式：

1. 使用 curl 安裝（macOS/Linux）

curl -fsSL https://pi.dev/install.sh | sh

2. 使用 npm/pnpm/bun 全域安裝

npm install -g --ignore-scripts @earendil-works/pi-coding-agent
# 或
pnpm add -g --ignore-scripts @earendil-works/pi-coding-agent
# 或
bun add -g --ignore-scripts @earendil-works/pi-coding-agent

結語：回歸極簡的開發美學

Pi Coding Agent 重新定義了 AI 程式助手與開發者之間的關係。它不試圖去接管你的整個 IDE 或工作流，而是作為一個忠實、極快且高度可配置的終端機工具，默默地為你提供協助。

如果你已經厭倦了那些沉重、黑盒且難以控制的 AI 工具，不妨試試 Pi Coding Agent，打造一個真正屬於你自己的 AI 助手！

把文章從 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 的功能真的很方便，

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

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

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

WordPress vs 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/

相關資源：

1 個程式範例，快速學習 JavaScript 物件導向語法

2024-01-01T00:27:42Z

當深入 JavaScript 的核心時，傳統的物件導向編程（OOP）技術顯得非常重要。這種編程風格不僅為程式碼提供了清晰的結構，而且還促進了模組化和重用，這對於大型和複雜的應用程式開發尤為關鍵。

為什麼要學習 JavaScript OOP？

JavaScript 雖然最初是基於原型的語言，但 ES6（ES2015）引入了類別（class）語法，讓開發者能夠使用更傳統的物件導向編程方式。這種方式讓程式碼更容易理解、維護和擴展。

本篇文章將透過一個完整的範例，一步步探討 JavaScript 中傳統物件導向編程的關鍵概念，包括類別的定義、公共和私有屬性的宣告、建構函數、方法的使用，以及類別的繼承等。這將幫助你深入理解 JavaScript 中的 OOP，並將這些知識應用於編程實踐中。

完整 OOP 語法範例：

// 定義一個類別 (Define a Class)
// 類別是 JavaScript 中用於建立物件的模板。它封裝了相關的屬性和方法。
class Car {
    // 公共屬性 (Declare a Public Property)
    // 公共屬性可以在類別實例的任何地方被存取和修改。
    color;

    // 私有屬性 (Declare a Private Property)
    // 私有屬性僅在定義它們的類別內部可存取，外部無法直接存取。
    #brand;

    // 建構函數 (Declare Constructor)
    // 建構函數是在建立類別實例時自動呼叫的特殊方法，用於初始化類別的屬性。
    constructor(brand, color) {
        this.#brand = brand;
        this.color = color;
    }

    // 公共方法 (Declare a Public Method)
    // 公共方法可以被類別實例及繼承該類別的其他類別的實例呼叫。
    displayInfo() {
        console.log(`This is a ${this.color} car.`);
    }

    // 私有方法 (Declare a Private Method)
    // 私有方法僅能在定義它的類別內部被呼叫，對外部是不可見的。
    #privateMethod() {
        return `Brand is ${this.#brand}`;
    }

    // Getter 和 Setter
    // Getter 和 Setter 用於對類別的私有屬性進行安全的存取和更新。
    get brand() {
        return this.#privateMethod();
    }

    set brand(newBrand) {
        this.#brand = newBrand;
    }

    // 靜態方法和屬性 (Static Methods and Fields)
    // 靜態方法和屬性屬於類別本身，而不是類別的任何特定實例。
    static numberOfWheels = 4;

    static carDescription() {
        return `Cars usually have ${this.numberOfWheels} wheels.`;
    }
}

// 擴展一個類別 (Extend a Class)
// 使用 'extends' 關鍵字建立一個新類別，繼承另一個類別的屬性和方法。
class ElectricCar extends Car {
    constructor(brand, color, batteryLife) {
        super(brand, color); // 呼叫父類別建構函數
        this.batteryLife = batteryLife;
    }

    // 覆寫方法
    displayInfo() {
        console.log(`This is a ${this.color} electric car with a battery life of ${this.batteryLife} hours.`);
    }
}

// 建立一個實例 (Create an Instance)
// 使用 'new' 關鍵字和類別名稱建立該類別的一個新實例。
const myCar = new ElectricCar('Tesla', 'red', 24);

// 呼叫方法 (Call a Method)
// 透過類別實例呼叫在類別中定義的方法。
myCar.displayInfo(); // This is a red electric car with a battery life of 24 hours.

// 點表示法 vs 括號表示法 (Dot vs Bracket Notation)
// 使用點表示法或括號表示法存取物件的屬性。點表示法更直觀，而括號表示法在屬性名為變數時很有用。
console.log(myCar.color);    // red (點表示法)
console.log(myCar['color']); // red (括號表示法)

這個範例透過詳細的註解解釋了 JavaScript 中的關鍵物件導向概念，包括如何定義類別、宣告屬性和方法、建立和使用實例，以及如何實現繼承和多型性。透過這個實際的範例，你可以更好地理解和掌握 JavaScript 的物件導向特性。

範例說明：

這個範例建立了一個 Car 類別作為基礎類別，然後建立了一個 ElectricCar 類別來繼承它。這展示了：

如何定義類別和屬性
如何使用建構函數初始化物件
如何定義公共和私有方法
如何使用繼承擴展類別功能
如何覆寫父類別的方法

重點整理

以下是 JavaScript 物件導向編程的關鍵概念：

類別（Class）：用於建立物件的模板，封裝了相關的屬性和方法。類別定義了物件的結構和行為。
公共與私有屬性：公共屬性可被外部存取和修改，私有屬性（以 # 開頭）僅在類別內部可存取，這提供了更好的封裝性。
建構函數（Constructor）：在建立實例時自動呼叫的特殊方法，用於初始化物件的屬性。這是建立物件時的第一個步驟。
繼承（Inheritance）：使用 extends 關鍵字讓子類別繼承父類別的屬性和方法。這允許你重用程式碼並建立更複雜的類別層次結構。
靜態方法與屬性：屬於類別本身，不需要建立實例即可使用。通常用於工具函數或類別層級的資料。
Getter 和 Setter：提供安全的方式存取和修改私有屬性。這允許你在存取屬性時執行額外的邏輯，例如驗證或計算。

實際應用：

透過這些概念，你可以建立結構清晰、易於維護的 JavaScript 程式碼。物件導向編程特別適合：

大型應用程式的開發
需要重用程式碼的場景
需要模組化和封裝的專案
團隊協作開發

掌握這些概念後，你就能夠寫出更專業、更易於維護的 JavaScript 程式碼。

如何在 SvelteKit 中管理前端環境變數

2023-12-30T01:06:48Z

大家都知道後端節點（如 Node.js）可以輕鬆地透過 .env 檔案或 process 物件來存取環境變數。但在純前端應用程式，尤其是使用如 SvelteKit 這樣的現代框架時，這個任務看起來就沒那麼直觀了。本文將介紹如何在 SvelteKit 中有效地管理和存取環境變數。

在 Node.js 中讀取 `.env` 檔案

在 Node.js 應用程式中，環境變數通常透過 .env 檔案來管理。這些變數可以用來儲存應用程式配置、機密鑰匙或其他環境特定的設定。下面是如何在 Node.js 中讀取 .env 檔案的範例：

import dotenv from 'dotenv';

dotenv.config();

console.log(process.env.YOUR_ENV_VARIABLE);

在上述程式碼中，我們使用 dotenv 函式庫來載入 .env 檔案中的變數。然後，你可以透過 Node.js 的 process.env 物件來存取這些變數。

在 SvelteKit 中管理環境變數

SvelteKit 是一個基於 Svelte 的全端框架，提供了一套更高層次的抽象，特別是在管理環境變數時。在 SvelteKit 中，環境變數不是直接讀取 .env 檔案中的變數。相反，它們需要透過特定的配置來使其在前端程式碼中可用。

SvelteKit 不能直接讀取 .env 檔案的環境變數，意思是它們不是自動地、直接地從 .env 檔案讀取並暴露給前端程式碼。這與 Node.js 中的處理方式有所不同，Node.js 可以直接透過 process.env 存取 .env 檔案中的變數。

在 SvelteKit 中，雖然 .env 檔案仍然用於定義環境變數，但這些變數需要透過 SvelteKit 和其底層的建置工具（Vite）的特定配置來暴露。有一個重要規則：在 .env 檔案中定義的變數需要以 PUBLIC_ 開頭，這樣 Vite 才會在建置過程中將它們暴露給前端程式碼。

所以，當我們在 SvelteKit 中談論環境變數時，它們確實是在 .env 檔案中定義的，但它們的暴露和存取方式是由 SvelteKit 和 Vite 的配置決定的，而非直接從 .env 檔案自動讀取。這是一個重要的安全機制，確保只有明確標記為公開的變數才會暴露給前端。

讀取環境變數範例

步驟 1：創建 `.env` 檔案

首先，在你的 SvelteKit 專案根目錄下創建一個 .env 檔案。例如：

PUBLIC_CLIENT_ID="test-id"

PUBLIC_CALLBACK="http://localhost:5173/oauth2callback"

在 SvelteKit 中，所有要公開的環境變數都應以 PUBLIC_ 開頭，這樣它們才會被 Vite（SvelteKit 底層的構建工具）公開給前端。

步驟 2：存取環境變數

在 SvelteKit 應用程式中，可以直接 import $env/static/public 來存取這些變數：

<script>
  import { PUBLIC_CALLBACK, PUBLIC_CLIENT_ID } from '$env/static/public';

  const redirect_uri = PUBLIC_CALLBACK

  const client_id = PUBLIC_CLIENT_ID
</script>

步驟 3：切換開發環境與正式環境

你可以在專案根目錄放兩個 .env 檔案，分別是 .env 和 .env.production。這樣當你在本機開發使用 pnpm run dev 時，程式會使用 .env 的變數，而當你使用 pnpm run build 時，就會改為使用 .env.production 中的變數。這讓你可以輕鬆地在開發和正式環境之間切換不同的配置。

完整說明請參考 $env/static/public

什麼是 Javascript module，讓 JavaScript 程式碼更有組織

2023-12-26T19:54:07Z

網頁開發的早期挑戰

在 JavaScript 模組成為標準之前，開發大型網頁應用程式是一項相當複雜的任務。當時開發者面臨許多挑戰：

全域命名空間污染

命名衝突：所有 JavaScript 變數和函數預設在全域命名空間中。這導致了命名衝突，特別是在使用多個腳本時。

維護困難：隨著程式碼庫的增長，找出命名衝突的源頭變得越來越困難。

依賴管理的挑戰

手動管理：開發者需要手動管理腳本之間的依賴關係，確保它們以正確的順序載入。

效能問題：隨著腳本數量的增加，網頁載入時間增長，影響使用者體驗。

重複程式碼

重複性工作：缺乏模組化導致程式碼重複，特別是在大型團隊或多個專案中。

為了應對這些挑戰，開發者們採用了不同的策略：

立即呼叫函數表達式（IIFE）：用於建立區域作用域，避免全域變數污染。

命名空間模式：透過建立一個全域物件來儲存所有功能和變數，減少全域變數的數量。

但這些方式在專案範圍擴大時，也變得窒礙難行，所以漸漸開始有在前端引入模組的想法出現。

JavaScript 模組的本質

在 JavaScript 的世界中，模組就像是應用程式的樂高積木，它們透過將程式碼分解成更小、可重複使用的部分，幫助組織和管理程式碼。

所有這些模組系統都有一個共同點：它們允許你匯入和匯出內容。

模組化程式碼：將模組視為個別的腳本檔案，每個模組封裝特定的功能或一組相關功能。

範圍和封裝：模組有助於封裝程式碼。除非明確匯出，否則模組中的變數和函數對其他模組不可見。

假設有一個用於實用功能的模組（utils.js）：

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

然後可在另一個模組中使用這些函數（main.js）：

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // 輸出：8
console.log(subtract(5, 3)); // 輸出：2

使用模組自然會產生諸多設計上的優點：

可維護性：將複雜的程式碼分解成易於管理的部分。

可重用性：允許在應用程式的不同部分重複使用程式碼。

命名空間管理：減少全域命名空間污染，最小化衝突。

依賴性管理：明確定義程式碼各部分之間的依賴關係。

現代 JavaScript 模組的類型

CommonJS 模組

非原生 JavaScript 模組，在 ES6 模組標準之前，JavaScript 沒有內建的模組系統，非原生模組是透過各種工具和規範實現。

類型包括 CommonJS（Node.js 中使用）、AMD（Asynchronous Module Definition）、UMD（Universal Module Definition）等。

主要透過工具如 Webpack 或 Babel 轉譯或封裝，以支援模組化，使用 require() 進行匯入和 module.exports 進行匯出。

範例：

// CommonJS 模組的匯出
module.exports = {
  sayHello: function(name) {
    return `Hello, ${name}!`;
  }
};

// 匯入
const { sayHello } = require('./module');

ECMAScript（ES）模組

原生 JavaScript 模組（也稱為 ECMAScript 模組或 ES 模組）是 ECMAScript 2015 (ES6) 標準的一部分；使用 import 和 export 語句，現代瀏覽器和 Node.js 都已開始原生支援。

範例：

// 匯出
export function sayHello(name) {
  return `Hello, ${name}!`;
}

// 匯入
import { sayHello } from './module.js';

模組程式和一般的 JavaScript 程式放在瀏覽器執行時，還有一個很重要的差異：

<script src="classic.js"></script>
<script src="classic.js"></script>
<!-- 引入程式會執行多次 -->

<script type="module" src="module.js"></script>
<script type="module" src="module.js"></script>
<script type="module">import './module.js';</script>
<!-- 模組只會執行一次 -->

原生與非原生的比較

特性	原生 JavaScript 模組	非原生 JavaScript 模組
語法	使用 ES6 `import` 和 `export`	依賴特定規範，如 CommonJS 的 `require` 和 `module.exports`
執行環境	現代瀏覽器和最新版本的 Node.js 直接支援	多在特定環境（如 Node.js）或需透過轉譯工具在瀏覽器中執行
載入機制	支援非同步載入，適合大型應用和網頁環境	主要用於同步載入
工具依賴	不依賴於外部工具或編譯器，簡化設定和部署流程	通常需要像 Webpack 或 Babel 這樣的打包工具

現代化的瀏覽器已開始支援原生 JavaScript module。

透過以上簡短說明，應該就能基本了解什麼是 JavaScript module，接下來能更認識什麼是 Webpack 打包工具，更能充分使用 Vite 這類更現代化的前端開發工具。

參考來源:

如何批量取消訂閱 YouTube 頻道，使用 YouTube Subscriptions API

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 入門：建立開發環境，並執行第一個 TypeScript 程式

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 Operators 大全，一次看懂所有運算子

2023-11-25T16:49:14Z

PHP 是一種廣泛使用的腳本語言，擁有豐富的運算子。理解這些 PHP Operators 是掌握 PHP 程式設計的關鍵。本篇文章將提供清晰的範例和解釋。

算術運算子

算術運算子用於基本的數學運算。

加法（`+`）

將兩個值相加。

$a = 5;
$b = 3;
echo $a + $b; // 輸出：8

減法（`-`）

從一個值中減去另一個值。

$a = 5;
$b = 3;
echo $a - $b; // 輸出：2

乘法（`*`）

將兩個值相乘。

$a = 5;
$b = 3;
echo $a * $b; // 輸出：15

除法（`/`）

將一個值除以另一個值。

$a = 15;
$b = 3;
echo $a / $b; // 輸出：5

模數（`%`）

返回除法的餘數。

$a = 5;
$b = 3;
echo $a % $b; // 輸出：2

指數（`**`）

次方。

$a = 5;
$b = 3;
echo $a ** $b; // 輸出：125

賦值運算子

賦值運算子用於將值寫入變數。

基本賦值（`=`）

將值賦給變數。

$a = 5;
echo $a; // 輸出：5

組合運算子 (`+=`)

結合算術操作和賦值。

$a = 5;
$a += 3; // 等同於 $a = $a + 3
echo $a; // 輸出：8

對於 -=（減法賦值）、*=（乘法賦值）、/=（除法賦值）、%=（模數賦值）、**=（指數賦值）和 .=（串接賦值）都是一樣的邏輯。

比較運算子

比較運算子用來比較兩個值。

相等（`==`）

檢查兩個值是否相等。

$a = 5;
$b = "5";
var_dump($a == $b); // 輸出：bool(true)

完全相同（`===`）

檢查值是否相等且類型相同。

$a = 5;
$b = "5";
var_dump($a === $b); // 輸出：bool(false)

!=（不等於）、<>（不等於）、!==（非完全相同）、>（大於）、<（小於）、>=（大於等於）、<=（小於等於）都是比較兩個值，得到一個布林值。

遞增/遞減運算子

用於增加或減少變數的值。

遞增（`++`）

將變數的值增加一。

$a = 5;
$a++;
echo $a; // 輸出：6

遞減（`--`）

將變數的值減少一。

$a = 5;
$a--;
echo $a; // 輸出：4

邏輯運算子

邏輯運算子用於根據一個或多個條件來決定布林值（真或假）。

And（`&&`、`and`）

當且僅當兩個操作數都為真時，結果才為真。&& 和 and 在功能上是相同的，但 && 的優先級更高。

$a = true;
$b = false;
var_dump($a && $b); // 輸出：bool(false)
var_dump($a and $b); // 輸出：bool(false)

Or（`||`、`or`）

當至少一個操作數為真時，結果為真。|| 和 or 在功能上是相同的，但 || 的優先級更高。

$a = true;
$b = false;
var_dump($a || $b); // 輸出：bool(true)
var_dump($a or $b); // 輸出：bool(true)

Not（`!`）

用於反轉操作數的布林值。如果操作數為真，則返回假，反之亦然。

$a = true;
var_dump(!$a); // 輸出：bool(false)

Xor（`xor`）

當兩個操作數中僅有一個為真時，結果為真。如果兩個操作數都是真或都是假，則結果為假。

$a = true;
$b = false;
var_dump($a xor $b); // 輸出：bool(true)
$a = true;
$b = true;
var_dump($a xor $b); // 輸出：bool(false)

字串運算子

字串運算子用於操作字串。

串接（`.`、`.=`）

連接兩個字串。

$a = "Hello";
$b = " World";
echo $a . $b; // 輸出：Hello World

陣列運算子

陣列運算子用於比較和合併陣列，這些運算子使得處理陣列成為一個更加簡單的控制方式。

聯合（`+`）

聯合運算子用於合併兩個陣列。如果有重複的鍵，則以左邊陣列的鍵值為準。

$a = ["a" => "apple", "b" => "banana"];
$b = ["b" => "berry", "c" => "cherry"];
$result = $a + $b;
print_r($result); // 輸出：Array ([a] => apple [b] => banana [c] => cherry)

相等（`==`）

如果兩個陣列具有相同的鍵值對，則這兩個陣列相等。

$a = ["a" => "apple", "b" => "banana"];
$b = ["b" => "banana", "a" => "apple"];
var_dump($a == $b); // 輸出：bool(true)

絕對相同（`===`）

不僅內容必須相同，陣列中的元素順序和類型也必須完全一致。

$a = ["a" => "apple", "b" => "banana"];
$b = ["b" => "banana", "a" => "apple"];
$c = ["a" => "apple", "b" => "banana"];
var_dump($a === $b); // 輸出：bool(false)
var_dump($a === $c); // 輸出：bool(true)

不相等（`!=` 或 `<>`）

如果兩個陣列的鍵值對不完全相同，則它們不相等。

$a = ["a" => "apple", "b" => "banana"];
$b = ["b" => "berry", "a" => "apple"];
var_dump($a != $b); // 輸出：bool(true)
var_dump($a <> $b); // 輸出：bool(true)

非完全相同（`!==`）

如果兩個陣列在類型、值、順序或類型中有任何差異，則它們不完全相同。

$a = ["a" => "apple", "b" => "banana"];
$b = ["b" => "banana", "a" => "apple"];
var_dump($a !== $b); // 輸出：bool(true)

條件（三元）運算子（`? :`）

為條件語句提供簡寫。

$a = 5;
echo ($a > 3) ? "Greater" : "Lesser";

空合併運算子（`??`）

Null Coalescing Operator，返回第一個非空值，意思是如果第一個值是空值就返回第二個值。

$a = null;
$b = "value";
echo $a ?? $b; // 輸出：value

也可以串接使用：

$a = null;
$b = null;
$c = "value";
echo $a ?? $b ?? $c; // 輸出：value

參考：Null Coalescing Operator

錯誤控制運算子（`@`）

抑制錯誤訊息。

$value = @file_get_contents("nonexistentfile.txt");

這樣會抑制 file_get_contents 拋出錯誤。

類型運算子（`instanceof`）

檢查物件是否為特定類別。

class MyClass {}
$a = new MyClass();
var_dump($a instanceof MyClass); // 輸出：bool(true)

位元運算子

位元運算子用來對整數中的位元進行操作，這些運算子通常用於高效率的資料處理和底層資料操作。

位元 AND（`&`）

位元 AND 運算子。只有當兩個相對應的位元都是 1 時，結果位元才是 1。

$a = 9; // 1001 in binary
$b = 5; // 0101 in binary
echo $a & $b; // 輸出：1 (0001 in binary)

位元 OR（`|`）

位元 OR 運算子。如果兩個相對應的位元中至少有一個是 1，則結果位元是 1。

$a = 9; // 1001 in binary
$b = 5; // 0101 in binary
echo $a | $b; // 輸出：13 (1101 in binary)

位元 XOR（`^`）

位元 XOR 運算子。當兩個相對應的位元不同時，結果位元是 1。

$a = 9; // 1001 in binary
$b = 5; // 0101 in binary
echo $a ^ $b; // 輸出：12 (1100 in binary)

位元 NOT（`~`）

位元 NOT 運算子。對整數的位元進行反轉，即 0 變 1，1 變 0。

$a = 9; // 1001 in binary
echo ~$a; // 輸出：-10（二進位補碼表示）

左移（`<<`）

將整數的位元向左移動指定的位數（右邊補 0）。

$a = 9; // 1001 in binary
echo $a << 2; // 輸出：36 (100100 in binary)

右移（`>>`）

將整數的位元向右移動指定的位數。

$a = 9; // 1001 in binary
echo $a >> 2; // 輸出：2 (10 in binary)

這些位元運算子在處理效能敏感或底層資料操作的場景中特別有用，例如在加密、圖像處理、自訂資料結構或低階網路通訊中。

總結

以上每一個運算子都提供了特定功能，使得程式碼更加高效、靈活，並能夠處理各種複雜的資料操作和邏輯判斷。

運算子在程式語言中都有其獨特的角色，理解並運用這些運算子是走上 PHP 程式設計之路的重要一步。從基本的算術運算到複雜的陣列和位元操作，熟練掌握這些工具將使你能夠更深入地探索 PHP 的強大潛力，並開發出更加健壯和靈活的應用程式。

參考來源：php.language.operators

justify-content vs align-content，Flexbox 的垂直與水平對齊方式

2023-11-23T18:12:50Z

什麼是主軸（Main Axis）和交叉軸（Cross Axis）

在 Flexbox 佈局中，主軸（Main Axis）和交叉軸（Cross Axis）是兩個關鍵概念，用來描述 Flexbox 內部項目的排列方式。理解這兩個軸線對於掌握對齊規則非常重要，因為 Flexbox 項目的排列會依據軸的走向，而有不同的方向效果。

圖片來源：A Complete Guide to Flexbox | CSS-Tricks

主軸（Main Axis）

主軸是 Flexbox 中項目排列的主要方向。在 Flexbox 中，您可以透過 flex-direction 屬性來設定主軸的方向。

方向選擇：

當 flex-direction: row 時，主軸沿水平方向，從左到右。

當 flex-direction: row-reverse 時，主軸仍然是水平的，但方向從右到左。

當 flex-direction: column 時，主軸變為垂直方向，從上到下。

當 flex-direction: column-reverse 時，主軸仍為垂直方向，但方向從下到上。

交叉軸（Cross Axis）

交叉軸一定垂直於主軸。

方向選擇：

如果主軸是水平的（flex-direction: row 或 row-reverse），交叉軸則是垂直的。

如果主軸是垂直的（flex-direction:column 或 column-reverse），交叉軸則是水平的。

Flexbox 中的 Justify-Content 與 Align-Content 比較

在 CSS Flexbox 佈局中，justify-content 和 align-content 是兩個核心屬性，用於調整 Flexbox 內項目的對齊和分布。

Justify-Content

justify-content 屬性用於沿著 Flexbox 的主軸對齊項目。主軸的方向由 flex-direction 屬性決定。當我們使用 justify-content 時，主要是針對主軸進行調整，它包含了多種值，例如：

`flex-start`

使項目靠近主軸的起始端

`flex-end`

使項目靠近主軸的終端

`center`

在主軸中心對齊項目

`space-between`、`space-around` 和 `space-evenly`

則分別提供了不同的項目間距分布方式。

Align-Content

而 align-content 屬性則是用於在 Flexbox 的交叉軸上對齊多行，且僅當容器為多行時（即 flex-wrap 屬性為 wrap 或 wrap-reverse）才有效。

這個屬性不是對單個項目進行操作，而是針對整個行的對齊方式。例如，

`flex-start`

使行靠近交叉軸的起始端

`flex-end`

靠近終端

`center`

在交叉軸中心對齊。

`space-between`、`space-around` 和 `stretch`

則影響行間的分布和拉伸。

主要差異總結

對齊軸線：

justify-content 在主軸上進行操作。
align-content 在交叉軸上進行操作。

適用情況：

justify-content 影響容器內的個別項目。
align-content 影響多行 Flexbox 中的整行。

有效條件：

justify-content 適用於單行和多行容器。
align-content 需要多行（即設定了 flex-wrap: wrap）才有效果。

佈局影響：

justify-content 決定項目在主軸上的間距和對齊方式。
align-content 決定多行在交叉軸上的分布和間距。

程式範例（主軸互換）

.flex-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 影響 main axis 項目 */
    align-content: center; /* 影響 cross axis 項目分布 */
}

在這個例子中，我們把 flex-direction 改為 column，所以主軸和交叉軸會互換，結果一樣都是置中對齊，但排列卻是不同的方向。

更多參考教學：

光輝咖碼

Pi Coding Agent：一個為開發者量身打造的極簡終端 AI 程式助手

目錄

什麼是 Pi Coding Agent？

Pi Coding Agent 的四大工作模式

核心亮點功能

1. 獨特的「Steer & Follow-up」即時引導機制

2. 樹狀結構的對話歷史與共享

3. 上下文工程（Context Engineering）

為什麼 Pi 沒有內建 MCP、子代理與規劃模式？

如何安裝與開始使用 Pi？

1. 使用 curl 安裝（macOS/Linux）

2. 使用 npm/pnpm/bun 全域安裝

結語：回歸極簡的開發美學

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

目錄

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

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

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

使用 eleventy-import 匯出 WordPress 文章

直接執行一行指令

匯出後的目錄結構

下一步：選擇 11ty Starter

eleventy-base-blog

eleventy-excellent

最後選擇

啟動 11ty，驗收成果

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

WordPress vs 11ty：各自的優缺點與取捨

目錄

基本概念與定位

WordPress：成熟的全功能 CMS

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

主要差異比較

技術架構

WordPress 的動態架構

11ty 的靜態架構

開發體驗

WordPress：視覺化編輯優先

11ty：程式化開發體驗

效能表現

WordPress：需要持續優化

11ty：天生高效能

安全性考量

WordPress：常見攻擊目標

11ty：本質安全

維護成本與複雜度

WordPress：持續維護需求高

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

內容管理與協作

WordPress：多人協作友好

11ty：開發者導向協作

適合的使用情境

選擇 WordPress 的情境

選擇 11ty 的情境

實際案例分析

WordPress 適合案例

11ty 適合案例

遷移與轉換考量

從 WordPress 遷移到 11ty

從 11ty 遷移到 WordPress

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

1 個程式範例，快速學習 JavaScript 物件導向語法

重點整理

如何在 SvelteKit 中管理前端環境變數

在 Node.js 中讀取 .env 檔案

在 SvelteKit 中管理環境變數

讀取環境變數範例

步驟 1：創建 .env 檔案

步驟 2：存取環境變數

步驟 3：切換開發環境與正式環境

什麼是 Javascript module，讓 JavaScript 程式碼更有組織

目錄

網頁開發的早期挑戰

全域命名空間污染

依賴管理的挑戰

重複程式碼

JavaScript 模組的本質

現代 JavaScript 模組的類型

CommonJS 模組

在 Node.js 中讀取 `.env` 檔案

步驟 1：創建 `.env` 檔案

加法（`+`）

減法（`-`）

乘法（`*`）

除法（`/`）

模數（`%`）

指數（`**`）

基本賦值（`=`）

組合運算子 (`+=`)

相等（`==`）

完全相同（`===`）

遞增（`++`）

遞減（`--`）

And（`&&`、`and`）

Or（`||`、`or`）

Not（`!`）

Xor（`xor`）

串接（`.`、`.=`）

聯合（`+`）

相等（`==`）

絕對相同（`===`）

不相等（`!=` 或 `<>`）

非完全相同（`!==`）