1. 架構概述與環境配置
本站點的內容渲染基於 Node.js 與 marked.js 核心。所有的文章均由標準的 .md (Markdown) 文件編譯而來。我們對渲染引擎進行了深度定制，使其能夠解析專屬的 HTML 組件，從而實現玻璃擬物化 (Glassmorphism) 網頁美學與高階交互功能。
UTF-8。
2. 全自動數據模塊與 Frontmatter
為了讓伺服器能正確抓取文章資訊並渲染至主頁（Dashboard）的時間線網格及檔案總管，你的 .md 文件最開頭必須遵循以下格式：
# 這裡輸入你的文章大標題
Author: 你的名字或組織名
#Coding #Design #可添加多個標籤
---
（這裡開始寫正文，注意上方必須空一行）自動生成的板塊
- 文章版權引用區塊： 系統會在每篇文章的最末尾，全自動生成帶有巨大
CC圓圈浮水印、文章連結、發布日期與作者資訊的深色授權卡片。開發者無需在 Markdown 中手動寫入任何版權代碼。 - 活動網格圖與雙重側邊欄： 只要你打上了標籤 (Tags) 與作者 (Author)，系統就會自動將其歸類到首頁的「檔案總管」目錄中，並在網格時間線上點亮對應的活躍度。
3. 基礎排版：換行與首字下沉
A. 自動換行邏輯 (Line Breaks)
本站採用了高級的 white-space: pre-wrap; 渲染策略，完全尊重你在編輯器中的輸入習慣：
- 小換行： 在源代碼中按一下
Enter，文字會緊湊地換到下一行（無段落間距）。 - 正常換行： 按兩下
Enter（中間空一行），會產生優雅的標準段落間距 (0.8em)。 - 註：折疊框
<details>與提示欄.tip-box內部已排除此規則，確保組件內部的佈局不被多餘換行撐破。
B. 史詩級首字下沉 (Drop Cap)
本站內建自動識別的出版級特效：任何標題 (# 到 ######) 下方的「第一段正文的第一個字」將會自動變大！
- 高度自動佔據約兩行。
- 中文字體自動使用「仿宋」，英文字體自動使用「花體 (Georgia/Cursive)」。
- 標點符號會被自動忽略或跟隨放大。
4. 高級連結系統
A. 牛逼鏈接 (Magic Link)
這是一種極具蘋果官網風格的連結。沒有下劃線，懸停時會彈出帶有物理阻尼動畫的「毛玻璃」小視窗，顯示完整的 URL 與所屬方。極大提升文章的專業度。
<a href="https://www.sankuai.asia" class="magic-link" data-owner="SanGuai Studio">DICK 官方網站</a>B. 引用區的長鏈接浮窗
當一般的 Markdown 鏈接放置在 > 引用 或 <details> 中時，為防止過長的網址撐破手機屏幕，網址會被自動單行截斷 (顯示 ...)，鼠標懸停時才會以玻璃浮窗的形式展現完整網址。
5. 多功能狀態欄系統 (Status Box)
這是一套強大的語義化排版工具，能為你的內容賦予不同的顏色與符號標記。只需在 div 加入對應的 class 即可調用。圖標恆定為白色，不受黑夜模式干擾。
<div class="status-box box-topic">話題內容...</div>box-topic (#) 藍色 - 用於標記新的話題或主線。box-question (?) 橘黃色 - 用於提出疑問或引發思考。box-urgent (&) 洋紅色 - 用於極其相關或緊急的重點。box-done (☑︎) 翡翠綠 - 標記已完成的事項。box-right (✓) 鮮綠色 - 標記正確的邏輯或事實。box-wrong (✗) 鮮紅色 - 標記錯誤的邏輯或應避免的坑。box-dispute (⍻) 紫羅蘭色 - 標記存在爭議或未定論的觀點。box-view (𓂀) 金黃色 - 標記作者個人的深刻觀察或洞見。box-todo (✎) 灰藍色 - 標記未完成或待補充的筆記。段落三兄弟 (排版專用)
採用沉穩的深灰色，適合用於標註文學性或特殊層級的段落：
box-para-sec (§) - 適用於大塊內容區隔或引用法律條文。box-para-pil (¶) - 適用於強調某個核心觀點或靈光一閃的總結。box-para-fle (❡) - 適用於文學筆記、詩歌或軟性的情感轉場。6. DICK 基礎特效組件
A. 吐槽與防劇透遮罩 (Spoiler)
<span class="spoiler">這是一段被隱藏的文本</span>B. 彩色流轉文字 (Rainbow)
<span class="rainbow-text">Cyberpunk 2077</span>C. 喵喵喵交互特效 (Meow Effect)
<span class="meow-target">把鼠標移到我身上</span>D. 優雅的折疊內容 (Collapsible)
<details>
<summary>點擊展開查看隱藏的配置代碼</summary>
<blockquote>這是一段被折疊的引用內容。</blockquote>
</details>點擊展開查看隱藏的配置代碼
這是一段被折疊的引用內容。
7. 地理圍欄與合規化 (Geofence)
若你的文章包含可能違反中國大陸法規的內容，請務必使用地理圍欄標籤。伺服器與客戶端腳本會雙重檢測 IP，對於來自 CN 的請求，該標籤下方的所有內容將被高斯模糊處理，並覆蓋上官方的告別信。
<!-- 將此標籤放置在需要隔離的內容的正上方 -->
<div id="restricted-boundary"></div>
後面的文字、圖片都會被完全模糊化...8. 發布與 404 處理
完成你的 .md 文件後，直接將文件存入伺服器 /posts 目錄中即可。系統內建了高級 SPA 路由，若用戶輸入了錯誤的 ?id= 參數，系統將會攔截錯誤並呈現 SANGUAI INC. 專屬企業級 404 頁面，隨後在 4 秒內自動將用戶安全送回 Dashboard。