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

添加自定义 SCSS¶

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

在 theme.scss 中，重现以下设计元素：

在活动导航项上添加 绿色下划线 。
修改可折叠导航项的箭头。
通过添加绿色背景并更改其设计来修改 滑块的箭头 。

您将在此处找到各种媒体。

参见

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

注解

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

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

Solutions

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

添加自定义 JS¶

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

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

参见

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

Solutions

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

创建自定义页眉¶

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

基于 Airproof 设计，创建一个包含以下元素的自定义页眉：
- 一个自定义的购物车图标。
- 一个作为按钮的登录/用户。
- 导航文本设置为 14px。
您可以找到购物车图标和模板图示。
为了让客户找到您之前为他创建的巨型菜单，将其转换为可以通过网站构建器找到的模板。
将您的新页眉放置在首页内容的上方。

参见

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

创建自定义页眉，
执行 XPath ，
创建巨型菜单模板，
创建页眉覆盖。

小技巧

基于您可以在 odoo/addons/website/views/website_templates.xml 中找到的现有页眉模板代码。
一个好的做法应该是创建不同的文件来管理您的自定义视图和模板。例如，所有关于通用布局（页眉、页脚…）的内容放在 website_templates.xml 中，所有与博客相关的内容放在 website_blog_templates.xml 中，与活动相关的内容放在 website_event_templates.xml 中，等等。
要修改购物车图标，您可以使用 XPath 。

由于这与电子商务相关，请将其放在名为 website_sale_templates.xml 的新文件中。
不要忘记继续通过 Bootstrap 变量 和 primary 变量 （字体、颜色、大小…）进行尽可能多的修改。您可以使用它们来帮助您完成此练习。

注解

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

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>

在您的 manifest 中声明您的 website_templates.xml 文件以及所有新文件。
通过 presets 禁用您不希望出现在页眉中的选项。
使用 primaries ，例如 header-template 、 navbar-font 、 header-font-size…
使用 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 设计，创建一个包含以下元素的自定义页脚：

一个用于订阅新闻通讯的部分。
一个用于版权和社交媒体的部分。

您可以在这里找到图标。

参见

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

小技巧

您可以通过预设启用或禁用版权部分。
要使新闻通讯部分正常工作，您需要安装 website_mass_mailing 应用程序。

Solutions

要完成此练习，您需要：

将 mass_mailing 添加到您的依赖中：

/website_airproof/__manifest__.py¶

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

找到 xml 结构并将模板添加到 website_template.xml 上的选项列表。

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

/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 设计，创建一个自定义轮播片段来展示无人机。然后，将其作为封面部分添加到您的主页上。

创建片段模板。然后，将其添加到网站构建器中可用的构建块列表中。将其放在自己的类别中。您可以在这里找到图像和片段插图。

参见
请参阅关于如何创建自定义构建块的参考文档。
在网站构建器中为气泡添加两个选项：
- 允许用户仅在蓝色或绿色阴影之间选择。
- 提供气泡之间可能的一系列边距。
参见
请参阅关于如何添加片段选项的参考文档。
在您的主页上添加该片段。

小技巧

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

Solutions

要完成此练习，您需要：

创建您的模板。

您可以在我们的示例模块中的 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>

将该选项添加到网站构建器中。在我们的示例中，它看起来像这样：

/website_airproof/views/snippets/s_airproof_carousel.xml¶

<!-- Add options to snippets -->
<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof -
Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".x_bubble_item">
         <!-- Bubble shadow color -->
         <we-button-group string="Bubble shadow">
            <we-button data-select-class="x_bubble1">Blue</we-button>
            <we-button data-select-class="x_bubble2">Green</we-button>
         </we-button-group>
         <!-- Bubble spacing -->
         <we-range string="Bubble Spacing" data-select-class="mb-1|mb-2|mb-3|mb-4|mb-5"/>
      </div>
   </xpath>
   <xpath expr="//div[@data-js='Box'][@data-selector='section .row > div']" position="attributes">
      <!-- Disable standard shadow & borders for bubbles -->
      <attribute name="t-attf-data-exclude" add=".x_bubble_item" separator=", "/>
   </xpath>
</template>

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

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

创建新的动态片段模板¶

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

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

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

首先，创建一个自定义模板，该模板将被添加到动态产品模板列表中。它必须包含以下元素：
- 添加一个发现更多链接。
- 在卡片上添加悬停效果。
- 移动导航箭头。
您可以在这里找到图标。

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

小技巧
您可以在网站构建器中验证您的模板是否出现在产品动态代码段的可用模板列表中。
然后，将带有您刚创建模板的产品动态代码段添加到主页。

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

Solutions

要完成此练习，您需要：

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

Edit on GitHub