Aurora 主题深度解析：从 SCSS 设计 token 到 Blade 模板

ipanel-cli 2026-06-19 41

InnoCMS 自带主题永远是为演示设计的，企业官网需要一套能精细控制品牌色、字号、SEO meta 的主题。本文以 Aurora 为案例，拆解主题目录结构、SCSS 设计 token、资源编译机制、Blade 继承与 hook 集成，给想自己写主题或二次开发的人一张地图。

任何 CMS 都自带一套默认主题，但默认主题永远是给演示用的，不是给生产用的。InnoCMS 自带的默认主题完成度足够展示功能，可一旦真要拿去做企业官网，就会立刻撞上几个问题：品牌色对不上、字号偏大、移动端排版粗糙、SEO meta 没法精细控制。Aurora 就是为这些场景写的。

这篇文章把 Aurora 主题从目录结构到资源编译拆开讲清楚，给后面想自己写主题或二次开发的人一张地图。

设计哲学：极简 + Swiss Style

Aurora 的视觉锚点就两条：天蓝 #0EA5E9 + 橙色 #F97316，前者管品牌识别、后者管 CTA。其他所有颜色（背景、文字、边框）都从这两个原色衍生出来，通过 CSS 变量统一管理。这样改主题色只需要动两个变量，全站自动联动。

排版上走 Swiss Style —— 大量留白、强网格、信息密度低、字重对比鲜明。代价是页面会显得"稀"，但企业官网需要的就是这种"看起来很贵"的稀。

主题目录结构

Aurora 的目录组织遵循 InnoCMS 的主题规范，所有资源分得清清楚楚：

config.json —— 主题元信息（名称、版本、作者、缩略图）
views/ —— Blade 模板，按页面类型分子目录（articles/catalogs/pages/tags/layouts）
assets/scss/ —— SCSS 源码，按职责拆分（abstracts/base/layout/sections/pages/utilities）
assets/js/ —— 前端 JS（导航、滚动、表单）
public/ —— 编译后的静态资源，gitignore 掉
lang/ —— 主题级翻译文件
demo/ —— 演示数据（首次安装时 seed 用）

关键约定：views/layouts/app.blade.php 是根布局，所有具体页面都 @extends('layouts.app')。这样改一处布局，全站统一生效。

SCSS 设计 Token 系统

所有视觉变量集中在 assets/scss/abstracts/_variables.scss：

:root {
  --aurora-primary: #0EA5E9;
  --aurora-cta: #F97316;
  --aurora-text-heading: #082F49;
  --aurora-text-body: #475569;
  --aurora-bg: #FFFFFF;
  --aurora-bg-alt: #F8FAFC;
  --aurora-border: #E2E8F0;
  --aurora-radius-lg: 20px;
  --aurora-shadow: 0 4px 12px rgba(12,74,110,.06);
  --aurora-transition: .25s cubic-bezier(.4,0,.2,1);
}

所有组件 SCSS 引用这些变量而不是硬编码颜色。这意味着 —— 改 --aurora-primary 一个值，全站按钮、链接、高亮、icon 全跟着变。这是主题可维护性的根基。

资源编译：THEME 环境变量是关键

这是踩过最隐蔽的坑。npm run prod 编译的是 InnoCMS 默认 front 资源，不会编译主题目录里的 SCSS。主题编译必须带 THEME 环境变量：

THEME=aurora npm run build

这条命令会扫描 themes/aurora/assets/，把 SCSS 编译成 CSS 输出到 public/themes/aurora/css/。如果改完 SCSS 发现页面没变化，第一步永远是检查 public/themes/aurora/css/app.css 的 mtime 是不是刚刚 —— HTTP 200 完全不能说明 CSS 更新了。

打包脚本（build.js）做了三件事：扫描主题目录、调用 sass 编译、加版本号 hash 写入 public。Blade 模板通过 theme_asset('css/app.css') 引用，自动带 ?v=timestamp 缓存破坏。

Blade 模板继承与 Hook 集成

每个主题页面都遵循三层结构：layouts/app.blade.php 提供骨架（HTML/head/nav/footer），具体页面 @extends 它并填 @section('content')。插件要往页面里插东西，不直接改主题文件，而是通过 hook：

// 在插件 Boot.php 里
listen_blade_insert('layouts.footer.top', function () {
    return view('YourPlugin::component');
});

主题里只需要在对应位置写 @hookinsert('layouts.footer.top')，插件的内容就会自动渲染进去。这样主题升级不会冲掉插件的二次开发。

写在最后

把 Aurora 当模板，可以快速派生出任何风格的子主题：复制目录、改 _variables.scss 里的颜色 token、改 config.json 的名字、用 THEME=<new-name> npm run build 编译 —— 一个新主题就上线了。后续文章会拆 hook 系统和插件开发，把"二次开发"这条路彻底打通。