第 3 章 - 定制，第 I 部分

添加自定义 SCSS

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

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

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

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

• 通过添加绿色背景并更改其设计来修改 圆形和盒装滑块的箭头。

您会发现各种 media here。

其他资料

请参阅有关如何 add your SCSS rules 的参考文档。

注解

最好将所有 SCSS 规则包含在 #wrapwrap 中。此 ID 应用于对所有页面的 header、footer 和 main 内容进行分组的 div。

因此，您可以确定您的规则只会对网站部分产生影响。

Solutions

在 header.scss 和 carousel.scss 的密封示例中找到解决方案。

添加自定义JS

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

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

其他资料

请参阅有关如何 add Javascript code 的参考文档。

Solutions

在 mouse_follower.js 和 mouse_follower.scss 的密封示例中找到解决方案。

创建自定义标头

变量、预设和自定义 SCSS 就位后，就可以从标题开始完善布局并添加关键的跨页面元素。

1. 基于 Airproof 设计，创建包含以下元素的自定义标头：

   • 自定义购物车图标。

   • 登录/用户作为按钮。

   • 导航文本为 0.875rem。

   您可以找到 cart icon 和 template illustration。

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

3. 将新标题放置在主页内容之上。

其他资料

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

• 创建:ref:custom headers <website_themes/layout/header/custom>，

• 执行 X路径，

• 创建一个 mega menu template，

• 创建一个 header overlay。

小技巧

• 基于您可以在 odoo/addons/website/views/website_templates.xml 中找到的现有标头模板的代码。

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

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

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

注解

确保正确调用标头中的每个模板（例如购物车、语言选择器、号召性用语等），以便所有内容都可以通过网站构建器进行编辑，并且所有选项都可用。

Solutions

在我们的密封示例中找到以下解决方案：

• website_template.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 中网站生成器的选项列表中。

• 将大型菜单添加到 mega_menu_option.xml 网站生成器的选项列表中。

• 通过 presets 禁用标题中不需要的选项。

• 购物车图标，因为它链接到电子商务，所以执行一个 XPath，将其放置在名为 website_sale_templates.xml 的新文件中。

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

  警告

  不要忘记与网站构建器选项行为相关的文件是在捆绑包 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 设计，创建包含以下元素的自定义页脚：

• 新闻通讯订阅部分。

• 版权和社交媒体部分。

您将找到 icons here。

其他资料

请参阅有关如何创建 custom footer 和调整 版权 的参考文档。

小技巧

• 您可以通过 presets 启用或禁用版权部分。

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

Solutions

要完成此练习，您需要：

• 将 mass mailing 添加到您的依赖项中：

  /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。

   其他资料

   请参阅有关如何创建 custom building blocks 的参考文档。

   

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

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

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

   其他资料

   请参阅有关如何添加 snippet options 的参考文档。

   

3. 将代码片段添加到您的主页上。

小技巧

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

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

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

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

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

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

3. 将您的代码片段添加到主页。您可以在我们的示例模块的 home.xml 文件中找到所有必要的信息。

创建新的动态片段模板

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

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

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

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

   • 添加 Discover more 链接。

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

   • 移动导航箭头。

   您将找到 icons here。

   其他资料

   请参阅有关如何 create a template for dynamic snippets 的参考文档。

   

   小技巧

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

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

   其他资料

   请参阅有关如何 call a template 的参考文档。

Solutions

要完成此练习，您需要：

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

2. 将模板应用到主页上的产品动态代码段。您可以在我们的示例模块的 home.xml 文件中找到所有必要的信息。