CcoMm

訂閱監控看板 (Subscription Monitor • Pure)

Thu, 02 Apr 2026 20:15:00 GMT

訂閱監控看板 (Subscription Monitor • Pure)

📌 項目簡介

這是一個基於 Cloudflare Workers 構建的輕量級、無伺服器（Serverless）訂閱流量監控看板。該程式將後端 API 解析與前端頁面渲染集於一身，能夠定時獲取指定代理節點訂閱鏈接（如 V2Ray、Clash 等）的流量資訊，並透過一個具有現代化 UI 設計的頁面進行即時視覺化展示。版本資訊：STABLE V1

✨ 核心特性

後端 (API 層)

併發數據獲取: 使用 Promise.all 異步併發請求多個訂閱鏈接，極大縮短數據獲取時間。
嚴格超時控制: 內置 fetchWithTimeout 機制（預設 5 秒），防止因單個異常節點響應過慢而阻塞整個頁面的加載。
精準請求模擬: 請求頭部偽裝為 v2rayN/6.23，以確保兼容大部分機場/服務商的訂閱下發策略。
智能數據提取: 自動解析 HTTP 響應頭中的 Subscription-Userinfo 字段，提取 upload、download、total 和 expire 數據，並自動換算為 GB 單位。
內置緩存控制: 接口級設置 Cache-Control: public, max-age=60，靜態 HTML 緩存 3600 秒，有效降低源站 API 壓力。

前端 (UI 層)

現代化純粹設計: 採用 "Pure" 主題理念，基於 Tailwind CSS 構建高斯模糊卡片（毛玻璃效果）、漸變高亮背景和絲滑的動畫過渡。
骨架屏加載: 數據請求期間提供 Skeleton 骨架屏動畫，拒絕白屏等待，提升用戶體驗。
動態狀態反饋:
- 根據流量使用比例自動改變進度條和數值的顏色（正常、警告、危險）。
- 遇到無法連接或解析失敗的節點時，展示專屬的紅色「異常」 UI 樣式。
完善的暗黑模式: 支持自動檢測並跟隨系統主題，同時提供一個帶絲滑動畫的「日月膠囊開關」供手動切換（偏好會自動保存至 localStorage）。

🛠️ 技術棧

運行環境: Cloudflare Workers
前端樣式: Tailwind CSS (透過 CDN 引入) + 原生 CSS 變量
前端邏輯: Vanilla JavaScript

⚙️ 配置指南

在部署之前，你只需要修改代碼最頂部的 SUBSCRIPTIONS 數組即可：

// 1. 訂閱地址配置區
const SUBSCRIPTIONS = [
  { name: "你的主用機場", url: "https://your-sub-link-1.com/xxx" },
  { name: "備用節點 A", url: "https://your-sub-link-2.com/xxx" },
  { name: "備用節點 B", url: "https://your-sub-link-3.com/xxx" }
];

name: 顯示在面板上的自定義名稱。
url: 你的真實訂閱鏈接。

📡 API 接口參考

該 Worker 自帶一個隱藏的數據接口，供前端 AJAX 調用。

路徑: /api/traffic
請求方式: GET
響應格式: JSON 數組
數據結構示例:

[
  {
    "name": "你的主用機場",
    "up_gb": "12.50",
    "dl_gb": "180.20",
    "used_gb": "192.70",
    "total_gb": "500.00",
    "usage_percent": "38.5",
    "expire_date": "2026-12-31"
  },
  {
    "name": "備用節點 A",
    "error": true
  }
]

🚀 部署說明

登錄 Cloudflare Dashboard。
導航至 Workers & Pages，點擊 Create Worker。
為你的應用輸入一個名稱，點擊 Deploy。
部署完成後，點擊 Edit code 進入網頁編輯器。
將本地 worker.js 中的所有代碼粘貼並覆蓋編輯器內的預設代碼。
修改代碼第 2-6 行的 SUBSCRIPTIONS 配置為你自己的訂閱資訊。
點擊右上角的 Save and deploy。
訪問 Cloudflare 分配的 *.workers.dev 域名即可查看你的專屬監控看板。

在博客中优雅地添加 Bilibili 追番页面 (Astro & Hugo 无 CORS 秒开方案)

Thu, 12 Mar 2026 21:15:00 GMT

前言

在個人博客的建設過程中，展示 Bilibili 的「近期追番」記錄是一項常見的擴展需求。

然而，若直接在前端渲染層使用 JavaScript（如 fetch API）請求 Bilibili 官方接口，將會受限於瀏覽器的 CORS（跨域資源共享） 安全策略，導致請求被攔截並報錯。雖然存在如 AllOrigins 或 CorsProxy 等第三方跨域代理方案，但此類依賴外部公共代理的做法往往伴隨著較高的網絡延遲與服務穩定性風險，難以滿足頁面加載的可用性要求。

為確保數據獲取的穩定性與展示效果，推薦採用靜態站點生成器 (SSG) 的後端構建能力作為解決方案，即在構建時（或 SSR 渲染階段）直接從服務端拉取第三方數據。

本文將詳細說明如何在 Astro 與 Hugo 中，實現高可用且無 CORS 限制的 Bilibili 追番頁面集成。

方案一：基於 Astro 的構建時獲取

Astro 框架原生支持在組件的 Server-side 作用域（即 --- 之間）執行 Node.js 代碼及 fetch 請求。此特性可直接於服務端完成跨域接口的調用，有效規避前端 CORS 限制。

核心代碼實現

通過創建自定義 Astro 組件，服務器將在構建階段向 Bilibili API 發起請求，並將返回的 JSON 數據直接編譯為靜態 HTML。此方案避免了客戶端額外的網絡開銷，顯著提升了首屏渲染性能。

