第 1 章 - 主题

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

设置

第一步是确保 Odoo 在本地正确运行。为此，请使用 Shell 脚本来运行服务器。
在此脚本中，定义数据库名称并仅安装 website 模块。

其他资料

请参阅有关如何 run 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 files。

  • 调色板名称和组成它的 5 种主要颜色：#000000、#BBE1FA、#CEF8A1、#FFFFFF、#0B8EE6

  • 页眉和页脚：暂时使用默认模板之一，稍后我们将创建自定义页眉。

其他资料

请参阅有关如何使用 primary variables 的参考文档，以及所有可用 primary variables 的列表。

重新启动脚本即可立即查看更改的应用情况。
不要忘记在脚本中添加清单的路径并将模块设置为要安装的应用程序。

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

小技巧

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

注解

对于字体系列，您可以使用 Google fonts <https://fonts.google.com/>`_（通过 URL）或添加您自己的 :ref:`fonts <theming/module/variables/fonts/custom>。

要完成此练习，您需要：

  1. 创建您的 primary_variables.scss 文件。您可以在我们的示例模块的 primary_variables.scss 文件中找到所有必要的信息。

  2. 将自定义字体加载到 font.scss 文件中。

  3. 如文档中所示，声明您刚刚在 __manifest__.py 中创建的 2 个文件。

  4. 通过脚本安装模块。在我们的示例中，它看起来像这样：

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

声明引导变量

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

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

  • 标题字体大小：

    • h1：3.125rem

    • h2：2.5rem

    • h3 : 2rem

    • h4：1.75rem

    • h5：1.5rem

    • h6：1.25rem

    • 显示1：6.25rem（谁对您主页的主标题有用）

  • 输入边界半径：0.625rem

  • 输入边框颜色：黑色

  • 输入边框宽度：1px

  • 大按钮边框半径：0px 10px 10px 10px

其他资料

小技巧

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

  • 养成定期在本地检查您的更改是否已成功应用并且没有导致任何错误的习惯。

要完成此练习，您需要：

  1. 创建您的 bootstrap_overridden.scss 文件。您可以在我们的示例模块的 bootstrap_overridden.scss 文件中找到所有必要的信息。

  2. 按照文档中的指示在 __manifest__.py 中声明您的文件。

定义预设

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

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

  • 停用标题中的号召性用语。

  • 在商店中停用愿望清单功能，但在产品页面上激活它。

  • 在商店页面上，仅在左侧激活按类别过滤。

其他资料

了解如何定义您的 presets。
要开始编写文件，请按照 布局 中描述的任何 Odoo XML 页面的说明进行操作。

小技巧

  • 要完成练习，您需要安装 eCommerce (website_sale) 和 wishlist (website_sale_whishlist) 应用程序。 小心！ 在代码中引用尚未安装的应用程序将导致错误。

  • 为了找到要激活或不激活的模板，请转到源代码：odoo/addons/website/views/**。
    例如，您可以在 website_templates.xml 中找到标头的所有模板。

  • 要查看预设的效果，请在数据库中添加一些**产品**（Airproof Mini、Airproof Robin、保修、充电线）并创建**电子商务类别**（保修、配件*和*无人机*以及*相机无人机*和*防水无人机）。您将找到 product images here。

  • 您将需要激活更多视图来复制 Airproof 设计。请记住在创建网站的过程中添加它们。

要停用号召性用语：

  1. 您必须找到的视图位于 odoo/addons/website/views/website_templates.xml 和 id="website.header_call_to_action" 中

  2. 使用正确的记录创建 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>

  3. 在清单中，添加 2 个应用程序并声明您的文件。

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