第 3 章 - 自定义，第一部分

添加自定义 SCSS

您已经调整了 Odoo 和 Bootstrap 变量并设置了预设，但仍然注意到您的网站与客户设计之间存在差异。唯一的解决方案是加入自定义 SCSS。

在适当的 SCSS 文件中，重现以下设计元素：

• 在活动导航项上添加 绿色下划线 。

• 修改可折叠导航项的 箭头 。

• 通过添加绿色背景并更改设计来修改 圆角和方框幻灯片的箭头 。

你可以在 此处 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/content/icons> 找到各种媒体文件。

另请参阅

查看关于如何 添加您的 SCSS 规则 的参考文档。

注解

始终最好将所有 SCSS 规则包含在 #wrapwrap 中。此 ID 应用于包含所有页面的 页眉 、 页脚 和 主 内容的 div。

这样您将确保您的规则仅对网站部分产生影响。

Solutions

在我们的 Airproof 示例中，解决方案在 header.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/layout/header.scss> 和 carousel.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/snippets/carousel.scss>。

添加自定义 JS

现在，让我们向网站添加一个鼠标跟随器。这个交互式元素将增强浏览体验，使其更具吸引力和视觉吸引力。

使用您的 JavaScript 技能来实现这一点。

另请参阅

查看关于如何 添加 Javascript 代码 的参考文档。

Solutions

在我们的 Airproof 示例中，解决方案在 mouse_follower.js <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/js/mouse_follower.js> 和 mouse_follower.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/components/mouse_follower.scss>。

创建自定义页眉

变量、预设和自定义 SCSS 就位后，是时候完善布局并添加关键的跨页面元素了，从页眉开始。

1. 基于 Airproof 设计，创建一个包含以下元素的自定义页眉：

   • 一个自定义的购物车图标。

   • 一个作为按钮的登录/用户。

   • 导航文本设为 0.875rem。

   你可以找到 购物车图标 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/content/icons/shopping.svg> 和 模板插图 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/wbuilder/template-header-opt.svg>。

2. 为了让客户找到您之前为他创建的巨型菜单，将其转换为可以通过网站构建器找到的模板。

3. 将您的新页眉放置在首页内容的上方。

另请参阅

查看关于如何操作的参考文档：

• 创建 自定义页眉 ，

• 执行 XPath ，

• 创建 巨型菜单模板 ，

• 创建 页眉覆盖 。

小技巧

• 请参考你可以在 odoo/addons/website/views/website_templates.xml <https://github.com/odoo/odoo/blob/20.0/addons/website/views/website_templates.xml> 中找到的现有头部模板代码。

• 一个好的做法应该是创建不同的文件来管理您的自定义视图和模板。例如，所有关于通用布局（页眉、页脚…）的内容放在 website_templates.xml 中，所有与博客相关的内容放在 website_blog_templates.xml 中，与活动相关的内容放在 website_event_templates.xml 中，等等。

• 要修改购物车图标，可以使用 XPath。

• 不要忘记继续通过 Bootstrap 变量 和 primary 变量 （字体、颜色、大小…）进行尽可能多的修改。您可以使用它们来帮助您完成此练习。

注解

确保您正确调用页眉中的每个模板（如购物车、语言选择器、行动号召等），这样所有内容都将保持可通过网站构建器编辑，并且所有选项都将可用。

Solutions

在我们的 Airproof 示例中找到以下内容的解决方案：

• website_template.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/views/website_templates.xml> 中头部和超级菜单的 XML 结构。

• 禁用默认页眉：

  /website_airproof/data/presets.xml

  <!-- Disable default header -->
  <record id="website.template_header_default" model="ir.ui.view">
     <field name="active" eval="False"/>
  </record>
  

• 在 header_template_option.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/header_template_option.xml> 中将头部添加到网站构建器的选项列表中。

• 在 mega_menu_option.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/mega_menu_option.xml> 中将超级菜单添加到网站构建器的选项列表中。

• 通过 预设 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/presets.xml> 禁用你不需要的头部选项。

• 购物车图标由于与电子商务关联，请在一个名为 website_sale_templates.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/views/website_sale_templates.xml> 的新文件中编写 XPath。

• 在你的 __manifest__.py 中声明你的 website_templates.xml 文件以及所有新文件。

  警告

  别忘了与网站构建器选项行为相关的文件是在资产包 website.website_builder_assets 中声明的。

• 使用 主变量 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/primary_variables.scss>，如 header-template、navbar-font 等。正如你使用变量 header-font-size 将导航设为 0.875rem 那样。

• 使用 bootstrap_overridden <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/bootstrap_overridden.scss> 中的 $navbar-light-color、$navbar-light-hover-color、$navbar-padding-y 等。

• 添加一些 scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/layout/header.scss> 规则。

• 要将页眉置于内容上方，请向主页添加正确的字段：

  /website_airproof/data/pages/home.xml

  <!-- Home -->
  <record id="page_home" model="website.page">
     <field name="header_overlay" eval="True"/>
  

创建自定义页脚

客户对新页眉非常满意，因为它与提供的设计完美契合。现在，他想要一个匹配的自定义页脚。

基于 Airproof 设计，创建一个包含以下元素的自定义页脚：

• 一个用于订阅新闻通讯的部分。

• 一个用于版权和社交媒体的部分。

你可以在 此处 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/content/icons> 找到图标。

另请参阅

请参阅关于如何创建 自定义页脚 和调整 版权 的参考文档。

小技巧

• 你可以通过 预设 启用或禁用版权部分。

• 要使新闻通讯部分正常工作，您需要安装 website_mass_mailing 应用程序。

