一、主题是什么？为什么它是网站的 "第一印象" ？
想象一下这个场景：
客户打开你的网站，第一眼看到的是什么？是混乱的配色、大小不一的字体、还是风格统一的视觉体验？研究表明，用户只需0.05秒就能对网站形成第一印象——而主题（Theme）就是决定这0.05秒的关键。
Odoo 19 的 General Theme（通用主题） 功能，让你无需写一行代码，就能定义整个网站的 "品牌DNA" ：颜色、字体、按钮样式、链接效果、输入框外观 …… 一改全站变，告别 "这个页面红、那个页面蓝" 的尴尬。
主题定制的核心价值：
- 品牌一致性：
全站视觉统一，专业感瞬间提升
全站视觉统一，专业感瞬间提升
- 零代码操作：
鼠标点点，颜色字体全搞定
鼠标点点，颜色字体全搞定
- 实时预览：
改完立刻看到效果，不满意再调
改完立刻看到效果，不满意再调
- 一键切换：
12+内置主题，悬停预览，点击即应用
12+内置主题，悬停预览，点击即应用
二、选择主题：建站的第一步，也是最关键的一步
首次建站时的主题选择
安装Website应用后，Odoo自动弹出主题选择器：
- 鼠标悬停在主题上 → 查看扩展预览
- 点击主题 → 选中并应用
- 或点击 View more themes → 查看完整列表
> ⚠️ 重要警告：如果离开时不选主题，系统会自动使用Default（默认主题）。建议先选好主题再建页面，否则后期换主题可能导致样式冲突！
切换现有主题
- 打开网站编辑器 → Theme 标签页 → Website 区域
- 点击 Switch Theme
- 悬停预览 → 点击 Use this theme
Odoo 19 内置主题一览：
| 主题名称 | 适合行业 | 核心特点 |
|---|
| Default | 通用、极简 | 中性排版、高度可定制、最轻CSS |
| Starter | B2B、咨询 | 专业头部、特性网格、客户评价块 |
| Graphene | 科技公司、SaaS | 暗黑模式、代码友好字体、渐变区块 |
| Nano | 电商、零售 | 产品聚焦布局、大图、购物车优化导航 |
| Aviato | 旅游、酒店 | 全宽图片、预订导向CTA、视差滚动 |
三、页面布局与背景：网站的 "骨架" 和 "底色"
页面布局（Page Layout）
- 调整建筑块和网站元素的整体显示和间距
- 影响全站所有页面的排版风格
背景设置（Background）
| 选项 | 说明 | 效果 |
|---|
| Color | 选择纯色背景 | 简洁、专业 |
| Image | 添加图片背景 | 视觉冲击力强 |
| Pattern | 图片作为重复图案 | 纹理感、设计感 |
| None | 无背景 | 极简、留白 |
> 实战技巧：B2B网站用纯色背景显专业，创意类网站用图片背景显个性，电商网站用Pattern增加层次感。
四、颜色系统：让网站 "会说话" 的五种颜色
Odoo的颜色系统分为两大类：主题色（Theme Colors） 和 状态色（Status Colors）。
主题色（Theme Colors）：网站的 "品牌调色盘"
5种核心颜色，定义全站视觉：
| 颜色类型 | 数量 | 用途 | 示例 |
|---|
| Main colors | 3种 | 按钮、链接、强调元素 | 品牌主色、辅助色、点缀色 |
| Light & Dark colors | 2种 | 文字、标题 | 深色文字（浅色背景）、浅色文字（深色背景） |
修改方法：
- 进入 Theme 标签页 → Colors 区域
- 点击要修改的颜色
- 选择：
- Solid：预设纯色
- Custom：手动输入 #HEX 或 RGBA 代码
- 点击 Reset 移除颜色选择
颜色预设（Color Presets）：一键应用，全站联动
Odoo自动为选定的颜色/配色方案创建 颜色预设：
| 预设元素 | 说明 |
|---|
| Background | 建筑块背景色 |
| Text | 文字颜色 |
| Headings | 标题颜色 |
| Links | 链接颜色 |
| Primary Buttons | 主按钮颜色 |
| Secondary Buttons | 次按钮颜色 |
修改预设：
- 点击 Color Presets
- 选择预设 → 打开定制下拉菜单
- 修改各元素颜色
> ⚠️ 关键特性：修改一个颜色预设 → 自动更新所有使用该预设的建筑块！一改全站变，效率爆棚。
应用预设到建筑块：
- 选中建筑块 → Style 标签 → 点击 Background 旁边的颜色圆点
- 选择 Theme → 应用预设
配色方案（Color Palette）：从零开始或一键套用
- 点击 调色板图标 → 选择完整配色方案
- 选择后，所有颜色自定义重置，按新方案重新分配
> 建议：先选一个接近品牌色的配色方案作为起点，再微调个别颜色。
状态色（Status Colors）：反馈消息的 "情绪指示器"
用于弹窗消息，提示操作状态：
| 状态 | 默认颜色 | 用途 |
|---|
| Success | 绿色 | 操作成功（如"内容已保存"） |
| Warning | 黄色 | 警告提示 |
| Info | 蓝色 | 信息提示 |
| Danger | 红色 | 错误提示 |
修改方法：
- 滚动到 Advanced 区域
- 点击对应颜色的圆点
- 选择新颜色
五、字体系统：让文字 "有性格"
Odoo允许定制四类元素的字体：
| 元素 | 可定制项 |
|---|
| Paragraph（段落） | 字体、字号、行高、边距 |
| Headings（标题） | 字体、字号、行高、边距 |
| Buttons（按钮） | 字体、字号 |
| Input Fields（输入框） | 字体、字号 |
字号设置
- 在对应区域使用 Font Size 字段设置默认大小
- 点击 Toggle more options（展开更多选项） 图标
- 定义自定义大小（如按标题级别、按钮大小等）
字体选择
- 在 Paragraph、Headings、Button 区域
- 点击 Font Family 下拉菜单
- 选择系统字体或自定义字体
> System Fonts：使用访客操作系统原生字体（如Android用Roboto）。优点：加载快、兼容好。
自定义字体：Google字体 + 本地上传
添加自定义字体：
- 点击 Font Family 下拉 → Add a Custom Font
方式一：Google字体
- 打开 Select a Google Font 下拉
- 选择所需字体
- GDPR合规选项：关闭 Serve font from Google servers
- 字体存储在你的网站服务器上，而非Google服务器
- 适用于欧盟GDPR等数据保护法规要求地区
方式二：本地上传
- 点击 Choose File
- 从电脑上传字体文件
- 点击 Save and Reload
> 右侧显示 Preview（预览），实时查看字体效果。
六、样式定制：按钮、链接、输入框的 "微整形"
段落与标题（Paragraphs & Headings）
| 选项 | 说明 |
|---|
| Font settings | 字体设置 |
| Line Height | 行高（行间距） |
| Margins | 边距（段落/标题周围的间距） |
> 行高建议：1.5-1.8倍字号，阅读体验最佳。
按钮（Buttons）
| 选项 | 说明 | 可选值 |
|---|
| Primary Style / Secondary Style | 按钮样式 | Fill（填充）、Outline（描边）、Flat（扁平） |
| Border Width | 描边宽度 | Outline时显示 |
| Font settings | 字体设置 | - |
| Padding | 内边距 | 标签周围的间距 |
| Round Corners | 圆角半径 | 0=直角，越大越圆 |
| On Click Effect | 点击动画 | 多种效果可选 |
> 展开更多选项：点击 Toggle more options，定义Small和Large尺寸的自定义值。
按钮样式对比：
| 样式 | 视觉效果 | 适用场景 |
|---|
| Fill | 实心填充 | 主CTA按钮，最醒目 |
| Outline | 描边空心 | 次要按钮，不抢风头 |
| Flat | 无背景无描边 | 文字链接风格按钮 |
链接（Links）
| 样式 | 效果 |
|---|
| No Underline | 无下划线 |
| Underline On Hover | 悬停时下划线 |
| Always Underline | 始终下划线 |
> 建议：正文链接用 "Underline On Hover" ，导航链接用 "No Underline" 。
输入框（Input Fields）
| 选项 | 说明 |
|---|
| Padding | 字段周围间距 |
| Font settings | 字体设置 |
| Border Width | 边框宽度 |
| Border Radius | 圆角 |
| Background | 背景色 |
> 设计趋势：Border Radius 4-8px显现代，0px显传统，20px+显活泼。
七、高级设置：页头控制、代码注入、Google地图
滚动到 Theme 标签页底部的 Advanced 区域：
| 设置项 | 说明 |
|---|
| Show Header | 显示/隐藏页头 |
| Code Injection | 在 <head> 和 </body> 注入代码（网站验证、分析标签） |
| Google Map | 配置Google Maps API Key |
| Status Colors | 修改状态反馈颜色 |
| Grays | 灰度色系调整 |
Google Maps配置：五步搞定
第一步：登录你的Google账号
第二步：启用三个API：
- Maps Static API
- Maps JavaScript API
- Places API
> ⚠️ 重要警告：
- 不要启用 Places API (New)，Odoo暂不支持！
- 使用Google API可能需要向Google付费！
第三步：创建API Key → 复制
第四步： 在Odoo网站编辑器中：
- Theme 标签 → Advanced 区域
- 点击 Google Map 旁边的 Custom Key
第五步：粘贴API Key → 点击 Save
> 配置完成后，联系我们页面和特定建筑块中的地图功能即可正常使用。
八、主题定制的 "最佳实践"
| 实践 | 说明 | 效果 |
|---|
| 先选主题再建页 | 避免后期换主题导致样式冲突 | 减少返工 |
| 从配色方案起步 | 选一个接近品牌色的方案，再微调 | 效率最高 |
| 主色不超过3种 | 保持视觉简洁 | 专业感强 |
| 字体最多2种 | 一种标题字体，一种正文字体 | 层次分明 |
| 按钮样式统一 | 主按钮Fill，次按钮Outline | 视觉层次清晰 |
| 移动端检查 | 改完主题后在手机上查看效果 | 确保响应式 |
| 定期备份 | 重大修改前截图或记录设置 | 方便回滚 |
九、总结：主题定制，让网站从 "千篇一律" 变成 "独一无二"
| 模块 | 核心能力 | 关键技巧 |
|---|
| 主题选择 | 12+内置主题，悬停预览，一键切换 | 先选主题再建页面 |
| 页面布局 | 整体显示和间距调整 | 根据内容类型选择 |
| 背景设置 | 颜色、图片、图案、无背景 | B2B用纯色，创意用图片 |
| 主题色 | 5种核心颜色，定义品牌视觉 | Main+Light/Dark组合 |
| 颜色预设 | 一改全站联动，自动更新建筑块 | 先调预设，再微调个别块 |
| 状态色 | 4种反馈颜色，提示操作状态 | 保持默认或微调色相 |
| 字体系统 | 段落、标题、按钮、输入框全覆盖 | System Fonts加载快，Google Fonts选择多 |
| 自定义字体 | Google字体+本地上传，GDPR合规 | 欧盟用户关闭Google服务器加载 |
| 样式定制 | 按钮、链接、输入框精细调整 | Fill/Outline/Flat区分主次 |
| 高级设置 | 页头、代码注入、Google地图 | 验证网站、添加分析代码 |
记住：最好的网站不是 "花里胡哨" ，而是 "一眼就能认出是你的品牌" 。 Odoo 19的主题定制功能，就是让你从零代码开始，打造独一无二的 "品牌DNA" ！