构建块

构建块（也称为片段）是用户设计和布局页面的方式。它们是您设计中的重要 XML 元素。

构建块分为四个类别：

1. 结构块：为网站提供基本结构

2. 功能模块：用于描述产品或服务的功能

3. 动态内容块：会动画化或与后端交互的内容块

4. 内部内容块：用于其他构建块内部的内容块

在本章中，您将学习如何创建自定义的构建块和选项。

文件结构

布局的文件结构如下。

views
├── snippets
│   └── options.xml
│   └── s_snippet_name.xml

样式文件的结构如下。

static
├── src
│   └── snippets
│       └── options.scss
│       └── s_snippet_name
│           └── 000.js
│           └── 000.scss
│           └── 000.xml
│           └── option.js

另请参见

不同片段的 XML 模板

演示页面

http://localhost:8069/网站/演示/片段

布局

片段可以通过网站构建器由用户进行编辑。一些 Bootstrap 类非常重要，因为 它们会触发网站构建器的一些选项。

包装器

任何代码片段的标准主容器是 section。任何 section 元素都可以像一段可以移动或复制的内容块一样进行编辑。

<section class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</section>

对于内部内容片段，可以使用任何其他 HTML 标签。

<div class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</div>

属性	描述
类	此代码片段的唯一类名
data-name	显示在右侧面板中作为代码片段的名称。如果未找到，则会回退到“块”。
data-snippet	系统用于识别代码片段的标识符

系统在拖放过程中会根据模板名称自动添加 data-name 和 data-snippet 属性。

警告

当在主题页面中声明一个代码片段时，应特别添加这些属性。

警告

避免在另一个 section 标签内添加 section 标签：这会导致网站构建器的选项被触发两次。你可以改用内部内容片段。

列

任何直接从 .row 元素继承的大型 Bootstrap 列（遵循 Bootstrap 结构）都将被网站构建器触发以实现可调整大小。

.row > .col-lg-*

在列和部分添加内边距。

class="pt80 pb80"

为列和部分添加基于颜色调色板的背景。

class="o_cc o_cc*"

使元素不可编辑。

<div class="o_not_editable">

启用列选择器。

<div class="container s_allow_columns">

禁用列选项。

<div class="row s_nb_column_fixed">

禁用所有子列的大小选项。

<div class="row s_col_no_resize">

禁用单列的大小选项。

<div class="col-lg-* s_col_no_resize">

禁用所有列的背景颜色选项。

<div class="row s_col_no_bgcolor">

禁用某一列的背景颜色选项。

<div class="col-lg-* s_col_no_bgcolor">

添加视差效果。

<section class="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('...'); background-position: 50% 75%;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

添加一个黑色筛选器，不透明度为 50%。

<section>
    <div class="o_we_bg_filter bg-black-50"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

添加一个白色筛选器，不透明度为 85%。

<section>
    <div class="o_we_bg_filter bg-white-85"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

添加一个自定义颜色筛选器。

<section>
    <div class="o_we_bg_filter" style="background-color: rgba(39, 110, 114, 0.54) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

添加自定义渐变筛选器。

<section>
    <div class="o_we_bg_filter" style="background-image: linear-gradient(135deg, rgba(255, 204, 51, 0.5) 0%, rgba(226, 51, 255, 0.5) 100%) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

样式

兼容性系统

当一个代码片段具有 data-vcss 或 data-vjs 属性时，表示它是更新后的版本，而不是原始版本。

<section class="s_snippet_name" data-vcss="..." data-js="...">
    <!-- Content -->
</section>

data-vcss 和 data-js 属性指示系统为该代码片段加载哪个文件版本（例如：001.js，002.scss）。

自定义

创建代码片段的内容。

声明

/网站防尘/views/snippets/s_airproof_snippet.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="s_airproof_snippet" name="...">
        <section class="s_airproof_snippet">
            <!-- Content -->
        </section>
    </template>

</odoo>

警告

当在主题页面中声明一个代码片段时，必须指定 data-name 和 data-snippet 属性。

小技巧

• 尽可能使用 Bootstrap 原生类。

• 为所有自定义类添加前缀。

• 使用下划线小写命名法来命名类，例如 .x_nav、.x_nav_item。

• 避免使用 ID 标签。

将你的自定义代码片段添加到默认代码片段列表中，这样用户就可以直接从编辑面板拖放该片段到页面上。

/website_airproof/views/snippets/options.xml

