- 上传者： Administrator
- 上传时间：2023年12月06日 08时56分33秒
在完全设置好开发环境之后，您可以开始构建主题模块的框架。在本章中，您将了解如何： 启用/禁用网站构建器的标准选项和模板。 定义用于设计的颜色和字体。 充分利用Bootstrap变量。 添加自定义样式和JavaScript。 主题模块 None [1] ** Odoo 自带一个默认主题，提供最小的结构 ......
启用/禁用网站构建器的标准选项和模板。
定义用于设计的颜色和字体。
充分利用Bootstrap变量。
添加自定义样式和JavaScript。
不要重新发明已经存在的东西。例如，由于Odoo提供了在页脚上添加边框的选项，您不应该自己重新编码它。相反，首先启用默认选项，然后根据需要进行扩展。
用户可以在您的主题中仍然使用Odoo的所有功能。例如，如果您重新编码页脚的边框，可能会破坏默认选项或使其无用，给用户带来不好的体验。此外，您的重新编码可能不如默认选项工作得好，因为其他Odoo功能可能依赖于它。
每个缩进级别使用四个空格。
不要使用制表符。
永远不要混合使用空格和制表符。
使用一个代码检查工具（JSHint，…）。
永远不要添加已压缩的JavaScript库。
在每个Odoo JavaScript模块的顶部添加
'use strict';。变量和函数应该使用 驼峰命名法 (
myVariable)，而不是 蛇形命名法 (my_variable)。不要将变量命名为
event；请使用ev.代替。这是为了避免在非 Chrome 浏览器上出现错误，因为 Chrome 会自动分配一个全局事件变量（所以如果你在不声明它的情况下使用事件变量，在 Chrome 上运行正常，但在其他浏览器上会崩溃）。使用严格比较 (
===而不是==)。使用双引号来表示所有文本字符串（例如
"Hello"），使用单引号来表示其他所有字符串，例如 CSS 选择器.x_nav_item。始终使用
this._super.apply(this, arguments)。
在完全设置好开发环境之后，您可以开始构建主题模块的框架。在本章中，您将了解如何：
主题模块
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 声明了许多 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 bundle 来覆盖 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>
门户网站 - 禁用语言选择器
<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集成的好处。
重要
Odoo 需要知道哪些文件应该被翻译成 Odoo 模块，哪些文件不需要。这是一个选择性的系统：Odoo 查看 JavaScript 文件的第一行，并检查它是否包含 字符串 @odoo-module。如果是这样，它将自动转换为一个 Odoo 模块。
/** @odoo-module **/
声明
/website_airproof/__manifest__.py'assets': {
'web.assets_frontend': [
'website_airproof/static/src/js/theme.js',
],
},
注解
如果你想包含来自外部库的文件，你可以将它们添加到你的模块的 /lib 文件夹中。
小技巧
- 微信扫一扫，一分也是爱:
-
服务原则及地区范围
宜兴通达网络科技有限公司，地处中国宜兴环科园内，是一家高新技术企业。公司在企业网络维护和企业信息化建设与咨询方面，有10多年经验。
我公司愿与客户一道，力求彻底解决客户问题！
我们不是在给企业提供“头痛医头、脚痛医脚”的暂时解决方案，而是在部署根本性安全与稳定服务！！
我们愿携手客户，建立企业IT规划；杜绝随意安装系统、软件等操作；力求共同维护有序、安全、稳定的网络办公环境！！！
IT服务，服务是根本，客户是上帝；我们提供快速响应、快速上门、快速排查，提供优质高效的服务！！！！
通达科技提供全国范围内的服务，服务形式包括远程协助、电话咨询、电子邮件咨询、传真咨询、问答平台的问题解决等。
宜兴地区提供上门服务：
- 市区服务：宜城街道、城北街道（屺亭街道）、新街街道、新庄街道、环科园、渚桥开发区
- 市郊服务：张渚镇、西渚镇、太华镇、徐舍镇、官林镇、杨巷镇、新建镇、和桥镇、高塍镇、万石镇、周铁镇、芳桥镇、丁蜀镇、湖父镇。
- 联系电话：189-21-343434
- 在线沟通：
