构建模块

构建块，也称为片段，是用户设计和布局页面的方式。它们是设计中重要的 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/website/demo/snippets

布局

Snippets 可以通过使用网站构建器进行用户编辑。一些 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	在右侧面板中显示为片段的名称。如果找不到，则会回退到 Block。
数据片段	用于系统识别片段的标识符

系统会根据模板的名称，在拖放过程中自动添加 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">

禁用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>

The data-vcss and data-js attributes indicate to the system which file version to load for that snippet (e.g., 001.js, 002.scss).

自定义

创建片段的内容。

声明

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

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

选项

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

组属性

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

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	在片段复制后立即发生。
onRemove	在片段被移除之前发生。
onBuilt	在将片段拖放到放置区域后立即发生。当触发此事件时，内容已经插入到页面中。
cleanForSave	在发布者保存页面之前发生。

动态内容模板

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

博客文章

/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_`开头
名称	模板的可读性高的名称