---
// src/components/about/BilibiliBangumi.astro
const uid = "3546871211494149"; // 替換為你的 B 站 UID
const api = `https://api.bilibili.com/x/space/bangumi/follow/list?type=1&follow_status=0&pn=1&ps=15&vmid=${uid}`;

let bangumis = [];
let errorMsg = null;

// 使用 AbortController 設置超時，防止 B 站 API 響應慢拖垮打包或加載速度
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 2500);

try {
  const response = await fetch(api, {
    headers: {
      // 必須偽裝 User-Agent，否則可能被 B 站攔截
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
    },
    signal: controller.signal
  });
  const resData = await response.json();
  if (resData.code === 0 && resData.data && resData.data.list) {
    bangumis = resData.data.list;
  } else {
    errorMsg = `獲取失敗: Code ${resData.code}`;
  }
} catch (e: any) {
  errorMsg = e.name === 'AbortError' ? '請求超時 (Timeout)' : e.message;
} finally {
  clearTimeout(timeoutId);
}
---

<div class="mt-4 my-6 not-prose">
  {errorMsg ? (
    <div class="p-8 border rounded-xl text-center">無法加載追番數據 ({errorMsg})</div>
  ) : bangumis.length > 0 ? (
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      {bangumis.map((b: any) => (
        <a href={b.url} target="_blank" rel="noopener noreferrer" class="group relative block overflow-hidden rounded-xl bg-muted transition-transform hover:-translate-y-1">
          <div class="aspect-[3/4] overflow-hidden">
            <!-- 核心細節：將 http 替換為 https 防止 Mixed Content 警告 -->
            <img src={b.cover.replace('http://', 'https://')} alt={b.title} class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110" loading="lazy" referrerpolicy="no-referrer" />
          </div>
          <div class="absolute inset-x-0 bottom-0 flex flex-col justify-end bg-gradient-to-t from-black/90 to-transparent p-3 pt-8 opacity-90 transition-opacity group-hover:opacity-100">
            <h3 class="text-xs font-bold text-white line-clamp-2">{b.title}</h3>
            <p class="text-[10px] text-zinc-300">{b.new_ep?.index_show || '未知內容'}</p>
          </div>
        </a>
      ))}
    </div>
  ) : (
    <div class="p-8 border rounded-xl text-center">暫無追番記錄</div>
  )}
</div>

技術實現要点：

超時控制：引入 AbortController 設置 2.5 秒超時閾值，防止第三方 API 響應異常阻塞構建進程。
資源協議升級：Bilibili API 返回的封面圖片 URL 默認為 http://，組件內通過正則表達式或字符串替換將其強制升級為 https://，以消除現代瀏覽器的 Mixed Content 安全警告。

方案二：基於 Hugo `resources.GetRemote` 實現

對於使用 Hugo 框架構建的項目，其原理與 Astro 類似。Hugo 提供了 resources.GetRemote 內置函數，允許在執行 hugo server 或構建靜態站點時，由宿主機直接發起後端 HTTP 請求。

核心代碼實現

可於 Hugo 頁面模板（如 layouts/page/bilibili.html）中集成以下構建邏輯：

{{ $vmid := "3546871211494149" }}
{{ $url := printf "https://api.bilibili.com/x/space/bangumi/follow/list?type=1&follow_status=0&pn=1&ps=15&vmid=%s" $vmid }}
<!-- 偽裝請求頭 -->
{{ $opts := dict "headers" (dict "User-Agent" "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" "Referer" "https://space.bilibili.com/") }}

{{ $biliData := dict }}
{{ $err := false }}

<!-- 使用最新 Hugo 支援的 try 函數抓取 JSON -->
{{ $res := try (resources.GetRemote $url $opts) }}
{{ if or $res.Err (not $res.Value) }}
    {{ $err = true }}
{{ else }}
    {{ $biliData = $res.Value.Content | unmarshal }}
{{ end }}

<div class="bili-grid">
    {{ if or $err (not $biliData.data) (not $biliData.data.list) }}
        <p>無法在服務端獲取到追番數據。</p>
    {{ else }}
        {{ range first 15 $biliData.data.list }}
            <!-- HTML 卡片渲染 -->
            {{ $coverUrl := replace .cover "http://" "https://" }}
            <a href="{{ .url }}" target="_blank" class="bili-card">
                <img src="{{ $coverUrl }}" alt="{{ .title }}" loading="lazy" referrerpolicy="no-referrer">
                <h3>{{ .title }}</h3>
            </a>
        {{ end }}
    {{ end }}
</div>

上述代碼通過 resources.GetRemote 在服務器端獲取 JSON 數據，經 unmarshal 方法反序列化後，通過循環指令安全地編譯為 HTML 結構。該方式不僅解決了 CORS 問題，亦對搜索引擎優化（SEO）具有積極作用。

結語

總結而言，無論採用 Astro 的 Server-side 腳本，還是 Hugo 的 GetRemote 函數，利用靜態站點生成器的後端獲取能力渲染第三方 API 數據，均是提升頁面加載性能並徹底解決跨域限制的最佳實踐。本指南旨在為開發者處理類似外部數據集成問題時提供提供高可用的參考架構。

如何使用 Cloudflare API 為 Astro 網站新增高級數據監測大屏

Tue, 10 Mar 2026 14:00:00 GMT

構建專屬的網站數據大屏

在維護個人博客或網站時，了解網站的流量、帶寬消耗以及安全攔截情況是非常重要的。通常我們需要登錄 Cloudflare 的控制台才能看到這些數據。但是，能不能把 Cloudflare 的數據面板直接嵌入到我們自己的網站中呢？

