标签:
Markdown
??????????????
-
+
首页
??????????????
# 乌鲁克夜航:一块会发光的泥板 <div style="position:relative;overflow:hidden;padding:30px 32px;border-radius:30px;background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 42%,#f97316 100%);color:#fff;box-shadow:0 24px 72px rgba(15,23,42,.22);"> <div style="position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);filter:blur(4px);"></div> <div style="position:absolute;left:-30px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.10);filter:blur(2px);"></div> <div style="position:relative;z-index:2;"> <div style="font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.78;">Gilgamesh / Showcase / Clay Tablet UI</div> <h2 style="margin:14px 0 12px;font-size:38px;line-height:1.15;">让史诗、城墙、河风与霓虹同时发亮</h2> <p style="max-width:780px;margin:0;line-height:1.9;font-size:15px;opacity:.94;"> 这一页不是普通说明文,而是一块被重新点亮的泥板。 它把 <strong>标题、卡片、徽章、折叠块、代码、进度条、表格、时间线、注脚、键帽、渐变色块</strong> 全都揉进同一篇文章里,用来展示知识库编辑器在视觉表达上的上限。 </p> <div style="display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;"> <span style="padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);">Markdown 混排</span> <span style="padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);">原生 HTML 卡片</span> <span style="padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);">史诗感展示页</span> <span style="padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);">Fancy Demo</span> </div> </div> </div> --- > “如果城市也会做梦,那么乌鲁克的梦一定带着青金石的光、风掠过城墙的回声,以及夜色落在幼发拉底河上的蓝。” ## 01. 开场卡片墙 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 10px;"> <div style="padding:18px;border-radius:24px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;box-shadow:0 10px 24px rgba(59,130,246,.12);"> <div style="font-size:12px;color:#1d4ed8;letter-spacing:.16em;text-transform:uppercase;">City Pulse</div> <div style="margin-top:8px;font-size:30px;font-weight:800;color:#0f172a;">170</div> <div style="margin-top:8px;color:#475569;line-height:1.8;">城门火盆的亮度、巡夜铜铃的余波、风沿城砖掠过时留下的回响。</div> </div> <div style="padding:18px;border-radius:24px;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;box-shadow:0 10px 24px rgba(249,115,22,.12);"> <div style="font-size:12px;color:#ea580c;letter-spacing:.16em;text-transform:uppercase;">Moon Index</div> <div style="margin-top:8px;font-size:30px;font-weight:800;color:#7c2d12;">4 / 7</div> <div style="margin-top:8px;color:#7c2d12;line-height:1.8;">月亮还差三道刻痕才会升到最高点,预言者说,那时最适合写诗,也最适合起航。</div> </div> <div style="padding:18px;border-radius:24px;background:linear-gradient(135deg,#ecfeff,#cffafe);border:1px solid #a5f3fc;box-shadow:0 10px 24px rgba(6,182,212,.12);"> <div style="font-size:12px;color:#0891b2;letter-spacing:.16em;text-transform:uppercase;">Archive State</div> <div style="margin-top:8px;font-size:30px;font-weight:800;color:#164e63;">Stable</div> <div style="margin-top:8px;color:#155e75;line-height:1.8;">泥板经火烘烤之后,比一阵情绪更可靠,也比一次胜利更耐久。</div> </div> </div> ## 02. 今夜的编辑目标 - 用一篇文章把“知识库文档”伪装成“会发光的展厅”。 - 同时展示 Markdown 的自然排版能力和 HTML 的舞台效果。 - 让标题像史诗,段落像策展文案,卡片像产品页,细节又像博物馆标签。 - 让读者在滚动页面时,感觉自己不是在看资料,而是在穿过一条被月光照亮的长廊。 <div style="margin:16px 0;padding:16px 18px;border-left:4px solid #6366f1;border-radius:16px;background:#f8fafc;"> <strong>舞台提示:</strong> 现在可以把想象力按成快捷键 <kbd style="padding:2px 7px;border-radius:6px;border:1px solid #cbd5e1;background:#fff;">Ctrl</kbd> + <kbd style="padding:2px 7px;border-radius:6px;border:1px solid #cbd5e1;background:#fff;">K</kbd>, 然后将 <mark style="padding:0 6px;border-radius:6px;background:linear-gradient(90deg,#fde68a,#fca5a5);">一半史诗</mark> 与 <mark style="padding:0 6px;border-radius:6px;background:linear-gradient(90deg,#bfdbfe,#c4b5fd);">一半产品感</mark> 混在一起。 </div> ## 03. 一张不太正经的王国参数表 <table style="width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px;border:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(15,23,42,.05);"> <thead> <tr style="background:linear-gradient(90deg,#f8fafc,#eef2ff);"> <th style="padding:14px 16px;text-align:left;">模块</th> <th style="padding:14px 16px;text-align:left;">状态</th> <th style="padding:14px 16px;text-align:left;">色温</th> <th style="padding:14px 16px;text-align:left;">描述</th> </tr> </thead> <tbody> <tr> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">城门</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">已开启</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">琉璃蓝</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">适合把第一眼注意力稳稳锁在标题上。</td> </tr> <tr style="background:#fcfcff;"> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">神庙</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">微发光</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">冷月银</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">放置二级信息与安静说明最合适。</td> </tr> <tr> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">舟舰</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">风很大</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">亮橙金</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">负责制造一点“马上就要出发”的情绪。</td> </tr> <tr style="background:#fcfcff;"> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">泥板库</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">稳定</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">石墨灰</td> <td style="padding:14px 16px;border-top:1px solid #e2e8f0;">给长文、表格与代码一个可靠落点。</td> </tr> </tbody> </table> ## 04. 写给乌鲁克的四句 UI 文案 1. 城墙很高,高得足以挡住喧哗,却挡不住晨光。 2. 河水很慢,慢得像一段被精修过的滚动动画。 3. 青金石很亮,亮得像按钮悬停时那道恰到好处的边缘高光。 4. 王座很冷,冷得提醒人们所有权力都应该附带注释。 <details> <summary><strong>点开这块折叠泥板</strong>:查看一段深夜旁白</summary> 夜里两点,抄写员把最后一行字压进泥里。火盆缩成一小团,城外仍有风。没有人知道这篇文稿会不会被后人喜欢,但它至少已经学会了如何在页面里发光。 </details> ## 05. 小型进度舞台 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0;"> <div style="padding:16px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;"> <div style="font-weight:700;margin-bottom:10px;">史诗感浓度</div> <progress value="92" max="100" style="width:100%;height:14px;"></progress> <div style="margin-top:8px;color:#64748b;">已经非常接近“翻开就想截图”的状态。</div> </div> <div style="padding:16px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;"> <div style="font-weight:700;margin-bottom:10px;">信息密度</div> <progress value="74" max="100" style="width:100%;height:14px;"></progress> <div style="margin-top:8px;color:#64748b;">仍保留呼吸感,没有把页面压成一堵字墙。</div> </div> <div style="padding:16px;border-radius:18px;border:1px solid #e2e8f0;background:#fff;"> <div style="font-weight:700;margin-bottom:10px;">展示效果</div> <progress value="97" max="100" style="width:100%;height:14px;"></progress> <div style="margin-top:8px;color:#64748b;">很适合拿来演示编辑器的渲染层次与混排能力。</div> </div> </div> ## 06. 代码也是一种仪式 <pre style="padding:16px 18px;border-radius:18px;background:#0f172a;color:#e2e8f0;overflow:auto;"><code>city = { "name": "Uruk", "mood": "electric-dawn", "river": "Euphrates", "artifact": "lapis-lazuli", } for key, value in city.items(): print(f"{key}: {value}")</code></pre> <pre style="padding:16px 18px;border-radius:18px;background:#111827;color:#dbeafe;overflow:auto;"><code>{ "scene": "midnight-showcase", "palette": ["#0f172a", "#1d4ed8", "#f97316", "#f8fafc"], "effects": ["cards", "badges", "quote", "details", "table", "code"] }</code></pre> <pre style="padding:16px 18px;border-radius:18px;background:#1e293b;color:#f8fafc;overflow:auto;"><code>.hero-clay-tablet { border-radius: 30px; background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 42%, #f97316 100%); box-shadow: 0 24px 72px rgba(15, 23, 42, .22); }</code></pre> ## 07. 再来一点更温柔的细节 - 这里可以写 <sup>上标</sup> 和 <sub>下标</sub>。 - 这里可以写 <ruby>吉尔伽美什<rt>Gilgamesh</rt></ruby>。 - 这里可以写一行混合语句:**Ancient city, modern glow, same human heartbeat.** - 这里还可以放一个极短的注脚:月亮并不负责照明,它只负责让阴影更有层次。<sup style="color:#6366f1;">[月注]</sup> <div style="margin:18px 0;padding:18px;border-radius:22px;background:linear-gradient(135deg,#111827,#1f2937);color:#e5eefc;"> <div style="font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#93c5fd;">Night Memo</div> <div style="margin-top:10px;font-size:20px;font-weight:800;">“人类会反复建造城市,也会反复重写故事。”</div> <div style="margin-top:10px;line-height:1.9;color:#cbd5e1;"> 所以最好的展示页,不该只有信息,还应该有气氛;不该只有结构,还应该有节奏。 </div> </div> <div style="font-size:13px;color:#64748b;margin-top:12px;"><sup>[月注]</sup> 如果一篇展示文稿没有一点会发光的脚注,它多少会显得不够任性。</div> --- ### 收束 如果有人问,这篇文章到底想证明什么? 答案大概是:**一页 Markdown,不只是信息容器,也可以是一块有氛围、有光感、有节奏、还带一点戏剧性的舞台。**
??
Markdown
sprouts
吉尔伽美什史诗
2026年3月26日 15:11
转发
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接