From d5d5cb981df0fe1f971dd1df2f3005daf773ab30 Mon Sep 17 00:00:00 2001 From: alexhuang221 Date: Wed, 13 Nov 2024 17:22:32 +0800 Subject: [PATCH] Update blog - 2024-11-13 17:22:28 --- .../index.html" | 17 +- .../index.html" | 17 +- .../09/10/2024-09-10-js-event-loop/index.html | 17 +- 2024/09/15/2024-09-15-this/index.html | 17 +- .../index.html" | 17 +- .../index.html" | 17 +- .../index.html" | 17 +- .../index.html" | 29 +- .../index.html" | 42 +- .../index.html" | 485 ++++++++++++++++++ about/index.html | 14 +- archives/2023/01/index.html | 16 +- archives/2023/index.html | 16 +- archives/2024/09/index.html | 18 +- archives/2024/10/index.html | 18 +- archives/2024/11/index.html | 38 +- archives/2024/index.html | 38 +- archives/index.html | 38 +- categories/Backend/index.html | 241 +++++++++ categories/Book/index.html | 14 +- categories/Front-end/index.html | 14 +- categories/Job/index.html | 14 +- categories/Tools/index.html | 34 +- categories/index.html | 18 +- css/main.css | 73 ++- index.html | 138 ++++- tags/Backend/index.html | 241 +++++++++ tags/Book/index.html | 14 +- tags/Front-end/index.html | 14 +- tags/Job/index.html | 14 +- tags/Tools/index.html | 34 +- tags/index.html | 18 +- 32 files changed, 1543 insertions(+), 209 deletions(-) create mode 100644 "2024/11/13/\344\275\277\347\224\250cloudflare-worker\347\260\241\345\226\256\346\236\266\350\250\255\345\276\214\347\253\257/index.html" create mode 100644 categories/Backend/index.html create mode 100644 tags/Backend/index.html diff --git "a/2023/01/31/2023-01-31-\350\207\252\345\202\263\345\261\245\346\255\267/index.html" "b/2023/01/31/2023-01-31-\350\207\252\345\202\263\345\261\245\346\255\267/index.html" index 46ac8cc..41aef6e 100644 --- "a/2023/01/31/2023-01-31-\350\207\252\345\202\263\345\261\245\346\255\267/index.html" +++ "b/2023/01/31/2023-01-31-\350\207\252\345\202\263\345\261\245\346\255\267/index.html" @@ -12,11 +12,11 @@ - + - + @@ -75,7 +75,7 @@
- +

Wei's Blog

 @@ -125,18 +125,18 @@ @@ -163,7 +163,9 @@ +
+ @@ -363,6 +365,7 @@

