基于 Odoo + Python 的网站快速开发指南

基于 Odoo + Python 的网站快速开发指南

下载根据本指南开发的主题模块源码

Odoo 网站生成器是一个灵活的工具，可以轻松构建与 Odoo 应用完全集成的网站。使用其提供的主题选项 (options) 和构建块 (blocks) 很容易定制网站。然而，你还可以更进一步深度定制。在本文中，您将学习在不修改 Odoo 核心文件的情况下完全自定义您的网站，同时保留网站生成器 (builder) 的设置选项。

准备

1. Odoo 开发基础知识

   每个 Odoo 应用模块都是类似的，它们是用相同的逻辑构建的。Odoo 的基础是模型。模型使用字段来记录数据，包含基本字段和链接到其他模型的关系字段，每个模型都有表示其所有字段的前端（QWeb）和后端视图（Kanban, List, Form, etc.）。你可以打开开发者模式，然后进入设置>技术>模型 查看模型列表。

2. Odoo16 VScode 开发环境搭建
3. 在应用中安装网站 (website) 模块
4. 打开调试模式

   开发人员模式(也称为调试模式)对于开发非常有用，它允许访问一些隐藏功能。在接下来的章节中，假设您已经启用了开发人员模式。在 URL 的 /web 后添加 ?debug=1 或 ?debug=true 。若要停用调试模式，请将该值改为?debug=0。前端开发时还可以使用 ?debug=assets 启用资产模式（刷新页面会重新编译视图），而?debug=tests 启用测试模式（运行测试）。

5. 了解 QWeb

   Odoo 的主要模板引擎，用于生成 HTML 片段和页面。

一、主题

主题像任何 Odoo 模块一样被打包。即使你在设计一个基本的网站，你也需要把它打包成一个模块。Odoo 有一个默认的主题，提供最小的结构和布局。创建新主题时，您一般是在扩展默认主题。

注意： 首先尝试使用 Odoo 的默认选项来构建主题。这确保了两件事:

1. 不重新发明已经存在的东西。例如，由于 Odoo 提供了在页脚上添加边框的选项，因此您不应该自己重新编码。相反，应该启用默认选项，在需要时扩展它。
2. 用户一直可以在您的主题中使用 Odoo 的所有功能。如果您重新编码页脚上的边框，您可能会破坏默认选项或使其无法使用，从而给用户带来糟糕的体验。此外，您的代码可能不能像默认选项那样正常工作，因为其他 Odoo 功能可能依赖于它。

主题模块结构

模块主文件夹：./theme_odooer， 需要在配置的 addons_path 路径中，让 odoo 可以找到该主题模块并安装。

theme_odooer
├── data // 预设，菜单，页面，图像 (`*.xml`)
├── i18n // 翻译，(`*.po`, `*.pot`)
├── lib  // 外部库(*.js)
├── static // 自定义资产(*.jpg, .gif, .png, .pdf, *.scss, *.js)
│   ├── description
│   ├── fonts
│   ├── image_shapes // Shapes for images
│   ├── shapes // Shapes for background
│   └── src
│       ├── img
│       │   ├── content // 网站
│       │   └── wbuilder // builder 使用
│       ├── js
│       ├── scss
│       └── snippets // 自定义 blocks
├── views // 自定义视图和模板(*.xml)
├── __init__.py // 表示模块是一个 Python 包，包含模块中各种 Python 的导入指令，一般为空
└── __manifest__.py // 模块的元数据

模块元数据

{ 'name': 'Odooer Theme',
   'description': 'https://blog.csdn.net/LifeRiver/article/details/...',
   'category': 'Website/Theme',
   'version': '15.0.0',
   'author': 'https://blog.csdn.net/LifeRiver/article/details/...',
   'license': 'https://blog.csdn.net/LifeRiver/article/details/...',
   'depends': ['website'],
   'data': [
      # https://blog.csdn.net/LifeRiver/article/details/...
   ],
   'assets': { # https://blog.csdn.net/LifeRiver/article/details/...
   },
}

样式变量

Odoo 声明了许多 CSS 规则，其中大多数可以通过覆盖相关的 SCSS 变量来自定义。为此，创建 primary_variables.scss 文件，并将其添加到 _assets_primary_variables 包中。

'web._assets_primary_variables': [
	(
		'after',
		'website/static/src/scss/primary_variables.scss',
		'theme_odooer/static/src/scss/primary_variables.scss'
	),
],

通过阅读 odoo 源代码，可以找到与更多选项相关的变量名(一般通过 data-* 绑定变量)。

全局变量

在文件 /theme_name/static/src/scss/primary_variables.scss 中，可以通过 $o-website-values-palettes 映射来覆盖全局变量的值。该文件只能定义 SCSS 变量和混合(mixins)的覆盖。

$o-website-values-palettes: (
   (
      // Templates
      // Colors
      // Fonts
      // Buttons
      // https://blog.csdn.net/LifeRiver/article/details/...
   ),
);

字体

你可以在你的网站上嵌入任何字体，网站生成器自动使它们在字体选择器中可用。

$o-theme-font-configs: ( : (
      'family': ,
      'url' (optional): ,
      'properties' (optional): ( : ( : ,
            https://blog.csdn.net/LifeRiver/article/details/...,
         ),
      https://blog.csdn.net/LifeRiver/article/details/...,
   )
)

使用字体：

$o-website-values-palettes: (
   (
      'font':                             '',
      'headings-font':                    '',
      'navbar-font':                      '',
      'buttons-font':                     '',
   ),
);

添加自定义字体 fonts.scss：

@font-face {
    font-family: 'font-name';
    src: url('#{$font-path}/file-name.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

在 __manifest__.py 中声明：

'web.assets_frontend': [
	'theme_odooer/static/fonts/fonts.scss',  # 自定义字体
	https://blog.csdn.net/LifeRiver/article/details/...

颜色

网站生成器依赖于由五种命名颜色组成的调色板。在主题中定义并确保保持一致。

Color	Description
o-color-1	Primary
o-color-2	Secondary
o-color-3	Extra
o-color-4	Whitish
o-color-5	Blackish

在文件 /theme_name/static/src/scss/primary_variables.scss 中定义及使用：

$o-color-palettes: map-merge($o-color-palettes,
   (
      'odooer-1': (
         '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, 'odooer-1');
// 使用调色板
$o-website-values-palettes: (
   (
      'color-palettes-name':              'odooer-1',
      https://blog.csdn.net/LifeRiver/article/details/...

网站生成器自动生成五种颜色组合，每种颜色都为背景、文本、标题、链接、主要按钮和次要按钮定义了一种颜色。这些颜色以后可以由用户定制。网站生成器会自动生成一个查看颜色组合的页面: http://localhost:8069/website/demo/color-combinations

Odoo 默认包含 Bootstrap 框架的所有变量和 mixins。如果自定义了一个 Bootstrap 变量，就为整个网站添加了一个通用的样式。使用 _assets_frontend_helpers 包中的专用文件来覆盖 Bootstrap 值，而不是 primary_variables.scss 文件。可通过链接 http://localhost:8069/website/demo/bootstrap 查看当前 Bootstrap 值。

对于某些选项，除了修改 Website Builder 变量之外，您还必须激活特定的视图。

通过阅读源代码，很容易找到与选项相关的模板。