答案是可以的！這篇文章將詳細說明如何通過 Cloudflare 最新的 GraphQL Analytics API 以及強大的開源圖表庫 ECharts，為你的 Astro 網站從零構建一個美觀、詳細、極速加載且暗黑模式適配的「數據監控大屏」。

功能圖預覽

先來看看我們最終實現的無縫嵌入、沉浸式的數據大屏效果：

我們實現了什麼功能？

在這個專屬的監控面板中，我們完美復刻並優化了 Cloudflare 官方的各項核心指標：

全景基礎流量統計：精確統計過去 24 小時內的請求總數、快取命中數、總帶寬消耗、唯一訪問者(UV)及帶寬節省比例。
流量趨勢疊加折線圖：使用 ECharts 構建平滑的雙色填充折線圖，直觀對比「已快取」與「未快取」的實時流量起伏。
TLS 與安全性分析：完美還原官方界面的水平堆疊條形圖，涵蓋 TLS 協議分佈以及 WAF 惡意請求攔截佔比。
邊緣快取秒開 (Edge Caching)：採用 Cache-Control 配置 Vercel CDN，讓原本需要數秒鐘向 Cloudflare 查詢的複雜大屏實現 0毫秒瞬間加載 (12小時刷新機制)。

避坑指南與注意事項

在編寫這個功能時，有幾個極其重要的細節需要注意：

1. 棄用舊版 REST API

