形状¶
形状(Shapes)在您希望为网站增添个性时非常实用。
在本章中,您将学习如何添加标准和自定义的背景和图片形状。
背景形状¶
背景形状是 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:
1
= 颜色预设 1 的背景颜色 (o-cc1)2
= 预设颜色 2 的背景色 (o-cc2)3
= 颜色预设 3 的背景颜色 (o-cc3)4
= 预设颜色 4 的背景色 (o-cc4)5
= 颜色预设 5 的背景颜色 (o-cc5)
/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 文件。
/网站防漏/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',
}
声明你的形状文件。
/网站防尘/数据/形状.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>
字段 |
描述 |
---|---|
名称 |
形状名称 |
数据 |
形状的路径 |
网址 |
… |
公开 |
使该形状可供后续编辑。 |
定义形状的样式。
/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 中指定的颜色)。 |
重复横向 |
定义形状是否水平重复。此键为可选,仅在设置为 |
重复垂直方向 |
定义形状是否垂直重复。此键是可选的,仅在设置为 |
最后,将你的形状添加到网站构建器中可用的形状列表中。
/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 |
应用到形状的颜色 |
警告
有时,在添加您的更改后,图片形状可能未被应用。要解决此问题,请打开网站构建器并保存页面,以强制加载形状。