嗨各位！久違了⋯ 最近都在忙着研究 Arch 還有重構一堆幾年前寫下的屎山代碼，所以一直也沒空來打理這裏⋯⋯

這篇可以說是某次重構期間的意外發現，本不打算公開的。但考慮到網絡上的資料比較零散，對初心者而言未必能夠即時理解，所以還是決定把它肝出來了 (

引文

前陣子在重構 discord-py 機器人裏的音樂播放器，先不說裏面 700 多行屎山搞得我快要頭暈與否⋯⋯

平常我們在寫程式時，如果遇到「循環、轉圈圈」的邏輯，最直覺的方法就是狂寫 if-else。舉個例子，當你在寫一個音樂播放器，使用者按「上一首」時，在某些情況下你得判斷：

「如果現在是第一首（Index 是 0），按上一首就要跳到最後一首；否則，就把 Index 減 1。」

傳統寫法大概長這樣：

if index == 0:
    index = historySize - 1

else:
    index -= 1

好吧當然上面的那個只是例子，筆者自己的那屎山也不是這樣寫的

那還是給一點實質的東西你們看吧 (？

這是機器人裏移除曲目的功能 /remove。其可以直接呼叫，也可以指定所需移除的曲目編號

如果沒有指定曲目編號，會預設為佇列中的最後一首曲目

眼尖的你們可以看到，裏面有用到了類似三元運算子 (Ternary Operator) 的東西，像醬~

index -= 1 if index else player.queue.historySize - 1

這種本來就已經夠簡潔了，直到筆者發現了下面的寫法

index = (index - 1) % player.queue.historySize

什麼？這到底是何方神聖？ :spoiler[別急⋯ 下面會一一揭曉]

突如其來的回憶殺

這不禁讓筆者憶起了去年的某次評估，當時的題目要求我們做一個單人猜拳遊戲 (石頭剪刀布) 的函數

而我當時是把題目完成了，且得了滿分。但為了判斷誰輸誰贏，寫了九種組合的 if-else 判斷式

結果教授的答案一出，我呆了

def rock_paper_scissors(player, computer):
    return (player - computer) % 3

算出來是 0 👉 平手

1 👉 玩家贏了

2 👉 電腦贏了

這解法搞得當時的筆者頓時毫無頭緒⋯⋯ 所以這是什麼？到底是什麼來的？

原理

其實這一切魔法的起源，要由模除 (Modulo) 以及 Python 對其的處理方法說起

在數學上，欲要計算一 被除數 (Dividend) % 除數 (Divisor) 所得的 餘數 (Remainder) ，公式如下：

商 (Quotient) = 被除數 (Dividend) / 除數 (Divisor)

餘數 (Remainder) = 被除數 (Dividend) - [除數 (Divisor) * 商 (Quotient)]

其中 商 (Quotient) 若為正數需先作下捨入 (Round down) 處理，否則需作上捨入 (Round up) 處理

譬如說我們要計算 -1 % 5 的數值

-1 / 5 = -0.2

因為得到的商是負數，上捨入後得出 0

-1 - (5 * 0) = -1

繼而得出 -1 % 5 = -1

然而在 Python 裏，其計算 a % b 的公式如下：

a % b = a - (b * (a // b))

兩者分別在於 // (floor division) 。 而根據 Python 的定義，會一律把裏面所得的值下捨入並趨向至負無限 (negative infinity, -∞)

我們再透過 Python 的算法計算 -1 % 5 的數值

-1 / 5 = -0.2

下捨入後得出 -1

-1 - (5 * -1) = 4

最終得出 -1 % 5 = 4

相信聰明的人已經明白我在說什麼了。但倘若你還沒明白的，也不要緊~

這又代表了什麼

可能你們剛剛聽完上面的理論反被弄得一頭霧水了⋯⋯ 沒關係，我們可以來換個說法~

時鐘的隱諭

我們可以把整件事想像成為一個12小時制的時鐘

如果現在的時間為凌晨2 時，然後我問你：「6小時前會是幾時了？」

理論上你會很自然的看一眼時鐘，然後回答我：「晚上8 時」

然而在 Python 的角度來看，你剛剛不只是單純看了一眼，其實你的大腦已經在背後做出了

(2 - 6) % 12 = -4 % 12
-> -4 % 12 = 8 (in python)

這一串動作。

基本上一般 Python 的 % 就好像一部「自動包裝機」，會把數字限制在一個可循環的圓圈裏。

石頭剪刀布

我們可以把三者想像為一個順時針的循環徊圈

假設 0 為石頭、1 為布、2 為剪刀，可以得出下圖：

graph TD
    0[0: ROCK] -->|贏| 1[1: PAPER]
    1 -->|贏| 2[2: SCISSORS]
    2 -->|贏| 0

記住這個圓圈的「遊戲規則」：

只要順時針 (向右轉) 走 1 格，你就能贏過原本那一格。

• 石頭 (0) 順時針走 1 格 -> 抵達 布 (1) -> 布贏石頭。

• 布 (1) 順時針走 1 格 -> 抵達 剪刀 (2) -> 剪刀贏布。

• 剪刀 (2) 順時針走 1 格 -> 繞回起點 抵達 石頭 (0) -> 石頭贏剪刀。

問題來了，我們要怎麼知道「玩家有沒有比電腦順時針領先剛好 1 格」呢？

答案就是靠公式得出的啦：

d = player_choice - computer_choice

我們再來舉個例子

就是當玩家出石頭 (0)，電腦出剪刀 (2) 的時候，結果會是怎樣的呢？

我們先數字帶進去相減：

d = 0 - 2 = -2

這時候你一定會想：「-2 是什麼鬼？怎麼會是負的？」

先別焦急，在圓圈的邏輯裡，減法代表「從電腦的位置出發，要走幾步才會到玩家的位置」

換句話說，負號 (-) 代表往逆時針方向走，而 2 則代表走 2 步。

所以 -2 的意思就是：「從電腦 (剪刀 2) 的位置出發，逆時針往回走 2 步，就會走到玩家 (石頭 0) 的位置。」

這就是 -2 在圓圈上的真正含義。

現在神奇的事情來了，如果我們改成從電腦 (剪刀 2) 往順時針方向走 1 步，在一個只有 3 格的圓圈裡，不也會走到玩家 (石頭 0) 的位置嗎？

既然位置相通，那我們剛剛說過的遊戲規則是什麼？

「只要順時針領先 1 格，就是玩家贏。」

因此，雖然數學上算出來的是 -2，但它在這循環圓圈上的靈魂其實就是 1

而 Python 的 % 只是幫你把這個藏在 -2 背後的 1 給算出來而已

-2 % 3 = 1 (in python)

回到原點

現在我們回來看dc機器人音樂播放器的那句代碼

設 player.queue.historySize = 5：

index -= 1 if index else player.queue.historySize - 1

假設 index = (1-5) ，其會執行前者：

index -= 1

# for index = 1
-> index = 1 - 1
-> index = 0

# for index = 2
-> index = 2 - 1
-> index = 1

# for index = 3
-> index = 3 - 1
-> index = 2

# for index = 4
-> index = 4 - 1
-> index = 3

# for index = 5
-> index = 5 - 1
-> index = 4

假設 index == 0 ，其會執行後者：

index = player.queue.historySize - 1
-> index = 5 - 1
-> index = 4

我們再看看那種用 % 的 Python 寫法：

index = (index - 1) % player.queue.historySize

假設 index = (0-5)：

index = (index - 1) % player.queue.historySize

# for index = 0
index = (0 - 1) % 5
-> index = -1 % 5
-> index = 4

# for index = 1
index = (1 - 1) % 5
-> index = 0 % 5
-> index = 0

# for index = 2
index = (2 - 1) % 5
-> index = 1 % 5
-> index = 1

# for index = 3
index = (3 - 1) % 5
-> index = 2 % 5
-> index = 2

# for index = 4
index = (4 - 1) % 5
-> index = 3 % 5
-> index = 3

# for index = 5
index = (5 - 1) % 5
-> index = 4 % 5
-> index = 4

我們可以看到，兩者的邏輯和輸出基本上完全一樣。且後者只需進行數學運算便可以了，無需進行多重的條件式判斷。

考慮到要處理具「循環性」的資料時，這的確為一個比較理想的替代方案。

結論

說實話這個技巧真的超好用，但有以下幾點需要注意：

首先資料必須具有「循環性」，像是播放清單、星期幾、時鐘、猜拳這種會「繞回起點」的邏輯才適用。

如果是判斷年齡、考試分數等那些的，還是乖乖的用 if-else 吧！

其次這可以說是 Python 限定的特異功能。因為如上所述，Python 在處理負數餘數 (e.g. -1 % 5)時，會自動向下捨入從而得到正數的 4。

但在 JavaScript、Java 或 C++ 裡，算出來會是 -1。若強行帶入，程式會直接崩潰喵~

據聞若要在其他語言上使用好像需要另外加上底數。以石頭剪刀布為例，像醬

let result = ((player_choice - computer_choice) + 3) % 3;

但這個筆者還沒試過，有興趣的小伙伴歡迎自己來試試

後記

好啦，不說太多了 (？

所謂活學活用，我要繼續透過今天的所學，去優化那個播放器了

各位我們下次見啦~

這個部落格原本是基於 Hexo 搭配 ShokaX 主題所建立的，不過最近我把它整個用 Astro 這個現代的 SSG 框架重寫了一遍。因此這邊文章會記錄一下我遷移的過程和一些心得。

為何要遷移 ?

其實真要細說原因的話⋯⋯ 老實講我也不太清楚

但一般來說，主要歸類成以下幾點

1. 原域名被學校封鎖

如果你和筆者有過幾分謀面，想必也應該知道 lolicon.wtf 這 domain name 吧

這個 domain name 是筆者在去年年頭買下的，當下根本沒有留意其他因素，只是看到覺得有趣便買了

然而眼睛亮的你們也看到了，這個域名，是以 wtf 作結的

起初我是不怎相信的，直到發了這篇脆文

:::chat [芋泥|2026-02-23|right] 我的domain name再度成功被學校ban掉了

[脆友1|2026-02-23] 這是Palo Alto防火牆的URL Filtering 功能阻擋的，那個domain name應該會被各大資安大廠列在Adult才對😑

你可以到這個網站查查： https://urlfiltering.paloaltonetworks.com

[脆友2|2026-02-23] 單純他看你不爽吧

[脆友3|2026-02-23] TLD 的問題？

[脆友4|2026-02-24] 誰叫你要用這麼名字🤣…

[脆友5|2026-02-24] 因為網址有WTF字眼？

[脆友6|2026-02-24] 用個正常啲嘅 domain name 唔得嘅 :::

好吧⋯ 徹底被打臉了⋯⋯

這 TLD 很常見於那些成人影片網站上，其內容主要以 18+ 為重。而學校網絡一般都會把不當內容全封，所以⋯⋯ 對，我的網站在上線首天便已被學校的 RADIUS 封掉了⋯⋯

唉⋯ 年少無知啊⋯⋯

2. 維護性問題

停止更新

Hexo 的生態系雖然成熟，但許多套件的維護狀況已經不太樂觀。

比如 hexo-admin ，它裏面發文的 API 已經沒有維護了。隨著 Hexo 日益更新下已經完全失效了

而我在用的 hexo-theme-shokax ，也將在不遲於2026年中，宣布停止更新了

ShokaX 主題的為人垢病

ShokaX 可是一款讓我又愛又恨的主題，其繼承自 Shoka 。雖則好看，設定上並不簡單

首先它雖是屬於 Hexo 的主題之一，然而在安裝上並不能透過 git clone 直接複製。而是需要透過 npm install 安裝。我也明白是因為它直接重寫了整個渲染組件而且新增了一堆自家的邏輯，但這無擬令初學入門的技術門檻大幅提高。

再來我通常都會對正在用的主題大修小補，正因為它不能 git clone ，這些修改我一般也只能在主機上執行，直接深入主題的原始碼。而當每次主題要更新時，也只能先一一備份修改好的設定，待更新後再一一還原。有時候還需要注意上游的修改是否與現有的更改有所衝突，對於我一個不怎打理依賴的人來說可是惡夢。

然後說到更新，這個主題每次一來就是很大的更新，而且每次更新伴隨着不少由輕到重的漏洞，需要花費大量時間慢慢磨合。例如：

• 0.4.22 更新重寫了 AI Summary

• 0.5.0 更新觸發了底層邏輯錯誤，VM 佔用了全部資源，還搞得我整台 Proxmox 伺服器卡死了

• 0.5.2 更新直接把整個渲染器重寫了，伴隨着CSS錯位問題

說實話這樣的一個主題，我是不怎樣放心繼續用下去的。縱然我的主題版本停留在較為穩定的 0.4.25，仍出現過不少次因為主題原因導致 HTTP 503 的問題。所以便決定藉着這次換域名的機會，把部落格整個重寫一遍了。

3. 現代化的開發體驗

身為一個前端開發者，我還是希望能用 TypeScript、JSX 這些現代化的工具來開發，而不是傳統的 template engine。

其實我是不怎討好 Hexo 的整套插件系統的，因為他每個插件都需要透過 inject 的方式來運作，不能直接集成到主題內。而 Hexo 在 JS 方面的支援度上也比較欠缺。像是筆者經常會在文章內使用 jQuery ，然而 Hexo 並沒有內建這東西，需要自行從 HTML 引入。

4. Hexo 自身的問題

說到底其實 Hexo 本身也有很多讓我不解的地方。比如它可以直接用 markdown 寫文章，然而早期版本並不支援透過 markdown 語法插入圖片，需要 enable post_asset_folder 然後透過 custom tag 方能插入。

比如我現在要把 image.jpg 放進文章 hello-world 裏，首先要去 _config.yml 裏 enable post_asset_folder

post_asset_folder: true

然後要在 hello-world 需插入的位置新增下面的 custom tag

{% asset_img image.jpg This is the image %}

再把圖片上傳到 post_asset_folder

/blog-root/_posts/hello-world/image.jpg

這樣圖片才能正常的在文章內顯示

然而問題來了，這種方法雖可行，但這也意味着我無法把它們像一般 markdown 那樣在各種 MD 文件編輯器或是平台中正確顯示。對於筆者這些要常在文章內插入圖片的人來講可謂不便。

為什麼選擇 Astro ？

說實話其實筆者也有考慮過其他 generator，像是 Hugo, Next.js 那些的。但看過網上有指 Hugo 在 Markdown parser 的客製化上限制比較大，且有機會把 $$ 和 _ 這些 Latex 會用到的 special characters 漏掉了。而在實測後也發現問題的確存在，故終決定排除在外。

而 Next.js ，我不能說它不香。畢竟它是個基於 React 且同時支援 SSR 和 SSG 兩者的框架。

起初我也有想過把網站遷到 Next.js 去的，但考慮過後發現，就目前的內容而言，SSR 對本站的用處不大。真要是強行遷過去的話反而會覺得有點小題大做了⋯⋯

至於 Astro ，經了解後，發現它是個基於 Vite、能夠生成 MPA 的 SSG 框架。從路徑到各種 Markdown parser 插件等都能夠自訂。簡單來講，只要願意寫 code 基本上沒什麼做不到的東西。

而且大部分的 code 都能透過 TypeScript 完成，有靜態類型的優勢。這點也是深得筆者的喜歡。

遷移需求

在開始動工之前，我列出了幾個必須達成的需求：

• 完全 Static Site - 可以部署到 GitHub Pages、Cloudflare Pages 等平台
• 即開即食 - 盡量避免主題所需以外的 additional dependencies
• 效能不能變差 - Lighthouse Performance 桌面版分數要和舊站相若
• 新舊結合 - 盡可能保留舊站元素，再融合新站特色

遷移過程

重構插件

正如前文所說，Hexo 有它獨立的插件引入方式。一般來說，需要用其 inject 方式來引入。而通常這類插件都只是含有短短幾句的 JS 代碼。

所以很簡單，只需要把上面 hexo inject 的部份刪掉

hexo.extend.filter.register('before_post_render', function(data){

    data.content = data.content.replace(/!{1}\[([^\[\]]*)\]\((.*)\s?(?:".*")?\)/g
    // ...

    return data;
});

然後略為修飾，把剩下的整段 JS 搬進 ./script 裏面便可以了。

重構 renderer

好，重頭戲來了。這也是整個重構過程中耗時最長的部分。

還記得上面說過 ShokaX 是一款讓我又愛又恨的主題嗎？沒錯，它自己擁有另一套獨有的 renderer ，其中之一名為 hexo-renderer-multi-next-markdown-it （有好幾個但功能大同小異）。

而他們全都是以 markdown-it parser 來做基底，內含一大堆 markdown-it 插件。然而 Astro 的 markdown 支援並不是靠markdown-it，而是 remark。

問題來了， remark 這 parser 主打的是 AST，和markdown-it 完全不同。這意味着單靠直接遷移是完全行不通的。

幸好兩者有一個共通點，那就是它們皆支援 custom plugin，也就是理論上若能把這堆插件全部 rewrite 做 remark plugin 的話，剩下的便好處理了。

於是又上網了解一下 remark 的 plugin 結構，然後請教了 Claude 大師：

:::chat [芋泥|2026-03-02|right] 用 markdown-it 寫的插件能否遷到 remark 去呢

[芋泥|2026-03-02|right] 我要換 Astro 了但它用不了 markdown it TT

[Claude 4.5 Sonnet|2026-03–02] 這個… 難度有點大呢~

[Claude 4.5 Sonnet|2026-03–02] 畢竟兩者的架構差很遠了…

[Claude 4.5 Sonnet|2026-03–02] 要不您把 repo 發過來我看看再能怎樣搞吧

[芋泥|2026-03-02|right] 好的 等我一下 :::

就這樣過了兩天

:::chat [芋泥|2026-03-04|right] hexo-theme-shokax/hexo-renderer-multi-markdown-it hexo-theme-shokax/hexo-renderer-multi-next-markdown-it hexo-theme-shokax/hexo-renderer-aether

[芋泥|2026-03-04|right] 就是這些了 它們功能上差不多

[芋泥|2026-03-04|right] 你先替我看看它們是如何工作的 然後順着其邏輯改一改試試

[Claude 4.5 Sonnet|2026-03–04] 好的，這是其中一個經修改後的插件： :::

隨即試了一下，果然出 error 了

:::chat [芋泥|2026-03-05|right] 出 error 了

[芋泥|2026-03-05|right] 一堆 unsupported operations

[Claude 4.5 Sonnet|2026-03–05] 看來還是得重構了…

[Claude 4.5 Sonnet|2026-03–05] 這個要 patch 的話有點難

:::

然後因為要段考了，又過了一個星期

:::chat [芋泥|2026-03-13|right] 我研究了 發現它是走 AST 路線的

[芋泥|2026-03-13|right] 要搞清楚 mdast 才可以開弄

[芋泥|2026-03-13|right] 你先想一想它們在 mdast 的 syntax 和 logic 下該如何處理 然後再和我一起重構

[Claude 4.5 Sonnet|2026-03–13] 好的。那 css 的部分你希望該怎樣？

[芋泥|2026-03-13|right] 盡量保留吧 有需要的才考慮 refactor

:::

於是便開展了一場大型的重構激戰，過了幾天

:::chat [芋泥|2026-03-19|right] render 出來了

[芋泥|2026-03-19|right] 目前版面沒什麼問題

[芋泥|2026-03-19|right] 嗚嗚嗚終於搞好了 TT…

[Claude 4.5 Sonnet|2026-03–19] 恭喜！也真是辛苦你了…

:::

然而你們以為這樣便結束了？非也…

你們上面看到的 chatbox ，那個並不是原本 renderer 內有的，而是借鍳某位大佬的 source code 改造而成的。

其實那個是筆者還在用 Hexo 的時候便一直以來都想要的東西，只是在 Hexo 和 markdown-it 的架構下要放這種東西的話幾乎不可能。所以便趁着這次重構的機會一同把它帶進來了。

只不過，要處理那東西，可謂又是一場惡戰。礙於篇幅所限，這個留在下一篇文再說。

全自動化 deploy

以前用 Hexo 每當要出新文章時，都要先把文章 git push 到 repo 上，然後再另外從 server 上面 git pull 以取得最新變更 （除非你只是打算透過 hexo-deploy-git 把網頁 deploy 到 GitHub Pages 上）。某程度上或會顯得有些不便。

所以這也是本次重構重點更新的項目之一，那就是自動在我 push to repo 後直接從 server 上面 git pull， 在毋須任何手動操作的情況下全自動更新網站。

為此我在目標 server 上安裝了 GitHub self-hosted runner，透過 SSH 來登入 GitHub，再把其連接到 github-actions 裏，隨後便寫出了下面這段 YAML 代碼：

name: Deploy to Production Server

on:
  push:
    branches: [ master ]
  workflow_dispatch:
  repository_dispatch:
    types: [ content-updated ]  # Must match event-type from trigger

jobs:
  build-and-deploy:
    runs-on: self-hosted
    defaults:
      run:
        working-directory: /home/neko/srv/blog/Mizuki-Revanced
    steps:
      - name: SSH Pre-Test
        run: |
          whoami
          ssh -T git@github.com || true
          
      - name: Pull latest changes
        run: |
          git fetch origin master
          git reset --hard origin/master
          git submodule update --init --recursive
          
      - name: Install dependencies
        run: pnpm install --no-frozen-lockfile
      
      - name: Clean cache and backup dist, without removing the dist folder itself
        run: |
          rm -rf .astro node_modules/.astro
          if [ -d "dist" ]; then
            rm -rf dist_backup
            cp -r dist dist_backup
            rm -rf dist/*
            echo "Existing dist backed up to dist_backup."
          fi
      
      - name: Build site with no caches
        id: build
        run: pnpm run build --force
        env:
          ENABLE_CONTENT_SYNC: true
          CONTENT_REPO_URL: ${{ secrets.CONTENT_REPO_URL }}
          USE_SUBMODULE: true

      - name: Cleanup backup on success
        if: success()
        run: |
          rm -rf dist_backup
          echo "Build succeeded, backup removed."

      - name: Restore backup on failure
        if: failure()
        run: |
          rm -rf dist/*
          if [ -d "dist_backup" ]; then
            mv dist_backup/* dist/
            rm -rf dist_backup
            echo "ERROR: pnpm build failed, usually this is due to a syntax error in the markdown files."
            echo "For safety, the previous dist has been restored. Please check the build logs for details."
          fi
          exit 1

      # Our Docker Container will automatically serve the lastest files in real time.

簡單來說整個流程如下：

flowchart TD
    A[/"Trigger Event"/]
    A1["Push to master"]
    A2["Manual dispatch"]
    A3["Repository dispatch\n(content-updated)"]

    A1 --> A
    A2 --> A
    A3 --> A

    A --> B["Runner: self-hosted"]

    B --> C["SSH Pre-Test"]

    C --> D["Pull Latest Changes from Content Repository"]

    D --> E["Install dependencies"]

    E --> F["Clean Cache & Backup dist\nrm -rf .astro node_modules/.astro"]

    F --> G{"dist/ exists?"}

    G -- Yes --> H["cp -r dist dist_backup\nrm -rf dist/*"]
    G -- No --> I["Skip backup"]

    H --> J["Build Site"]
    I --> J

    J --> K{"Build\nSucceeded?"}

    K -- "Success" --> L["Cleanup Backup\nrm -rf dist_backup"]
    L --> M["Docker serves latest dist/ automatically"]

    K -- "Failure" --> N["Restore Backup\nrm -rf dist/*\nmv dist_backup/* dist/"]
    N --> O["Exit with error code 1\nPrevious dist restored"]

Collection

Astro 中有個 collection 機制可以用來管理類似性質的一些資料，例如 blog post 這種同質性很高的東西。

目前的話在格式方面的變化，其實只是從原本 Hexo 的

source/_posts
├── post-1
│   ├── index.md
│   └── cover.png
├── post-2
│   ├── index.md
│   └── cover.png

變成了這樣

src/content/posts
├── post-1
│   ├── index.md
│   └── cover.png
├── post-2
│   ├── index.md
│   └── cover.png

這個設計也解決了我在 Hexo 的一個痛點：Markdown 中引用圖片的 relative path 問題。現在圖片就放在文章旁邊，編輯器的 preview 也能正常顯示了。

主題

主題部分其實沒什麼好說的，這次的重構可謂非常突然，也沒有事先作深入考慮。你要說筆者能夠在短時間內且同時兼顧學業的情況下把整個 layout 用 Astro 從零開始寫起那只會是無稽之談⋯⋯

反正就是在某次機緣巧合之下，發現了 Mizuki 這個主題。它可以說跟 ShokaX 長得 87 分像，基本上那邊具備的功能這邊也大同小異。這點說實話深得筆者喜歡，同時也能省下了不少遷移上的麻煩。

於是便決定了以其作為基礎，然後再根據自己的需求做調整。像是一大堆上述的 remark plugin 全是筆者自己後來寫好再加上去的。

但每個主題也不一定十全十美，像是這主題本來也有一些 讓人不解的地方 和 少量漏洞，所以筆者作為一個開發者，在完善自己的網站的同時，也有把一些基於非個人化的修改回饋予作者，藉以為大家未來在使用上，帶來更美好的體驗。 (在 這裏 可以找到一些出自筆者的 contributions)

而 Astro 的 component 架構也讓 customization 變得非常容易，基本上就像寫 React / Vue 一樣。

其他功能

其他像是 RSS、Sitemap、搜尋功能等，Astro 的生態系都有現成的 integration 可以使用，整合起來也是非常順利。

（待續）

近日筆者在折騰自己的 Flipper。碰巧有一次關機時忘了拔 USB 線，然後它跳出了這個畫面來：

一𣊬間便引起了筆者的注意：這不就跟「It's now safe to turn off your computer.」一樣概念嗎？於是做了點功課，把這篇文肝了出來......

Epilogue

如果你曾經使用過 1990 年代和 2000 年代初期的電腦，你一定對那句經典提示不陌生：

:spoiler[(或是像筆者一樣愛研究一些古科技啦 XD)]

這句話曾經是 Windows 作業系統用戶的日常，代表著一個時代的科技特色

隨著電腦技術的進步，這句話逐漸消失在我們的生活中，但它背後所蘊含的歷史與技術背景，值得我們細細回味

:spoiler[(說實話筆者在小學時期折騰一台老 CRT Dell 時也有看到過這個畫面 XD，不過也就只有幾次罷了 TT...)]

那句話出現的原因: 早期電腦與 AT 電源設計

在 1990 年代，電腦的硬體設計與現代相比有很大的不同。當時的電腦大多採用 AT (Advanced Technology) 電源架構。即機箱具有一個直接連到電源供應器的電源開關。而開關的主要形式，是一個雙極式的開關。其四條針腳焊接到對應的電線。這種設計下無法進行軟件關機。需要用戶手動按下實體電源按鈕來關閉電腦

所以，早前 Windows 95丶Windows 98 等作業系統在結束運行時，由於無法直接控制硬體電源的開關，當你在系統中點擊「關機」之後，作業系統會將所有的程序結束、保存數據並安全退出，隨後顯示「It's now safe to turn off your computer. (您現在可以放心關機)」的提示，告訴用戶可以放心按下電源按鈕了

這段流程的設計，是為了確保在硬碟寫入操作結束後再關閉電腦，避免數據損壞或系統損壞的風險

技術的進步

從 AT 到 ATX 架構

1995 年，Intel 制定了 ATX (Advanced Technology Extended) 架構，用於取代 AT 架構。其最大的改進之一就是讓電源供應器無須再以電線㶥接至電腦機箱的電源開關，並且引入了軟體控制電源的能力。這意味著作業系統可以直接控制電腦的開關，而不需要用戶手動按下實體按鈕

在 Windows 2000 和 Windows XP 中，這一技術得到了廣泛應用。當用戶點擊「關機」時，作業系統不再顯示「It's now safe to turn off your computer.」，而是直接關閉電腦電源，讓整個過程更加自動化和方便

此後，這項技術也就成為了當今所有主流作業系統的標配

ACPI 的問世

1996 年，Intel、Microsoft 和 Toshiba 等科技公司聯合推出了 ACPI (Advanced Configuration and Power Interface，進階組態與電源介面)，成為現代電腦電源管理的一個重要里程碑。它能夠讓作業系統直接管理電腦硬體的電源功能，而不再依賴 BIOS 或硬體來進行操作

ACPI 的一大進步是實現了軟體控制電源關閉。作業系統可以在完成所有操作後，自動切斷電腦電源，取代了早期需要用戶手動按下實體電源按鈕的麻煩

ACPI 定義了多種電腦電源狀態，例如工作狀態（S0）、睡眠模式（S3）、休眠模式（S4）及完全關機狀態（S5），從而使電腦能夠根據需求進行節能操作。這些功能不僅讓桌上型電腦更加便利，也提升了筆記型電腦的能源效率，延長了電池壽命

ACPI 還支援硬體設備的即時管理，允許作業系統根據需要啟用或關閉特定的硬體設備，例如硬碟或顯示器，進一步降低能源消耗

一段早已消失的記憶，卻充滿幾代人的回憶

對於許多經歷過早期電腦時代的人來說，「It's now safe to turn off your computer.」這句話不僅是一個提示，更是一種懷舊的象徵。它代表了那個時代的技術限制，也提醒我們科技的進步如何改變了我們的日常生活

如今，我們的電腦和智慧裝置幾乎可以隨時進入休眠或關機狀態，而不需要擔心數據損壞的問題。然而，那句簡單的提示語，卻像是時光機一樣，把我們帶回到一個需要耐心等待的時代

Prologue

「It's now safe to turn off your computer.」的消失，標誌著電腦硬體與軟體設計的進步。從需要手動關機，到如今自動化的流程，這一變化體現了科技如何讓使用者體驗變得更簡單、更人性化

雖然這句話已經成為歷史，但它仍然是許多人心中的一段美好回憶。當我們回顧那個時代，不僅僅是在緬懷過去的科技，更是在反思我們如何靠著創新一步步走向今天的便利生活

你還記得這句話嗎？這句曾經讓人熟悉的提示，是否也勾起了你對過去的回憶呢？

如果你是選擇以 Microsoft 帳戶登入的話，那麼你的使用者個人資料夾名稱通常是根據你的帳戶名稱或電子郵件的前5個字元來命名。

然而，有時候這個名稱可能並不是你想要的。尤其如果你是一個隨便設置電郵的人，那名稱一定會顯得十分精彩......

那麼，除了在設置時選擇使用本機帳戶登入外，真的別無他法了嗎？ :thinking:

今天筆者就和大家聊聊如何安全地更改 Windows 11 中的使用者個人資料資料夾名稱，確保不會影響系統的正常運行 :)

:::warning 在開始之前，請留意

• 你必須具備管理員權限才能執行此操作

• 更改個人資料資料夾名稱 不會 自動更改 使用者帳戶名稱

• 此過程涉及修改Windows 註冊表 (Registry)，請務必謹慎操作，並建議先備份重要資料 :::

Step 1：登出目標帳戶

1. 先登出你想要更改個人資料資料夾名稱的帳戶

2. 使用其他管理員帳戶登入 Windows 11。如果你沒有其他管理員帳戶，可以像筆者一樣，啟用內建的 Administrator 帳戶來執行此操作。

Step 2：查找帳戶的 SID

1. 按 :keyboard[Win]{theme} + :keyboard[X]，選擇「終端機 (管理員)」(Terminal (Admin))

2. 執行以下任一指令來查找目標帳戶的SID（安全識別碼）：

   powershell "Get-LocalUser | Select-Object -Property @('Name', 'SID')"
   

   或

   wmic useraccount get name,SID
   

3. 記下對應於你要更改的帳戶的 SID，例如 S-1-5-21-2212846312-626644311-134141314-

Step 3：修改 Windows 註冊表 (Registry)

1. 開啟「登錄編輯程式」(:keyboard[Win]{theme} + :keyboard[R] → 輸入 regedit → 按「確定」(OK))

2. 前往以下路徑：

   HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList\S-1-5-21-xxxxxxxxxx
   

   （將 S-1-5-21-xxxxxxxxxx 替換為你的 SID）

3. 找到 ProfileImagePath，雙擊打開並修改路徑 e.g. 將 C:\Users\<OLD_NAME> 改為 C:\Users\<NEW_NAME>

4. 按「確定」(OK)，然後關閉登錄編輯程式

Step 4：重新命名個人資料資料夾

1. 開啟檔案總管（:keyboard[Win]{theme} + :keyboard[E]）

2. 前往 C:\Users，找到舊的個人資料資料夾 (e.g. <OLD_NAME>)

3. 右鍵點擊 → 選擇「重新命名」，將其更改為新名稱 (e.g. <NEW_NAME>)

4. 如果出現「此資料夾正在使用中」(Folder in use . . . file or folder is open in another program) 的錯誤：

   • 請確保目標帳戶已完全登出

   • 重新啟動電腦後再嘗試重新命名

Optional 5：建立符號連結（Symbolic Link）

某些應用程式或系統設定仍可能引用舊的資料夾名稱，你可以使用符號連結來避免錯誤：

1. 開啟命令提示字元 (管理員模式)

2. 執行以下指令來建立符號連結：

   mklink /d "C:\Users\<OLD_NAME>" "C:\Users\<NEW_NAME>"
   

任何仍尋找 C:\Users\<OLD_NAME> 的程式都會被自動導向 C:\Users\<NEW_NAME>

Optional 6：修正 OneDrive 及 Windows 搜尋索引

1. 如果你使用 OneDrive，請手動變更 OneDrive 資料夾路徑至新的個人資料資料夾名稱

2. 重建 Windows 搜尋索引，以確保搜尋功能不會指向舊的資料夾名稱

這樣你就可以在不影響系統的穩定性下，更改 Windows 11 使用者個人資料資料夾的名稱啦~

:::note Temperature is a measure of degree of hotness of an object. (Oxford NSS Physics TB 2nd edition, 2014) :::

Thermometer

Type of Thermometers

• Infrared thermometer

• Resistance thermometer

• Mercury-in-glass thermometer

Thermometer Calibration

Thermometer calibration ensures accurate temperature measurement. It involves adjusting a thermometer to match a known standard.

Steps for Calibration:

1. Ice Point Calibration (0°C)

   • Place the thermometer in a mixture of crushed ice and water.

   • Wait for it to stabilize, then adjust if needed to read 0°C.

2. Boiling Point Calibration (100°C)

   • Place the thermometer in boiling water (at sea level).

   • Ensure it reads 100°C; adjust if necessary.

3. Using a Reference Thermometer

   • Compare readings with a calibrated standard thermometer at different temperatures.

4. Adjust and Record

   • If there is a deviation, apply a correction factor.

   • Document the calibration results for future reference.

Heat Capacity

Heat Capacity (C)

$$Q = C \Delta T$$

where

• $Q$ = Heat Energy (Unit: $J$)

• $C$ = Heat Capacity (Unit: $J K⁻¹$ / $J °C⁻¹$)

Specific Heat Capacity (c)

$$Q = mc \Delta T$$

where

• $Q$ = Heat Energy (Unit: $J$)

• $c$ = Specific Heat Capacity (Unit: $J kg⁻¹$ $K⁻¹$ / $J kg⁻¹$ $°C⁻¹$)

• $m$ = mass of an object (unit: kg)

• $ΔT$ = change in temperature (unit: °C)

:::warning The letter 'c' in specific heat capacity must always be lowercase! :::

Molar Heat Capacity (Cₘ)

$$Q = nCₘ \Delta T$$

where

• $Q$ = Heat Energy (Unit: $J$)

• $Cₘ$ = Molar Heat Capacity (Unit: $J mol⁻¹ K⁻¹$ / $J mol⁻¹ °C⁻¹$)

• $n$ = number of moles of a substance (unit: mol)

• $ΔT$ = change in temperature (unit: °C)

Heat Capacity vs. Specific Heat Capacity

• Heat Capacity (C) is an extensive property that depends on the amount of substance. It is the total heat energy required to raise the temperature of an object by 1 degree Celsius or 1 Kelvin.

• Specific Heat Capacity (c) is an intensive property that does not depend on the amount of substance. It is the heat energy required to raise the temperature of 1 kilogram of a substance by 1 degree Celsius or 1 Kelvin.

The relationship between heat capacity and specific heat capacity can be expressed as: $$C = mc$$

where

• $C$ = Heat Capacity (Unit: $J K⁻¹$ / $J °C⁻¹$)

• $m$ = mass of an object (unit: kg)

• $c$ = Specific Heat Capacity (Unit: $J kg⁻¹ K⁻¹$ / $J kg⁻¹ °C⁻¹$)

Heat Capacity vs. Molar Heat Capacity

• Heat Capacity (C) is an extensive property that depends on the amount of substance. It is the total heat energy required to raise the temperature of an object by 1 degree Celsius or 1 Kelvin.

• Molar Heat Capacity (Cₘ) is an intensive property that does not depend on the amount of substance. It is the heat energy required to raise the temperature of 1 mole of a substance by 1 degree Celsius or 1 Kelvin.

The relationship between specific heat capacity and molar heat capacity can be expressed as:

$$Cₘ = c \cdot M$$

where

• $Cₘ$ = Molar Heat Capacity (Unit: $J mol⁻¹ K⁻¹$ / $J mol⁻¹ °C⁻¹$)

• $c$ = Specific Heat Capacity (Unit: $J kg⁻¹ K⁻¹$ / $J kg⁻¹ °C⁻¹$)

• $M$ = Molar Mass of the substance (Unit: $kg mol⁻¹$)

就是那台 Windows XP VM 不管怎樣弄，開機音樂還是破破的，伴隨着不少失真......

找了 Google 大神上很多方法也無解。直到突然想起了以前是透過在主機 (Host) 上改登錄檔解決的，隨即問起了 GPT ，結果一下子就搞定了

今天就來記錄一下筆者當時是如何解決問題的，順便當給自己和大家一些參考

Step 1: 開啟登錄編輯程式 (Registry Editor)

1. 按 [Win]{.kbd} + [R]{.kbd .red} 打開 「執行」 (Run) ，然後輸入 regedit 再按 [Enter]{.kbd}

1. 使用系統管理員帳戶驗證登入

Step 2: 新增登錄檔 (Registry)

1. 移至

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\kernel

1. 右鍵按 New -> DWORD (32-bit) value

1. 按 [F2]{.kbd} 重新命名為 GlobalTimerResolutionRequests，然後按 [Enter]{.kbd} 進入設定頁面

1. 修改其 Value data 為 1 並選擇 Base 為 Hexadecimal，完成後按 [Enter]{.kbd} 儲存

完成！請關閉登錄編輯程式 (Registry Editor) 並重啟電腦以應用新設定

倘若一正常的話，恭喜你！ 你已經成功解決腦人的音效問題了，盡情享受你的 VM 吧！

今天就和大家聊聊如何在 Linux 安裝和配置 Xrdp 服務器，以及一些可能會遇到的問題和解決方法

什麼是 Xrdp？

顧名思義，Xrdp 是一個微軟 (Microsoft) 遠端桌面協定（RDP）的開源實現，至今已有超過20多年歷史。能夠提供一個在功能還是兼容性方面和RDP一致的遠端桌面體驗。

它允許你透過圖形介面控制遠端系統。你可以透過RDP協定登入遠端機器，並且創建一個真實的桌面會話，整體上就像你登入自己的電腦一樣。

Step 1: 安裝

桌面環境

大部份Linux主機通常並沒有預先安裝桌面環境。因此在繼續前，我們需要先給主機安裝一個桌面環境 (Desktop Environment，俗稱 DE)，用作 Xrdp 的後端

通常像 Ubuntu Debian 這類 distro 的 Source repo 中有幾個 DE 可選，例如 XFCE ､ GNOME 等。筆者這邊打算安裝 KDE Plasma

sudo apt-get install kde-plasma-desktop

完成後便可以開始裝 Xrdp 了

Xrdp

我們首先在 terminal 中輸入以下指令

sudo apt-get install xrdp

接着分別更改 /etc/xrdp/xrdp.ini

sudo sed -e 's/^new_cursors=true/new_cursors=false/g' \
           -i /etc/xrdp/xrdp.ini

和 ~/.xsession 裏的參數，像醬

echo "/usr/bin/startplasma-x11" > ~/.xsession
D=/usr/share/plasma:/usr/local/share:/usr/share:/var/lib/snapd/desktop
C=/etc/xdg/xdg-plasma:/etc/xdg
C=${C}:/usr/share/kubuntu-default-settings/kf5-settings
cat <<EOF > ~/.xsessionrc
export XDG_SESSION_DESKTOP=KDE
export XDG_DATA_DIRS=${D}
export XDG_CONFIG_DIRS=${C}
EOF

如果你使用的版本是 Ubuntu 20 或以上，便需要提供憑證存取權給 Xrdp 使用者以確保 Xrdp 能夠正常運作

sudo adduser xrdp ssl-cert

然後在 systemctl 中啟用 xrdp，讓其在我們每次去開機時自動啟動

sudo systemctl enable xrdp

如果你有啟用防火牆的話，可以允許 Xrdp 來自某個 IP 位置，或某個 IP 範圍的訪問 (CIDR)，這邊筆者以 ufw 為例

sudo ufw allow from <YOUR IP OR IP RANGE IN CIDR> to any port 3389

:::warning 基於安全考慮，極度不建議直接用 sudo ufw allow 3389 來允許從所有地方訪問 :::

最後輸入以下指令來重新啟動 Xrdp，讓變更生效

sudo systemctl restart xrdp

這樣便完成 Xrdp 的基本安裝了

Optional 2: 進階設定

更改默認端口號 (Port)

我們先打開 /etc/xrdp/xrdp.ini

sudo nano /etc/xrdp/xrdp.ini

然後在裏面找到 port=3389

[Globals]
; xrdp.ini file version number
ini_version=1

; fork a new process for each incoming connection
fork=true

; ports to listen on, number alone means listen on all interfaces
; 0.0.0.0 or :: if ipv6 is configured
; space between multiple occurrences
; ALL specified interfaces must be UP when xrdp starts, otherwise xrdp will fail to start
;
; Examples:
;   port=3389
;   port=unix://./tmp/xrdp.socket
;   port=tcp://.:3389                           127.0.0.1:3389
;   port=tcp://:3389                            *:3389
;   port=tcp://<any ipv4 format addr>:3389      192.168.1.1:3389
;   port=tcp6://.:3389                          ::1:3389
;   port=tcp6://:3389                           *:3389
;   port=tcp6://{<any ipv6 format addr>}:3389   {FC00:0:0:0:0:0:0:1}:3389
;   port=vsock://<cid>:<port>
port=3389

; 'port' above should be connected to with vsock instead of tcp
; use this only with number alone in port above
; prefer use vsock://<cid>:<port> above
use_vsock=false
.
.
.

並把它更改為你想要且未被佔用的端口

; Examples:
;   port=3389
;   port=unix://./tmp/xrdp.socket
;   port=tcp://.:3389                           127.0.0.1:3389
;   port=tcp://:3389                            *:3389
;   port=tcp://<any ipv4 format addr>:3389      192.168.1.1:3389
;   port=tcp6://.:3389                          ::1:3389
;   port=tcp6://:3389                           *:3389
;   port=tcp6://{<any ipv6 format addr>}:3389   {FC00:0:0:0:0:0:0:1}:3389
;   port=vsock://<cid>:<port>
port=< YOUR PORT>

按 :keyboard[Ctrl]{theme} + :keyboard[X] ，輸入 y / yes 並按 :keyboard[Enter]{theme} 儲存

最後輸入以下指令來重新啟動 Xrdp，讓變更生效

sudo systemctl restart xrdp

:::note 如果你有啟用防火牆的話，記得更新一下允許新的端口。否則無法連線喔~ :::

Step 3: 連線至主機

現在，我們可以先測試一下 Xrdp 是否正常運作。

1. 如連線至 Windows 般打開遠端桌面 (Remote Desktop) 並填寫主機 IP 或域名，然後按「連接」 (Connect)

2. 假如出現憑證警告，按「是」 (Yes) 繼續

3. 輸入目標主機的用戶名稱 (Username) 和密碼 (Password) ，完成後請按 [Login]{.label}

4. 倘若沒問題的話，恭喜你！你已經成功安裝和設置 Xrdp 了，盡情享受吧！

假若無法連上主機，或是連接後在某部份出現異常的話，該怎樣辦？沒關係。請繼續看下去

疑難排解

無法識別主機

大多數屬於網絡問題，請檢查

• Xrdp 是否已啟用並正常運行

• 防火牆是否已允許端口 (Port)

輸入憑據後按登入後即時閃退

這是一個在任何DE也最常遇到的問題，但解決方法也很簡單

先在 terminal 中輸入以下指令

sudo service xrdp stop

然後編輯 Xrdp 啟動腳本

sudo nano /etc/xrdp/startwm.sh

把腳本內的以下幾行

test -x /etc/X11/Xsession && exec /etc/X11/Xsession
exec /bin/sh /etc/X11/Xsession

更改為

#(@obsolete)startxfce4
/usr/bin/startplasma-x11

按 :keyboard[Ctrl] + :keyboard[X]{theme} ，輸入 y / yes 並按 :keyboard[Enter]{theme} 儲存

最後輸入以下指令來重新啟動 Xrdp 便可

sudo service xrdp start

在 KDE 中無法移動或調整視窗大小

我們在 terminal 中輸入以下指令

sudo service xrdp stop

並編輯 Xrdp 啟動腳本

sudo nano /etc/xrdp/startwm.sh

在腳本底下新增以下內容

#(@obsolete)killall kwin
killall kwin_x11
#(@obsolete)kwrapper kwin -replace &
kwrapper5 kwin_x11 --replace &

按 :keyboard[Ctrl]{theme} + :keyboard[X] ，輸入 y / yes 並按 :keyboard[Enter]{theme} 儲存

最後輸入以下指令來重新啟動 Xrdp 便可

sudo service xrdp start

KDE 內沒有桌面，只顯示黑畫面

這問題在KDE中也算常見，其解決方法並不複雜

先同樣地在 terminal 中輸入以下指令

sudo service xrdp stop

並編輯 Xrdp 啟動腳本

sudo nano /etc/xrdp/startwm.sh

在腳本底下新增以下內容

#(@Obsolete)killall plasma-desktop
#(@Obsolete)kstart plasma-desktop
#(@Obsolete)killall plasmashell #to stop it
#(@Obsolete)kstart plasmashell #to restart it
kquitapp5 plasmashell
kstart5 plasmashell

按 :keyboard[Ctrl]{theme} + :keyboard[X] ，輸入 y / yes 並按 :keyboard[Enter]{theme} 儲存

最後輸入以下指令來重新啟動 Xrdp 便可

sudo service xrdp start

結語

想不到 Linux 還有這樣的連接方式啊，筆者也是最近才知道.......

看到這裏，想必各位應該 GET 到一些新技能了吧

不過在這裏提醒大家，在享受 Xrdp 帶來的便利時，也請謹記做好網絡保安。

現時遠端連接騙局極為普遍，切忌讓其他人士肆意存取你的主機。相信沒人願意成為下一位被騙的受害者吧 XD

希望大家設置成功，為你的 Linux 主機打開新的大門！

辨法倒是有的，例如 DDNS，或是固定IP等等 (下幾期會提到)。不過，這些方式雖說能夠解一時燃眉之急，卻無法保護您所傳輸的數據......

VPN 正是為此而誕生，但是，相信弄過 VPN 的都會明白，傳統的 OpenVPN 要在路由器上配置很多東西 (新款 TP-Link 路由器倒是把程序簡化了不少)......

倒底有沒有辦法能輕鬆建立自己的私人 VPN，而不需要煩人的網路設定？這時候，有請 Tailscale 出場！

為什麼選擇 Tailscale？

如果你曾經嘗試過設定傳統 VPN（如 OpenVPN 或 WireGuard），你可能會發現它們通常需要：

• 手動配置防火牆與 NAT

• 設定伺服器、管理憑證

• 處理繁瑣的 IP 配置與存取權限

而 Tailscale 透過 WireGuard 提供 零配置（zero-config）VPN，並且擁有以下優點：

• 免開放端口，不需調整路由器

• 自動穿透防火牆與 NAT（適用於遠端存取）

• 支援多種設備（Windows、macOS、Linux、iOS、Android）

• 內建 MagicDNS，讓設備之間可以用名稱直接連線

• 免費個人計畫，適合個人與小型團隊

準備好了嗎？ 讓我們開始吧！

:::note Tailscale 支援 Windows、macOS、Linux、iOS 和 Android，請選擇適合你的設備來安裝。 :::

Step 1: 註冊 Tailscale

首先，我們需要一個 Tailscale 帳號：

1. 打開 Tailscale 官方網站

2. 點擊 「Sign up」（註冊）

3. 使用 Google、Microsoft 或 GitHub 登入

4. 完成註冊後，你將會自動進入 Tailscale 控制台

Step 2: 安裝 Tailscale

Linux

主流 distro

如果你是懶人，且所使用的 distro 具有 apt, yum,zipper 這類 package manager 的話，例如

• Ubuntu

• Debian

• Red Hat® Enterprise Linux (RHEL), CentOS, Fedora 以及其引申的 distro

• Raspberry Pi OS

• Amazon Linux

• openSUSE 和 SUSE Linux Enterprise

• Oracle Linux

• VMware Photon OS

那麼只要把下面的通用命令 copy and paste 便成事了

curl -fsSL https://tailscale.com/install.sh | sh
sudo tailscale up

Arch Linux

如果你和筆者一樣，都是在用 Arch Linux 的話

sudo pacman -S tailscale

sudo systemctl enable --now tailscaled
sudo tailscale up

NixOS

打開 /etc/nixos/configuration.nix，新增下列內容

{
  services.tailscale = {
    enable = true;
    # Enable tailscale at startup

    # If you would like to use a preauthorized key
    #authKeyFile = "/run/secrets/tailscale_key";

  };
}

Windows

1. 前往 Tailscale 下載頁面

2. 下載 Windows 安裝程式

3. 執行安裝程式，完成後開啟 Tailscale

macOS

1. 下載 Tailscale for macOS：點此下載

2. 安裝並開啟 Tailscale

Android

1. 前往 Google Play Store 搜尋 Tailscale

1. 安裝

並開啟 App

iOS

1. iOS/iPadOS：前往 App Store 搜尋 Tailscale

2. 安裝

並開啟 App

Step 3: 連接至VPN

Linux

安裝完成後，啟動並登入：

sudo tailscale up

這時候應該會有一條連結顯示在terminal上，像醬

To authenticate, visit:

        https://login.tailscale.com/a/<SOMETHING>

在瀏覽器中輸入該連結並完成登入流程，然後點擊「Connect」

一切順利的話，terminal會如下圖般顯示"Success."

To authenticate, visit:

        https://login.tailscale.com/a/<SOMETHING>

Success.

這樣便代表您的Linux設備已經成功連上VPN了。

Windows

1. 點擊 「Log in」（登入），使用剛剛註冊的帳號登入

2. 成功登入後，Tailscale 會自動連接到 VPN

macOS

1. 點擊 「Log in」，使用你的帳號登入

2. 成功登入後，你的 Mac 也加入 VPN 了

Android

1. 開啟 Tailscale

2. 完成初始化

1. 點擊 「Connect」

1. 點擊 「Log in」，並使用你的帳號登入。筆者這邊使用 GitHub 登入

1. 在瀏覽器點擊 「Connect」

1. 看到以下畫面，即代表登入成功。請返回 Tailscale 應用程式繼續

1. 假若跳出 Notifications 介面，請按照指示允許通知

1. 點擊畫面頂部開關，成功後設備將加入 VPN

iOS

1. 開啟 Tailscale

2. 按頁面指示完成初始化

1. 點擊 「Log in」，並使用你的帳號登入

1. 授權 VPN 連線

2. 點擊畫面頂部開關，成功後設備將加入 VPN

Step 4: 使用 Tailsacale IP 連接你的設備

現在，我們的所有裝置均已加入 Tailscale 網路，只要透過 Tailscale IP 便能把它們連接起來了！

如何查詢 Tailscale IP

在終端機輸入：

tailscale ip -4

我們會看到一個類似 100.101.102.103 的 IP，這就是你裝置上的 Tailscale VPN IP。

透過 SSH 連線

假若你有兩台設備都安裝了 Tailscale，例如：

• Ubuntu 伺服器（IP：100.101.102.103）

• Windows 電腦（IP：100.102.103.104）

你可以像筆者一樣，從 Windows 使用 SSH 連線到 Ubuntu：

ssh user@100.101.102.103

遠端桌面（Windows RDP）

如果你想從 筆電遠端連接家裡的 Windows 電腦：

mstsc /v:100.101.102.103

這樣就能輕鬆連線啦！

恭喜你！你已經完成所有 Tailscale 的基本設定了。如果你沒有必要用其他進階功能，停在這裏便行了

Step 5: 進階設置

MagicDNS：使用設備名稱連線

每台 Tailscale 設備都會有一個 Tailscale 名稱，例如：

my-laptop
home-server

如上所述，我們得知可以透過 Tailscale IP 互連設備 :spoiler[(但是筆者並不喜歡長期牢記這一串IP啊，怎樣辦)]

如果你像筆者一樣，不想記住 IP 地址， MagicDNS定能幫你一個大忙

1. 進入 Tailscale 控制台

2. 點擊 DNS 設定

3. 啟用 MagicDNS

搞定之後，你就可以直接輸入設備名稱來連線，像醬

ssh user@home-server

是不是更方便了？

子網路路由（Subnet Routing）

我們也知道並不是所有設備皆能支援 Tailscale，難道說你能把 Tailscale 裝到 Wi-Fi 智能電飯鍋 上嗎 XD？

這個時候，我們可以透過一台支援 Tailscale 的 Linux 裝置設定 子網路路由，來幫助其他設備連接到您的 Tailnet。筆者的做法是在 PVE 中長開一個 lxc container 並做好相應配置，然後在 terminal 輸入這一串命令

sudo tailscale up --advertise-routes=192.168.1.0/24

其中 192.168.1.0/24 更改為路由器的子網 (Subnet)

接著到 Tailscale 控制台 中啟用這個路由。

這樣，VPN 內的設備就可以存取家裡的 NAS、印表機或其他 IoT 設備！

ACL（存取控制）

如果你想限制哪些設備可以互相連接，可以編輯 ACL（存取控制清單）：

1. 進入 Tailscale 控制台

2. 點擊 Access Control

3. 編輯 tailnet 設定，例如：

   {
     "ACLs": [
       {
         "Action": "accept",
         "Sources": ["100.101.102.103"],
         "Destinations": ["100.102.103.104"]
       }
     ]
   }
   

4. 儲存設定，Tailscale 會自動應用變更

結語

Tailscale 讓 VPN 設置變得超級簡單。看到這裏，你現在應該已經：

• 設置並登入了 Tailscale

• 讓你的設備透過 Tailscale 互相連接

• 了解了進階功能，如 MagicDNS、子網路路由、ACL

現在，你可以透過 Tailscale 安全地存取你的伺服器、遠端桌面，以及整個家庭網路了！

如果你有任何問題，可以查看 Tailscale 官方文件 或加入 Tailscale 社群。

試試看吧，展開你的 Tailscale 之旅!

A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).

• Block Elements
  • Paragraphs and Line Breaks
  • Headers
  • Blockquotes
  • Lists
  • Code Blocks
  • Horizontal Rules
  • Table
• Span Elements
  • Links
  • Emphasis
  • Code
  • Images
  • Strikethrough
• Miscellaneous
  • Automatic Links
  • Backslash Escapes
• Inline HTML

Block Elements

Paragraphs and Line Breaks

Paragraphs

HTML Tag: <p>

One or more blank lines. (A blank line is a line containing nothing but spaces or tabs is considered blank.)

Code:

This will be
inline.

This is second paragraph.

Preview:

This will be inline.

This is second paragraph.

Line Breaks

HTML Tag: <br />

End a line with two or more spaces.

Code:

This will be not
inline.

Preview:

This will be not
inline.

Headers

Markdown supports two styles of headers, Setext and atx.

Setext

HTML Tags: <h1>, <h2>

"Underlined" using equal signs (=) as <h1> and dashes (-) as <h2> in any number.

Code:

This is an H1
=============
This is an H2
-------------

Preview:

This is an H1

This is an H2

atx

HTML Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Uses 1-6 hash characters (#) at the start of the line, corresponding to <h1> - <h6>.

Code:

# This is an H1
## This is an H2
###### This is an H6

Preview:

This is an H1

This is an H2

This is an H6

Optionally, you may "close" atx-style headers. The closing hashes don't need to match the number of hashes used to open the header.

Code:

# This is an H1 #
## This is an H2 ##
### This is an H3 ######

Preview:

This is an H1

This is an H2

This is an H3

Blockquotes

HTML Tag: <blockquote>

Markdown uses email-style > characters for blockquoting. It looks best if you hard wrap the text and put a > before every line.

Code:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown allows you to be lazy and only put the > before the first line of a hard-wrapped paragraph.

Code:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

Preview:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >.

Code:

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

Preview:

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks.

Code:

> ## This is a header.
>
> 1.   This is the first list item.
> 2.   This is the second list item.
>
> Here's some example code:
>
>     return shell_exec("echo $input | $markdown_script");

Preview:

This is a header.

1. This is the first list item.
2. This is the second list item.

Here's some example code:

return shell_exec("echo $input | $markdown_script");

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists.

Unordered

HTML Tag: <ul>

Unordered lists use asterisks (*), pluses (+), and hyphens (-).

Code:

*   Red
*   Green
*   Blue

Preview:

• Red
• Green
• Blue

is equivalent to:

Code:

+   Red
+   Green
+   Blue

and:

Code:

-   Red
-   Green
-   Blue

Ordered

HTML Tag: <ol>

Ordered lists use numbers followed by periods:

Code:

1.  Bird
2.  McHale
3.  Parish

Preview:

1. Bird
2. McHale
3. Parish

It's possible to trigger an ordered list by accident, by writing something like this:

Code:

1986. What a great season.

Preview:

1. What a great season.

You can backslash-escape (\) the period:

Code:

1986\. What a great season.

Preview:

1986. What a great season.

Indented

Blockquote

To put a blockquote within a list item, the blockquote's > delimiters need to be indented:

Code:

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

Preview:

• A list item with a blockquote:

  This is a blockquote inside a list item.

Code Block

To put a code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs:

Code:

*   A list item with a code block:

        <code goes here>

Preview:

• A list item with a code block:

  <code goes here>
  

Nested List

Code:

* A
  * A1
  * A2
* B
* C

Preview:

• A
  • A1
  • A2
• B
• C

Code Blocks

HTML Tag: <pre>

Indent every line of the block by at least 4 spaces or 1 tab.

Code:

This is a normal paragraph:

    This is a code block.

Preview:

This is a normal paragraph:

This is a code block.

A code block continues until it reaches a line that is not indented (or the end of the article).

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities.

Code:

    <div class="footer">
        &copy; 2004 Foo Corporation
    </div>

Preview:

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

Following sections Fenced Code Blocks and Syntax Highlighting are extensions, you can use the other way to write the code block.

Fenced Code Blocks

Just wrap your code in ``` (as shown below) and you won't need to indent it by four spaces.

Code:

Here's an example:

```
function test() {
  console.log("notice the blank line before this function?");
}
```

Preview:

Here's an example:

function test() {
  console.log("notice the blank line before this function?");
}

Syntax Highlighting

In your fenced block, add an optional language identifier and we'll run it through syntax highlighting (Support Languages).

Code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

Preview:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Horizontal Rules

HTML Tag: <hr /> Places three or more hyphens (-), asterisks (*), or underscores (_) on a line by themselves. You may use spaces between the hyphens or asterisks.

Code:

* * *
***
*****
- - -
---------------------------------------
___

Preview:

Table

HTML Tag: <table>

It's an extension.

Separates column by pipe (|) and header by dashes (-), and uses colon (:) for alignment.

The outer pipes (|) and alignment are optional. There are 3 delimiters each cell at least for separating header.

Code:

| Left | Center | Right |
|:-----|:------:|------:|
|aaa   |bbb     |ccc    |
|ddd   |eee     |fff    |

 A | B
---|---
123|456


A |B
--|--
12|45

Preview:

Span Elements

Links

HTML Tag: <a>

Markdown supports two style of links: inline and reference.

Inline

Inline link format like this: [Link Text](URL "Title")

Title is optional.

Code:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Preview:

This is an example inline link.

This link has no title attribute.

If you're referring to a local resource on the same server, you can use relative paths:

Code:

See my [About](/about/) page for details.

Preview:

See my About page for details.

Reference

You could predefine link references. Format like this: [id]: URL "Title"

Title is also optional. And the you refer the link, format like this: [Link Text][id]

Code:

[id]: http://example.com/  "Optional Title Here"
This is [an example][id] reference-style link.

Preview:

This is an example reference-style link.

That is:

• Square brackets containing the link identifier (not case sensitive, optionally indented from the left margin using up to three spaces);
• followed by a colon;
• followed by one or more spaces (or tabs);
• followed by the URL for the link;
• The link URL may, optionally, be surrounded by angle brackets.
• optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.

The following three link definitions are equivalent:

Code:

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)
[foo]: <http://example.com/>  "Optional Title Here"

Uses an empty set of square brackets, the link text itself is used as the name.

Code:

[Google]: http://google.com/
[Google][]

Preview:

Google

Emphasis

HTML Tags: <em>, <strong>

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. One delimiter will be <em>; *double delimiters will be <strong>.

Code:

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

Preview:

single asterisks

single underscores

double asterisks

double underscores

But if you surround an * or _ with spaces, it'll be treated as a literal asterisk or underscore.

You can backslash escape it:

Code:

\*this text is surrounded by literal asterisks\*

Preview:

*this text is surrounded by literal asterisks*

Code

HTML Tag: <code>

Wraps it with backtick quotes (`).

Code:

Use the `printf()` function.

Preview:

Use the printf() function.

To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:

Code:

``There is a literal backtick (`) here.``

Preview:

There is a literal backtick (`) here.

The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:

Code:

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

Preview:

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

Images

HTML Tag: <img />

Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference.

Inline

Inline image syntax looks like this: ![Alt text](URL "Title")

Title is optional.

Code:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

Preview:

That is:

• An exclamation mark: !;
• followed by a set of square brackets, containing the alt attribute text for the image;
• followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.

Reference

Reference-style image syntax looks like this: ![Alt text][id]

Code:

[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
![Alt text][img id]

Preview:

Strikethrough

HTML Tag: <del>

It's an extension.

GFM adds syntax to strikethrough text.

Code:

~~Mistaken text.~~

Preview:

Mistaken text.

Miscellaneous

Automatic Links

Markdown supports a shortcut style for creating "automatic" links for URLs and email addresses: simply surround the URL or email address with angle brackets.

Code:

<http://example.com/>

<address@example.com>

Preview:

http://example.com/

address@example.com

GFM will autolink standard URLs.

Code:

https://github.com/emn178/markdown

Preview:

https://github.com/emn178/markdown

Backslash Escapes

Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown's formatting syntax.

Code:

\*literal asterisks\*

Preview:

*literal asterisks*

Markdown provides backslash escapes for the following characters:

Code:

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

Inline HTML

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

Code:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

Preview:

This is a regular paragraph.

<table> <tr> <td>Foo</td> </tr> </table>

This is another regular paragraph.

Note that Markdown formatting syntax is not processed within block-level HTML tags.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

Code:

<span>**Work**</span>

<div>
    **No Work**
</div>

Preview:

<span>Work</span>

<div> No Work </div>

很多朋友都會回答筆者使用遠端連線解決，因為這是一個非常便捷的選擇

然而，試想一下，假如電腦沒有開機呢？又該怎樣做？ :spoiler[(真的…每次打開遠端桌面連接電腦時，卻發現電腦老是關機了QAQ…)]

這時候，Wake On LAN 便派上用場了！

所以今天就要來教大家如何設定 Wake On LAN（網路喚醒），讓您只要透過手機就能遠端開啟電腦！

<iframe id="video" width="100%" height="450" src="https://www.youtube.com/embed/VG6sCC4afRI?controls=1" frameborder="0" scrolling="no" allowfullscreen></iframe>

什麼是 Wake On LAN？

Wake On LAN（簡稱 WOL）是一項允許您透過網路封包遠端開啟電腦的技術。簡單而言，就是發送一個特殊的「魔術封包」（Magic Packet）到目標電腦，讓其從關機狀態實時自動開機。

要讓 WOL 能夠正常運作，需要設定以下三個部分：

• 網路卡 (Network Interface Card)

• 路由器 (Router)

• BIOS

讓我們一步一步來看該怎麼設定。

Step 1：設定網路卡 (NIC)

首先要確認您的網路卡支援 WOL 功能，並進行正確設定。

:::warning 無線網路卡並不支援網絡喚醒 (WOL) 功能 :::

以 Windows 為例：

1. 首先於鍵盤按下 :keyboard[Win] + :keyboard[X]{theme}，並選擇 「裝置管理員」(Device Manager)

1. 展開 「網路介面卡」(Network adapters)

1. 找到您使用的網路卡，按右鍵選擇 「內容」(Properties)。筆者這邊使用的是 Intel(R) Ethernet Controller I226-V

1. 接着應該會看到以下畫面：

1. 移至 「電源管理」(Power Management)，啟用 「允許電腦關閉這個裝置以節省電源」(Allow the computer to turn off this device to save power) 和 「允許這個裝置喚醒電腦」(Allow this device to wake the computer)

:::note 如果找不到這些選項，可能是您的網路卡不支援 WOL 功能喔！建議更換支援的網卡~ :::

:::note 進階設定 (Optional)

可移至 「進階」(Advanced) 找到以下選項並啟用 :)

• Wake on Magic Packet

• Wake on Pattern Match :::

Step 2：設定路由器

要讓外網也能喚醒電腦，路由器設定是關鍵！

不同品牌的路由器的設定方式有所參差，但基本上其概念也大同小異~ 以下筆者以 TP-Link 路由器作示例：

1. 開啟瀏覽器，輸入 192.168.0.1 / 192.168.1.1 或您的預設閘道進入管理介面<br>因為筆者已經更改預設閘道為 192.168.217.100，所以這邊輸入 192.168.217.100。

1. 輸入您的管理員密碼

:::note 建議更改預設的路由器登入密碼，防止被他人入侵。 :::

1. 登入後會看到以下介面

1. 進入 Advanced → Network → DHCP Server，在下面的 Address Reservation 按 + Add

1. 輸入目標裝置的 IPv4 和 MAC，然後按 :keyboard[Save]{theme} 保存

1. 移至 Security → IP & MAC Binding 並啟用，於下方 Binding List 按 + Add

1. 輸入目標裝置的 MAC 和 IPv4，然後按 :keyboard[Save]{theme} 保存

1. 移至 NAT Forwarding → Port Forwarding ， 按 + Add

1. 設定連接埠轉發：

   • 協定：All

   • 外部埠：您要使用的埠

   • 內部埠：您要使用的埠

   • 內部 IP：您要喚醒的電腦 IP

完成後按 :keyboard[Save]{theme} 保存

Step 3：主機板 BIOS 設定

這是最後但也是不可或缺的一步！下面筆者以 MSI 主機板為例：

進入 BIOS 的辦法有很多，以下是其中一種：

• 開機時瘋狂按 :keyboard[Delete]{theme} / :keyboard[F2]{theme} / :keyboard[F12]{theme} 鍵進入 BIOS

然而筆者啟用了快速啟動 (MSI Fast Boot)，跳過了鍵盤偵測的程序，故需要從Windows 復原介面進入

1. 於復原/恢復介面中，選擇 「疑難排解」 (Troubleshooting) → 「進階選項」 (Advanced options)

1. 選擇 「UEFI 韌體設定」 (UEFI Firmware Settings) → 然後按 「重新啟動」 (Restart)

進入 BIOS 後，進行如下設定：

1. 於主選單中，移至 SETTINGS → Advanced

1. 選擇 Wake Up Event Setup

1. 在 Resume By PCI-E/Networking Device 中，將設定更改為 Enable

1. 大功告成！請按 :keyboard[X]{theme} 儲存設定並重新開機

:::note 同樣地，不同品牌的主機板的設定方式有所參差，但基本上都能在進階選項中找到 WOL 設定。 :::

實際測試

設定完成後，建議先在區網內測試：

1. 關閉目標電腦

2. 使用手機下載 WOL App（Android 推薦 Wake On LAN, iOS 推薦 Wolow - Wake on LAN）

3. 輸入電腦的 MAC 和 IPv4 廣播位址

:::note[wiki] 什麼是廣播位址？

廣播位址(Broadcast Address)是專門用來同時傳送到網路中所有工作站的一個位址。在使用TCP/IP協定的網路中，主機識別段host ID 為全1的IP位址為廣播位址… （背後原理由於較複雜，在此並不詳述）

一般而言，廣播位址通常為路由器網段中的最後一個IP位置

例如： 若網段為 192.168.217.0 - 192.168.217.255，廣播位址為 192.168.217.255 :::

1. 發送喚醒訊號

如果電腦能成功開機，就代表設定成功了！

附送一個 Python 小程式供各位方便食用。祝用餐愉快 😄

import socket
import struct

class Computer:
    def __init__(self, mac_address, hostname) -> None:
        self.mac_address = mac_address
        self.hostname = hostname

    def wake(self, port=9):
        # Create a socket for sending the magic packet
        sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
        sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)

        # Bind the socket to a local address and port
        sock.bind(('', 0))

        # Construct the magic packet
        mac_bytes_list = self.mac_address.split(':')
        mac_bytes = struct.pack('BBBBBB', int(mac_bytes_list[0],16),
            int(mac_bytes_list[1],16),
            int(mac_bytes_list[2],16),
            int(mac_bytes_list[3],16),
            int(mac_bytes_list[4],16),
            int(mac_bytes_list[5],16))
        magic_packet = b'\xff' * 6 + mac_bytes * 16

        # Send the magic packet to the IP address and port
        sock.sendto(magic_packet, (self.hostname, port))
        sock.close()
        return

食用方法：

from <your-script-name> import Computer
# Specify the MAC address, and the public IP address or domain name that points to your router of your PC
# e.g.
computer1 = Computer(mac_address1, ip_address1)
computer2 = Computer(mac_address2, ip_address2)
# ...

# Wake up the PC(s)
computer1.wake()
computer2.wake()
# ...

常見問題 Q&A

Q: 為什麼設定都正確但還是無法喚醒？

A: 最常見的原因是：

• 網路線沒接好

• 電源供應器沒有支援

• 防火牆/殺毒軟件擋住了喚醒封包

• 快速啟動功能已啟用。移至「控制台」 → 「電源管理」 → 「選擇按下電源按鈕時的行為」, 關閉「快速啟動」。

Q: 筆電可以用 WOL 嗎？

A: 大部份筆電以使用無線網絡為主。新款筆電甚至不提供網絡線插口，故並不支援LAN網絡喚醒。

少部份舊款機型可以，但需要確保BIOS內有支援，其次需要特別注意電源管理設定，且最好使用原廠電源適配器。

總結

WOL 的功能設定可謂繁複，但設定好之後真的非常方便！再也不用擔心忘了開電腦而無法遠端工作了⋯⋯

不過要提醒大家，使用 WOL 時還是要注意資安問題，建議：

• 定期更新韌體

• 更改預設密碼

• 必要時才開啟 WOL 功能

您也打算設定 WOL 嗎？歡迎在下方留言分享您的使用經驗！

一年一度的除夕，總是帶著濃濃的年味和家的溫暖。對於許多人來說，除夕不僅為每一年的最後一天，更是告別過去、迎接未來希望的象徵。

團聚的時刻

新年除夕的核心是「團聚」。無論身在何處，人們總是盡可能與家人或朋友相聚，共度這特別的一夜。無論是與親人共享溫馨的家庭晚宴，還是與朋友舉杯歡慶，這一天的重點都在於聯繫彼此，創造珍貴的回憶。

餐桌上的美食成為慶祝的焦點，無論是象徵幸福的菜餚、甜點，還是手中的香檳，每一口都寄託著對新年的美好願望。隨著夜晚的推進，大家分享過去一年的點點滴滴，無論是成功還是挑戰，都成為連結彼此的重要話題。

倒數的魔力

除夕夜最令人期待的時刻莫過於午夜的倒數。無論是在城市廣場、派對現場，還是家中的電視機前，全球各地的人們都用心參與這一刻的儀式感。

「$10$！ $9$！ $8$！...」

倒數最後十秒響起時，心中充滿了期待、興奮與團結。

午夜的時刻到來，新年的煙火點亮夜空，象徵著嶄新的開始。人們相擁祝福，親朋好友互道「新年快樂！」，這一刻充滿了希望與溫暖。

定立目標與新希望

新年除夕不僅僅是歡慶的日子，也是反思的好時機。它提醒我們停下腳步，回顧過去一年的收穫與教訓，並且為新的一年設定新的目標。無論是追求健康的生活方式、學習新的技能，還是實現長久以來的夢想，新年的到來總讓人充滿幹勁。

這些目標與決心無論大小，都是我們邁向更好自己的開始。除夕夜的熱鬧氣氛，總能激勵我們相信未來充滿無限可能。

展望未來

除夕不僅僅是一場慶典，更是反思與感恩的時刻。它提醒我們珍惜身邊的人，感謝過去的成長，同時對未來充滿希望。這一天是一個新的起點，為我們帶來信心與勇氣，迎接即將到來的一切。

願新的一年，為你帶來幸福、健康與成功。讓我們滿懷希望地邁向未來，並努力實現我們的夢想！

2025 新年快樂！🎆

後記 (2025 年更新)

新的一年，象徵住一個新的開始。在此願諸位事事順心，確立目標並付諸實行 💪

Here is an example:

---
title: My cool post
published: 2023-12-05
// ...
---

## YouTube

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

## Google Maps

<iframe width="100%" height="468" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2860.284021870435!2d114.25985502110306!3d22.308945085830434!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-TW!2shk!4v1772951982812!5m2!1szh-TW!2shk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

// ...

YouTube

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Google Maps

<iframe width="100%" height="468" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2860.284021870435!2d114.25985502110306!3d22.308945085830434!3m2!1i1024!2i768!4f13.1!5e0!3m2!1szh-TW!2shk!4v1772951982812!5m2!1szh-TW!2shk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Bilibili

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" &autoplay=0> </iframe>

Front-matter of Posts

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---

Where to Place the Post Files

Your post files should be placed in src/content/posts/ directory. You can also create sub-directories to better organize your posts and assets.

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.

Flowchart Example

Flowcharts are excellent for representing processes or algorithm steps.

graph TD
    A[Start] --> B{Condition Check}
    B -->|Yes| C[Process Step 1]
    B -->|No| D[Process Step 2]
    C --> E[Subprocess]
    D --> E
    subgraph E [Subprocess Details]
        E1[Substep 1] --> E2[Substep 2]
        E2 --> E3[Substep 3]
    end
    E --> F{Another Decision}
    F -->|Option 1| G[Result 1]
    F -->|Option 2| H[Result 2]
    F -->|Option 3| I[Result 3]
    G --> J[End]
    H --> J
    I --> J

Sequence Diagram Example

Sequence diagrams show interactions between objects over time.

sequenceDiagram
    participant User
    participant WebApp
    participant Server
    participant Database

    User->>WebApp: Submit Login Request
    WebApp->>Server: Send Auth Request
    Server->>Database: Query User Credentials
    Database-->>Server: Return User Data
    Server-->>WebApp: Return Auth Result
    
    alt Auth Successful
        WebApp->>User: Show Welcome Page
        WebApp->>Server: Request User Data
        Server->>Database: Get User Preferences
        Database-->>Server: Return Preferences
        Server-->>WebApp: Return User Data
        WebApp->>User: Load Personalized Interface
    else Auth Failed
        WebApp->>User: Show Error Message
        WebApp->>User: Prompt Re-entry
    end

Gantt Chart Example

Gantt charts are perfect for displaying project schedules and timelines.

gantt
    title Website Development Project Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section Design Phase
    Requirements Analysis      :a1, 2023-10-01, 7d
    UI Design                 :a2, after a1, 10d
    Prototype Creation        :a3, after a2, 5d
    
    section Development Phase
    Frontend Development      :b1, 2023-10-20, 15d
    Backend Development       :b2, after a2, 18d
    Database Design           :b3, after a1, 12d
    
    section Testing Phase
    Unit Testing              :c1, after b1, 8d
    Integration Testing       :c2, after b2, 10d
    User Acceptance Testing   :c3, after c2, 7d
    
    section Deployment
    Production Deployment     :d1, after c3, 3d
    Launch                    :milestone, after d1, 0d

Class Diagram Example

Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.

classDiagram
    class User {
        +String username
        +String password
        +String email
        +Boolean active
        +login()
        +logout()
        +updateProfile()
    }
    
    class Article {
        +String title
        +String content
        +Date publishDate
        +Boolean published
        +publish()
        +edit()
        +delete()
    }
    
    class Comment {
        +String content
        +Date commentDate
        +addComment()
        +deleteComment()
    }
    
    class Category {
        +String name
        +String description
        +addArticle()
        +removeArticle()
    }
    
    User "1" -- "*" Article : writes
    User "1" -- "*" Comment : posts
    Article "1" -- "*" Comment : has
    Article "1" -- "*" Category : belongs to

State Diagram Example

State diagrams show the sequence of states an object goes through during its life cycle.

stateDiagram-v2
    [*] --> Draft
    
    Draft --> UnderReview : submit
    UnderReview --> Draft : reject
    UnderReview --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Published --> Draft : retract
    
    state Published {
        [*] --> Active
        Active --> Hidden : temporarily hide
        Hidden --> Active : restore
        Active --> [*]
        Hidden --> [*]
    }
    
    Archived --> [*]

Pie Chart Example

Pie charts are ideal for displaying proportions and percentage data.

pie title Website Traffic Sources Analysis
    "Search Engines" : 45.6
    "Direct Access" : 30.1
    "Social Media" : 15.3
    "Referral Links" : 6.4
    "Other Sources" : 2.6

Conclusion

Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.

To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.

Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!