第 1 章 - 主题定制¶

既然您已经安装了 Odoo 并且服务器在本地运行，是时候为您的网站创建自己的主题模块了。

设置¶

第一步是确保 Odoo 在本地正确运行。为此，使用 Shell 脚本来运行服务器。

在此脚本中，定义数据库名称并仅安装 website 模块。

另请参阅

请参阅关于如何运行 Odoo 的参考文档。

构建您的模块结构¶

既然我们知道一切运行正常，让我们开始构建我们的模块。

基于以下结构，开始创建将用作主题的模块。这是您将要添加 XML 页面、SCSS、JS 等的地方……

另请参阅

请参阅关于如何构建您的主题模块的参考文档。

从基础开始：/data 、 /img 、 /scss 、 /js 。

不要忘记添加 __init__.py 和 __manifest__.py 文件。

在您的 __manifest__.py 文件中，您可以使用以下信息声明您的模块：

名称（必需）
描述
类别
版本
作者
许可证
依赖

声明 Odoo 变量¶

在 primary_variables.scss 文件中，您可以覆盖默认的 Odoo SCSS 变量以匹配您的设计。

基于 Airproof 设计，创建您的 primary_variables.scss 文件并定义以下元素：

标题字体家族：Space Grotesk
内容字体族：Lato。为此，请使用这 2 个 woff 文件 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/fonts>。
调色板名称及其组成的 5 种主要颜色：#000000 、 #BBE1FA 、 #CEF8A1 、 #FFFFFF 、 #0B8EE6
页眉和页脚：暂时使用默认模板之一，我们稍后将创建自定义页眉。

另请参阅

请参见参考文档，了解如何使用主变量，以及所有可用的 主变量 <https://github.com/odoo/odoo/blob/20.0/addons/website/static/src/scss/primary_variables.scss> 列表。

重新启动您的脚本以立即看到更改的应用。

不要忘记在脚本中添加清单的路径，并将您的模块设置为要安装的应用。

为确保更改正确应用，请登录到您的网站并检查您的调色板是否包含您指定的颜色。

小技巧

您将需要覆盖更多变量来复制 Airproof 设计。请记住在创建网站的过程中添加它们。

注解

对于字体家族，您可以使用 Google 字体（通过 URL）或添加您自己的字体。

Solutions

要完成此练习，您需要：

创建你的 primary_variables.scss 文件。你可以在我们的示例模块的 primary_variables.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/primary_variables.scss> 文件中找到所有必要信息。
在 font.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/base/font.scss> 文件中加载你的自定义字体。
按照文档中的指示，在 __manifest__.py 中声明您刚刚创建的 2 个文件。
通过您的脚本安装您的模块。在我们的示例中，它看起来像这样：

./odoo-bin --addons-path=../enterprise,addons,../myprojects --db-filter=theming -d theming
--without-demo=True -i website_airproof --dev=xml

声明 Bootstrap 变量¶

除了默认的 Odoo 变量，您还可以重新定义 Bootstrap 变量。Bootstrap 是一个前端框架，默认包含在 Odoo 中。

基于 Airproof 设计，定义以下元素：

标题字体大小：
- h1：3.125rem
- h2：2.5rem
- h3：2rem
- h4：1.75rem
- h5：1.5rem
- h6：1.25rem
- Display 1：6.25rem（这对您主页的主标题很有用）
输入框圆角: 0.625rem
输入框边框颜色：黑色
输入框边框宽度：1px
大按钮边框半径：0px 10px 10px 10px

另请参阅

请参阅关于如何使用 Bootstrap 变量的参考文档。
Odoo 使用的所有 Bootstrap 变量 <https://github.com/odoo/odoo/blob/20.0/addons/web/static/lib/bootstrap/scss/_variables.scss> 列表。
以及 Bootstrap 框架 <https://getbootstrap.com/docs/5.3/getting-started/introduction/> 官方文档。

小技巧

您将需要覆盖更多变量来复制 Airproof 设计。请记住在创建网站的过程中添加它们。
养成定期在本地检查您的更改是否已成功应用且未引起任何错误的习惯。

Solutions

要完成此练习，您需要：

创建你的 bootstrap_overridden.scss 文件。你可以在我们的示例模块的 bootstrap_overridden.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/bootstrap_overridden.scss> 文件中找到所有必要信息。
按照文档中的说明在 __manifest__.py 中声明您的文件。

定义预设¶

除了我们刚刚介绍的变量外，您还可以激活特定视图来修改设计。

添加您的 presets.xml 文件，并基于 Airproof 设计激活适当的视图以满足以下客户请求：

停用页头中的行动号召。
在商店中停用愿望清单功能，但在产品页面上激活它。
在商店页面上，仅在左侧激活按类别筛选。

另请参阅

了解如何定义您的预设。

要开始编写您的文件，请遵循布局中描述的任何 Odoo XML 页面的说明。

小技巧

要完成此练习，您需要安装 电子商务 （ website_sale ）和 愿望清单 （ website_sale_whishlist ）应用。 注意！ 在代码中引用未安装的应用将导致错误。
要查找要激活或不激活的模板，请转到源代码： odoo/addons/website/views/** 。

例如，你可以在 website_templates.xml <https://github.com/odoo/odoo/blob/20.0/addons/website/views/website_templates.xml> 中找到所有头部模板。
要查看预设的效果，请在数据库中添加一些产品（Airproof Mini、Airproof Robin、Warranty、Charger cable），并创建 电子商务类别 （Warranties、Accessories，以及包含 Camera drones 和 Waterproof drones 的 Drones）。你可以在 此处 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/content> 找到产品图片。
您需要激活更多视图来复制 Airproof 设计。请记住在创建网站的过程中添加它们。

Solutions

要停用行动号召：

你需要找到视图位于 odoo/addons/website/views/website_templates.xml 中，id="website.header_call_to_action"

使用正确的记录创建您的 presets.xml 文件

/website_airproof/data/presets.xml¶

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <!-- Disable Call-to-action in header -->
   <record id="website.header_call_to_action" model="ir.ui.view">
      <field name="active" eval="False"/>
   </record>
</odoo>

在清单中，添加这 2 个应用并声明您的文件。

/website_airproof/__manifest__.py¶

'depends': ['website_sale', 'website_sale_wishlist'],
'data': [
   # Options
   'data/presets.xml',
]

在 GitHub 上编辑