Solutions

要完成此练习，您需要：

• 将 mass_mailing 添加到您的依赖中：

  /website_airproof/__manifest__.py

  'depends': ['website_sale', 'website_sale_wishlist', 'website_blog',
  'website_mass_mailing'],
  

• 在 website_template.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/views/website_templates.xml> 中创建 XML 结构。

• 在 footer_option_plugin.js <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/footer_option_plugin.js> 中将模板添加到选项列表中。并将其添加到 manifest 中。

• 禁用默认页脚并启用版权：

  /website_airproof/data/presets.xml

  <!-- Disable Default Footer -->
  <record id="website.footer_custom" model="ir.ui.view">
     <field name="active" eval="False"/>
  </record>
  <!-- Enable Copyright -->
  <record id="website.footer_no_copyright" model="ir.ui.view">
     <field name="active" eval="False"/>
  </record>
  

• 使用 主变量 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/primary_variables.scss>，如 footer-template、footer、o-cc4-link 等。

• 为 newsletter <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/snippets/newsletter.scss> 部分添加少量 scss 规则。

创建您的自定义构建块

为了让您的客户进一步自定义他的网站，创建量身定制的构建块，他可以自由拖放到不同的页面上。

基于 Airproof 设计，创建一个自定义轮播片段来展示无人机。然后，将其作为封面部分添加到您的主页上。

1. 创建片段模板。然后，将其添加到网站构建器可用的建筑块列表中。将其放在自己的组中。你可以在此处找到 图片 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/snippets/s_airproof_caroussel> 和 片段插图 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg>。

   另请参阅

   请参阅关于如何创建 自定义构建块 的参考文档。

   

2. 在网站构建器中为气泡添加两个选项：

   • 允许用户仅在蓝色或绿色阴影之间选择。

   • 提供气泡之间可能的一系列边距。

   另请参阅

   请参阅关于如何添加 片段选项 的参考文档。

   

3. 在您的主页上添加该片段。

小技巧

不要忘记始终在您的 __manifest__.py 中正确声明新文件，并遵循之前看到的良好 文件夹结构 。

Solutions

要完成此练习，您需要：

1. 创建您的模板。

   • 你可以在我们示例模块的 s_airproof_carousel.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/views/snippets/s_airproof_carousel.xml> 文件和 s_airproof_carousel/000.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/snippets/s_airproof_carousel/000.scss> 文件中找到所有必要信息。

   • 在 images.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/images.xml> 中记录你的图片。

   • 在 __manifest__.py <https://github.com/odoo/tutorials/blob/20.0/website_airproof/__manifest__.py> 中声明你的文件。

   • 将其添加到构建块列表中。在我们的示例中，它看起来像这样：

     /website_airproof/views/snippets/options.xml

     <!-- Add custom snippets to the builder -->
     <template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
        <xpath expr="//snippets[@id='snippet_groups']/*[1]" position="before">
           <t snippet-group="airproof" t-snippet="website.s_snippet_group" string="Airproof"
           t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg"/>
        </xpath>
        <xpath expr="//snippets[@id='snippet_structure']/*[1]" position="before">
           <t t-snippet="website_airproof.s_airproof_carousel" string="Custom snippet"
           group="airproof">
             <keywords>Carousel block</keywords>
           </t>
        </xpath>
     </template>
     

2. 添加 2 个用于编辑气泡的选项。在我们的示例中，它如下所示：

   • 首先在 airproof_carousel_option_plugin.js <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/airproof_carousel_option_plugin.js> 中定义选项组件，并在构建器插件中注册它们。

   • 然后在 airproof_carousel_option.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/airproof_carousel_option.xml> 文件中定义渲染在选项面板中的 XML 模板。

   • 此外，在 s_airproof_carousel/000.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/snippets/s_airproof_carousel/000.scss> 文件中添加与气泡相关的 SCSS。

   • 在你的 __manifest__.py <https://github.com/odoo/tutorials/blob/20.0/website_airproof/__manifest__.py> 的 website.website_builder_assets 部分声明你的文件。

3. 将你的片段添加到主页。你可以在我们示例模块的 home.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/pages/home.xml> 文件中找到所有必要信息。

创建新的动态片段模板

动态片段是有用的构建块。这些允许您从后端获取信息，并根据某些筛选器将其显示在网站上。

已经有几个用于显示动态片段的布局模板。然而，现有的模板都不完全符合您客户的需求。

基于 Airproof 设计，创建一个自定义模板，您将将其应用于主页上的产品动态片段。

1. 首先，创建一个自定义模板，该模板将被添加到动态产品模板列表中。它必须包含以下元素：

   • 添加一个 发现更多 链接。

   • 在卡片上添加悬停效果。

   • 移动导航箭头。

   你可以在 此处 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/img/content/icons> 找到图标。

   另请参阅

   请参阅关于如何 为动态代码段创建模板 的参考文档。

   

   小技巧

   您可以在网站构建器中验证您的模板是否出现在产品动态代码段的可用模板列表中。

2. 然后，将带有您刚创建模板的产品动态代码段添加到主页。

   另请参阅

   请参阅关于如何 调用模板 的参考文档。

Solutions

要完成此练习，您需要：

1. 创建你的片段模板。你可以在我们示例模块的 options.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/views/snippets/options.xml> 文件、carousel.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/snippets/carousel.scss> 和 product_card.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/components/product_card.scss> （用于悬停效果）文件中找到所有必要信息。

2. 将模板应用于主页上的产品动态片段。你可以在我们示例模块的 home.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/pages/home.xml> 文件中找到所有必要信息。