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

创建自定义背景形状

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

  1. 为了更好地契合网站期望的氛围，请创建一个自定义背景形状，以便客户可以在不同版块上重复使用。

    使用以下设置创建你的自定义形状：

    • 声明你的形状。你可以在此处找到原始的 SVG 形状。

    • 将形状的基础颜色设置为主题的绿色，并将其添加到可用形状列表中。

更多内容

请参阅参考文档，了解如何添加 自定义背景形状。

../../../_images/shape.png

小技巧

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

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

  1. 基于 Airproof 设计，将你刚刚添加的形状应用到首页的 Text-Image 构建块上：

    • 确保形状位于正确的位置。

    • 将其颜色设置为主题的浅蓝色。

更多内容

请参阅参考文档，了解如何使用 背景形状。

../../../_images/shape-section.png

小技巧

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

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

创建自定义图像形状

同样地，为图像创建一个自定义形状。我们已经为你完成了部分工作，创建好了一个可以重复使用的 形状。

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

  1. 为网站构建器创建预览。

  2. 将主题中的深蓝色应用到垂直线条上。

  3. 要通过网站构建器使用它，请添加将最终用户上传的图像关联到此形状的标签。

  4. 最后，将该形状添加到网站构建器中可用于图像的形状列表中。

更多内容

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

../../../_images/img-shape.png

在我们的 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>

  • 添加图像标签

/website_airproof/static/image_shapes/duo/01.svg
<image xlink:href="" clip-path="url(#clip-path)">
   <animateMotion dur="1ms" repeatCount="indefinite"/>
</image>

完成之后，将此形状应用到你在上一个练习中创建的构建块的图像上。并将绿色应用到该形状的垂直线上。

更多内容

请参阅参考文档，了解如何 使用图像形状。

../../../_images/img-shape-section.png
/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) 的渐变。但在此之前，请先将该渐变添加到网站构建器中，以便客户可以轻松重复使用。

更多内容

请参阅参考文档，了解如何应用 渐变 以及如何创建 自定义渐变。

  • 创建一个 color_picker_gradient_tab.js 文件，以创建自定义渐变并将其添加到网站构建器选项中。

  • 在 manifest 中声明你的文件。

    警告

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

  • 将其应用到 homepage 中”最新产品”版块的背景上。

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

动画

客户很喜欢整体设计，但觉得页面有些静态。使用 fade-in、rotate、bounce 等动画来增强页面的交互性。这些动画可以应用到列、图像、文本、按钮……

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

  • 轮播第一张幻灯片的文本。

  • 第一张幻灯片中的贴纸和无人机照片。

  • 4 个带图标的列。

调整动画延迟，以获得更平滑的过渡。

更多内容

请参阅参考文档，了解如何应用 动画。

../../../_images/animations.gif

在我们的 Airproof 示例的 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 设计，创建一个联系页面。记得禁用默认的联系页面，并将新页面的链接添加到菜单中。客户对其联系表单有以下要求：

  • 姓名 和 电子邮件地址 字段。

  • 公司名称 字段。

  • 条件增值税 字段仅在填写了 公司名称 时才显示。

  • 除 公司名称 外，所有字段都应为必填项。

  • 表单提交必须触发一封电子邮件。

  • 表单提交后，thank-you message 应继续显示在联系页面上。

更多内容

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

小技巧

要确定表单的正确代码：

  • 通过网站构建器创建一个测试页面。
    拖放你感兴趣的构建块，并应用正确的设计。
    使用通过 HTML/SCSS 编辑器 生成的代码。

  • 你也可以在 Odoo 中找到原始构建块代码：odoo/addons/website/views/snippets/s_website_form.xml。

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

创建页面模板

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

此页面应由以下内容组成：

  • 一个 视差 构建块，

  • 一个 主要优势 构建块，其标题替换为“ 了解我们的服务”，

  • 一个 行动号召 构建块，

  • 你自定义的轮播片段。

更多内容

请参阅参考文档，了解如何创建 页面模板。

../../../_images/page-template.png

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

  2. 不要忘记在 __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']
   }
},