3.2 风格常量与配色方案

> 主色、字号、图片路径改成后台可调项，不动一行模板代码。

套系和风格是两件事

先把两个词分清，后面所有操作都靠它：

  • 模板套系：一整套模板代码，目录是 template/{标识}/，换套系等于换掉整个页面的 HTML 结构。
  • 模板风格：套用同一套系代码、只改变量设置的方案。同一套系下可以并存多套风格，换风格不换 HTML。

打个比方：套系是房子的户型图，风格是墙纸和窗帘。同一个户型你想挂米色还是灰绿色，不必重新画图，只需要换风格。这一篇讲的全部内容都发生在"风格"这一层，不涉及 HTML 改动。

风格常量：把写死的值变成可配项

Discuz! 把界面里那些"每站不一样"的量抽成一组常量，后台风格页里以 {花括号} 框选展示的那批，都能在模板和 CSS 里直接引用：

常量 含义 PHP 侧的对应值
{IMGDIR} 界面基础图片目录 $_G['style']['imgdir']
{STYLEIMGDIR} 扩展图片目录 $_G['style']['styleimgdir']
{FONTSIZE} 基础字体大小 形如 {FONTSIZE}:12px/1.5
{BGCOLOR} 页面背景色 $_G['style']['bgcolor']
{FONTCOLOR} 文字颜色 $_G['style']['fontcolor']
{LINKCOLOR} 链接颜色 $_G['style']['linkcolor']
{BORDERCOLOR} 边框色 $_G['style']['bordercolor']
{LOGO} Logo 图片 $_G['style']['logo']

X2 之后模板里不再直接写 {IMGDIR} 这种老写法，取值统一走 $_G['style']，例如：

<img src="{$_G['style'][styleimgdir]}/btn_reply.png" alt="" />

{FONTSIZE} 是最省事的一个，它带的是一整串"字号/行高"，所以不能直接塞进属性值，要和字体名拼：

<body style="font:{FONTSIZE} Tahoma,Verdana,sans-serif">

要注意的是：常量只在模板和被模板驱动的样式上下文里生效。写在自己的 .php 业务文件里时，必须用 $_G['style']['xxx'] 取，直接写常量名会当成未定义常量。

两类图片目录别混用

目录 放什么 特点
界面基础图片目录（{IMGDIR}） 跟随内核版本的图标、按钮、圆角、序号条 换套系时要换，默认风格里是 static/image/common
扩展图片目录（{STYLEIMGDIR}） 你自己的 logo、背景、品牌图 属于你的风格，切风格跟着切

分界线很清楚：和内核功能绑定的图归 {IMGDIR}，和你的品牌绑定的图归 {STYLEIMGDIR}。把自家 logo 塞进基础图片目录，等于让内核目录背你的品牌包袱，换套系时它跟着一起被换掉。

两个路径都在后台 → 界面 → 模板风格里配置，配置完记得更新缓存。

默认配色 vs 扩展配色

配色分两种，作用完全不同：

默认配色 扩展配色
文件 无独立文件，直接用风格页填的值 template/{标识}/style/{目录}/style.css
生效条件 后台风格页填的变量本身 后台在"扩展配色"里选中该目录
数量 一套 可并列多套，站点可切换
适合 站点主色调 深色/浅色、品牌 A/品牌 B

扩展配色的写法很简单，就是在目录里放一个 style.css，用上面那些常量把常用色值重新落一遍：

/* template/{标识}/style/t1/style.css */
body { background: #F2F5F8; color: #333333; }
.pg a { color: #2B8FD4; }
.pg a:hover { color: #1B6FB0; }
.wp, .area { border-color: #DDE3E9; }
.t_fsz, .t_fsz14 { font-size: 12px; }

{t1} 只是目录名，可以自己叫 dark、blue、brand-b——习惯上第一个扩展配色用 t1，后面依次 t2、t3。

换配色不改套系：完整操作步骤

想给论坛加一套深色主题，同时保留原来的浅色，流程是这样：

  1. 复制浅色那套的文件作起点：cp -r template/你的标识/style/t1 template/你的标识/style/t2；
  2. 改 t2/style.css，只改颜色和字号相关属性，不要碰布局属性（宽度、间距、浮动），那些是套系的事；
  3. 需要为深色单独配图时，把图放进扩展图片目录下的 t2/ 子目录，别去覆盖 t1 的；
  4. 后台 → 界面 → 模板风格 → 扩展配色，填 t2（填的是相对套系根目录的路径，不带前导斜杠）；
  5. 更新缓存，前台出现切换入口，用户在风格面板里切换。

第 2 步的边界是最容易越的地方。深色不是"把所有颜色反过来"，很多站点的深色配色做到最后布局全乱，就是因为顺手在配色文件里调了宽度。配色文件只管颜色。

风格常量用错了的几个症状

症状 原因 处理
CSS 里常量原样显示成文字 常量写在纯 .css 文件里，而 CSS 文件不经过模板解析 在模板里输出一个 style 块，或改用 extend_common.css 里的固定值
图片 404 {STYLEIMGDIR} 与 {IMGDIR} 用反了 核对后台两个目录配置值
改了配色不生效 扩展配色没选中，或没更新缓存 后台重新选择后更新缓存
不同用户看到不同主色 这是正常的，风格面板就是干这个的 需要统一就在后台锁定默认风格

第三条特别常见。配色文件的加载本身没有独立缓存钩子，改完必须走一次后台的更新缓存，和改模板后的流程一样。

一个小提醒：风格与开发者模式

风格页的一些高级项（比如扩展配色路径、模板变量配置）在开启开发者模式后才完整显示。config/config_global.php 末尾加一行 $_config['plugindeveloper'] = 1; 之后进后台，模板列表会出现"设计"按钮，风格项也会全部露出来。做定制之前先把这行加上，省得你怀疑某个选项不存在。