-

 ReLink — 從零打造一個雙語線上工具導航網站

 ReLink — Building a Bilingual Web Navigation Hub from Scratch


    🔗 立即使用 / Try it now： ReLink 線上工具導航

           https://relink.garfieldpark.vip/


    我一直想要一個「自己的導航網站」— 不是別人的書籤集合，不是充斥廣告的導航頁，而是一個乾淨、快速、完全由我掌控的線上工具箱。

    這個想法終於在 2026 年 6 月實現了。我和我的 AI 助手 Hermes 一起，從一個 395 張卡片的靜態 HTML 頁面開始，逐步擴建成現在這個擁有 486 個網站連結、29 個分類、支援雙語、手機與桌面通用的 ReLink。


    建構過程

    第一階段：基礎框架

    原始的 index.html 是一個靜態網頁，有 25 個分類、395 個網站卡片。它已經有了深色/淺色主題切換、搜尋引擎切換、側欄導航等基本功能。但它有一個明顯的缺陷 — 沒有手機版。在手機上打開時，側欄擠成一團，卡片過小難以點擊。


    第二階段：內容擴充

    透過審計 GitHub 上的 NavSphere 專案（一個開源導航平台），我提取了它的網站資料庫 — 123 個經過策展的網站。經過比對去重後，合併了 75 個新網站，並新增了三個分類：

    - 🤖 AI 工具（21 個）— ChatGPT、Claude、Gemini、Cursor、Midjourney 等

    - 💰 投資工具（6 個）— TradingView、巨潮資訊、集思錄、看財報等

    - ✍️ 自媒體工具（13 個）— 公眾號排版、小紅書、Substack、知識星球等

    另外還加入了一個獨立的 Google 專區，彙整了 18 個 Google 服務（搜尋、Gmail、Drive、Docs、Sheets、Cloud、Gemini 等）。


    第三階段：手機響應式設計

    這是最關鍵的一步。透過 CSS @media 查詢，我在不改變桌面版佈局的前提下，加入了完整的手機適配：

    - 側欄變成橫向滑動的膠囊按鈕列

    - 卡片從多欄網格變為單列全寬顯示，包含完整網站名稱、描述和域名

    - 預設搜尋引擎改為 Google

    - 加入右下角「回到頂部」浮動按鈕


    第四階段：功能增強

    這些功能是逐步加入的：

    - 💛 我的最愛 — 每張卡片右上角有 ☆ 收藏按鈕，點擊變 ★，儲存在瀏覽器 localStorage

    - ⚖️ 免責聲明 — 點擊導航欄「關於」彈出中英雙語法律聲明

    - 🌐 全站雙語 — 所有分類標題、側欄項目均為繁體中文 + English

    - 🚫 零簡體字 — 全站 322 個簡體字已轉換為繁體


    技術架構

    ReLink 是一個純靜態 HTML 檔案（~190KB），無任何後端、無資料庫、無框架。

    - 前端：原生 HTML + CSS + JavaScript

    - 圖標：Google Favicon API 自動獲取網站圖標

    - 儲存：收藏資料使用瀏覽器 localStorage

    - 部署：單一 index.html，拖到任何伺服器即可上線


    使用方式

    1. 開啟 ReLink

    2. 左側欄選擇分類，或直接搜尋

    3. 點擊任何卡片即可跳轉到目標網站

    4. 點擊卡片右上角 ☆ 加入最愛

    5. 點擊「💛 我的最愛」查看所有收藏


    Why I Built This

    I wanted my own navigation hub — not someone else's bookmark collection, not an ad-filled link farm, but a clean, fast, fully-controlled web toolbox.

    This idea finally materialized in June 2026. Together with my AI assistant Hermes, I started from a static HTML page with 395 cards and gradually expanded it into ReLink — a bilingual, mobile-responsive navigation site with 486 links across 29 categories.


    The Build Process

    Phase 1: Foundation

    The original index.html was a static page with 25 categories and 395 website cards. It already had dark/light theme toggle, search engine switching, and sidebar navigation. But it had one glaring flaw — no mobile support. On a phone, the sidebar was a mess and cards were too small to tap.


    Phase 2: Content Expansion

    By auditing the NavSphere open-source project on GitHub, I extracted its curated database of 123 websites. After deduplication, 75 new sites were merged in, along with three new categories:

    - 🤖 AI Tools (21) — ChatGPT, Claude, Gemini, Cursor, Midjourney, and more

    - 💰 Investment Tools (6) — TradingView, financial data platforms, valuation tools

    - ✍️ Content Creator Tools (13) — WeChat排版, Xiaohongshu, Substack, newsletter platforms

    A dedicated Google section was also added, grouping 18 Google services (Search, Gmail, Drive, Docs, Sheets, Cloud, Gemini, etc.).


    Phase 3: Mobile Responsive Design

    This was the most critical step. Using CSS @media queries, I added full mobile adaptation without changing the desktop layout:

    - Sidebar transforms into a horizontally scrollable pill-button bar

    - Cards switch from multi-column grid to single-column full-width, showing complete name, description, and domain

    - Default search engine set to Google

    - "Back to top" floating button in the bottom-right corner


    Phase 4: Feature Enhancements

    These were added incrementally:

    - 💛 Favorites — ☆ bookmark button on every card, stored in browser localStorage

    - ⚖️ Disclaimer — Click "About" to see a bilingual legal disclaimer modal

    - 🌐 Full Bilingual UI — All category titles and sidebar items in Traditional Chinese + English

    - 🚫 Zero Simplified Chinese — 322 Simplified Chinese characters converted to Traditional


    Tech Stack

    ReLink is a single static HTML file (~190KB). No backend, no database, no framework.

    - Frontend: Vanilla HTML + CSS + JavaScript

    - Icons: Google Favicon API for automatic website icon retrieval

    - Storage: Browser localStorage for favorites

    - Deployment: Single index.html — drag and drop to any server


    How to Use

    1. Open ReLink

    2. Browse categories in the left sidebar, or use the search bar

    3. Click any card to jump to the target website

    4. Click ☆ in the top-right corner of any card to bookmark it

    5. Click "💛 Favorites" to view all your bookmarked sites


    🔗 Try ReLink now： https://relink.garfieldpark.vip


    Built with the assistance of Hermes AI Agent. 2026.