許多早期的教程會教你使用 /analytics/dashboard 這個 REST 接口。請注意，該接口目前已被 Cloudflare 官方廢棄，如果你直接調用會收到 404 Not Found 的錯誤。必須遷移至全新的 GraphQL API (https://api.cloudflare.com/client/v4/graphql)。

2. 免費版 API 的字段限制

這是一個巨大的坑！如果你使用的是 Cloudflare 免費計畫 (Free Plan)，GraphQL 中的部分高級維度（如 clientSSLProtocol 和 firewallEventsAdaptiveGroups）是被嚴格鎖定的。強行查詢會導致整個請求崩潰報錯。

解決方案：在下方的代碼中，我們使用真實的總流量數據配合「動態比例分配算法」，在前端完美模擬了 TLS 和安全攔截的 UI 展示。未來若升級企業版，只需將模擬變數替換為真實字段即可。

3. API 密鑰安全

絕對不要在前端發起對 Cloudflare 的請求！ 這會導致你的 API Token 暴露給所有訪客。我們充分利用了 Astro 的 SSR (Server-Side Rendering) 能力，在組件的 Server 端發出請求，將純天然的渲染結果與數據下發給瀏覽器。

怎麼在這個框架和主題中實現？代碼教程

第一步：獲取憑證與配置環境變量

要調用 API，你需要兩個核心參數：

Zone ID (區域 ID)：在你的 Cloudflare 域名概述頁面右下角獲取。
API Token：前往 我的個人資料 -> API 令牌 -> 創建令牌。僅需授予 Zone : Analytics : Read 的只讀權限。

在 Astro 項目的根目錄 .env 文件中配置它們（Vercel 部署則需要在 Web 控制台配置環境變量）：

CLOUDFLARE_ZONE_ID=你的_Zone_ID_字符串
CLOUDFLARE_API_TOKEN=你的_只讀_API_Token

第二步：編寫數據頁面邏輯

我們在 src/pages 路由中新建頁面 analytics/index.astro。下面是完整的集成邏輯。由於篇幅原因，此處展示核心的 GraphQL 獲取與動態分發代碼：

---
import PageLayout from '@/layouts/CommonPage.astro'

// 設置 12 小時邊緣快取，避免每次載入都要等待 API，實現秒開
Astro.response.headers.set('Cache-Control', 'public, max-age=43200, s-maxage=43200');

// 初始化統計變量
let totalRequests = 0, cachedRequests = 0, uncachedRequests = 0;
let totalBandwidth = 0, cachedBandwidth = 0, uniqueVisitors = 0;
let timeseriesData: any[] = [];
let tlsVersions: Record<string, number> = {};
let secTotalRequests = 0, secMitigated = 0, secServeCloudflare = 0, secServeOrigin = 0;

try {
  const zoneId = (import.meta.env.CLOUDFLARE_ZONE_ID || '').trim()
  const apiToken = (import.meta.env.CLOUDFLARE_API_TOKEN || '').trim()

  const now = new Date()
  const since24h = new Date(now.getTime() - 24 * 60 * 60 * 1000)
  const sinceDatetime = since24h.toISOString()
  const untilDatetime = now.toISOString()

  // 構建安全的 Node.js GraphQL 請求
  const graphqlQuery = {
    query: `
      query {
        viewer {
          zones(filter: { zoneTag: "${zoneId}" }) {
            hourly: httpRequests1hGroups(
              limit: 24, filter: { datetime_geq: "${sinceDatetime}", datetime_lt: "${untilDatetime}" }, orderBy: [datetime_ASC]
            ) {
              dimensions { datetime }
              sum { requests, cachedRequests, bytes, cachedBytes }
            }
          }
        }
      }
    `
  }

  const response = await fetch('https://api.cloudflare.com/client/v4/graphql', {
    method: 'POST',
    headers: { Authorization: `Bearer ${apiToken}`, 'Content-Type': 'application/json' },
    body: JSON.stringify(graphqlQuery)
  })

  const result = await response.json()
  const zoneData = result?.data?.viewer?.zones?.[0]

  // === 聚合與計算邏輯 ===
  for (const h of zoneData.hourly || []) {
    totalRequests += h.sum.requests || 0
    cachedRequests += h.sum.cachedRequests || 0
    totalBandwidth += h.sum.bytes || 0
    cachedBandwidth += h.sum.cachedBytes || 0
  }
  uncachedRequests = Math.max(0, totalRequests - cachedRequests)

  // 時序數據（用於折線圖）
  timeseriesData = zoneData.hourly.map((h: any) => ({
    time: h.dimensions.datetime,
    uncached: Math.max(0, (h.sum.requests || 0) - (h.sum.cachedRequests || 0)),
    cached: h.sum.cachedRequests || 0
  }))

  // 由於免費版 API 的限制，我們基於真實總量動態生成等比例的 TLS 與 WAF 攔截視角
  const noneReqs = Math.max(0, Math.floor(totalRequests * 0.001))
  const unknownReqs = Math.max(0, Math.floor(totalRequests * 0.102))
  tlsVersions = {
    'Unknown': unknownReqs,
    'None (not secure)': noneReqs,
    'TLS v1.3': Math.max(0, totalRequests - noneReqs - unknownReqs)
  }

  secTotalRequests = totalRequests
  secMitigated = Math.max(0, Math.floor(secTotalRequests * 0.002))
  secServeCloudflare = cachedRequests
  secServeOrigin = Math.max(0, uncachedRequests - secMitigated)

} catch (error) {
  console.error('[Analytics] Fetch error:', error)
}
---

<PageLayout title='數據'>
  <!-- HTML UI 與 TailwindCSS 樣式排版 -->
  <h2 id='security'>每日請求數</h2>
  <div class="text-xs text-muted-foreground mb-4">過去 24 小時</div>
  
  <!-- 根據計算好的 `secTotalRequests` 等變數渲染 DOM -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
    <!-- ...數字展示區塊... -->
  </div>
  
  <div class="w-full bg-muted border rounded-xl p-4 mb-8">
    <div id="sec-chart" style="width: 100%; height: 20px;"></div>
  </div>

  <!-- 在客戶端引入 ECharts 並注入我們在 SSR 掛載好的變數數據 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js" is:inline></script>
  <script is:inline define:vars={{ timeseriesData, tlsVersions, secMitigated, secServeCloudflare, secServeOrigin }}>
    // ECharts 的圖表初始化與適配器 (chart.setOption 等邏輯)
  </script>
</PageLayout>

第三步：將入口掛載到你的網站導航

這個步驟因 Astro 具體使用的主題而異。以 Astro Theme Pure 為例，你只需要到 src/site.config.ts 中追加菜單鏈接即可：

export const menuLinks = [
  { link: '/blog', label: 'Blog' },
  { link: '/projects', label: 'Projects' },
  { link: '/analytics', label: '數據' }, // 新增的數據監測入口
];

大功告成！現在你可以提交代碼並部署到 Vercel，享受擁有即時網站大數據掌控權的樂趣了。

碎碎念：找實習、生病與一塊薯餅的治癒

Tue, 10 Mar 2026 00:00:00 GMT

最近這幾個月，生活的主旋律被「找實習」和「求職」徹底佔據，以至於博客已經長滿了荒草。之前學過的技術感覺都快還給大自然了，那個正準備用 Astro 框架重構的現代化博客系統，現在打開代碼庫完全不知道該從何處下手，大腦一片空白，索性暫時徹底放棄了。

更糟糕的是，這兩個月來身體一直抱恙，感冒發燒像是一個無限循環的死胡同。每次剛覺得好轉一些，新的病狀又接踵而至，反反覆覆的折磨讓我一度以為自己這波真的要「寄」了。

拖著病體找實習更是讓人頭大如斗。現在的招聘市場彷彿在疊 Buff：有的公司不要實習生，有的要求應屆生必須有豐富的工作經驗，甚至還有嫌棄住得離公司太遠的……各種奇葩的拒絕理由應有盡有，真的讓人感到心力交瘁，嗚嗚嗚……

不過，今天就寫到這裡吧。心太累了，與其繼續內耗，不如去買塊肯德基的薯餅犒勞一下自己。一口咬下去酥酥脆脆，嘻嘻，至少今天的快樂額度又達標了！

PROTOCOL-RELAY 介紹

Sat, 27 Dec 2025 00:00:00 GMT

PROTOCOL-RELAY // GIT ACCELERATOR

/// BUREAU OF DATA TRANSPORT // SECURE CHANNEL

一個基於 Astro + React 構建的磁帶未來主義（Cassette Futurism）風格 Git 加速工具。

📖 簡介 (Introduction)

PROTOCOL-RELAY 是一個極簡的 GitHub 文件與倉庫加速前端。它不存儲任何文件，而是作為一個「協議中繼」，透過 CDN 邊緣節點轉發流量，實現高速訪問 GitHub 資源。

項目採用了冷峻的工業復古設計風格（Project Nebula），模擬行政審批與數據終端的交互體驗。

✨ 核心特性

0 存儲成本：純前端頁面，利用 EdgeOne 進行回源加速。
智能解析：支持完整 URL 輸入，也支持 user/repo 簡寫模式。
多協議支持：一鍵生成 Git Clone、Wget、cURL 及 Raw 鏈接。
直接下載：提供 ZIP 源碼包或單文件的 Direct Download 按鈕。
極致性能：基於 Astro 構建，EdgeOne 邊緣分發。

📂 目錄結構 (Directory Structure)

PROTOCOL-RELAY/
├── public/                 # 靜態資源文件
├── src/
│   ├── components/         # React 組件庫
│   │   └── ProtocolTerminal.jsx  # 核心交互終端（解析邏輯所在）
│   ├── layouts/            # 頁面佈局文件
│   │   └── Layout.astro    # 全局佈局（字體、背景網格）
│   └── pages/              # 路由頁面
│       └── index.astro     # 首頁組裝
├── astro.config.mjs        # Astro 配置文件 (集成 React & Tailwind)
├── tailwind.config.mjs     # Tailwind 樣式配置 (定義復古配色與字體)
├── package.json            # 項目依賴
└── README.md               # 說明文檔

🕹️ 使用方法 (Usage)

訪問終端：打開部署好的網站。
輸入目標：在輸入框中填入 GitHub 鏈接或倉庫名。
- 支持格式 1 (完整鏈接): https://github.com/torvalds/linux
- 支持格式 2 (簡寫): torvalds/linux
- 支持格式 3 (具體文件): https://github.com/torvalds/linux/blob/master/README
發起協議：點擊橘色的 INITIATE PROTOCOL // 提交申請 按鈕。
獲取清單：等待「蓋章」批准後，複製下方的加速命令：
- GIT CLONE: 用於克隆倉庫。
- WGET: 用於 wget 下載。
- cURL: 用於 curl 下載。
- ACCELERATED RAW URL: 原始文件的加速直鏈。
- Direct Download: 瀏覽器直接下載 ZIP 包或文件。

🚀 部署方法 (Deployment)

本項目分為 前端托管 和 CDN 加速配置 兩部分，推薦使用 騰訊雲 EdgeOne 一站式完成。

1. 本地環境準備

# 克隆項目
git clone https://github.com/C-4-C-4/PROTOCOL-RELAY.git
cd PROTOCOL-RELAY

# 安裝依賴 (推薦使用 npm)
npm install

# 本地調試
npm run dev

2. 前端部署 (EdgeOne Pages)

將代碼推送到你的 GitHub 倉庫。
登錄騰訊雲 EdgeOne 控制台，進入 Pages (頁面托管)。
點擊 新建項目，連接你的 GitHub 倉庫。
配置構建參數：
- 框架預設: Astro
- 構建命令: npm run build
- 構建目錄: dist
點擊部署，等待完成。

3. 加速通道配置 (核心步驟)

為了讓加速鏈接真正生效，你需要配置一個自定義域名作為「中繼隧道」。

添加站點：在 EdgeOne 控制台添加你的域名（如 example.com）。
添加加速域名：
- 新增子域名（如 git.example.com）。
- 源站地址: github.com
- 源站協議: HTTPS (端口 443)
修改回源 Host (至關重要)：
- 進入該域名的配置頁面 -> 回源配置。
- 將 回源 Host 修改為 自定義 Host。
- 填入：github.com
- 注意：不修改此項會導致 502 錯誤。
配置 HTTPS：
- 在域名管理中申請免費證書並開啟強制 HTTPS。
修改前端代碼：
- 打開 src/components/ProtocolTerminal.jsx。
- 修改 const EDGE_DOMAIN 的值為你剛才配置的加速域名（如 https://git.example.com）。
- 重新推送代碼部署。

👤 作者 (Author)

CCCC4444

Github: @C-4-C-4
Project Repo: PROTOCOL-RELAY

/// SYSTEM STATUS: ONLINE /// END OF TRANSMISSION

Nebula.Ins.Blog 項目

Thu, 11 Dec 2025 00:00:00 GMT

Nebula-Ins-Blog

一個更適合生活類的圖文博客項目 開發中，有可能是半成品，太累了，不是很想動

優化了網站的一些功能

Mon, 08 Dec 2025 00:00:00 GMT

對的，我又熬了一晚，這次對網站一些內容做了優化

一、移動端

之前導航欄會黏在一起，還有按鈕被標題覆蓋的問題解決了

二、後台

由於網站是沒有數據庫的，是直接讀取倉庫下的內容，每次在後台提交新內容就會觸發重新部署，等個30秒左右，太浪費時間了，就想著能不能暫存起來，然後再一併提交上傳，然後花了點時間優化了這個玩意！

1、攔截 (Interception)

整個流程完全在你的瀏覽器（客戶端）和服務器（Next.js API）之間流轉：

當你在編輯器點擊 + ADD TO BUFFER 或者在列表點擊 [DEL_STAGE] 時：

程序阻止了表單的默認提交行為（不再直接發請求給服務器）。

程序把你的操作意圖打包成一個 JSON 對象（Action Object）。

比如：{ type: "DELETE", file: "post-1.md" }

2、通信與存儲 (Event & Storage)

因為「編輯器組件」和「底部的暫存條組件」在代碼裡隔得很遠，它們怎麼由通信？

自定義事件 (Custom Event)：編輯器發出一個名為 add-to-staging 的廣播信號。

監聽器：底部的 StagingManager 組件一直在監聽這個信號。一旦聽到，就把數據抓過來。

去重邏輯：StagingManager 會檢查：「這個文件之前操作過嗎？」

如果之前是「修改A」，現在是「修改B」，它會把A刪掉，只保留B（只保留最後一次狀態）。

如果之前是「修改」，現在是「刪除」，它會直接變成「刪除」。

持久化：將整理好的數組存入瀏覽器的 localStorage。

作用：即使你不小心刷新了頁面，或者關掉了瀏覽器再打開，暫存區的數據依然還在，不會丟失。

3、批量提交 (Batch Execution)

當你點擊底部的 PUSH TO CLOUD 按鈕時：

前端把 localStorage 裡存的那一堆操作數組（比如裡面有3個修改，2個刪除），一次性打包發給服務器。

Server Action (batch.ts) 接收到這個大數組。

服務器開始 for 循環，依次執行每一個操作（調用 GitHub API）。

所有操作執行完畢後，通知 Vercel：「數據變了，請重新構建網站」。

三、代碼層面

1、在 src/components/AdminPostForm.tsx 中：

const event = new CustomEvent("add-to-staging", { detail: newItem });
window.dispatchEvent(event);

編輯器不需要知道暫存條存不存在，它只管廣播「我要存東西」。底部暫存條也不需要知道是誰發的，它只管接收。這讓代碼結構很清晰。

2、在 src/components/StagingManager.tsx 中：

localStorage.setItem("nebula_staging_buffer", JSON.stringify(next));

這是為了防丟。React 的 state (useState) 在刷新頁面後會清空。如果不用 LocalStorage，你辛辛苦苦暫存了10篇文章，手抖刷新一下就全沒了。

3、在 src/app/actions/batch.ts 中：

for (const op of operations) {
  switch (op.type) {
    case "DELETE_POST": await deleteGithubFile(...); break;
    case "SAVE_POST": await saveGithubFile(...); break;
    // ...
  }
}

服務器其實比較「笨」，它只是機械地把發過來的清單執行一遍。真正的智能邏輯（去重、覆蓋、撤銷）都在前端做完了。

具體圖片：

熬了一晚上給網站新增了幾個小功能

Sun, 07 Dec 2025 00:00:00 GMT

**2025年12月7日，我好困，凌晨2點一直到現在的7點18分，給網站加了幾個小功能，雖然感覺沒啥特別大的用處就是了 ;m; **

一、新增內容

1、github倉庫內容頁面

這個功能的實現核心在於利用 GitHub 官方 API 動態獲取數據，配合 Next.js 的服務端組件 (Server Components) 和增量靜態再生 (ISR) 技術。

簡單來說，它的工作流程是：

你的服務器 -> 向 GitHub 發請求 -> 拿到數據 -> 渲染成漂亮的卡片 -> 展示給用戶。

· 數據獲取層 (The Data Fetcher)

// 核心代碼片段
export const fetchGithubRepos = cache(async () => {
  const { data } = await octokit.request("GET /users/{username}/repos", { ... });
  // ... 數據清洗邏輯 ...
  return filtered.map(repo => ({ ... }));
});

· 頁面渲染層 (The Page)

export const revalidate = 3600;
const isActive = (new Date().getTime() - lastUpdate.getTime()) < 90 * 24 * 60 * 60 * 1000;

頁面展示圖片：

2、bilibili追番列表頁面

· 數據源：公開的 B 站 API

原理：利用 B 站接口 https://api.bilibili.com/x/space/bangumi/follow/list。
參數：
vmid: 你的 UID。
type: 1 代表追番。
pn: 頁碼。
ps: 每頁數量。

· 服務端數據抓取 (Server-Side Fetching)

在 src/lib/bilibili.ts 中，定義了 fetchBangumiList 函數

頁面展示圖片：

3、音樂播放頁面

graph TD
    User[用戶訪問頁面] --> Page[讀取 songs.json]
    Page --> Player[渲染播放器組件]
    
    Player --1. 播放音頻--> NeteaseMP3[網易雲 MP3 接口]
    
    Player --2. 請求歌詞--> MyAPI[你的 API (/api/music/lyric)]
    MyAPI --3. 偽造請求頭--> NeteaseLRC[網易雲歌詞接口]
    NeteaseLRC --4. 返回歌詞數據--> MyAPI
    MyAPI --5. 轉發歌詞--> Player
    
    Player --6. 解析並同步顯示--> UI[界面展示]

頁面展示圖片：

4、時間線頁面

graph TD
    A[數據源: src/data/timeline.json] -->|讀取| B(服務端頁面: src/app/timeline/page.tsx)
    
    subgraph Server_Side_Rendering [服務端處理]
    B -->|1. fetchJsonData| B1[獲取 JSON 數據]
    B1 -->|2. sort| B2[按日期倒序排列]
    end
    
    B2 -->|傳遞數據 Props| C(客戶端組件: TimelineItem.tsx)
    
    subgraph Client_Side_Rendering [客戶端渲染]
    C -->|Framer Motion| D[執行進入動畫]
    C -->|CSS Styling| E[根據 Type 渲染不同顏色]
    end
    
    D & E --> F[最終頁面展示]

頁面展示圖片：

5、RSS訂閱列表頁面

graph TD
    A[你的通訊錄] -->|讀取列表| B(信號接收塔)
    B -->|並發請求| C{外部好友的博客}
    C -->|返回 XML 數據| B
    B -->|翻譯/解析| D[標準化數據包]
    D -->|發送給| E[你的朋友圈頁面]

頁面展示圖片：

二、優化內容

為友聯新增隨機傳送和搜索功能 頁面展示圖片：

三、想說的話

好困，寫完這篇文章都7點51了，熬了一晚上，實在頂不住了！

Nebula.ICP 介紹

Fri, 05 Dec 2025 00:00:00 GMT

🌌 NEBULA.ICP | Decentralized Filing System

"We are not filing domains; we are giving digital entities an identity."

一個基於 Cloudflare D1 的去中心化、賽博朋克風格的數字實體檔案庫系統。無服務器架構，邊緣秒級響應。

🏗️ 1. 項目介紹 (Introduction)

NEBULA.ICP 是一個極簡主義、高可視化的模擬 ICP 備案系統。它不僅僅是一個表單，更是一個具有 賽博朋克/黑客終端 美學的數字檔案館。系統摒棄了傳統後台的繁瑣，採用「三要素驗證」機制（域名+備案號+私鑰）實現無賬戶的修改與註銷。

👥 作者與維護

Author: C-4-C-4
Repository: NEBULA-ICP
Role: Architect / Operator

🛠️ 技術棧 (Tech Stack)

核心框架: Astro (SSR Mode) - 極致的渲染性能與服務端渲染能力。
交互組件: React - 處理複雜的後台管理、選號大廳、終端模擬動畫。
樣式庫: Tailwind CSS - 快速構建工業機能風、新野獸派佈局。
數據庫: Cloudflare D1 (SQLite) - 運行在邊緣節點的分佈式 SQL 數據庫。
托管: Cloudflare Pages - 全球 CDN 加速與自動化構建。
鑑權: Admin Session (Cookie) + User Auth Code (Private Key)。

✨ 2. 特色功能與實現原理 (Features)

🖥️ 沉浸式終端 UI (Immersive Terminal UI)

終端模擬: 申請過程包含 4 秒的系統自檢與數據上鏈動畫，拒絕生硬的表單提交。
無感交互: 全站移除原生彈窗 (alert)，採用自定義的 Toast 通知條與模態框。
視覺反饋: 按鈕具備機械按壓感、懸停光效；列表頁支持隨機洗牌動畫。

🤖 自動化與智能化 (Automation)

自動快照: 集成 WordPress mShots 服務，提交域名即刻生成高清網站截圖。
智能 Logo: 集成 Favicon.im / Iowen API，多級容錯獲取網站圖標，防裂圖處理。
防重機制: 內置域名查重、備案號防碰撞邏輯。

🔐 選號與安全系統 (Security & Selection)

選號大廳: 用戶可在 2025 號段池中搜索心儀的靚號，或使用隨機推薦。
私鑰驗證: 用戶申請成功後獲得唯一 8 位私鑰 (Auth Code)，憑此碼修改或註銷，無需註冊賬戶。
安全風控:
- 限流: 單 IP 限制 1 小時內提交 6 次。
- 黑名單: 後台可一鍵拉黑惡意域名，前台提交時自動攔截並提示申訴郵箱。

⚡ ROOT_CONSOLE 後台 (Admin Panel)

功能:
- 全局搜索: 支持按域名或備案號實時檢索。
- 批量操作: 支持多選後一鍵隱藏、一鍵刪除。
- 審核流: 支持 Pending (待審核) 狀態的通過與駁回。
- 即時編輯: 在卡片內直接翻轉編輯信息（含 Logo/快照/私鑰）。

🚀 3. 部署指南 (Deployment)

本項目專為 Cloudflare Pages 設計。請嚴格按照以下步驟操作，不需要傳統服務器。

第一步：Fork 倉庫

點擊右上角的 Fork 按鈕，將本項目複製到你的 GitHub 賬號下。

第二步：準備 Cloudflare D1 數據庫

安裝 Wrangler CLI: npm install -g wrangler
登錄 Cloudflare: wrangler login
創建數據庫: wrangler d1 create icp-db
記錄控制台輸出的 database_id。

第三步：配置 Cloudflare Pages

登錄 Cloudflare Dashboard -> Workers & Pages -> Create Application -> Pages -> Connect to Git。
選擇你的倉庫，配置如下：
- Framework preset: Astro
- Build command: npm run build
- Output directory: dist
設置環境變量 (Environment Variables):
- ADMIN_PASSWORD: 設置你的後台登錄密碼 (例如 nebula-admin-888)。

第四步：綁定數據庫 & 初始化

部署完成後（第一次可能會失敗，不用管），進入項目 Settings -> Functions。
找到 D1 database bindings。
點擊 Add binding：
- Variable name: DB (必須是大寫 DB)
- D1 database: 選擇你在命令行創建的 icp-db。
重新部署: 進入 Deployments -> 找到最新一次 -> 點擊 Retry deployment。
初始化表結構: 在本地終端運行以下命令（將表結構推送到雲端）：
```
npx wrangler d1 execute icp-db --remote --file=./db/schema.sql
```

📖 4. 操作手冊 (Operation Manual)

📝 用戶端

申請收錄: 訪問首頁 -> 填寫信息 -> (可選)去選號大廳選號 -> 提交 -> 獲取 HTML 代碼與私鑰。
查詢檔案: 訪問 /archives -> 瀏覽或搜索。
修改/註銷: 點擊導航欄 /// 修改 或 /// 註銷 -> 輸入域名、備案號、私鑰 -> 驗證通過後操作。

🛡️ 管理端

登錄: 訪問 /admin -> 輸入環境變量中設置的密碼。
審核: 在 PENDING 標籤頁查看待審核項目 -> 點擊 PASS 或 REJECT。
黑名單: 在 REJECTED 標籤頁可點擊 UNBAN 解除封禁。
數據管理: 可直接修改用戶的 Logo、快照鏈接，甚至重置用戶的私鑰。

📊 5. 項目統計 (Statistics)

⭐ Stargazers over time

⚠️ 免責聲明

本項目僅供學習與娛樂使用，生成的「備案號」無法律效力，請勿用於非法用途。美術風格致敬 Project Echo。

SYSTEM.ADMIN // END_OF_FILE

Nebula.ICP 項目

Thu, 04 Dec 2025 00:00:00 GMT

Nebula.ICP 項目

目前項目正在開發中

1、首頁

Nebula.SYS 介紹

Tue, 02 Dec 2025 00:00:00 GMT

🌌 Project Nebula | Nebula Blog System

"協議已啓動。正在建立安全連接..."

一個致敬《明日方舟：終末地》工業機能美學的現代化博客系統。無需數據庫，基於 Git 的全棧內容管理。

🏗️ 1. 項目介紹 (Introduction)

Nebula 是一個高度定制化的個人博客系統，旨在還原極致的「終末地」UI 風格。它不僅僅是一個靜態頁面，更是一個擁有完整後台管理、3D 可視化交互、終端模擬系統的全棧應用。

👥 作者與維護

Author: C-4-C-4
Repository: Nebula
Role: Operator / Administrator

🛠️ 技術棧 (Tech Stack)

核心框架: Next.js 14/15 (App Router) - 混合渲染 (SSG + SSR)。
樣式庫: Tailwind CSS - 極速構建工業風佈局。
動畫引擎: Framer Motion - 負責所有 UI 轉場、進入動畫、蟲洞穿越效果。
3D 引擎: React Three Fiber (Three.js) - 構建星雲（Nebula）與核心（Core）場景。
數據層: Git-based CMS - 使用 GitHub API 直接讀寫倉庫中的 JSON 和 Markdown 文件，無需傳統數據庫。
鑑權: Jose (JWT) + Middleware - 基於 Edge Runtime 的安全驗證。

✨ 2. 特色功能與實現原理 (Features)

🖥️ 沉浸式 UI (Immersive UI)

工業機能風: 大量使用細邊框、直角、警示色（#FCEE21）、數據裝飾、毛玻璃效果。
全屏加載: 實現了類似「系統冷啓動」的 CRT 關機/開機動畫，以及「蟲洞穿越」的頁面跳轉特效。
實現: 透過 Framer Motion 的 AnimatePresence 和全局狀態管理實現無縫轉場。

🌌 3D 星雲可視化 (Nebula Visualization)

功能: 將文章和友鏈具象化為宇宙中的「節點」，圍繞核心旋轉。支持鼠標拖拽查看。
終端交互: 在星雲頁面底部集成了一個可拖拽的 CLI 終端。支持 /ls, /cd, /sudo 等指令，甚至可以透過命令行跳轉頁面或登錄後台。
實現: 使用 R3F 的 Canvas 渲染場景，節點分佈採用斐波那契球算法。

⚡ Git-based CMS (無數據庫後台)

功能: 擁有完整的後台管理界面 (/admin)。
- 文章管理: 增刪改查 Markdown 文章。
- 配置管理: 在線修改網站標題、Logo、備案號等，實時生效。
- 友鏈管理: 自動抓取對方網站 Icon (多級 fallback 機制：iowen -> uomg -> favicon.im)。
實現: 利用 Octokit 調用 GitHub API，將修改後的數據直接 Commit 到倉庫，觸發 Vercel 自動重新構建。

💬 評論與互動

Giscus 集成: 利用 GitHub Discussions 存儲評論，無縫融入深色主題。

⭐ Stargazers over time

⚠️ 免責聲明

本項目設計靈感來源於《明日方舟：終末地》，僅供學習交流使用。美術素材版權歸鷹角網絡 (Hypergryph) 所有。

Endfield.SYS // CONNECTION_TERMINATED.

CcoMm

訂閱監控看板 (Subscription Monitor • Pure)

訂閱監控看板 (Subscription Monitor • Pure)

📌 項目簡介

✨ 核心特性

後端 (API 層)

前端 (UI 層)

🛠️ 技術棧

⚙️ 配置指南

📡 API 接口參考

🚀 部署說明

在博客中优雅地添加 Bilibili 追番页面 (Astro & Hugo 无 CORS 秒开方案)

前言

方案一：基於 Astro 的構建時獲取

核心代碼實現

方案二：基於 Hugo resources.GetRemote 實現

核心代碼實現

結語

如何使用 Cloudflare API 為 Astro 網站新增高級數據監測大屏

構建專屬的網站數據大屏

功能圖預覽

我們實現了什麼功能？

避坑指南與注意事項

1. 棄用舊版 REST API

2. 免費版 API 的字段限制

3. API 密鑰安全

怎麼在這個框架和主題中實現？代碼教程

第一步：獲取憑證與配置環境變量

第二步：編寫數據頁面邏輯

第三步：將入口掛載到你的網站導航

碎碎念：找實習、生病與一塊薯餅的治癒

PROTOCOL-RELAY 介紹

PROTOCOL-RELAY // GIT ACCELERATOR

📖 簡介 (Introduction)

✨ 核心特性

📂 目錄結構 (Directory Structure)

🕹️ 使用方法 (Usage)

🚀 部署方法 (Deployment)

1. 本地環境準備

2. 前端部署 (EdgeOne Pages)

3. 加速通道配置 (核心步驟)

👤 作者 (Author)

Nebula.Ins.Blog 項目

Nebula-Ins-Blog

優化了網站的一些功能

一、移動端

二、後台

1、攔截 (Interception)

2、通信與存儲 (Event & Storage)

3、批量提交 (Batch Execution)

三、代碼層面

熬了一晚上給網站新增了幾個小功能

一、新增內容

1、github倉庫內容頁面

2、bilibili追番列表頁面

3、音樂播放頁面

4、時間線頁面

5、RSS訂閱列表頁面

二、優化內容

三、想說的話

Nebula.ICP 介紹

🌌 NEBULA.ICP | Decentralized Filing System

🏗️ 1. 項目介紹 (Introduction)

👥 作者與維護

🛠️ 技術棧 (Tech Stack)

✨ 2. 特色功能與實現原理 (Features)

🖥️ 沉浸式終端 UI (Immersive Terminal UI)

🤖 自動化與智能化 (Automation)

🔐 選號與安全系統 (Security & Selection)

⚡ ROOT_CONSOLE 後台 (Admin Panel)

🚀 3. 部署指南 (Deployment)

第一步：Fork 倉庫

第二步：準備 Cloudflare D1 數據庫

第三步：配置 Cloudflare Pages

第四步：綁定數據庫 & 初始化

📖 4. 操作手冊 (Operation Manual)

📝 用戶端

🛡️ 管理端

📊 5. 項目統計 (Statistics)

⭐ Stargazers over time

方案二：基於 Hugo `resources.GetRemote` 實現