分类: 外观

OINK 的外观定制建立在语义化 CSS 自定义属性之上：站点覆盖少量变量即可换肤，不需要复制主题的组件选择器。 本章内容 字体预设：七个语义字体角色与两个内置预设 样式覆盖：配色、布局与 Sass 变量 进阶定制：模板覆盖与站点自有组件 定制的优先级 从低到高： 主题默认值 预设（typography.preset） _variables_project.scss 里的 Sass 变量 _styles_project.scss 里的自定义属性覆盖 站点设置永远优先于预设默认值。

OINK 提供一套小而清晰的分层定制接口，站点不需要复制组件选择器，也不需要分叉主题。全部样式仍由 Hugo Extended 与 Hugo Pipes 处理，不引入 Node.js、npm、PostCSS、远程字体服务或浏览器端 preset 加载器。 本文记录正式支持的扩展点，以及第一组公开的语义 token：字体系统。颜色模式、代码高亮、导航栏与模板定制示例，参见外观与风格。 选择正确的定制层 优先使用能够表达需求的最高层接口： 层级 扩展点 适用场景 Hugo 配置 hugo.yaml …

OINK 在 Bootstrap 与 Docsy 基础上提供完整的视觉系统，并将字体、图标、样式和浏览器端代码全部本地化。使用方无需重建 Node 依赖树，就能通过设计变量和项目样式完成定制。 项目样式 Hugo Extended 通过 Hugo Pipes 编译主题 SCSS。项目覆盖项会进入同一个资源包，因此生产构建可以对一份同源样式表完成压缩、指纹和完整性校验。 项目样式文件 在站点的 assets/scss/ 目录中覆盖以下文件： 文件 用途 …

OINK 把字体选择收敛到七个语义化 CSS 自定义属性之后。站点覆盖这些角色即可换字体，不需要知道主题内部用了哪些选择器。 整套机制由 Hugo 在构建期编译进同一份静态样式表：不引入 JavaScript、不请求远程字体服务、不需要运行时预设加载器。 两个内置预设 hugo.yaml YAML params: ui: typography: preset: technical # technical | system 预设 效果 technical 默认值。保留 Chakra Petch 与 …