第 3 章 - 自定义（第一部分）

添加自定义 SCSS

你已经调整了 Odoo 和 Bootstrap 变量并设置了预设，但仍然发现你的网站与客户的设计之间存在差异。唯一的解决办法是引入自定义 SCSS。

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

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

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

• 通过添加绿色背景并更改其设计，修改 圆角带框的轮播箭头。

你可以在这里找到各种 媒体文件。

更多内容

请参阅参考文档，了解如何 添加你的 SCSS 规则。

注解

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

这样你就能确保你的规则只会影响网站相关的部分。

Solutions

在我们的 Airproof 示例的 header.scss 和 carousel.scss 中查找解决方案。

添加自定义 JS

现在，让我们为网站添加一个鼠标跟随效果。这一交互元素将提升浏览体验，使其更具吸引力和视觉吸引力。

运用你的 JavaScript 技能来实现它。

更多内容

请参阅参考文档，了解如何 添加 JavaScript 代码。

Solutions

在我们的 Airproof 示例的 mouse_follower.js 和 mouse_follower.scss 中查找解决方案。

创建自定义页眉

变量、预设和自定义 SCSS 都已就绪，现在该完善布局并添加关键的跨页面元素了，先从页眉开始。

1. 根据 Airproof 设计，创建包含以下元素的自定义页眉：

   • 自定义购物车图标。

   • 以按钮形式显示的登录/用户项。

   • 导航文字设置为 0.875rem。

   你可以找到 购物车图标 和 模板示意图。

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

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

更多内容

请参阅参考文档，了解如何：

• 创建 自定义页眉，

• 执行 XPath，

• 创建 巨型菜单模板，

• 创建 页眉叠加。

小技巧

• 请参考现有页眉模板的代码，你可以在 odoo/addons/website/views/website_templates.xml 中找到这些代码。

• 一个良好的实践是创建不同的文件来管理你的自定义视图和模板。例如，所有与总体布局（页眉、页脚……）有关的内容放在 website_templates.xml 中，所有与博客有关的内容放在 website_blog_templates.xml 中，与活动有关的内容放在 website_event_templates.xml 中，等等。

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

• 不要忘记继续尽可能多地通过 Bootstrap variables 和 primary variables 进行修改，例如字体、颜色、大小……。你可以借助它们来完成本练习。

注解

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

Solutions

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

• 页眉和巨型菜单的 XML 结构，参见 website_template.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。

• 在网站构建器的选项列表中添加巨型菜单，参见 mega_menu_option.xml。

• 通过 预设 停用页眉中不需要的选项。

• 购物车图标，由于它与 eCommerce 相关联，请编写一个 XPath 并将其放入名为 website_sale_templates.xml 的新文件中。

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

  警告

  不要忘记，与网站构建器选项行为相关的文件声明在资源包 website.website_builder_assets 中。

• 使用 primaries，例如 header-template、navbar-font……就像你使用变量 header-font-size 将导航设置为 0.875rem 时所做的那样。

• 使用 bootstrap_overridden，例如 $navbar-light-color、$navbar-light-hover-color、$navbar-padding-y……

• 添加一些 scss 规则。

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

  /website_airproof/data/pages/home.xml

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

创建自定义页脚

客户对新页眉非常满意，因为它与提供的设计完全一致。现在，他希望有一个相匹配的自定义页脚。

根据 Airproof 设计，创建包含以下元素的自定义页脚：

• 用于订阅新闻简报的区块。

• 用于版权信息和社交媒体的区块。

你可以在这里找到 图标。

更多内容

请参阅参考文档，了解如何创建 自定义页脚 并调整 版权。

小技巧

• 你可以通过 presets 启用或停用版权信息区块。

• 要使新闻稿版块正常工作，你需要安装 website_mass_mailing 应用。

Solutions

要完成本练习，你需要：

• 将 mass mailing 添加到你的 depends 中：

  /website_airproof/__manifest__.py

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

• 在 website_template.xml 中创建 XML 结构。

• 在 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>
  

• 使用 primaries，例如 footer-template、footer、o-cc4-link……

• 为 newsletter 版块添加一小段 scss 规则。

创建自定义构建块

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

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

1. 创建片段模板。然后，将其添加到网站构建器中可用的构建块列表里。将它放在单独的组中。你可以在以下位置找到 images 和 snippet illustration。

   更多内容

   请参阅参考文档，了解如何创建 自定义构建块。

   

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

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

   • 提供一组各气泡之间可选的外边距。

   更多内容

   请参阅参考文档，了解如何添加 片段选项。

   

3. 将片段添加到你的首页。

小技巧

不要忘记始终在 __manifest__.py 中正确声明你的新文件，并遵循前面介绍过的 文件夹结构。

Solutions

要完成本练习，你需要：

1. 创建你的模板。

   • 你可以在示例模块的 s_airproof_carousel.xml 文件和 s_airproof_carousel/000.scss 文件中找到所有必要信息。

   • 在 images.xml 中记录你的图片。

   • 在 __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. 添加这两个用于编辑气泡的选项。在我们的示例中，它看起来是这样的：

   • 首先在 airproof_carousel_option_plugin.js 中定义选项组件，并将它们注册到构建器插件中。

   • 然后在 airproof_carousel_option.xml 文件中定义在选项面板中渲染的 XML 模板。

   • 此外，在 s_airproof_carousel/000.scss 文件中添加与气泡相关的 SCSS。

   • 在 __manifest__.py 的 website.website_builder_assets 部分中声明你的文件。

3. 将你的片段添加到首页。你可以在示例模块的 home.xml 文件中找到所有必要信息。

创建新的动态片段模板

动态片段是很有用的构建块。它们允许你从后端获取信息，并按照特定筛选条件将其显示在网站上。

已经有多套用于显示动态片段的布局模板。但是，现有模板都无法完全满足客户的需求。

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

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

   • 添加一个 了解更多 链接。

   • 为卡片添加悬停效果。

   • 移动导航箭头。

   你可以在这里找到 图标。

   更多内容

   请参阅参考文档，了解如何 为动态片段创建模板。

   

   小技巧

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

2. 然后，使用你刚刚创建的模板，将一个产品动态片段添加到首页。

   更多内容

   请参阅参考文档，了解如何 调用模板。

Solutions

要完成本练习，你需要：

1. 创建你的片段模板。你可以在示例模块的 options.xml 文件、carousel.scss 和 product_card.scss （用于悬停效果）文件中找到所有必要信息。

2. 将模板应用到首页的产品动态片段上。你可以在示例模块的 home.xml 文件中找到所有必要信息。