Raw 政策

Raw 是 Beautiful Article 的关键表现力，但必须受主题和文章性约束。写 Raw 前先读选定主题的 theme-profiles/<id>.md 的 Raw 风格。

Raw 是完整的 Web 平台，不是"画 SVG"

Raw 里可以写任意 HTML / CSS / JS / React 组件 —— 整个 Web 平台都在你手里。 SVG 只是 其中一种手段，绝不是默认或唯一。别把 Raw 想成"内联画图"，那会严重限制网页的想象力。按"哪种媒介最能讲清这一段"自由选择，例如：

交互：拖动条 / 切换 / 折叠 / 步进器 / 计算器 / 小型可调模型 / 假设演算。
布局排版：并排对比、时间线、卡片网格、分栏、引文大字、特殊标题节奏（用 HTML + CSS）。
动效：CSS transition / @keyframes / 滚动揭示 / 状态切换的动画。
数据可视：HTML/CSS 条形与热度、<canvas>、需要时才用 <svg> 折线 / slopegraph。
嵌入与组合：表格 + 控件 + 文本拼成的一次性小工具、可复制片段、对照面板。

判断只问一句：哪种实现最能服务这一段的理解 / 论证 / 节奏？ 用那个，而不是反射性地画 SVG。

核心心法

为 THIS 篇文章手写，不是 widget 库。 每块 Raw 都应为它旁边的段落即时发明：写 token 成本？现写一个小拖动条；写两套方案？拼一个并排对照面板；写体积趋势？才考虑一条内联折线。绝不把 Raw 做成一套固定小组件在文章间复用（同一条 pipeline / 同一套配色到处出现）—— 那等于把自由层退化成又一组受限组件。
自由但一致：用 token。 Raw 内部随便写 —— 任意 HTML / React 组件、<style> 与 @keyframes、行内样式、<canvas>、按需的 <svg>、一次性小交互 —— 但颜色 / 字体 / 间距必须取自主题变量（var(--ra-color-accent)、var(--ra-font-body)、var(--ra-space-4) …），这样每块都独一无二却又随主题切换。

允许

任意服务段落的 HTML / CSS / JS / React：轻量交互解释、可调小工具、自定义布局与排版、并排对比、概念动效、阅读节奏中的视觉停顿，以及按需的 SVG / canvas 图解 —— 都是为当前段落定制的一次性实现。

禁止

复杂表单、拖拽工作台、完整 dashboard、产品原型、和文章无关的动画、独立于主题的配色、复用固定小组件冒充自由表达。

下面只是几种常见手段（SVG / CSS 动画 / React 交互），不是穷举也不是优先级。布局、排版、对照面板、<canvas>、嵌入式小工具同样都行 —— 按"最能讲清这一段"来选。

// 1) 需要曲线时，才为这个数据点手画一条内联 SVG（不是默认手段）
<Raw title="构建体积走势">
  <svg viewBox="0 0 300 80" width="100%">
    <polyline points={pts} fill="none" stroke="var(--ra-color-accent)" strokeWidth="2" />
  </svg>
</Raw>

// 2) 带一次性 CSS / @keyframes 的 HTML 字符串（内联进产物）
<Raw html={`
  <style>@keyframes ra-rise{from{height:0}to{height:var(--h)}}</style>
  <div style="display:flex;gap:8px;align-items:flex-end;height:80px">
    <i style="--h:60%;flex:1;background:var(--ra-color-accent);animation:ra-rise .6s ease"></i>
    <i style="--h:90%;flex:1;background:var(--ra-color-accent);animation:ra-rise .8s ease"></i>
  </div>
`} />

// 3) 只为这篇文章定义的一个小交互组件
function TokenScale() {
  const [n, setN] = useState(50);
  return (
    <div>
      <input type="range" value={n} onChange={(e) => setN(+e.target.value)} />
      <span style={{ color: "var(--ra-color-accent)" }}>{n}%</span>
    </div>
  );
}
<Raw title="拖动感受差距"><TokenScale /></Raw>

整篇文章里变化这些 —— 不同媒介、不同布局、不同交互 —— 让没有两块 Raw 看起来一样。变化是好的，违反主题气质不行：tufte 的 Raw 不该变成发亮营销 dashboard，press 的 Raw 不该变成冷霓虹终端（除非主题 md 明确允许）。

Raw 自检

这块 Raw 删掉后，文章理解是否会变差？
它服务哪一个段落 / 论点？
它是否使用 --ra-* token？是否符合主题 md？
它是否让文章更像应用？（如果是，砍掉或收敛成服务阅读的解释性视觉 / 排版）

4.4 KiB Raw Blame History Unescape Escape

Raw 政策

Raw 是完整的 Web 平台，不是"画 SVG"

核心心法

允许

禁止

Raw by example（每次现写，别复用固定 widget）

Raw 自检

4.4 KiB

Raw Blame History