形状¶

如果您想为您的网站增添个性，形状是非常方便的。

在本章中，您将学习如何添加标准和自定义的背景和图像形状。

背景形状¶

背景形状是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文件。

/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),
            ),
        ),
    )
);

键	描述
文件位置	`hexagons/01` 对应于您的文件在 `shapes` 文件夹中的位置。
位置	定义您形状的位置。
大小	定义您形状的大小。
颜色	定义你想要的颜色 c*（这将覆盖你在 SVG 中指定的颜色）。
repeat-x	定义形状是否在水平方向上重复。此键是可选的，只有在设置为 `true` 时才需要定义。
repeat-y	定义形状是否在垂直方向上重复。此键是可选的，只有在设置为 `true` 时才需要定义。

最后，将您的形状添加到网站构建器上可用的形状列表中。

/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	应用于形状的颜色

警告

有时候，在添加更改后，您的图像形状可能不会生效。要解决此问题，请打开网站构建器并保存页面以强制加载形状。

Edit on GitHub