第 4 章 - 自定义，第二部分¶

创建自定义背景形状¶

形状是可以应用于背景或图像的装饰元素。它们是 SVG 文件，可以进行动画处理并使用不同的颜色进行自定义。

为了更好地与网站期望的氛围保持一致，创建一个客户可以在不同块上重复使用的自定义背景形状。

使用以下设置创建您的自定义形状：
- 声明你的形状。你可以在 此处 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/shape-waves.svg> 找到原始 SVG 形状。
- 将形状的基础颜色设置为主题的绿色，并将其添加到可用形状列表中。

另请参阅

请参阅关于如何添加自定义背景形状的参考文档。

小技巧

小心， 有个技巧！
在您的形状 SVG 文件中，您必须使用默认 Odoo 调色板中的颜色。
这里，我希望它与我的主颜色 1（#CEF8A1）匹配。因此，在 SVG 文件中，你必须使用 Odoo 默认调色板中的颜色 1（#3AADAA）。

Solutions

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

shapes.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/shapes.xml> 中的形状声明（将 SVG 添加到正确的形状文件夹之后）。
通过 primary_variable.scss <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/scss/primary_variables.scss> 文件设置形状样式。
通过新文件 background_shapes_option_plugin.js <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/background_shapes_option_plugin.js> 将形状添加到形状列表中。别忘了在 __manifest__.py <https://github.com/odoo/tutorials/blob/20.0/website_airproof/__manifest__.py> 的 website.website_builder_assets 部分中声明它。

基于 Airproof 设计，将您刚添加的形状应用到主页上的 文本-图像 构建块：
- 确保形状位于正确的位置。
- 将其颜色设置为主题的浅蓝色。

另请参阅

请参阅关于如何使用背景形状的参考文档。

小技巧

与通过网站构建器应用的形状不同，我们不使用类 o_html_builder_xxx。你必须将 html_builder 替换为在主变量中为形状设置的名称。

Solutions

/website_airproof/data/pages/home.xml¶

<!-- Text-image block & Background shape -->
<section class="s_text_image o_cc o_cc3 o_colored_level pt120 pb96"
data-snippet="s_image_text" data-name="Image - Text" style="background-color: rgb(41, 128, 187);"
data-oe-shape-data="{'shape': 'website_airproof/waves/01', 'colors': {'c1': '#BBE1FA'}, 'flip': ['x']}">
   <div class="o_we_shape o_website_airproof_waves_01 o_we_flip_x" style="background-image:
   url('/html_editor/shape/website_airproof%2Fwaves%2F01.svg?c1=%23BBE1FA');
   background-position: 100% 100%;"/>
   [...]
</section>

创建自定义图片形状¶

同样地，为图片创建自定义形状。这部分工作已经由预先创建的 形状 <https://github.com/odoo/tutorials/blob/20.0/website_airproof/shape-duo.svg> 为你完成了，你可以复用。

现在开始将形状集成到你的主题中。只需按照以下几个步骤：

为网站构建器创建预览。
将主题中的深蓝色应用到垂直线上。
要通过网站构建器使用它，添加一个将用户上传的图片链接到此形状的标签。
最后，将形状添加到网站构建器可用的图片形状列表中。

另请参阅

请参见参考文档，了解如何创建自定义图片形状。

Solutions

在我们的 Airproof 示例中找到解决方案：

将形状添加到正确的文件夹后，用形状预览补全此文件。

/website_airproof/static/image_shapes/duo/01.svg¶

<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
   <use xlink:href="#filterPath" fill="darkgrey"/>
</svg>

调整垂直线的颜色：

/website_airproof/static/image_shapes/duo/01.svg¶

<svg viewBox="0 0 1 1" preserveAspectRatio="none">
  <rect class="background" x="0.494" y="0.325" width="0.0125" height="0.35" rx="0.00625" ry="0.00625"
  fill="#7C6576"/>
</svg>

Add the image tag

/website_airproof/static/image_shapes/duo/01.svg¶

<image xlink:href="" clip-path="url(#clip-path)">
   <animateMotion dur="1ms" repeatCount="indefinite"/>
</image>

使用此 JS 文件 image_shapes_option_plugin.js <https://github.com/odoo/tutorials/blob/20.0/website_airproof/static/src/website_builder/image_shapes_option_plugin.js> 将其添加到图片形状列表中。

完成上述步骤后，将此形状应用到您在上一个练习中创建的构建块（building block）的图片上。并将该形状的竖线填充为绿色。

另请参阅

如需了解图片形状（image shape）的用法，请参阅参考文档使用图片形状。

Solutions

/website_airproof/data/pages/home.xml¶

<img src="/html_editor/image_shape/website_airproof.img_drone_flying/website_airproof/duo/01.svg"
   class="img img-fluid" alt="Drone flying"
   data-shape="website_airproof/duo/01" data-shape-colors=";#BBE1FA;;;"
   data-mimetype="image/svg+xml"
   data-mimetype-before-conversion="image/webp"
   data-original-src="website_airproof/static/src/img/content/drone-flying.webp"
   data-file-name="drone-flying.svg"/>

