?????????????? - 标签：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，不只是信息容器，也可以是一块有氛围、有光感、有节奏、还带一点戏剧性的舞台。**