主题化¶
在完全设置好开发环境之后，您可以开始构建主题模块的框架。在本章中，您将了解如何：
启用/禁用网站构建器的标准选项和模板。
定义用于设计的颜色和字体。
充分利用Bootstrap变量。
添加自定义样式和JavaScript。
主题模块¶
Odoo 自带一个默认主题，提供最小的结构和布局。当您创建一个新主题时，您是在扩展默认主题。
记得在你的开发环境中运行Odoo时，将包含你的模块的目录添加到 addons-path 命令行参数中。
技术命名¶
第一步是创建一个新目录。
website_airproof
文件结构¶
主题被打包成与任何Odoo模块一样。即使您正在设计一个基本的网站，您也需要像一个模块一样打包其主题。
website_airproof
├── data
├── i18n
├── lib
├── static
│ ├── description
│ ├── fonts
│ ├── image_shapes // Shapes for images
│ ├── shapes // Shapes for background
│ └── src
│ ├── img
│ │ ├── content // For those used in the pages of your website
│ │ └── wbuilder // For those used in the builder
│ ├── js
│ ├── scss
│ └── snippets // custom snippets
├── views
├── __init__.py
└── __manifest__.py
文件夹 |
描述 |
|---|---|
数据 |
预设、菜单、页面、图片、形状，… ( |
i18n |
翻译内容如下： |
lib |
外部库（ |
静态 |
自定义资源 ( |
视图 |
自定义视图和模板（ |
初始化¶
一个 Odoo 模块也是一个 Python 包，其中包含一个 __init__.py 文件，其中包含模块中各个 Python 文件的导入指令。此文件现在可以保持为空白。
声明¶
一个 Odoo 模块由其清单文件声明。此文件将一个 Python 包声明为一个 Odoo 模块，并指定模块的元数据。它至少包含 name 字段，该字段始终是必需的。通常它包含更多的信息。
/website_airproof/__manifest__.py¶{
'name': 'Airproof Theme',
'description': '...',
'category': 'Website/Theme',
'version': '15.0.0',
'author': '...',
'license': '...',
'depends': ['website'],
'data': [
# ...
],
'assets': {
# ...
},
}
字段 |
描述 |
|---|---|
名称 |
模块的可读名称（必填） |
描述 |
模块的扩展描述，使用 reStructuredText 编写 |
类别 |
Odoo中的分类类别 |
版本 |
Odoo版本此模块正在解决的问题 |
作者 |
模块作者的姓名 |
许可证 |
模块的分发许可证 |
依赖 |
Odoo模块必须在此模块之前加载，无论是因为此模块使用了它们创建的功能，还是因为它修改了它们定义的资源。 |
数据 |
XML文件列表 |
资产 |
SCSS和JS文件列表 |
注解
要创建一个网站主题，您只需要安装网站应用程序。如果您需要其他应用程序（博客，活动，电子商务等），您也可以添加它们。
默认选项¶
首先，尝试使用Odoo的默认选项来构建您的主题。这样做可以确保两件事情：
不要重新发明已经存在的东西。例如，由于Odoo提供了在页脚上添加边框的选项，您不应该自己重新编码它。相反，首先启用默认选项，然后根据需要进行扩展。
用户可以在您的主题中仍然使用Odoo的所有功能。例如，如果您重新编码页脚的边框，可能会破坏默认选项或使其无用，给用户带来不好的体验。此外，您的重新编码可能不如默认选项工作得好，因为其他Odoo功能可能依赖于它。
小技巧
每个缩进级别使用四个空格。
不要使用制表符。
永远不要混合使用空格和制表符。
另请参阅
Odoo 变量¶
Odoo 声明了许多 CSS 规则，大部分可以通过覆盖相关的 SCSS 变量进行自定义。为此，创建一个 primary_variables.scss 文件，并将其添加到 _assets_primary_variables bundle 中。
声明
/website_airproof/__manifest__.py¶'assets': {
'web._assets_primary_variables': [
('prepend', 'website_airproof/static/src/scss/primary_variables.scss'),
],
},
通过阅读源代码，与选项相关的变量很容易被注意到。
<we-button title="..."
data-name="..."
data-customize-website-views="..."
data-customize-website-variable="'Sidebar'"
data-img="..."/>
这些变量可以通过 $o-website-value-palettes 映射进行覆盖，例如。
全球¶
声明
/website_airproof/static/src/scss/primary_variables.scss¶$o-website-values-palettes: (
(
// Templates
// Colors
// Fonts
// Buttons
// ...
),
);
小技巧
该文件只能包含SCSS变量和混合定义和覆盖。
另请参阅
字体¶
您可以在您的网站上嵌入任何字体。网站构建器会自动将它们添加到字体选择器中。
声明
/website_airproof/static/src/scss/primary_variables.scss¶$o-theme-font-configs: (
<font-name>: (
'family': <css font family list>,
'url' (optional): <related part of Google fonts URL>,
'properties' (optional): (
<font-alias>: (
<website-value-key>: <value>,
...,
),
...,
)
)
使用
/website_airproof/static/src/scss/primary_variables.scss¶$o-website-values-palettes: (
(
'font': '<font-name>',
'headings-font': '<font-name>',
'navbar-font': '<font-name>',
'buttons-font': '<font-name>',
),
);
Google字体¶
/website_airproof/static/src/scss/primary_variables.scss¶$o-theme-font-configs: (
'Poppins': (
'family': ('Poppins', sans-serif),
'url': 'Poppins:400,500',
'properties' : (
'base': (
'font-size-base': 1rem,
),
),
),
);
自定义字体¶
首先，创建一个特定的SCSS文件来声明您的自定义字体。
/website_airproof/__manifest__.py¶'assets': {
'web.assets_frontend': [
'website_airproof/static/src/scss/font.scss',
],
},
然后，使用 @font-face 规则来允许您的自定义字体在您的网站上加载。
/website_airproof/static/src/scss/font.scss¶@font-face {
font-family: '<font-name>';
...
}
/website_airproof/static/src/scss/primary_variables.scss¶$o-theme-font-configs: (
'Proxima Nova': (
'family': ('Proxima Nova', sans-serif),
'properties' : (
'base': (
'font-size-base': 1rem,
),
),
),
);
小技巧
建议使用.woff格式的字体。
颜色¶
网站构建器依赖于由五种命名颜色组成的调色板。在您的主题中定义这些颜色可以确保其保持一致。
颜色 |
描述 |
|---|---|
o-color-1 |
主要 |
o-color-2 |
次要 |
o-color-3 |
额外 |
o-color-4 |
白色 |
o-color-5 |
黑色的 |
声明
/website_airproof/static/src/scss/primary_variables.scss¶$o-color-palettes: map-merge($o-color-palettes,
(
'airproof': (
'o-color-1': #bedb39,
'o-color-2': #2c3e50,
'o-color-3': #f2f2f2,
'o-color-4': #ffffff,
'o-color-5': #000000,
),
)
);
将创建的调色板添加到网站构建器提供的调色板列表中。
$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'airproof');
使用
/website_airproof/static/src/scss/primary_variables.scss¶$o-website-values-palettes: (
(
'color-palettes-name': 'airproof',
),
);
颜色组合
基于之前定义的五个配色方案，网站构建器会自动生成五种颜色组合，每种组合都定义了背景色、文本色、标题色、链接色、主要按钮色和次要按钮色。用户可以随后自定义这些颜色。
颜色组合中使用的颜色是可访问的，并且可以通过 BS $colors map 使用特定前缀（o-cc 表示 color combination）进行覆盖。
/website_airproof/static/src/scss/primary_variables.scss¶$o-color-palettes: map-merge($o-color-palettes,
(
'airproof': (
'o-cc*-bg': 'o-color-*',
'o-cc*-text': 'o-color-*',
'o-cc*-headings': 'o-color-*',
'o-cc*-h2': 'o-color-*',
'o-cc*-h3': 'o-color-*',
'o-cc*-h4': 'o-color-*',
'o-cc*-h5': 'o-color-*',
'o-cc*-h6': 'o-color-*',
'o-cc*-link': 'o-color-*',
'o-cc*-btn-primary': 'o-color-*',
'o-cc*-btn-primary-border': 'o-color-*',
'o-cc*-btn-secondary': 'o-color-*',
'o-cc*-btn-secondary-border': 'o-color-*',
),
)
);
注解
对于每个 o-cc*，将 * 替换为与所需颜色组合对应的数字（1 - 5）。
默认文本颜色是 o-color-5。如果背景太暗，它会自动变成 o-color-4 颜色。
另请参阅
演示页面
网站构建器会自动生成一个页面，用于查看主题颜色调色板的颜色组合：http://localhost:8069/website/demo/color-combinations
Bootstrap变量¶
Odoo 默认包含 Bootstrap。您可以使用框架的所有变量和混合。
如果Odoo没有提供您要查找的变量，可能有一个允许的Bootstrap变量。实际上，所有Odoo布局都遵循Bootstrap结构并使用Bootstrap组件或其扩展。如果您自定义Bootstrap变量，您将为整个用户网站添加一个通用样式。
使用添加到 _assets_frontend_helpers 包中的专用文件来覆盖 Bootstrap 值，而 不是 使用 primary_variables.scss 文件。
声明
/website_airproof/__manifest__.py¶'assets': {
'web._assets_frontend_helpers': [
('prepend', 'website_airproof/static/src/scss/bootstrap_overridden.scss'),
],
},
使用
/website_airproof/static/src/scss/bootstrap_overridden.scss¶// Typography
$h1-font-size: 4rem !default;
// Navbar
$navbar-nav-link-padding-x: 1rem!default;
// Buttons + Forms
$input-placeholder-color: o-color('o-color-1') !default;
// Cards
$card-border-width: 0 !default;
小技巧
该文件只能包含SCSS变量和混合定义和覆盖。
警告
不要覆盖依赖于Odoo变量的Bootstrap变量。否则，您可能会破坏用户使用网站构建器自定义它们的可能性。
查看¶
对于某些选项，除了激活网站构建器变量外，您还需要激活特定视图。
通过阅读源代码，与选项相关的模板很容易找到。
<we-button title="..."
data-name="..."
data-customize-website-views="website.template_header_default"
data-customize-website-variable="'...'"
data-img="..."/>
<template id="..." inherit_id="..." name="..." active="True"/>
<template id="..." inherit_id="..." name="..." active="False"/>
Example
更改菜单项的水平对齐方式
/website_airproof/data/presets.xml¶<record id="website.template_header_default_align_center" model="ir.ui.view">
<field name="active" eval="True"/>
</record>
相同的逻辑也可以用于其他的Odoo应用程序。
电子商务 - 显示产品类别
<record id="website_sale.products_categories" model="ir.ui.view">
<field name="active" eval="False"/>
</record>
Portal - 禁用语言选择器
<record id="portal.footer_language_selector" model="ir.ui.view">
<field name="active" eval="False"/>
</record>
资产¶
对于这部分，我们将参考位于web模块中的 assets_frontend 捆绑包。该捆绑包指定了网站构建器加载的资产列表，目标是将您的SCSS和JS文件添加到捆绑包中。
样式¶
网站构建器与Bootstrap一起，非常适合定义您网站的基本样式。但是，要设计出独特的东西，您应该再进一步。为此，您可以轻松地将任何SCSS文件添加到您的主题中。
声明
/website_airproof/__manifest__.py¶'assets': {
'web.assets_frontend': [
'website_airproof/static/src/scss/theme.scss',
],
},
请随意在您的 theme.scss 文件中重用来自您的 Bootstrap 文件和 Odoo 使用的变量。
Example
/website_airproof/static/src/scss/theme.scss¶ blockquote {
border-radius: $rounded-pill;
color: o-color('o-color-3');
font-family: o-website-value('headings-font');
}
互动性¶
Odoo支持三种不同类型的JavaScript文件：
大多数新的Odoo JavaScript代码应该使用原生的JavaScript模块系统。它更简单，并且带来了更好的开发者体验和更好的与IDE集成的好处。
声明
/website_airproof/__manifest__.py¶'assets': {
'web.assets_frontend': [
'website_airproof/static/src/js/theme.js',
],
},
注解
如果你想包含来自外部库的文件，你可以将它们添加到你的模块的 /lib 文件夹中。
小技巧
使用一个代码检查工具（JSHint，…）。
永远不要添加已压缩的JavaScript库。
在每个Odoo JavaScript模块的顶部添加
'use strict';。变量和函数应该使用 驼峰命名法 (
myVariable)，而不是 蛇形命名法 (my_variable)。不要将变量命名为
event；请使用ev.代替。这是为了避免在非 Chrome 浏览器上出现错误，因为 Chrome 会自动分配一个全局事件变量（所以如果你在不声明它的情况下使用事件变量，在 Chrome 上运行正常，但在其他浏览器上会崩溃）。使用严格比较 (
===而不是==)。使用双引号来表示所有文本字符串（例如
"Hello"），使用单引号来表示其他所有字符串，例如 CSS 选择器.x_nav_item。始终使用
this._super.apply(this, arguments)。