创建自定义渐变¶

接下来，让我们向背景添加渐变。为了增强页面的动态感，将蓝色 rgb(11, 142, 230) 到深蓝色 rgb(41, 128, 187) 的渐变应用到您的“最新产品”块。但在此之前，将渐变添加到网站构建器中，以便客户可以轻松重复使用它。

另请参阅

请参阅关于如何应用渐变以及如何创建自定义渐变的参考文档。

Solutions

创建一个 color_picker_gradient_tab.js 文件，用于创建自定义渐变并将其添加到网站编辑器（Website Builder）的选项中。
在 manifest 中声明该文件。

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

将其应用到 homepage 的”Latest products”区块背景上。

/website_airproof/data/pages/home.xml¶

<!-- Latest products section -->
<section data-snippet="s_dynamic_snippet_products"
   data-name="Products"
   class="..."
   data-custom-template-data="{}"
   data-number-of-records="16"
   data-product-category-id="all"
   data-split-variants="true"
   data-filter-id="3"
   data-template-key="website_airproof.dynamic_filter_template_product_product_airproof"
   data-carousel-interval="5000"
   data-number-of-elements="4"
   data-number-of-elements-small-devices="2"
   style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;
   --o-wsale-products-grid-gap: 16px;">
   [...]
</section>

动画¶

客户喜欢整体设计，但觉得页面有点静态。通过动画（如 淡入 、 旋转 、 弹跳 等）增强页面的交互性。这些可以应用于列、图像、文本、按钮……

基于 airproof 设计，为以下元素添加动画：

轮播图第一张幻灯片的文本。
第一张幻灯片上的贴纸和无人机照片。
带有图标的 4 个列。

调整动画延迟以实现更平滑的过渡。

另请参阅

请参阅关于如何应用动画的参考文档。

Solutions

在我们的 Airproof 示例中，解决方案在 home.xml <https://github.com/odoo/tutorials/blob/20.0/website_airproof/data/pages/home.xml>。

图像动画¶

<img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute
x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s;
--wanim-intensity: 30;"/>

<img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate
o_anim_zoom_out o_visible" alt="Drone"/>

文本动画¶

<span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One
step</span>

列动画¶

<div class="o_grid_item o_colored_level g-height-7 g-col-lg-3 col-lg-3 text-center
o_anim_fade_in o_animate o_anim_from_bottom o_visible" style="z-index: 2;
grid-area: 6 / 1 / 12 / 4; --wanim-intensity: 15;">
</div>

表单¶

Odoo 中的表单非常强大。它们可以直接将电子邮件发送到个人收件箱，或直接与其他 Odoo 应用程序集成。这很好，因为您客户的主要优先事项之一是售后服务。因此，联系表单必须正确配置。

基于 airproof 设计，创建一个联系页面。记得禁用默认页面并将新页面链接添加到菜单中。客户对其联系表单有以下要求：

姓名和 电子邮件地址 字段。
公司名称 字段。
条件性增值税 字段仅在填写 公司名称 时显示。
所有字段都应为必填项，除了 公司名称 。
表单提交必须触发电子邮件。
表单提交后，感谢消息 应保持在联系页面上可见。

另请参阅

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

停用默认页面，

创建新页面，

添加菜单项，

创建表单。

小技巧

要确定表单的正确代码：

通过网站构建器创建一个测试页面。

拖放您感兴趣的构建块并应用正确的设计。

使用通过 HTML/SCSS 编辑器生成的代码。
您也可以在 Odoo 中找到该构建块的原始代码：odoo/addons/website/views/snippets/s_website_form.xml。

Solutions

在我们的 Airproof 示例的 contact.xml 中可以找到解决方案。

创建页面模板¶

您没有时间为客户创建所有服务页面。别担心！创建一个模板页面，客户可以用它来构建自己的服务页面。

此页面应按以下方式组成：

一个视差构建块，
一个关键优势构建块，标题替换为 “探索我们的服务” ，
一个行动号召构建块，
您的自定义轮播片段。

另请参阅

请参阅关于如何创建页面模板的参考文档。

Solutions

创建您的 new_page_template_templates.xml 文件，并可在我们的 Airproof 示例中查看其内容。

不要忘记在 __manifest__.py 文件中声明您的文件，并定义模板页面包含的内容。

/website_airproof/__manifest__.py¶

'data': [
   # ...
   'views/new_page_template_templates.xml',
],
'assets': {
   # ...
},
'new_page_templates': {
   'airproof': {
      'services': ['s_parallax', 's_airproof_key_benefits_h2', 's_call_to_action',
      's_airproof_carousel']
   }
},

在 GitHub 上编辑