<template id="snippets" inherit_id="website.snippets" name="Custom Snippets">
    <xpath expr="//*[@id='default_snippets']" position="before">
        <t id="x_theme_snippets">
            <div id="x_theme_snippets_category" class="o_panel">
                <div class="o_panel_header">Theme</div>
                <div class="o_panel_body">
                    <t t-snippet="website_airproof.s_airproof_snippet" t-thumbnail="/website_airproof/static/src/img/wbuilder/s_airproof_snippet.svg">
                        <keywords>Snippet</keywords>
                    </t>
                </div>
            </div>
        </t>
    </xpath>
</template>

属性	描述
代码片段	要使用的模板
缩略图	片段缩略图的路径

选项

选项允许用户使用网站构建器编辑代码片段的外观。您可以轻松创建代码片段选项，并自动将其添加到网站构建器中。

组属性

选项被包裹在组中。组可以具有定义包含的选项如何与用户界面交互的属性。

data-selector 将用户组中的所有选项绑定到特定元素。它可以与 data-target 和 data-exclude 一起使用。

<div data-selector="section, h1, .custom_class, #custom_id">

data-js 绑定自定义 JavaScript 方法。

<div data-js="CustomMethodName" data-selector="...">

data-drop-in 定义了可以将代码片段放置进去的元素列表。

<div data-selector="..." data-drop-in="...">

data-drop-near 定义了可以将代码片段放置在其旁边的元素列表。

<div data-selector="..." data-drop-near="...">

SCSS 选项

可以将标准或自定义 CSS 类应用到代码片段上。根据所选择的方法，用户界面的行为将会有所不同。

data-select-class="..."

更多 data-select-class 在同一组中定义了用户可以应用的类列表。一次只能启用一个选项。

/website_airproof/views/snippets/options.xml

<template id="snippet_options" inherit_id="website.snippet_options" name="...">
    <xpath expr="." position="inside">

        <div data-selector="h1, h2, h3, h4, h5, h6">
            <we-select string="Headings">
                <we-button data-select-class="">Default</we-button>
                <we-button data-select-class="x_custom_class_01">01</we-button>
                <we-button data-select-class="x_custom_class_02">02</we-button>
            </we-select>
        </div>

    </xpath>
</template>

另请参见

不同片段的 XML 模板

JavaScript 选项

data-js 属性可以分配给一个选项组，以定义一个自定义方法。

/** @odoo-module */

import options from 'web_editor.snippets.options';

options.registry.CustomMethodName = options.Class.extend({
    //
});

网站构建器提供了一些事件，您可以使用这些事件来触发自定义功能。

事件	描述
开始	在发布者首次在编辑会话中选择代码片段，或在页面上拖放代码片段时触发。
onFocus	每次用户选择代码片段或将代码片段拖放到页面上时都会触发。
onBlur	当代码片段失去焦点时触发。
onClone	在代码片段被复制之后立即发生。
移除	在代码片段被删除之前触发。
onBuilt	在代码片段被拖放到放置区域后立即发生。当此事件触发时，内容已经插入到页面中。
清理以保存	在发布者保存页面之前发生。

动态内容模板

默认情况下，动态内容块在网站构建器中提供了一组可用的模板。你也可以将自定义模板添加到列表中。

博客文章

/website_airproof/views/snippets/options.xml

<template id="dynamic_filter_template_blog_post_airproof" name="...">
    <div t-foreach="records" t-as="data" class="s_blog_posts_post">
        <t t-set="record" t-value="data['_record']"/>
        <!-- Content -->
    </div>
</template>

属性	描述
id	模板的ID。必须以 dynamic_filter_template_blog_post_ 开头
名称	模板的可读名称

产品

/website_airproof/views/snippets/options.xml

<template id="dynamic_filter_template_product_product_airproof" name="...">
    <t t-foreach="records" t-as="data" data-number-of-elements="4" data-number-of-elements-sm="1" data-number-of-elements-fetch="8">
        <t t-set="record" t-value="data['_record']"/>
        <!-- Content -->
    </t>
</template>

属性	描述
id	模板的ID。必须以 dynamic_filter_template_product_product_ 开头
名称	模板的可读名称
data-number-of-elements	每张幻灯片上的产品数量（桌面端）
data-number-of-elements-sm	每张幻灯片上的产品数量（移动端）
data-number-of-elements-fetch	获取的产品总金额

事件

/website_airproof/views/snippets/options.xml

<template id="dynamic_filter_template_event_event_airproof" name="...">
    <div t-foreach="records" t-as="data" class="s_events_event">
        <t t-set="record" t-value="data['_record']._set_tz_context()"/>
        <!-- Content -->
    </div>
</template>

属性	描述
id	模板的ID。必须以 dynamic_filter_template_event_event_ 开头
名称	模板的可读名称