推荐:锁定一个版本
/v0.1.2/… 的内容不会改变,页面也不会因为库发布新版而突然变化。准备升级时,只需更换 URL 中的版本号。
<link rel="stylesheet"
href="https://style.moesegfault.dev/v0.1.2/css/all.css">DISTRIBUTION
把需要的材料带回去:有构建工具,就安装 npm 包;写静态页面,就引用 CSS。正式项目锁定版本,把升级的时机留在自己手里。
Asset map
| 资源 | 固定版本 URL | 什么时候使用 |
|---|---|---|
| 全量样式 | https://style.moesegfault.dev/v0.1.2/css/all.css | 最省事:一次引入完整视觉样式 |
| 设计令牌 | https://style.moesegfault.dev/v0.1.2/css/tokens.css | 只使用颜色、间距、圆角等 CSS 变量 |
| 基础样式 | https://style.moesegfault.dev/v0.1.2/css/foundation.css | 需要主题和基础排版,不需要组件外观 |
| 组件样式 | https://style.moesegfault.dev/v0.1.2/css/components.css | 已经引入基础样式,只补充组件外观 |
| Token JSON | https://style.moesegfault.dev/v0.1.2/tokens/tokens.json | 在应用或构建脚本中读取解析后的令牌 |
| DTCG JSON | https://style.moesegfault.dev/v0.1.2/tokens/tokens.dtcg.json | 导入支持 DTCG 的设计或转换工具 |
Choose a path
/v0.1.2/… 的内容不会改变,页面也不会因为库发布新版而突然变化。准备升级时,只需更换 URL 中的版本号。
<link rel="stylesheet"
href="https://style.moesegfault.dev/v0.1.2/css/all.css">/css、/tokens 和 /colors 会自动跟随最新稳定版。颜色页面位于 /colors,CSS 和 JSON 可直接使用对应文件地址。
<link rel="stylesheet"
href="https://style.moesegfault.dev/css/all.css">/latest/… 始终跟随最新稳定版,适合示例、个人页面和愿意自动接收更新的项目;重要应用更建议锁定固定版本。
<link rel="stylesheet"
href="https://style.moesegfault.dev/latest/css/all.css">正式项目优先使用 /v0.1.2/…;原型和展示页可以使用 /latest/…。 浏览器和边缘缓存可能让 latest 的更新稍晚出现,这不会影响固定版本地址。
Versions
打开根目录的 /manifest.json,即可找到所有可用版本及其清单地址。
确认新版本符合需要后,把 URL 中的版本号替换为目标版本即可。
每个精确版本都会独立保留;暂时不升级的页面可以继续使用原地址。