第 1 章 - 主题设计¶

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

设置¶

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

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

更多内容

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

构建模块结构¶

现在我们知道一切运行正常，接下来开始构建模块。

请参照以下结构开始创建将用作主题的模块。你将在这里添加 XML 页面、SCSS、JS 等内容。

更多内容

关于如何组织主题模块的结构，请参阅参考文档。

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

别忘了添加 __init__.py 和 __manifest__.py 文件。

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

name（必填）
description
category
version
author
license
depends

声明 Odoo 变量¶

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

根据 Airproof 设计，创建你的 primary_variables.scss 文件，并定义以下元素：

标题字体：Space Grotesk
正文字体：Lato。为此，请使用这 2 个 woff 文件。
调色板名称及其组成的 5 种主要颜色：#000000、#BBE1FA、#CEF8A1、#FFFFFF、#0B8EE6
页眉与页脚：暂时使用默认模板之一，我们稍后会创建自定义页眉。

更多内容

关于如何使用主要变量，以及所有可用的主要变量列表，请参阅参考文档。

重启脚本，即可立即看到你所做的更改生效。

别忘了在脚本中添加清单文件的路径，并将你的模块设为要安装的应用。

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

小技巧

要复刻 Airproof 设计，你还需要覆盖更多变量。请记住在创建网站的过程中随时添加它们。

注解

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

Solutions

要完成本练习，你需要：

创建你的 primary_variables.scss 文件。你可以在示例模块的 primary_variables.scss 文件中找到所有必要信息。
在 font.scss 文件中加载你的自定义字体。
按文档说明，在 __manifest__.py 中声明你刚创建的两个文件。
通过脚本安装你的模块。在我们的示例中，它看起来是这样：

./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 变量列表。
以及 Bootstrap 框架官方文档。

小技巧

要复刻 Airproof 设计，你还需要覆盖更多变量。请记住在创建网站的过程中随时添加它们。
养成习惯，定期在本地检查你的更改是否成功应用，并且没有引发任何错误。

Solutions

要完成本练习，你需要：

创建你的 bootstrap_overridden.scss 文件。你可以在示例模块的 bootstrap_overridden.scss 文件中找到所有必要信息。
按文档说明，在 __manifest__.py 中声明你的文件。

定义预设¶

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

添加你的 presets.xml 文件，并根据 Airproof 设计激活适当的视图，以满足以下客户需求：

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

更多内容

了解如何定义预设。

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

小技巧

要完成本练习，你需要安装 eCommerce （website_sale）和 wishlist （website_sale_whishlist）应用。请注意！ 在代码中引用尚未安装的应用会导致错误。
要找到需要激活或取消激活的模板，请查看源代码：odoo/addons/website/views/**。

例如，你可以在 website_templates.xml 中找到页眉的所有模板。
要查看预设的效果，请在数据库中添加一些产品（Airproof Mini、Airproof Robin、Warranty、Charger cable），并创建 eCommerce 类别 （Warranties、Accessories 以及 Drones，其中包含 Camera drones 和 Waterproof drones）。你可以在产品图片中找到这些图片。
要复现 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',
]