[{"data":1,"prerenderedAt":778},["ShallowReactive",2],{"content:\u002F2026\u002Ficebergs-guide":3,"surround:\u002F2026\u002Ficebergs-guide":773},{"id":4,"title":5,"body":6,"categories":740,"date":742,"description":743,"draft":744,"extension":745,"image":746,"meta":747,"navigation":749,"path":750,"permalink":751,"published":751,"readingTime":752,"recommend":751,"references":757,"seo":763,"sitemap":764,"stem":765,"tags":766,"type":771,"updated":742,"__hash__":772},"content\u002Fposts\u002F2026\u002FIcebergs-Guide.md","冰山图宇宙项目指南",{"type":7,"value":8,"toc":703},"minimark",[9,12,16,25,42,45,70,77,80,156,164,167,171,174,207,210,244,247,287,290,293,304,308,318,325,328,334,343,346,349,352,359,366,369,372,378,382,385,400,403,406,409,412,415,418,422,425,429,436,439,442,445,448,476,479,483,489,492,495,503,506,591,594,597,600,626,632,635,643,646,649,681,684,690,693,700],[10,11,5],"h1",{"id":5},[13,14,15],"h2",{"id":15},"这是什么",[17,18,19,20,24],"p",{},"冰山图（Iceberg Chart）这种形式你可能在 Reddit 或 B 站见过 —— 一个话题从水面之上的「大众常识」一层层往下挖，越深越冷门、越深越离谱。「冰山图宇宙」是把这种形式做成一个",[21,22,23],"strong",{},"开放协作的知识平台","，而不只是某个人画的一张图。",[26,27,29],"alert",{"type":28},"info",[17,30,31,34,35],{},[21,32,33],{},"在线地址","：",[36,37,41],"a",{"href":38,"rel":39},"https:\u002F\u002Ficebergs.gnix807.cn",[40],"nofollow","icebergs.gnix807.cn",[17,43,44],{},"目前站内有三座冰山图：",[46,47,48,56,63],"ul",{},[49,50,51,52,55],"li",{},"🕳️ ",[21,53,54],{},"中文兔子洞冰山图【重制版】"," — 点进去就再也出不来的互联网深坑",[49,57,58,59,62],{},"🤪 ",[21,60,61],{},"奇异搞笑互联网冰山图（持续更新）"," — 早期论坛神帖、抽象文化名场面",[49,64,65,66,69],{},"📼 ",[21,67,68],{},"中文失传媒体冰山图（提案征集中）"," — 曾经存在但今天难以寻觅的中文内容",[17,71,72,73,76],{},"和 Reddit 帖子或零散博客不同 —— 这里的信息被组织成",[21,74,75],{},"结构化、可协作、可沉淀的知识地图","。每层条目有详细描述（支持 Markdown + KaTeX），可以投票、评论、协作编辑，积累品质分还能解锁 151 种成就徽章。",[13,78,79],{"id":79},"技术栈",[81,82,83,96],"table",{},[84,85,86],"thead",{},[87,88,89,93],"tr",{},[90,91,92],"th",{},"层",[90,94,95],{},"选型",[97,98,99,108,116,124,132,140,148],"tbody",{},[87,100,101,105],{},[102,103,104],"td",{},"框架",[102,106,107],{},"Astro + React",[87,109,110,113],{},[102,111,112],{},"语言",[102,114,115],{},"TypeScript",[87,117,118,121],{},[102,119,120],{},"样式",[102,122,123],{},"Tailwind CSS",[87,125,126,129],{},[102,127,128],{},"数据库",[102,130,131],{},"PostgreSQL + Prisma ORM",[87,133,134,137],{},[102,135,136],{},"认证",[102,138,139],{},"Better Auth",[87,141,142,145],{},[102,143,144],{},"搜索",[102,146,147],{},"Orama",[87,149,150,153],{},[102,151,152],{},"部署",[102,154,155],{},"Docker Compose",[17,157,158,159,163],{},"一条 ",[160,161,162],"code",{"code":162},"docker compose up -d"," 就起来了。",[13,165,166],{"id":166},"核心功能",[168,169,170],"h3",{"id":170},"冰山图编辑器",[17,172,173],{},"可视化拖拽编辑，支持 Markdown + KaTeX 公式，Ctrl+Z\u002FY 撤销重做，自动保存草稿，多人可同时协作编辑。这是整个平台最核心的组件，基本是从零手搓的。",[175,176,177],"card-list",{},[46,178,179,185,191,201],{},[49,180,181,184],{},[21,182,183],{},"词条弹窗","：异步加载描述内容，键盘 ← → 逐条浏览，一键复制链接",[49,186,187,190],{},[21,188,189],{},"全文搜索","：中英文混合检索，Ctrl+K 全局热键呼出，300ms 防抖",[49,192,193,196,197,200],{},[21,194,195],{},"双色主题","：暗色终端绿（品牌色 ",[160,198,199],{"code":199},"#00FF41","）+ 浅色模式，可选 CRT 复古扫描线效果",[49,202,203,206],{},[21,204,205],{},"移动端适配","：44px 最小触控区域，响应式布局，iOS 安全区域适配",[168,208,209],{"id":209},"社区机制",[175,211,212],{},[46,213,214,220,226,232,238],{},[49,215,216,219],{},[21,217,218],{},"投票 & 评论","：每个冰山图都可以投票（赞同 \u002F 反对）和评论讨论",[49,221,222,225],{},[21,223,224],{},"品质分 & 成就","：浏览、投票、评论、创建均累积品质分；151 种成就徽章（传说 \u002F 史诗 \u002F 稀有 \u002F 普通），活跃即解锁",[49,227,228,231],{},[21,229,230],{},"排行榜","：热门 + 高赞双榜，前三名金银铜专属边框，支持时间段筛选",[49,233,234,237],{},[21,235,236],{},"内容审核","：提交 → 编辑审核 → 发布流程，含提交前自动检查清单",[49,239,240,243],{},[21,241,242],{},"RBAC 权限","：USER \u002F CONTRIBUTOR \u002F EDITOR \u002F MODERATOR \u002F ADMIN \u002F FOUNDER 六层角色体系",[168,245,246],{"id":246},"进阶功能",[175,248,249],{},[46,250,251,257,263,269,275,281],{},[49,252,253,256],{},[21,254,255],{},"创意池","：35 种话题分类，看板 + 列表双视图，可提交创意让他人认领实现",[49,258,259,262],{},[21,260,261],{},"专题协作 (WikiProject)","：开项目组，看板任务管理，成员邀请，多人协同编修",[49,264,265,268],{},[21,266,267],{},"社区治理","：RfA 公开选举编辑资格，管理员弹劾机制，举报处理，反馈跟踪",[49,270,271,274],{},[21,272,273],{},"管理面板","：用户管理、审核队列、系统配置、成就配置、SEO 管理",[49,276,277,280],{},[21,278,279],{},"导出图片","：一键将冰山图导出为含水印的 PNG 信息图",[49,282,283,286],{},[21,284,285],{},"SEO","：Open Graph + Twitter Card + JSON-LD 结构化数据 + Sitemap.xml + Robots.txt",[13,288,289],{"id":289},"本地开发",[168,291,292],{"id":292},"环境要求",[46,294,295,298,301],{},[49,296,297],{},"Node.js 18+",[49,299,300],{},"PostgreSQL 16+",[49,302,303],{},"Docker（可选，推荐）",[168,305,307],{"id":306},"docker-一键部署推荐","Docker 一键部署（推荐）",[309,310,316],"pre",{"className":311,"code":313,"language":314,"meta":315},[312],"language-bash","git clone https:\u002F\u002Fgithub.com\u002FGnix807\u002Ficebergs-1.0.git\ncd icebergs-1.0\u002Ffrontend\ncp .env.docker .env   # 编辑 .env 填必要配置\ndocker compose up -d\n","bash","",[160,317,313],{"__ignoreMap":315},[17,319,320,321,324],{},"访问 ",[160,322,323],{"code":323},"http:\u002F\u002Flocalhost:4321","。",[168,326,327],{"id":327},"手动开发",[309,329,332],{"className":330,"code":331,"language":314,"meta":315},[312],"cd frontend\ncp .env.example .env  # 填你的数据库连接等配置\nnpm install\nnpx prisma generate\nnpx prisma db push\nnpm run dev\n",[160,333,331],{"__ignoreMap":315},[17,335,336,337,342],{},"数据库迁移和种子数据按 ",[36,338,341],{"href":339,"rel":340},"https:\u002F\u002Fwww.prisma.io\u002Fdocs",[40],"Prisma 文档"," 标准流程操作。",[13,344,345],{"id":345},"设计理念",[17,347,348],{},"这个项目从一开始就没打算做成「又一个笔记工具」或者「又一个 Wiki」。有几个核心设计决策贯穿始终：",[168,350,351],{"id":351},"为什么要用冰山图",[17,353,354,355,358],{},"冰山图天然适合呈现",[21,356,357],{},"认知梯度","。一篇长文可以讲一个话题，但读者很难直观感受到「我知道的只是皮毛」。冰山图把信息按层级排列 —— 水面之上是常识，往下每一层都在挑战读者的既有认知。这种形式本身就是一种叙事。",[17,360,361,362,365],{},"更重要的是，冰山图",[21,363,364],{},"鼓励探索而非灌输","。读者可以只看表层就走，也可以一路挖到底 —— 没有人强迫你读完。这种「按需深入」的节奏感，是传统文章做不到的。",[168,367,368],{"id":368},"为什么是社区驱动而不是单人创作",[17,370,371],{},"一个人的知识面再广也有限。Reddit 上那些经典冰山图之所以精彩，恰恰因为它们是多人贡献的 —— 论坛里你一句我一句，冰山就越堆越厚。把这种协作模式做成一个专门平台，让贡献变得结构化（而不是散在评论区里），是这个项目最核心的价值。",[373,374,375],"quote",{},[17,376,377],{},"冰山图不是让一个人写出百科全书，而是让一群人把各自知道的碎片拼成一幅完整的地图。",[168,379,381],{"id":380},"为什么选-astro-而不是纯-react-nextjs","为什么选 Astro 而不是纯 React \u002F Next.js",[17,383,384],{},"这个选择可能让一些前端朋友感到意外。说实话，一开始确实是用纯 React 写的原型，但很快发现两个问题：",[386,387,388,394],"ol",{},[49,389,390,393],{},[21,391,392],{},"首屏加载","：冰山图页面有大量内容（层级 + 条目 + 描述），纯 CSR 下首屏白屏时间太长。Astro 默认 SSR，首屏直出 HTML，体验好很多。",[49,395,396,399],{},[21,397,398],{},"内容为主","：冰山图本质上是一个「内容网站」，不是「应用」。Astro 的「岛屿架构」很适合这种场景 —— 大部分页面是静态内容，只有在需要交互的地方（编辑器、搜索、投票）才激活 React。",[13,401,402],{"id":402},"冰山编辑器是怎么做的",[17,404,405],{},"编辑器是整个项目最难的部分，也是我花时间最多的组件。说几个关键设计：",[168,407,408],{"id":408},"数据模型",[17,410,411],{},"每条冰山条目本质上是一棵树 —— 每层（Level）下面有多个条目（Entry），每个条目有标题、描述、图片、来源链接。存储时用 Prisma 的关系映射，一层层往下查就行。",[168,413,414],{"id":414},"拖拽交互",[17,416,417],{},"用的是原生 HTML5 Drag & Drop API，没有额外依赖。层级和条目都可以拖拽排序、拖拽移动位置。拖拽过程中维护一个乐观更新的状态，松手后才发请求持久化 —— 这样拖起来丝滑，不会一卡一卡的。",[168,419,421],{"id":420},"撤销-重做","撤销 \u002F 重做",[17,423,424],{},"实现了简单的 Command 模式。每次操作（新增、删除、移动、编辑）都会往一个操作栈里 push 一个可逆的命令对象。Ctrl+Z 就从栈里 pop 并执行 undo。这个功能看着简单，实测对编辑体验提升非常大 —— 敢随便拖、随便改，错了就后悔。",[168,426,428],{"id":427},"markdown-katex-渲染","Markdown + KaTeX 渲染",[17,430,431,432,435],{},"条目描述支持 Markdown（用 ",[160,433,434],{"code":434},"react-markdown","），公式用 KaTeX 渲染。做这个主要是为了让技术类冰山图能写得好看 —— 比如数学、物理、计算机相关的条目经常需要公式。",[168,437,438],{"id":438},"自动保存",[17,440,441],{},"编辑器每次变更后会设一个防抖定时器（2 秒），定时器触发时自动保存到后端。如果用户在保存前关闭页面，下次打开会提示「恢复未保存的草稿」。这个细节说实话花了不少心思，但能防止意外丢内容。",[13,443,444],{"id":444},"成就系统设计",[17,446,447],{},"成就系统最开始只是「加个好玩的东西」，后来发现它意外地有效 —— 很多用户为了解锁某个徽章会主动探索平台功能。目前有 151 种徽章，分四个稀有度：",[175,449,450],{},[46,451,452,458,464,470],{},[49,453,454,457],{},[21,455,456],{},"传说（Legendary）","：极难达成，比如「创建了 10 座冰山图且每座都通过审核」",[49,459,460,463],{},[21,461,462],{},"史诗（Epic）","：需要长期投入，比如「连续 30 天登录」",[49,465,466,469],{},[21,467,468],{},"稀有（Rare）","：特定行为触发，比如「第一次评论」「第一次投票」",[49,471,472,475],{},[21,473,474],{},"普通（Common）","：入门级，比如「完成注册」「浏览第一座冰山」",[17,477,478],{},"技术实现上，成就检查是事件驱动的 —— 当用户完成某个操作（创建、投票、评论等），后端会检查所有未解锁成就的条件是否满足。徽章的图标和描述在管理面板可配，不硬编码。",[13,480,482],{"id":481},"社区治理从-rbac-到-rfa","社区治理：从 RBAC 到 RfA",[17,484,485,486,324],{},"权限体系分了六层（USER → CONTRIBUTOR → EDITOR → MODERATOR → ADMIN → FOUNDER），但最核心的设计其实是 ",[21,487,488],{},"RfA（Request for Access，借鉴了维基百科的 RfA 流程）",[17,490,491],{},"普通用户想成为 EDITOR（可以审核和编辑他人提交），不是管理员手动给 —— 而是需要发起一个 RfA 申请，由社区投票表决。赞成票超过阈值且满足最低参与人数，自动晋升。",[17,493,494],{},"同理，如果 EDITOR 严重失职，任何 USER 可以发起弹劾。弹劾流程和 RfA 类似，只是反过来 —— 票数够了就降级。",[26,496,497],{"type":28},[17,498,499,502],{},[21,500,501],{},"为什么这样设计","：维基百科用这套机制跑了二十多年，证明是可行的。去中心化的权限管理比「管理员一人说了算」更能建立社区信任。",[13,504,505],{"id":505},"和同类项目的区别",[81,507,508,523],{},[84,509,510],{},[87,511,512,514,517,520],{},[90,513],{},[90,515,516],{},"冰山图宇宙",[90,518,519],{},"Reddit 冰山帖",[90,521,522],{},"Notion \u002F 飞书",[97,524,525,539,553,566,578],{},[87,526,527,530,533,536],{},[102,528,529],{},"结构化",[102,531,532],{},"✅ 原生层级 + 条目",[102,534,535],{},"❌ 靠排版模拟",[102,537,538],{},"✅ 数据库",[87,540,541,544,547,550],{},[102,542,543],{},"协作",[102,545,546],{},"✅ 多人实时编辑",[102,548,549],{},"❌ 只能评论",[102,551,552],{},"✅",[87,554,555,557,560,563],{},[102,556,209],{},[102,558,559],{},"✅ 投票 \u002F 成就 \u002F RfA",[102,561,562],{},"✅ 点赞 \u002F 踩",[102,564,565],{},"❌",[87,567,568,571,574,576],{},[102,569,570],{},"导出",[102,572,573],{},"✅ PNG 信息图",[102,575,565],{},[102,577,565],{},[87,579,580,583,586,588],{},[102,581,582],{},"开放性",[102,584,585],{},"✅ MIT 开源",[102,587,552],{},[102,589,590],{},"❌ 商业产品",[17,592,593],{},"简单说 ——Reddit 上做冰山图是「用工具凑合」，冰山图宇宙是「为这件事专门造了工具」。",[13,595,596],{"id":596},"未来计划",[17,598,599],{},"以下在 roadmap 里，但还没排具体时间：",[46,601,602,608,614,620],{},[49,603,604,607],{},[21,605,606],{},"多语言支持","：目前只有中文，计划加 i18n",[49,609,610,613],{},[21,611,612],{},"API 开放","：提供 REST API，让第三方可以嵌入冰山图",[49,615,616,619],{},[21,617,618],{},"联邦制","：支持自建实例之间互链（类似 Mastodon 的 ActivityPub）",[49,621,622,625],{},[21,623,624],{},"AI 辅助整理","：让 LLM 帮你从长文中提取关键信息、自动建议冰山层级 —— 这个是想想有意思的方向，但还没想清楚怎么做比较合理",[26,627,629],{"type":628},"tip",[17,630,631],{},"以上都只是计划，不构成承诺。这个项目目前是我一个人用业余时间维护，进度取决于我能挤出多少时间。",[13,633,634],{"id":634},"项目结构",[309,636,641],{"className":637,"code":639,"language":640,"meta":315},[638],"language-text","frontend\u002F\n├── src\u002F\n│   ├── components\u002F   # React 组件（冰山编辑器、词条弹窗等）\n│   ├── pages\u002F        # Astro 页面路由\n│   ├── layouts\u002F      # 页面布局\n│   ├── lib\u002F          # 工具库、认证、API 封装\n│   └── styles\u002F       # 全局样式\n├── prisma\u002F           # 数据库 Schema + 迁移\n├── public\u002F           # 静态资源\n│   ├── screenshots\u002F  # 项目截图\n│   └── readme-banner.svg\n├── docker-compose.yml\n├── Dockerfile\n└── astro.config.mjs\n","text",[160,642,639],{"__ignoreMap":315},[13,644,645],{"id":645},"贡献方式",[17,647,648],{},"项目完全开源（MIT 协议），欢迎参与：",[46,650,651,657,663,669,675],{},[49,652,653,656],{},[21,654,655],{},"创建冰山图","：直接在网站上用编辑器创建新主题",[49,658,659,662],{},[21,660,661],{},"编辑现有条目","：完善、修正或翻译已有内容",[49,664,665,668],{},[21,666,667],{},"提交代码","：Fork 仓库 → 创建分支 → 提交 PR",[49,670,671,674],{},[21,672,673],{},"报告问题","：在 GitHub Issues 提 bug 或功能建议",[49,676,677,680],{},[21,678,679],{},"创意提交","：在站内「创意池」提交想法，有感兴趣的人会认领实现",[13,682,683],{"id":683},"架构简图",[309,685,688],{"className":686,"code":687,"language":640,"meta":315},[638],"用户浏览器 ──→ Astro SSR ──→ React 组件（冰山编辑器\u002F词条弹窗\u002F搜索）\n                              │\n                              ├── Prisma ORM ──→ PostgreSQL\n                              ├── Better Auth ──→ 用户认证\n                              └── Orama ──→ 全文搜索索引\n",[160,689,687],{"__ignoreMap":315},[13,691,692],{"id":692},"写在后面",[17,694,695,696,699],{},"冰山图宇宙可以说是我写的第一个像样的全栈项目，从最开始的 idea → 原型 → 反复重写 → 到现在的版本，中间踩了不少坑也学了不少东西。它不只是一个「看冰山图」的网站 —— 我更希望它变成一个",[21,697,698],{},"由社区共同维护的知识仓库","。冷门话题、互联网史记、小众爱好、失传媒体…… 这些散落的信息如果能被系统地整理成冰山图，比零散的帖子有用太多。",[17,701,702],{},"有什么想法或想参与，直接来仓库找我或者站内留言。",{"title":315,"searchDepth":704,"depth":704,"links":705},4,[706,708,709,715,720,725,732,733,734,735,736,737,738,739],{"id":15,"depth":707,"text":15},2,{"id":79,"depth":707,"text":79},{"id":166,"depth":707,"text":166,"children":710},[711,713,714],{"id":170,"depth":712,"text":170},3,{"id":209,"depth":712,"text":209},{"id":246,"depth":712,"text":246},{"id":289,"depth":707,"text":289,"children":716},[717,718,719],{"id":292,"depth":712,"text":292},{"id":306,"depth":712,"text":307},{"id":327,"depth":712,"text":327},{"id":345,"depth":707,"text":345,"children":721},[722,723,724],{"id":351,"depth":712,"text":351},{"id":368,"depth":712,"text":368},{"id":380,"depth":712,"text":381},{"id":402,"depth":707,"text":402,"children":726},[727,728,729,730,731],{"id":408,"depth":712,"text":408},{"id":414,"depth":712,"text":414},{"id":420,"depth":712,"text":421},{"id":427,"depth":712,"text":428},{"id":438,"depth":712,"text":438},{"id":444,"depth":707,"text":444},{"id":481,"depth":707,"text":482},{"id":505,"depth":707,"text":505},{"id":596,"depth":707,"text":596},{"id":634,"depth":707,"text":634},{"id":645,"depth":707,"text":645},{"id":683,"depth":707,"text":683},{"id":692,"depth":707,"text":692},[741],"开发","2026-07-13 00:00:00","冰山图宇宙（Iceberg Universe）是一个以冰山图为核心的社区驱动知识平台 — 将话题按认知深度分层拆解，从大众常识到冷门深水区，人人可协作。",false,"md","https:\u002F\u002Fraw.githubusercontent.com\u002FGnix807\u002Ficebergs-1.0\u002Fmain\u002Fpublic\u002Fscreenshots\u002Fhomepage.png",{"slots":748},{},true,"\u002F2026\u002Ficebergs-guide",null,{"text":753,"minutes":754,"time":755,"words":756},"15 min read",14.615,876900,2923,[758,761],{"title":759,"link":760},"项目仓库","https:\u002F\u002Fgithub.com\u002FGnix807\u002Ficebergs-1.0",{"title":762,"link":38},"在线访问",{"title":5,"description":743},{"loc":750},"posts\u002F2026\u002FIcebergs-Guide",[767,768,769,770],"冰山图","开源","Astro","知识平台","tech","fKZnXFxUv2K9Qb5vqiL1isy9q4Z0e9JV8c14_LR2lis",[774,751],{"title":775,"path":776,"stem":777,"date":742,"type":771,"children":-1},"个人博客搭建全记录：从 Fork 到上线","\u002F2026\u002Fblog-build-record","posts\u002F2026\u002FBlog-Build-Record",1784029686991]