加载中...
STYLE I/O

风格输入输出台

全站设计令牌的总账房:把当前风格收成一段 yaml 带走,或把一段 yaml 灌回本浏览器——没有任何旋钮,旋钮都在各功能分页。站名去 站名页,正文字体去 正文页,标题字体与字号去 标题页,列表形态去 列表页,首页导引去 导引页,首页布局去 布局页,看板娘上岗去 看板娘页,追番卡去 追番页——风格台只住在本页,各分页只管各自的旋钮与「应用」。返回 Playground。

与主站排版的联动

数据链一条到底:注册表 tokens.json(单一数据源)→ 构建期 scripts/design-tokens.js 往每页 <head> 注入内联 boot,读 localStorage 校验后先于渲染把值写到 <html> 上(无闪动),并生成 /css/tokens-defaults.css 兜底无 JS 场景 → CSS 变量(--mc-font-body、--mc-font-display、--mc-h1、--mc-h2、--mc-hero-font)与 data 属性(data-mc-hero-glow、data-mc-hero-candy、data-mc-home-list、data-mc-l2d)→ 四路消费端:① source/css/tokens.css——§1 采纳正文字体(body、.post-content p/li、.recent-post-item .article-meta、.card-widget .item-content),§2 首页 editorial 闸门(#recent-posts);② post-layout.css / note-layout.css 的 var()——文章标题 clamp(calc(var(--mc-h1)×0.765), 5vw, var(--mc-h1))、笔记标题 ×0.65、年份水印固定 7rem 不缩放;h2 var(--mc-h2)、文章 h3 ×0.84、笔记 h4 ×0.8;③ anime-theme.css 站名字体栈 var(--mc-hero-font) + site-polish.js(宽字体自动收号、糖果逐字母 span);④ source/js/tokens-apply.js 读 data-mc-l2d 热切换看板娘(顶层 oml2d 实例 loadModelByIndex,索引按正式名单=过滤 research 重算)。

本台是这条链上唯一的提取与回灌口:全部令牌的现值只有这里能收成 yaml 带走,也只有这里能把一段 yaml 灌回 localStorage——分页控制台试穿、动作条应用、本台搬运,三者读写同一份存储、走同一条写路径,永不漂移。「导入 yaml / 重置全站默认」当即写 <html>,本页立见;其余页面刷新后由 boot 应用;URL 直达不持久化,拿来验收。

avatar
Martian Cats
个人博客,记录生活与技术点滴。
Follow Me
最新文章
网站信息
文章数目 :
27
本站访客数 :
本站总浏览量 :
最后更新时间 :