{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/09/03/2024-09-03-Vue \345\276\236\346\250\241\346\235\277\345\202\263\345\200\274\345\210\260 CSS \345\201\275\345\205\203\347\264\240 content \345\205\247\345\256\271/index.html" "b/2024/09/03/2024-09-03-Vue \345\276\236\346\250\241\346\235\277\345\202\263\345\200\274\345\210\260 CSS \345\201\275\345\205\203\347\264\240 content \345\205\247\345\256\271/index.html" index ea3df0e..60fbee3 100644 --- "a/2024/09/03/2024-09-03-Vue \345\276\236\346\250\241\346\235\277\345\202\263\345\200\274\345\210\260 CSS \345\201\275\345\205\203\347\264\240 content \345\205\247\345\256\271/index.html" +++ "b/2024/09/03/2024-09-03-Vue \345\276\236\346\250\241\346\235\277\345\202\263\345\200\274\345\210\260 CSS \345\201\275\345\205\203\347\264\240 content \345\205\247\345\256\271/index.html" @@ -12,11 +12,11 @@ - + - + @@ -68,7 +68,7 @@
- +

Wei's Blog

 @@ -118,18 +118,18 @@ @@ -156,7 +156,9 @@ +
+ @@ -264,6 +266,7 @@

{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git a/2024/09/10/2024-09-10-js-event-loop/index.html b/2024/09/10/2024-09-10-js-event-loop/index.html index e7ed424..f04e064 100644 --- a/2024/09/10/2024-09-10-js-event-loop/index.html +++ b/2024/09/10/2024-09-10-js-event-loop/index.html @@ -12,11 +12,11 @@ - + - + @@ -70,7 +70,7 @@
- +

Wei's Blog

 @@ -120,18 +120,18 @@ @@ -158,7 +158,9 @@ +
+ @@ -287,6 +289,7 @@

@@ -322,6 +325,8 @@

{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git a/2024/09/15/2024-09-15-this/index.html b/2024/09/15/2024-09-15-this/index.html index cf425bf..be76b74 100644 --- a/2024/09/15/2024-09-15-this/index.html +++ b/2024/09/15/2024-09-15-this/index.html @@ -12,11 +12,11 @@ - + - + @@ -68,7 +68,7 @@
- +

Wei's Blog

 @@ -118,18 +118,18 @@ @@ -156,7 +156,9 @@ +
+ @@ -328,6 +330,7 @@

@@ -363,6 +366,8 @@

{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/09/17/2024-09-17-\345\236\213\345\210\245\346\257\224\350\274\203==/index.html" "b/2024/09/17/2024-09-17-\345\236\213\345\210\245\346\257\224\350\274\203==/index.html" index c7637b6..4e64588 100644 --- "a/2024/09/17/2024-09-17-\345\236\213\345\210\245\346\257\224\350\274\203==/index.html" +++ "b/2024/09/17/2024-09-17-\345\236\213\345\210\245\346\257\224\350\274\203==/index.html" @@ -12,11 +12,11 @@ - + - + @@ -68,7 +68,7 @@
- +

Wei's Blog

 @@ -118,18 +118,18 @@ @@ -156,7 +156,9 @@ +
+ @@ -288,6 +290,7 @@

+

@@ -323,6 +326,8 @@

+ + diff --git "a/2024/10/11/2024-10-11-\344\272\213\344\273\266\345\206\222\346\263\241/index.html" "b/2024/10/11/2024-10-11-\344\272\213\344\273\266\345\206\222\346\263\241/index.html" index b38545d..d39bfa3 100644 --- "a/2024/10/11/2024-10-11-\344\272\213\344\273\266\345\206\222\346\263\241/index.html" +++ "b/2024/10/11/2024-10-11-\344\272\213\344\273\266\345\206\222\346\263\241/index.html" @@ -12,11 +12,11 @@ - + - + @@ -70,7 +70,7 @@
- +

Wei's Blog

 @@ -120,18 +120,18 @@ @@ -158,7 +158,9 @@ +
+ @@ -307,6 +309,7 @@

總結 @@ -342,6 +345,8 @@

總結{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/10/11/2024-10-11-\347\266\262\345\235\200\345\217\226\345\200\274/index.html" "b/2024/10/11/2024-10-11-\347\266\262\345\235\200\345\217\226\345\200\274/index.html" index 2675399..7ab63f4 100644 --- "a/2024/10/11/2024-10-11-\347\266\262\345\235\200\345\217\226\345\200\274/index.html" +++ "b/2024/10/11/2024-10-11-\347\266\262\345\235\200\345\217\226\345\200\274/index.html" @@ -12,11 +12,11 @@ - + - + @@ -68,7 +68,7 @@
- +

Wei's Blog

 @@ -118,18 +118,18 @@ @@ -156,7 +156,9 @@ +
+ @@ -259,6 +261,7 @@

@@ -294,6 +297,8 @@

{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/10/18/2024-10-18-\344\270\200\344\275\215\345\245\263\346\200\247\346\256\272\344\272\272\347\212\257\347\232\204\347\264\240\346\217\217/index.html" "b/2024/10/18/2024-10-18-\344\270\200\344\275\215\345\245\263\346\200\247\346\256\272\344\272\272\347\212\257\347\232\204\347\264\240\346\217\217/index.html" index 8c903e5..1e108d2 100644 --- "a/2024/10/18/2024-10-18-\344\270\200\344\275\215\345\245\263\346\200\247\346\256\272\344\272\272\347\212\257\347\232\204\347\264\240\346\217\217/index.html" +++ "b/2024/10/18/2024-10-18-\344\270\200\344\275\215\345\245\263\346\200\247\346\256\272\344\272\272\347\212\257\347\232\204\347\264\240\346\217\217/index.html" @@ -12,11 +12,11 @@ - + - + @@ -25,13 +25,13 @@ - + - + - + @@ -70,7 +70,7 @@
- +

Wei's Blog

 @@ -120,18 +120,18 @@ @@ -158,7 +158,9 @@ +
+ @@ -199,7 +201,7 @@

更新於 - + @@ -223,9 +225,11 @@

一本講述台灣目前一位女性死刑犯的故事心得。

+ +
- 一位女性殺人犯的素描 + 一位女性殺人犯的素描
一位女性殺人犯的素描, 一位女性殺人犯的素描：她如何謀弒母親、婆婆與丈夫
@@ -276,6 +280,7 @@

結語 @@ -311,6 +316,8 @@

結語{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/11/07/2024-11-07-\344\275\277\347\224\250CloudFlare-Work\346\236\266\350\250\255telegram-bot/index.html" "b/2024/11/07/2024-11-07-\344\275\277\347\224\250CloudFlare-Work\346\236\266\350\250\255telegram-bot/index.html" index be7789b..14a2352 100644 --- "a/2024/11/07/2024-11-07-\344\275\277\347\224\250CloudFlare-Work\346\236\266\350\250\255telegram-bot/index.html" +++ "b/2024/11/07/2024-11-07-\344\275\277\347\224\250CloudFlare-Work\346\236\266\350\250\255telegram-bot/index.html" @@ -12,11 +12,11 @@ - + - + @@ -25,16 +25,16 @@ - - - - + + + + - + - + @@ -73,7 +73,7 @@
- +

Wei's Blog

 @@ -123,18 +123,18 @@ @@ -161,7 +161,9 @@ +
+ @@ -202,7 +204,7 @@

更新於 - + @@ -247,7 +249,7 @@

  • 到這邊記得選 Template from a GitHub repo
    • -

    image.39l740kpx2.webp

    +

    image.39l740kpx2.webp

    1. 貼上好心人開源的模板
    @@ -261,7 +263,7 @@

    最後會詢問是否要部屬，選No

    -

    image.3uuuqbmo97.webp

    +

    image.3uuuqbmo97.webp

    到這邊專案就建立完成了

    設定Telegram Bot

      @@ -304,7 +306,7 @@

      +

      image.4n7q82irf3.webp

      1. 在你的專案名稱旁邊，點擊 造訪。
      2. 在 URL 連結後面添加 /registerWebhook（例如 https://my-project.my-username.workers.dev/registerWebhook）並按下 Enter。如果你看到 “Webhook registered”，表示你已正確完成設置！
        3. @@ -317,7 +319,7 @@

        +

        image.70acpa5g8u.webp

        1. 到終端機輸入
        @@ -371,6 +373,9 @@

    +
    @@ -382,6 +387,7 @@

    @@ -417,6 +423,8 @@

    {"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.min.js","integrity":"sha256-G8ouPAnw4zzMbnAenHnVz6h9XpKbNdOkrqTh7AadyHs="}} + diff --git "a/2024/11/13/\344\275\277\347\224\250cloudflare-worker\347\260\241\345\226\256\346\236\266\350\250\255\345\276\214\347\253\257/index.html" "b/2024/11/13/\344\275\277\347\224\250cloudflare-worker\347\260\241\345\226\256\346\236\266\350\250\255\345\276\214\347\253\257/index.html" new file mode 100644 index 0000000..4a10e91 --- /dev/null +++ "b/2024/11/13/\344\275\277\347\224\250cloudflare-worker\347\260\241\345\226\256\346\236\266\350\250\255\345\276\214\347\253\257/index.html" @@ -0,0 +1,485 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +使用 Cloudflare Worker 簡單架設後端 | Wei's Blog + + + + + + + + + + + + + + +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + + + +

    Wei's Blog

    + +     +

    NaN==Not a Nerd

    +
    + +
    +
    +
    +
    +
    + + + + + + + +
    + + + + + +
    + +
    + + + + + + +
    + + + + +
    + + + + + + + +
    +

    + 使用 Cloudflare Worker 簡單架設後端 +

    + +
    +
    + + + + + 發表於 + + + + + + + + + 分類於 + + + + ， + + + + + + +
    + +
    +
    + + + + +

    最近，我在使用 Cloudflare Worker 架設 Telegram Bot 時，發現其作為免費後端服務相比 Vercel 仍然具有顯著的優勢。

    + + +
    +

    主要優勢

      +
    • 優異的免費方案
        +
      • 每天提供高達 10 萬次的 API 呼叫次數
        • +
      • 內建類似 LocalStorage 的 KV（鍵值儲存）功能
        • +
      +
      • +
    • 卓越的性能表現
        +
      • 採用 V8 引擎
        • +
      • 極快的啟動速度
        • +
      • 優異的函式執行效率
        • +
      +
      • +
    • 實用場景
        +
      • 快速建立測試用的 Mock 後端
        • +
      • 作為 Proxy 解決跨域（CORS）問題
        • +
      • 輕量級的 API 服務
        • +
      +
      • +
    +

    雖然在撰寫程式時沒有 Node.js 那麼直覺，也不支援一些瀏覽器原生 API，但我個人認為這款 FaaS（Function as a Service）服務應該成為前端開發人員必學的技能之一。撰寫採用JS語言，對於前端開發者來說非常容易上手。

    +
    +

    部署教學

      +
    1. 到Cloudflare Dashboard 註冊後可以直接拉到 Workers 和 Pages 頁面
      2. +
    +

    8z6jnqg7bp

    +
      +
    1. 點選建立後選擇建立 Worker
      2. +
    +

    image

    +
      +
    1. 隨意取個名稱，按「部署」就會建立簡單的專案
      2. +
    +

    image

    +
      +
    1. 部署後點「編輯代碼」，就可以開始撰寫程式
      2. +
    +

    image

    +

    Cloudflare Worker 開發

    Faas 的原理其實就是將程式碼部署到雲端，然後透過 API 呼叫來執行。

    +

    在處理請求的階段透過 export 的 function 來建立 API 端點，用戶端如果是透過 HTTP 請求，就會呼叫到 export 的 fetch function。

    +
    graph LR
+    A[用戶端] --> G[(Cloudflare 邊緣節點)]
+    G --> D[Cloudflare Worker]
+    D --> E[處理請求]
+    E --> F[返回結果]
+    F --> A
    + + +

    範例

    Fetch 的 Request 屬性

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 處理請求(request 請求, env 環境變數, ctx 上下文)
    export default {
      async fetch(request, env, ctx) { 
        const url = new URL(request.url);
        if(request.method === 'OPTIONS') {         // 處理跨域請求
          return new Response(null, {status: 200}); // 返回結果
        }
        if(request.method === 'GET') { // Client 使用 GET 呼叫觸發的程式
         if(url.pathname === '/'){
            const fakeHTML = `<html><body><h1>Hello World</h1></body></html>`
            return new Response(fakeHTML, {headers: {'Content-Type': 'text/html;charset=utf-8'}});// 返回結果
         }else{
          return new Response('這裡不是你應該來的地方', {status: 404}); // 返回結果
         }
        }
        
      },
    };
    + +

    貼上後即可在右側即時編譯看到結果

    +

    image

    +

    點擊「部署」後，即可看在對應連結看到部署的結果

    +

    如果要針對特定 API 進行測試，可以到「HTTP」頁面，用測試的方法和輸入資料做簡單測試

    +

    image

    +

    Fetch 的 Request 屬性

    以下列出 Fetch 常用的的 Request 屬性。( 更多屬性請參考 fetch Request )

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    屬性設定值
    url第一個參數，一定要填的項目，代表需要 fetch 對象的網址
    methodGET、POST、PUT、DELETE、HEAD (預設 GET)
    headers要求相關的 Headers 物件 (預設 {})
    modecors、no-cors、same-origin、navigate (預設 cors)
    referrerno-referrer、client 或某個網址 (預設 client)
    credentialsomit、same-origin、include (預設 omit)
    redirectfollow、error、manual (預設 manual)
    cachedefault、no-store、reload、no-cache、force-cache (預設 default)
    body要加到要求中的內容 (如果 method 為 GET 或 HEAD 則不設定)
    + + + +

    Fetch 的 Response 屬性

    以下列出 Fetch 常用的 Response 屬性。( 更多屬性和方法請參考 fetch Response )

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    屬性設定值
    headers包含與 response 相關的 Headers 物件
    ok成功回傳 true，不成功回傳 false
    status狀態代碼，成功為 200
    statusText狀態文字，成功為 ok
    typeresponse 的類型，例如 basic、cors…等
    urlresponse 的 url
    + + + +

    更多基本用法可以參考 Fetch API 基本教學

    +

    處理POST

    如果要發送 POST 請求，一定要加上 OPTIONS 屬性，否則會報 CORS 錯誤。

    +

    簡單請求 (Simple Request)

    瀏覽器的簡單請求不需要預檢請求(OPTIONS)，需要符合以下條件:

    +
      +
    1. 請求方法必須是以下其中之一:
        +
      • GET
        • +
      • HEAD
        • +
      • POST
        • +
      +
      2. +
    2. 請求標頭Content-Type (只能是以下三種)
        +
      • application/x-www-form-urlencoded
        • +
      • multipart/form-data
        • +
      • text/plain
        • +
      +
      3. +
    +

    假設我在前端發送了一個 JSON 格式的資料，我帶上 Content-Type: application/json 的標頭，而沒有加上OPTIONS回應這樣就會觸發瀏覽器CORS而報錯。

    +
    1
    2
    3
    4
    5
    6
    7
    await fetch(`${updataAPI}/setDataToKV`, {
      method: 'POST',
      body: JSON.stringify({
        time: Date.now(),
        data: JSON.parse(jsonData)
      })
    });
    + +

    所以我在後端一定要配置好OPTIONS 屬性，否則會報 CORS 錯誤。

    +

    下面是一個簡單的範例，包含 CORS 處理和 POST 請求的處理。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    export default {
      async fetch(request, env, ctx) {
        // 定義 CORS 標頭
        const corsHeaders = {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': '*',
          'Access-Control-Allow-Headers': 'Content-Type',
          'Content-Type': 'text/html;charset=utf-8',
        };

        const JSONcorsHeaders = {
          ...corsHeaders,
          'Content-Type': 'application/json;charset=utf-8',
        };

        const url = new URL(request.url);

        // 處理 CORS 預檢請求
        if (request.method === 'OPTIONS') {
          return new Response('', { headers: corsHeaders });
        }

        // 處理 GET 請求
        if (request.method === 'GET') {
          return new Response('這裡不是你應該來的地方', { 
            status: 404, 
            headers: corsHeaders 
          });
        }

        // 處理 POST 請求
        if (request.method === 'POST') {
          if (url.pathname === '/setDataToKV') {
            try {
              const data = await request.json();

              await env.pcbuydata.put(
                `pcbuydata-${data.time}`, 
                JSON.stringify(data.data)
              ); //這邊呼叫了Cloudflare Worker 的專屬 API KV 來儲存資料

              return new Response('完整資料已成功儲存到 KV 中', { 
                status: 200, 
                headers: corsHeaders 
              });

            } catch (err) {
              return new Response(`資料儲存失敗：${err}`, { 
                status: 500, 
                headers: corsHeaders 
              });
            }
          }
        }

        // 處理不支援的請求
        return new Response("方法不允許", { 
          status: 405, 
          headers: corsHeaders 
        });
      }
    };

    + + +

    這邊有一個簡單的 Worker Proxy 範例，可以參考。

    +

    只要部署後在訪問

    +

    https://<你的worker名稱>/?url=https://www.dgpa.gov.tw/typh/daily/nds.html

    +

    就可以看到結果。

    +

    如果網站安全性做的好一點，其實會被封鎖，但政府網站就…懂的都懂

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    export default {
        async fetch(request, env, ctx) {
            const corsHeaders = {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET',
                'Content-Type': 'text/html;charset=utf-8',
            }

            if (request.method === 'OPTIONS') {
                return new Response(null, { headers: corsHeaders })
            }

            try {
                const url = new URL(request.url);
                const targetUrl = url.searchParams.get('url');

                if (!targetUrl) {
                    return new Response('缺少 url 參數', {
                        status: 400,
                        headers: corsHeaders
                    });
                }

                // 添加更多的 headers 模擬真實瀏覽器
                const response = await fetch(targetUrl, {
                    headers: {
                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
                        'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
                        'Accept-Language': 'zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7',
                        'Accept-Encoding': 'gzip, deflate, br',
                        'Connection': 'keep-alive',
                        'Upgrade-Insecure-Requests': '1',
                        'Sec-Fetch-Dest': 'document',
                        'Sec-Fetch-Mode': 'navigate',
                        'Sec-Fetch-Site': 'none',
                        'Sec-Fetch-User': '?1'
                    },
                    redirect: 'follow'
                });

                // 檢查回應狀態
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const newResponse = new Response(response.body, {
                    status: response.status,
                    headers: {
                        ...Object.fromEntries(response.headers),
                        ...corsHeaders,
                        'Cache-Control': 'no-store, no-cache, must-revalidate'
                    }
                });

                return newResponse;
            } catch (error) {
                return new Response(JSON.stringify({ 
                    error: error.message,
                    details: '可能是目標網站的安全限制或 IP 被封鎖'
                }), {
                    status: 500,
                    headers: {
                        ...corsHeaders,
                        'Content-Type': 'application/json'
                    }
                });
            }
        }
    }

    +
    + + + + + + +
    +
    + + + + + + + +
    +
    + + + + +
    + + + +
    +
    +
    + + 0% +
    + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/about/index.html b/about/index.html index 2701093..0316abd 100644 --- a/about/index.html +++ b/about/index.html @@ -12,11 +12,11 @@ - + - + @@ -68,7 +68,7 @@
    - +

    Wei's Blog

     @@ -117,18 +117,18 @@ @@ -216,6 +216,8 @@

    about + + diff --git a/archives/2023/01/index.html b/archives/2023/01/index.html index 0c72c9a..57f9f8c 100644 --- a/archives/2023/01/index.html +++ b/archives/2023/01/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,7 +153,7 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    @@ -223,6 +223,8 @@

    Wei's Blog

    + + diff --git a/archives/2023/index.html b/archives/2023/index.html index 7565bba..6a8bfc2 100644 --- a/archives/2023/index.html +++ b/archives/2023/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,7 +153,7 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    @@ -223,6 +223,8 @@

    Wei's Blog

    + + diff --git a/archives/2024/09/index.html b/archives/2024/09/index.html index 5919242..8bac98e 100644 --- a/archives/2024/09/index.html +++ b/archives/2024/09/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,12 +153,12 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    - 20248 + 20249
    @@ -283,6 +283,8 @@

    Wei's Blog

    + + diff --git a/archives/2024/10/index.html b/archives/2024/10/index.html index 75185c7..d841b32 100644 --- a/archives/2024/10/index.html +++ b/archives/2024/10/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,12 +153,12 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    - 20248 + 20249
    @@ -263,6 +263,8 @@

    Wei's Blog

    + + diff --git a/archives/2024/11/index.html b/archives/2024/11/index.html index 7fff6ae..8034633 100644 --- a/archives/2024/11/index.html +++ b/archives/2024/11/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,14 +153,34 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    - 20248 + 20249
    + +
    @@ -223,6 +243,8 @@

    Wei's Blog

    + + diff --git a/archives/2024/index.html b/archives/2024/index.html index e9fd22e..52a950a 100644 --- a/archives/2024/index.html +++ b/archives/2024/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,14 +153,34 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    - 20248 + 20249
    + +
    @@ -363,6 +383,8 @@

    Wei's Blog

    + + diff --git a/archives/index.html b/archives/index.html index db1a442..cb85898 100644 --- a/archives/index.html +++ b/archives/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -153,14 +153,34 @@

    Wei's Blog

    - 嗯..! 目前共有 9 篇文章。 繼續努力。 + 嗯..! 目前共有 10 篇文章。 繼續努力。
    - 20248 + 20249
    + +
    @@ -386,6 +406,8 @@

    Wei's Blog

    + + diff --git a/categories/Backend/index.html b/categories/Backend/index.html new file mode 100644 index 0000000..db4a868 --- /dev/null +++ b/categories/Backend/index.html @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +分類: Backend | Wei's Blog + + + + + + + + + + + + + + +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + + + +

    Wei's Blog

    + +     +

    NaN==Not a Nerd

    +
    + +
    +
    +
    +
    +
    + + + + + + + +
    + + + + + +
    + +
    + + + + + +
    +
    +
    +

    Backend + 分類 +

    +
    + + +
    + 2024 +
    + + + +
    +
    + + + + +
    +
    + + + + +
    + + + +
    +
    +
    + + 0% +
    + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/categories/Book/index.html b/categories/Book/index.html index b83cab4..7e0bf84 100644 --- a/categories/Book/index.html +++ b/categories/Book/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -224,6 +224,8 @@

    Book + + diff --git a/categories/Front-end/index.html b/categories/Front-end/index.html index 0a0ff5a..88d9dc8 100644 --- a/categories/Front-end/index.html +++ b/categories/Front-end/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -324,6 +324,8 @@

    Front-end + + diff --git a/categories/Job/index.html b/categories/Job/index.html index f7fcad4..da0e913 100644 --- a/categories/Job/index.html +++ b/categories/Job/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -224,6 +224,8 @@

    Job + + diff --git a/categories/Tools/index.html b/categories/Tools/index.html index 588d688..1464f66 100644 --- a/categories/Tools/index.html +++ b/categories/Tools/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -163,6 +163,26 @@

    Tools 2024

    + +
    @@ -224,6 +244,8 @@

    Tools + + diff --git a/categories/index.html b/categories/index.html index e23b0bb..95cf49d 100644 --- a/categories/index.html +++ b/categories/index.html @@ -12,11 +12,11 @@ - + - + @@ -66,7 +66,7 @@
    - +

    Wei's Blog

     @@ -115,18 +115,18 @@ @@ -168,10 +168,10 @@

    分類
    - 目前共有 4 個分類 + 目前共有 5 個分類
    - +
    @@ -220,6 +220,8 @@

    分類 + + diff --git a/css/main.css b/css/main.css index e1880a1..59aa966 100644 --- a/css/main.css +++ b/css/main.css @@ -186,7 +186,7 @@ body { background: var(--body-bg-color); box-sizing: border-box; color: var(--text-color); - font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-family: Noto Sans TC, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 1em; line-height: 2; min-height: 100%; @@ -207,7 +207,7 @@ h3, h4, h5, h6 { - font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-family: Noto Sans TC, Noto Sans TC, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: bold; line-height: 1.5; margin: 30px 0 15px; @@ -516,6 +516,33 @@ code.hljs { right: 4px; top: 8px; } +.expand-btn { + bottom: 0; + color: var(--highlight-foreground); + cursor: pointer; + display: none; + left: 0; + right: 0; + position: absolute; + text-align: center; +} +.fold-cover { + background-image: linear-gradient(to top, var(--highlight-background) 0, rgba(0,0,0,0) 100%); + bottom: 0; + display: none; + height: 50px; + left: 0; + right: 0; + position: absolute; +} +.highlight-fold { + max-height: 500px; + overflow-y: hidden !important; +} +.highlight-fold .expand-btn, +.highlight-fold .fold-cover { + display: block; +} code, kbd, figure.highlight, @@ -551,7 +578,7 @@ pre figcaption a:hover { } pre, code { - font-family: consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei'; + font-family: Fira Mono, consolas, Menlo, monospace, 'PingFang SC', 'Microsoft YaHei'; } code { border-radius: 3px; @@ -791,6 +818,10 @@ pre code { transform: translate(1pt, -2pt) rotate(-1deg); } } +.mermaid { + margin-bottom: 20px; + text-align: center; +} .post-body .note { border-radius: 3px; margin-bottom: 20px; @@ -1125,7 +1156,7 @@ pre code { color: var(--brand-hover-color); } .site-title { - font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-family: Edu AU VIC WA NT Pre, Noto Sans TC, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 1.375em; font-weight: normal; line-height: 1.5; @@ -1263,7 +1294,7 @@ pre code { vertical-align: middle; } .links-of-author a::before { - background: #33fffc; + background: #11ff96; display: inline-block; margin-right: 3px; transform: translateY(-2px); @@ -1853,7 +1884,7 @@ pre code { width: 4px; } .post-body { - font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-family: Noto Sans TC, Noto Sans TC, 'PingFang SC', 'Microsoft YaHei', sans-serif; overflow-wrap: break-word; } @media (min-width: 1200px) { @@ -2039,7 +2070,7 @@ pre code { } .posts-expand .post-meta-container { color: #999; - font-family: Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif; + font-family: Noto Sans TC, Noto Sans TC, 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 0.75em; margin-top: 3px; } @@ -2627,3 +2658,31 @@ header.header { height: 50px; } } +@media (min-width: 992px) { + .post-body { + text-align: left; + } +} +code { + background-color: #d5d5d5; + color: #c20e0e; + padding: 2px 5px; +} +.column { + background-color: #fff; +} +.posts-expand .post-block:not(:first-of-type) { + margin-top: 10%; + position: relative; +} +.site-brand-container { + display: flex; + flex-shrink: 0; + padding: 0; +} +.post-body p img { + max-width: 600px; + max-height: 500px; + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + border-radius: 8px; +} diff --git a/index.html b/index.html index 40bd2a8..4198404 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@

    Wei's Blog

    @@ -149,7 +149,102 @@

    Wei's Blog

    + +
    + + + + +
    + + + + + + + +
    +

    + +

    + +
    +
    + + + + + 發表於 + + + + + + + + + 分類於 + + + + ， + + + + + + +
    + +
    +
    + + + + +
    +

    最近，我在使用 Cloudflare Worker 架設 Telegram Bot 時，發現其作為免費後端服務相比 Vercel 仍然具有顯著的優勢。

    + +
    + + 閱讀全文 » + +
    + + + +
    + + + + + +
    +
    + +
    +
    +
    + + + + + + + + +
    + @@ -190,7 +285,7 @@

    更新於 - + @@ -238,10 +333,13 @@

    + +
    + @@ -282,7 +380,7 @@

    更新於 - + @@ -330,10 +428,13 @@

    + +
    + @@ -422,10 +523,13 @@

    + +
    + @@ -514,10 +618,13 @@

    + +
    + @@ -606,10 +713,13 @@

    + +
    + @@ -698,10 +808,13 @@

    + +
    + @@ -790,10 +903,13 @@

    + +
    + @@ -882,10 +998,13 @@

    + +
    + @@ -975,6 +1094,7 @@

    +

    @@ -1010,6 +1130,8 @@

    + + diff --git a/tags/Backend/index.html b/tags/Backend/index.html new file mode 100644 index 0000000..9060b9d --- /dev/null +++ b/tags/Backend/index.html @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +標籤: Backend | Wei's Blog + + + + + + + + + + + + + + +
    + +
    +
    +
    +
    +
    +
    +
    + +
    + + + +

    Wei's Blog

    + +     +

    NaN==Not a Nerd

    +
    + +
    +
    +
    +
    +
    + + + + + + + +
    + + + + + +
    + +
    + + + + + +
    +
    +
    +

    Backend + 標籤 +

    +
    + + +
    + 2024 +
    + + + +
    +
    + + + + +
    +
    + + + + +
    + + + +
    +
    +
    + + 0% +
    + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tags/Book/index.html b/tags/Book/index.html index b46efec..8e9bd7e 100644 --- a/tags/Book/index.html +++ b/tags/Book/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -224,6 +224,8 @@

    Book + + diff --git a/tags/Front-end/index.html b/tags/Front-end/index.html index d46dd18..58997ce 100644 --- a/tags/Front-end/index.html +++ b/tags/Front-end/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -324,6 +324,8 @@

    Front-end + + diff --git a/tags/Job/index.html b/tags/Job/index.html index 2f3503e..5ff987e 100644 --- a/tags/Job/index.html +++ b/tags/Job/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -224,6 +224,8 @@

    Job + + diff --git a/tags/Tools/index.html b/tags/Tools/index.html index 207cf3a..a6a6d0e 100644 --- a/tags/Tools/index.html +++ b/tags/Tools/index.html @@ -12,11 +12,11 @@ - + - + @@ -63,7 +63,7 @@
    - +

    Wei's Blog

     @@ -112,18 +112,18 @@ @@ -163,6 +163,26 @@

    Tools 2024

    + +
    @@ -224,6 +244,8 @@

    Tools + + diff --git a/tags/index.html b/tags/index.html index 70b56b8..272d1b3 100644 --- a/tags/index.html +++ b/tags/index.html @@ -12,11 +12,11 @@ - + - + @@ -66,7 +66,7 @@
    - +

    Wei's Blog

     @@ -115,18 +115,18 @@ @@ -168,10 +168,10 @@

    標籤
    - 目前共有 4 個標籤 + 目前共有 5 個標籤
    - Book Front-end Job Tools + Backend Book Front-end Job Tools
    @@ -220,6 +220,8 @@

    標籤 + +