概述
TTB 是一款面向长期内容运营的 WordPress 块主题（Block Theme），以全站编辑（FSE）为架构基座，覆盖博客、专栏、说说、简讯、专题、访客墙等内容形态。本站自 2024 年 6 月上线，2025 年 3 月简讯栏目开张；2026 年 8 月底启动系统化重构，遵循「小步快跑、逐项验证」的发布纪律，截至 0.8.0 已累计迭代一百余个版本。
主题的设计立场可以概括为三点：结构语义化——页面由区块与设计令牌构成，样式与内容分离，模板即文档；工程轻量化——不引入构建链与前端框架，交付物即运行时，源码可直接审计；维护可持续——从页面模板到页脚菜单，全部开放为站点编辑器内的标准区块，交付后无需改代码即可持续演进。三次立场贯穿全部一百余个版本的每一次取舍：能以令牌解决的，不写死样式；能由数据驱动的，不做硬编码；能交给编辑器的，不留在代码里。
架构设计
主题采用分层架构：模板层（FSE 模板与零件）负责页面结构；区块层提供数据驱动的动态区块，每个区块带独立渲染回调与缓存策略；框架层以特性类组织业务逻辑，按需加载、互不耦合；令牌层统一输出设计变量，供以上三层消费。各层职责单一、边界清晰，二次开发可以按层介入而不必通读全局。
- 动态区块体系——内置 21 个服务端渲染区块：说说时间轴、简讯流、专题目录、专题 Hero、访客墙、归档时间轴、热搜榜、编辑推荐、相关文章、标签云、随机推荐、广告位等，数据计算在服务端完成，前端零计算；
- 特性类组织——说说、专题、文章统计、模板选择器、头部工具、导航同步、输出优化等能力以独立类封装，单一职责，注册即用；
- 无构建链交付——除语法高亮组件外全部脚本为原生 JavaScript，不依赖 jQuery 与打包工具，源码即产物，任何文本编辑器可直接审阅；
- 数据纪律——全站无硬编码链接与写死的栏目结构，导航、页脚菜单均为 wp_navigation 导航区块，栏目目录、热榜、访客墙全部由真实数据实时驱动；
- 站点编辑器原生支持——页头、页脚、全部页面模板均为标准块标记，所见即所得地维护，主题升级不覆盖站点自定义。
设计系统
样式系统建立在设计令牌之上：色彩、字号、间距、圆角、阴影全部收敛为 CSS 变量，由后台设置驱动输出，组件层只消费令牌、不定义视觉。页面垂直节奏使用统一的呼吸单元，水平留白使用统一的页面壳模型——列表、文章、专题、搜索、关于等全部页面共用同一套留白公式，后台调整主体宽度，全站页面同步响应，杜绝逐页修补。
- 字号体系——正文 16px、行高 1.9，标题按层级固定档位；宽屏阶梯下根字号 17/18px 整体缩放，比例关系不变；
- 圆角语义刻度——四档语义半径（sm/md/lg/xl）按组件语义自动分配，后台一个总开关切换直角与圆角风格，全站联动；
- 卡片语言——卡皮底色、阴影、圆角均为令牌，说说卡、热点卡、访客卡、推荐卡共享同一套表面语言，视觉密度靠间距节奏而非边框区分；
- 质感层——可选噪点、纸质、玻璃拟态三种质感，统一叠加于卡片层，不散落在单个组件里。
暗色模式
暗色模式与亮色共用同一套令牌体系，支持亮色、暗色、跟随系统三档切换，选择本地记忆。切换不依赖补丁式覆盖：半透明令牌、阴影档位、主色明度均在令牌层定义暗色取值，组件层零感知——新增组件只要使用令牌，暗色自动成立。首帧按系统偏好判定明暗，避免暗色用户在亮色主题上闪白。
色彩决策经过对比度审计：次要文本在灰底与深底上的可读性按 WCAG 标准逐档校正（次要灰脱离主色衍生，固定中性灰取值），不以「看起来还行」作为验收口径。
品牌配色系统
内置十二套品牌种子色，每套仅维护一个种子值，全族色板（强调、悬停、浅底、边线）由同一推导公式计算生成，推导误差经过校准。自定义模式下以用户主色为种子走同一公式，保证任意配色下的层级关系与可读性一致——换一套配色，等于换一套完整而自洽的色板，而非只换一个主色。
站点 LOGO 通过 SVG 内联与 currentColor 机制统一接管描边与填充：亮色跟随主色、暗色自动转白，线性与面性图标同样覆盖；LOGO 动效以 CSS 关键帧实现，并尊重系统减少动效偏好。
内容形态与功能矩阵：说说、简讯、专题与访客墙
- 说说——微博式时间轴：富文本约定支持成对标记的代码围栏（行号栏、语言角标、语法高亮、一键复制）与独立媒体链接自动嵌入；九宫格图组按 1 至 9 张各有确定版式，灯箱查看原图；长列表分批折叠加载，支持点赞互动；
- 简讯——按日分组的行业速览流：撕页日历卡日期组头滚动钉住，当日条目数驱动取数，节点、标题、时间三列严格对齐，暗色令牌自动跟随；
- 专题——专题目录页与专题 Hero 区块，独立 /topic 路由；薄内容专题自动 noindex，归档页补齐 canonical 与描述，不产生搜索引擎噪音；
- 访客墙——按评论活跃度自动计榜，Top 6 头像上墙，相对时间显示，榜单独立缓存；
- 归档与标签——月历卡时间轴归档、标签聚合页与自适应芯片墙，单页栏目标题使用统一组件；
- 搜索——通栏渐变搜索区、本站热词（纯站内来源）、粒子背景动效，支持仅匹配标题的精准模式。
交互与动效
动效遵循克制原则：只在有信息意义的位置出现，时长与幅度全站统一收敛，并提供系统级减少动效降级。图片灯箱全站共用一套配方——统一的磨砂强度、关闭按钮与打开动画，任何新增媒体入口自动继承；代码块复制提供图标化按钮与吐司反馈，复制结果即时确认。
本页左侧的锚点目录由滚动位置实时驱动高亮（scrollspy），同步 aria-current 语义，是主题内交互组件的标准实现范式：无 JavaScript 时优雅降级为可点击的静态目录。
性能工程
- 资源版本化——静态资源以文件 mtime 作为版本号，改版即时生效且长缓存安全，无需手动清缓存；
- 按需加载——区块样式与脚本仅在对应功能出现时入队，头部冗余输出清理，首屏只承载首屏需要的代码；
- 服务端缓存——访客墙、热榜等计算型区块使用瞬态缓存并按维度分键，内容更新即时失效；计数类交互走 AJAX 增量更新，不整页刷新；
- 媒体策略——首图外强制懒加载，骨架屏以纯 CSS 合成器动画实现，零重绘零脚本；
- 无第三方运行时——除语法高亮组件外不引入任何前端框架，脚本总量可控，弱网环境可用。
可访问性与国际化
主题将可访问性纳入验收流程：正文对比度按 WCAG AA 口径校正，交互组件补齐 aria 属性与键盘路径，动态高亮同步 aria-current 语义，焦点可见性全站统一。可点击与不可点击在色彩语言上严格区分，避免「灰得像禁用」的歧义态。
国际化采用前端即时翻译方案：可选语种经翻译接口实时切换，服务端保持中文输出，兼顾多语言访客与搜索引擎收录；固定译法通过术语表管理，品牌词与专业词不受机翻影响；切换过程带防闪处理，不出现内容跳动。
后台管理
主题设置面板覆盖十个分区：基本、首页、列表、文章、SEO、广告位、自定义代码、维护模式、配图与页脚，从品牌配色、主体宽度到社媒链接、备案信息均可视化配置；每项设置即时传导到前台令牌层，所见即所得。
站点编辑器承担模板与导航维护，页面模板选择器支持按栏目绑定版式；文章编辑器内置「穿马甲」原生面板，可为单篇文章指定虚拟作者。日常运营中的高频调整——换配色、调宽度、增删菜单、管理广告位、切换维护模式——均无需触碰代码。
版本演进
以下为 2026 年 8 月底系统化重构以来的重要节点，每个节点对应一次可回溯的迭代批次：
- 2026.08.31——重构启动：目录规范化，配色体系推导化（84 个色值收敛为种子色加推导公式），建立变量对账与安全部署规约；
- 2026.09.01——模板机制：栏目绑定模板落地，列表三形态（横排、竖排、混排）；
- 2026.09.02——导航区块化：页头页脚改用导航区块后台可编辑，全站硬编码链接清零并以检索对账收尾；
- 2026.09.04——视觉基座：页头毛玻璃固定导航、LOGO 内联 SVG 体系、品牌色全量重排、列表三段式与文章统计；
- 2026.09.05——创作者功能：马甲（虚拟作者）模块、搜索浮层与明暗三态切换；引入安全、性能、UI 三视角评审；
- 2026.09.08——系统收敛：语义圆角刻度、CSS 架构收敛为底座加主题两层、两列骨架与边栏五模块、摘要链路三轮压测定稿；
- 2026.09.09——数据化能力：热榜五档时间窗（35 天滚动日账）、随机推荐池化轮换、边栏视觉极简定稿、字体死配置全清；
- 2026.09.11——首页楼层化：楼层块与后台楼层配置，点阵聚光动效定稿；
- 2026.09.12——专题机制：/topic 独立路由、薄专题 noindex、SEO canonical 补全；
- 2026.09.13–15——多语言续翻防闪、字号体系与阅读进度轨、首批专项审计修复；
- 2026.09.20–21——信息架构定纲：全站页面壳、统一留白模型与呼吸单元；说说、专题、访客墙立项；
- 2026.09.22——内容形态落地：说说图格规则、撕页日历卡、弹层统一配方、搜索 Hero、页脚社媒体系；
- 2026.09.23——精修与深审：搜索动效十余轮定稿、说说媒体融合重构、专家团五席全员深审修复；
- 2026.09.24——收束：页脚导航区块化、关于页分栏锚点导航（即本页），版本 0.8.0。
联系我
如果你在主题的使用、集成或二次开发中遇到问题，或希望就 WordPress 建站、内容运营、主题定制展开交流，欢迎通过以下方式联系：
- 邮箱——ttheme@qq.com，任何事宜均可，通常在一个工作日内回复；
- 微信——tttheme，添加时请备注来意（如「TTB 主题」），便于更快对接。
- 主题官网——https://tttheme.com，主题介绍、更新记录与发布信息。
定制开发、批量部署与长期合作类需求，建议优先使用邮件并附上场景说明（站点规模、期望功能、时间预期），便于评估与跟进。