- 上传者： Administrator
- 上传时间：2023年12月07日 00时06分57秒
构建块，也称为片段，是用户设计和布局页面的方式。它们是设计中重要的 XML 元素。 建筑模块分为四个类别： 结构块 ：为网站提供基本结构 特性块 ：用于描述产品或服务的特性 动态内容块 ：与后端进行动画或交互的块 内部内容块 ：在其他构建块内使用的块 在本章中，您将学习如何创建自定义的构建块和选项。 ......
结构块：为网站提供基本结构
特性块：用于描述产品或服务的特性
动态内容块：与后端进行动画或交互的块
内部内容块：在其他构建块内使用的块
尽量使用Bootstrap原生类。
为所有自定义类添加前缀。
使用下划线小写命名类，例如
.x_nav，.x_nav_item。避免使用ID标签。
构建块，也称为片段，是用户设计和布局页面的方式。它们是设计中重要的 XML 元素。
建筑模块分为四个类别：
在本章中，您将学习如何创建自定义的构建块和选项。
文件结构
布局的文件结构如下。
views
├── snippets
│ └── options.xml
│ └── s_snippet_name.xml
样式文件的结构如下。
static
├── src
│ └── snippets
│ └── options.scss
│ └── s_snippet_name
│ └── 000.js
│ └── 000.scss
│ └── 000.xml
│ └── option.js
另请参阅
布局
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 属性必须在主题页面上声明片段时指定。
小技巧
将您的自定义片段添加到默认片段列表中，以便用户可以直接从编辑面板上拖放它到页面上。
/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>
另请参阅
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。必须以 `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。必须以 `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。必须以 `dynamic_filter_template_event_event_`开头 |
名称 | 模板的可读性高的名称 |
- 微信扫一扫，一分也是爱:
-
服务原则及地区范围
宜兴通达网络科技有限公司，地处中国宜兴环科园内，是一家高新技术企业。公司在企业网络维护和企业信息化建设与咨询方面，有10多年经验。
我公司愿与客户一道，力求彻底解决客户问题！
我们不是在给企业提供“头痛医头、脚痛医脚”的暂时解决方案，而是在部署根本性安全与稳定服务！！
我们愿携手客户，建立企业IT规划；杜绝随意安装系统、软件等操作；力求共同维护有序、安全、稳定的网络办公环境！！！
IT服务，服务是根本，客户是上帝；我们提供快速响应、快速上门、快速排查，提供优质高效的服务！！！！
通达科技提供全国范围内的服务，服务形式包括远程协助、电话咨询、电子邮件咨询、传真咨询、问答平台的问题解决等。
宜兴地区提供上门服务：
- 市区服务：宜城街道、城北街道（屺亭街道）、新街街道、新庄街道、环科园、渚桥开发区
- 市郊服务：张渚镇、西渚镇、太华镇、徐舍镇、官林镇、杨巷镇、新建镇、和桥镇、高塍镇、万石镇、周铁镇、芳桥镇、丁蜀镇、湖父镇。
- 联系电话：189-21-343434
- 在线沟通：
