- 上传者： Administrator
- 上传时间：2023年12月07日 00时07分52秒
如果您想为您的网站增添个性，形状是非常方便的。 在本章中，您将学习如何添加标准和自定义的背景和图像形状。 背景形状 None [1] ** 背景形状是SVG文件，您可以将其添加为不同部分的装饰性背景。每个形状都有一个或多个可自定义的颜色，其中一些是动画的。 标准 None [2] * 提供了大量的默 ......
1= 背景颜色的颜色预设1（o-cc1）。2= 背景颜色的颜色预设2 (o-cc2)。3= 背景颜色的颜色预设 3 (o-cc3)。4= 背景颜色的颜色预设 4 (o-cc4)。5= 背景颜色的颜色预设 5 (o-cc5)。
如果您想为您的网站增添个性，形状是非常方便的。
在本章中，您将学习如何添加标准和自定义的背景和图像形状。
背景形状
背景形状是SVG文件，您可以将其添加为不同部分的装饰性背景。每个形状都有一个或多个可自定义的颜色，其中一些是动画的。
标准
提供了大量的默认背景形状选择。
使用
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
<div class="o_we_shape o_web_editor_Zigs_06"/>
<div class="container">
<!-- Content -->
</div>
</section>
data-oe-shape-data 是您的形状的位置。
通过使用X轴或Y轴来水平或垂直翻转形状。
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06','flip':[x,y]}">
<div class="o_we_shape o_we_flip_x o_we_flip_y o_web_editor_Zigs_06"/>
<div class="container">
<!-- Content -->
</div>
</section>
颜色映射
您还可以更改形状的默认颜色映射。
切换颜色映射
首先，将 c* 颜色（这里是 4）放在第一位。
然后，替换颜色（这里是 3）。这些替换颜色也从 1 到 5 范围：
/website_airproof/static/src/scss/boostrap_overridden.scss$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: 1));
添加额外的颜色映射
添加额外的颜色映射允许您在保持原始形状模板的同时添加颜色变体。
/website_airproof/static/src/scss/boostrap_overridden.scss$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Zigs/06', 'second', (4: 3, 5: 1));
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
<div class="o_we_shape o_web_editor_Zigs_06 o_second_extra_shape_mapping"/>
<div class="container">
<!-- Content -->
</div>
</section>
自定义
有时候，您的设计可能需要创建一个或多个自定义形状。
首先，您需要为您的形状创建一个SVG文件。
/website_airproof/static/shapes/hexagons/01.svg<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="86" height="100">
<polygon points="0 25, 43 0, 86 25, 86 75, 43 100, 0 75" style="fill: #3AADAA;"/>
</svg>
确保使用默认的Odoo调色板中的颜色来绘制您的形状。
default_palette = {
'1': '#3AADAA',
'2': '#7C6576',
'3': '#F6F6F6',
'4': '#FFFFFF',
'5': '#383E45',
}
声明您的形状文件。
/website_airproof/data/shapes.xml<record id="shape_hexagon_01" model="ir.attachment">
<field name="name">01.svg</field>
<field name="datas" type="base64" file="website_airproof/static/shapes/hexagons/01.svg"/>
<field name="url">/web_editor/shape/illustration/hexagons/01.svg</field>
<field name="public" eval="True"/>
</record>
字段 | 描述 |
|---|---|
名称 | 形状的名称 |
数据 | 形状的路径 |
url网址 | … |
公共的 | 使形状可供以后编辑。 |
定义您的形状的样式。
/website_airproof/static/src/scss/primary_variables.scss$o-bg-shapes: map-merge($o-bg-shapes,
(
'illustration': map-merge(
map-get($o-bg-shapes, 'illustration') or (),
(
'hexagons/01': ('position': center center, 'size': auto 100%, 'colors': (1), 'repeat-x': true, 'repeat-y': true),
),
),
)
);
键 | 描述 |
|---|---|
文件位置 |
|
位置 | 定义您形状的位置。 |
大小 | 定义您形状的大小。 |
颜色 | 定义你想要的颜色 c*（这将覆盖你在 SVG 中指定的颜色）。 |
repeat-x | 定义形状是否在水平方向上重复。此键是可选的，只有在设置为 |
repeat-y | 定义形状是否在垂直方向上重复。此键是可选的，只有在设置为 |
最后，将您的形状添加到网站构建器上可用的形状列表中。
/website_airproof/views/snippets/options.xml<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Shapes">
<xpath expr="//*[hasclass('o_we_shape_menu')]/*[last()]" position="after">
<we-select-page string="Theme">
<we-button data-shape="illustration/hexagons/01" data-select-label="Hexagon 01"/>
</we-select-page>
</xpath>
</template>
您的自定义形状现在可以像标准形状一样使用。
图像形状
图像形状是您可以添加到图像上的SVG文件作为剪辑蒙版。一些形状具有可自定义的颜色，而一些形状是动画的。
标准
提供了大量的默认图像形状选择。
使用
<img src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="web_editor/solid/blob_2_solid_str"
data-shape-colors="#35979C;;;;"
>
属性 | 描述 |
|---|---|
data-shape | 形状的位置 |
data-shape-colors | 应用于形状的颜色 |
警告
有时候，在添加更改后，您的图像形状可能不会生效。要解决此问题，请打开网站构建器并保存页面以强制加载形状。
- 微信扫一扫，一分也是爱:
-
服务原则及地区范围
宜兴通达网络科技有限公司，地处中国宜兴环科园内，是一家高新技术企业。公司在企业网络维护和企业信息化建设与咨询方面，有10多年经验。
我公司愿与客户一道，力求彻底解决客户问题！
我们不是在给企业提供“头痛医头、脚痛医脚”的暂时解决方案，而是在部署根本性安全与稳定服务！！
我们愿携手客户，建立企业IT规划；杜绝随意安装系统、软件等操作；力求共同维护有序、安全、稳定的网络办公环境！！！
IT服务，服务是根本，客户是上帝；我们提供快速响应、快速上门、快速排查，提供优质高效的服务！！！！
通达科技提供全国范围内的服务，服务形式包括远程协助、电话咨询、电子邮件咨询、传真咨询、问答平台的问题解决等。
宜兴地区提供上门服务：
- 市区服务：宜城街道、城北街道（屺亭街道）、新街街道、新庄街道、环科园、渚桥开发区
- 市郊服务：张渚镇、西渚镇、太华镇、徐舍镇、官林镇、杨巷镇、新建镇、和桥镇、高塍镇、万石镇、周铁镇、芳桥镇、丁蜀镇、湖父镇。
- 联系电话：189-21-343434
- 在线沟通：
