| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Flow Diagram</title> |
| 3 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 4 | <link rel="stylesheet" href="../../assets/base.css"> |
| 5 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css"> |
| 6 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 7 | <style> |
| 8 | .flow{display:flex;align-items:center;gap:16px;margin-top:40px;max-width:1200px} |
| 9 | .flow .node{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);position:relative} |
| 10 | .flow .node .ic{font-size:32px;margin-bottom:6px} |
| 11 | .flow .node h4{font-size:16px} |
| 12 | .flow .node p{font-size:12px;color:var(--text-3);margin:0} |
| 13 | .flow .arr{color:var(--text-3);font-size:28px;flex-shrink:0} |
| 14 | .flow .node.hl{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow)} |
| 15 | </style> |
| 16 | </head><body class="single"> |
| 17 | <div class="deck"><section class="slide is-active" data-title="Flow"> |
| 18 | <p class="kicker">Pipeline · 渲染管线</p> |
| 19 | <h2 class="h2">从 Markdown 到 PNG，共 5 步</h2> |
| 20 | <div class="flow anim-stagger-list" data-anim-target> |
| 21 | <div class="node"><div class="ic">📝</div><h4>Markdown</h4><p>你的内容源</p></div> |
| 22 | <div class="arr">→</div> |
| 23 | <div class="node"><div class="ic">🧩</div><h4>Layouts</h4><p>选择页型</p></div> |
| 24 | <div class="arr">→</div> |
| 25 | <div class="node hl"><div class="ic">🎨</div><h4>Theme</h4><p>换装</p></div> |
| 26 | <div class="arr">→</div> |
| 27 | <div class="node"><div class="ic">🌐</div><h4>HTML</h4><p>运行时接管</p></div> |
| 28 | <div class="arr">→</div> |
| 29 | <div class="node"><div class="ic">📸</div><h4>PNG</h4><p>headless Chrome</p></div> |
| 30 | </div> |
| 31 | </section></div> |
| 32 | <script src="../../assets/runtime.js"></script> |
| 33 | </body></html> |
| 34 |