形状¶

如果您想为网站增添个性，形状会非常实用。

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

背景形状¶

背景形状是 SVG 文件，可以作为装饰性背景添加到您的各个区块中。每个形状都有一种或多种可自定义的颜色，其中一些还带有动画效果。

Warning

Odoo 的默认形状以 Odoo 默认颜色调色板映射作为参照。这样，每次调色板发生变化时，颜色都会自动适配：

default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}

标准¶

系统提供了大量默认背景形状可供选择。

用法

<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 是一个 JSON 对象，包含有关形状的信息，例如 SVG 文件的位置、重复和翻转选项等。

例如，您可以使用 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>

颜色映射¶

您还可以更改形状的默认颜色映射，方法是在当前映射中切换颜色，或者在不修改初始映射的情况下创建一个替代映射。

切换颜色映射¶

首先，我们可以使用这样一个形状：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
            <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z"/>
        </svg>
        <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
            <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z"/>
        </svg>
    </defs>
    <svg>
        <use xlink:href="#zigs06_top"/>
        <use xlink:href="#zigs06_bottom"/>
    </svg>
</svg>

这里，我们使用了 #383E45 和 #FFFFFF，它们对应 Odoo 默认调色板中的第 5 种和第 4 种颜色。

该形状在 SCSS 中声明如下：

/website_airproof/static/src/scss/primary_variables.scss¶

'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),

顶部使用偏黑色 c5，底部和中间使用偏浅色 c4，形状本身则完全透明。

我们将使用若干个 key: value 键值对来重写 colors 映射：

使用调色板引用和自定义颜色

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))

或仅使用引用

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: 1));

白色 c4 将被替换为偏白色 c3，黑色 c5 将被替换为白色 c1。

结果

添加额外的颜色映射¶

添加额外的颜色映射，使您能够在保留原始版本的同时，为形状模板添加颜色变体。

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

字段	说明
name	形状的名称
datas	形状的路径
url	形状在 Web 编辑器中的位置。网站构建器会自动将该文件复制到 `/web_editor/shape/illustration` 中。
public	使该形状可供后续编辑。

SCSS¶

定义形状的样式。

/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` 文件夹中的位置。
position	定义形状的位置。
size	定义形状的大小。
colors	定义您希望形状采用的 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>

在页面中使用它¶

在 XML 页面中，您可以像使用其他形状一样使用您的形状。

<section class="..." data-oe-shape-data="{'shape': 'illustration/hexagons/01', 'colors': 'c4': '#8595A2', 'c5': 'rgba(0, 255, 0)'}">
    <div class="o_we_shape o_illustration_hexagons_01"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

您也可以使用 data-oe-shape-data attribute 重新定义颜色，但这是可选的。