主题配置:配色、布局与头部

「主题配置」在后台叫外观配置,入口是 页面管理 → 外观配置。它决定前台整体的视觉风格和布局,分为两大块:

这里的修改会影响前台所有页面,建议每次保存后,把首页、列表页、播放页各打开看一遍,确认颜色、菜单和按钮都正常。

基本使用流程 #

1. 进入 页面管理 → 外观配置;
2. 在「颜色主题」里选一个快速主题,再微调颜色;
3. 在「布局设置」里设置页面宽度、PC 端头部和移动端头部;
4. 需要底部菜单时,先在这里开启「底部菜单栏」,再到页面配置的底部菜单维护具体菜单项;
5. 点击右上角「保存配置」,刷新前台查看效果。

右上角的「重新加载」会重新读取服务器上已保存的配置,页面上未保存的修改会被覆盖。「颜色主题」和「布局设置」两个模块左侧有上移/下移按钮,只用来调整你自己在后台看到的顺序,不影响前台,也不影响其他管理员。

颜色主题 #

前台启动时会读取这里保存的颜色并应用到全站,所以首页、列表页、播放页、会员中心、登录注册页、页脚、菜单、按钮、分页和弹窗里的通用组件都会跟着变化。

全站快速主题 #

不想逐项调色,可以直接点击一个快速主题:

点击后,当前颜色值会立即替换为该主题的配色;确认效果后必须点击「保存配置」才会应用到前台。第一次配置,建议先选一个快速主题,再微调主色调、文字色和背景色。

强调色 #

调整时优先保证文字可读:深色背景不要配过暗的文字,亮色背景不要配过浅的文字。

背景与表面 #

页面看起来「糊在一起」时,可以让表面背景和深层背景拉开差距,或提高微妙边框的可见度。

渐变色 #

主渐变、主渐变悬停、辅助渐变、辅助渐变悬停、危险渐变,分别用于核心强调背景、次级容器和错误/危险相关区域。渐变要保持克制,颜色跨度太大会让按钮和区块显得不统一。

短视频配色 #

短视频页面有独立的一组配色(页面上标有「14 项」),只作用于短视频页面,不影响其他页面:

短视频同样提供快速主题:默认亮色、经典暗黑、霓虹赛博、深海蓝、暮光紫、炽焰红。点击后只替换短视频这一组颜色。

导入和导出配色 #

在「配置管理」里:

导入只替换颜色,不会修改布局设置;导入后同样需要点击「保存配置」。

布局设置 #

布局方式 #

布局方式控制前台主布局容器的最大宽度,影响首页、列表页、播放页、页脚等放在主布局里的内容。

主要面向电脑用户,选「全屏」或「居中内容」;想做成强移动端风格,选「窄版」。页面显得太宽时,改成「居中内容」。

头部布局:PC 端与移动端 #

头部布局有「PC 端」和「移动端」两个标签,各自独立设置。

显示开关(PC 端和移动端基本一致):

移动端空间有限,头部入口开太多会显得拥挤,建议优先保留搜索、用户按钮和底部菜单。多行菜单是独立显示在头部下方的导航区域,不跟随普通头部吸顶。

底部菜单样式 #

PC 端和移动端分别设置底部菜单栏是否允许显示及尺寸。显示后页面底部会自动预留相应高度,避免内容被挡住。

尺寸支持 px、rem、vw、vh、% 等 CSS 长度单位,普通用户建议使用 px。这里只控制是否允许显示和显示尺寸,具体显示哪些菜单项要到「页面管理 → 底部菜单」配置;没有任何菜单项时,即使这里开启也不会显示。

菜单配置(抽屉菜单) #

PC 端单行头部选择「抽屉菜单」时,以及移动端单行头部,会使用这里的设置:

使用建议 #