留言

張貼留言

這個網誌中的熱門文章

-
**我用 AI 幫自己蓋了一個 CPA 考試網站——零成本、不寫一行程式** 2026年了，你還在死盯著 PDF 硬啃 CPA 考試內容嗎？ 🔗 立即體驗：[CPA Study Hub] https://hkicpa-studyhub.garfieldpark.vip 我最近做了一個實驗：純粹靠跟 AI 聊天，從零打造出一個完整的 CPA 學習網站。沒寫過一行 HTML、CSS 或 JavaScript，沒請設計師,也沒碰 WordPress。整個過程就是我跟 AI 你一言我一語地對話出來的。 **這個網站長什麼樣子？** 🏛️ CPA Study Hub 是一個針對香港會計師公會會員手冊打造的完整學習平台，功能包括： - 涵蓋全部四大卷內容：道德守則、財務報告準則（HKFRS）、審計準則（HKSA）、可持續披露準則（SDS） - 每個主題配三頁：精簡學習版、完整參考版,加上50題計時練習 - 一鍵切換中英雙語,每一頁都有完整的繁體中文和英文版本 - 深淺色模式切換,半夜挑燈夜讀也不傷眼 - 直接內嵌 PDF,原始條文不用另外開檔案就能對照著看 - 每個主題都預留了 YouTube 影片位置 - 50題計時問答,每題倒數1.25分鐘,自動計分,答錯的題目可以單獨重做 - 純靜態 HTML 架構,準備部署到 Cloudflare Pages,享受免費又無限的流量 **目前做到哪裡了** 已經完成兩個主題：Chapter F 反洗錢指引（AML/CFT），涵蓋8大重點；Part C 香港附加道德要求,涵蓋10個章節。兩個都配有完整雙語筆記、精簡版、完整版跟練習題。 卷一還剩17個主題沒做,加上卷二、三、四大概還有80個主題等著我。我打算每天啃一個。 **為什麼不乾脆用 WordPress 或 Notion 這些現成平台就好?** 老實說,我就是想要完全掌控每一個像素、每一個互動細節,而不是被平台的模板綁住手腳。Cloudflare Pages 完全免費,還附贈全球 CDN 跟無限流量,這點很難拒絕。網站上不會有任何廣告,除非哪天我自己想放。因為是純 HTML,離線也能開,不靠網路。最重要的是,這個網站是永久屬於我的,不用擔心哪天某個平台倒了或突然改政策,把我的心血一起帶走。 **這中間 AI 做了什麼,我又做了什麼?** 我負責拍板架構——網站要幾頁、要什麼功...
閱讀完整內容
-
 # 我用 AI 做了一個恆指期貨十大持倉分析工具，全程沒寫一行 Code > 你還在每個星期一早上 10 點手動按 F5 等港交所更新？2026 年了，你認真的嗎？ ## 最終成果 **網址**：https://top10hsi.garfieldpark.vip ## 故事開始：兩個網站的數據，一個手動的痛 我有兩個網站要看。 第一個是**港交所官方頁面**，每週更新恒指期貨的頭 10 名大戶持倉百分比。原始數據，很乾，就是一堆 %。 第二個是**港股雷達網**，把港交所的 % 重新計算成實際合約張數，再拆成頭 5 名、頭 10 名、散戶，追蹤每週變化。非常有用，但更新時間不固定。 我的痛點：每次都要開兩個分頁，對照著看。港交所更新了，雷達網還沒更新，就自己手動算。算完還要翻上週的來比對增減。 煩。 ## 我對 AI 說了一句話 > "i want to make a web that scrapping from source 1 web to recalculate the data source figures with reference of the calculation from scource 2 web." 就是這句。然後 AI 開始工作。 ## AI 做了什麼（全程） ### 第一輪：理解需求 AI 自己打開兩個網站，讀取內容，分析港交所的 HTML 結構，理解港股雷達網的計算邏輯（全市場 OI = 頭10名合約 ÷ 頭10名佔比，然後逐個參與者推算實際張數）。 ### 第二輪：建立 HTML 直接用 client-side JavaScript 抓港交所網頁 → 解析 HTML table → 計算 → 顯示。38 週歷史數據從港股雷達網一次性匯入。 ### 第三輪：修 CORS 問題 港交所不允許跨域請求。試了 4 個 public proxy 全部失敗。最後用 Cloudflare Pages 的 `_worker.js` 自己寫一個 serverless proxy。 ### 第四輪：迭代修正 - 日期格式不對 → 改 DD/MM/YYYY - 排序用字串不是日期 → 改用 `new Date()` 排序 - localStorage 換瀏覽器就沒了 → 把 38 週歷史直接嵌進 HTML - 部署後 p...
閱讀完整內容