形状¶
如果您想为您的网站增添个性，形状会很方便。在本章中，您将学习如何添加标准和自定义背景/图像形状。
它们是 SVG 文件，您可以将其添加为不同部分中的装饰背景或直接添加到图像上。每个形状都有一种或多种可定制的颜色，其中一些是动画的。
警告
Odoo 的默认形状使用 Odoo default colors palette 贴图作为参考。这样，每次更改时，颜色都会自动适应新的 palette：
default_palette = {
'1': '#3AADAA',
'2': '#7C6576',
'3': '#F6F6F6',
'4': '#FFFFFF',
'5': '#383E45',
}
背景形状¶
标准¶
有大量默认背景形状可供选择。
用法¶
<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
<div class="o_we_shape o_html_builder_Zigs_06" />
<div class="container">
<!-- Content -->
</div>
</section>
data-oe-shape-data 是一个 JSON 对象，包含有关形状的信息，例如 SVG 文件的位置、重复和翻转选项等。
例如，您可以使用 X 或 Y 轴水平或垂直**翻转形状**，如下所示：
<section data-oe-shape-data="{'shape':'html_builder/Zigs/06','flip':['x','y']}">
<div class="o_we_shape o_html_builder_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('html_builder', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))
或者只是参考文献
/website_airproof/static/src/scss/primary_variables.scss¶ $o-bg-shapes: change-shape-colors-mapping('html_builder', '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('html_builder', 'Zigs/06', 'second', (4: 3, 5: 1));
<section data-oe-shape-data="{'shape':'html_builder/Zigs/06'}">
<div class="o_we_shape o_html_builder_Zigs_06 o_second_extra_shape_mapping" />
<div class="container">
<!-- Content -->
</div>
</section>
风俗¶
有时，您的设计可能需要创建一个或多个自定义形状。
首先，您需要为您的形状创建一个 SVG 文件。
/website_airproof/static/shapes/waves/01.svg¶<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1309 581">
<path style="fill: #3AADAA;" d="..." />
</svg>
重要
确保为您的形状使用默认 Odoo 调色板中的颜色（如 above 所述）。
依恋¶
声明您的形状文件。
/website_airproof/data/shapes.xml¶<record id="shape_waves_01" model="ir.attachment">
<field name="name">waves_01.svg</field>
<field name="datas" type="base64" file="website_airproof/static/shapes/waves/01.svg" />
<field name="url">/html_editor/shape/website_airproof/waves/01.svg</field>
<field name="public" eval="True" />
</record>
场地 |
描述 |
|---|---|
姓名 |
形状名称 |
数据 |
形状的路径 |
网址 |
HTML 编辑器中形状的位置。网站生成器会自动将文件复制到 |
民众 |
使形状可供以后编辑。 |
社会保障体系¶
定义形状的样式。
/website_airproof/static/src/scss/primary_variables.scss¶$o-bg-shapes: map-merge($o-bg-shapes,
(
'website_airproof': (
'waves/01': ('position': left bottom, 'size': 100% auto, 'colors': (1)),
),
)
);
钥匙 |
描述 |
|---|---|
文件位置 |
|
位置 |
定义形状的位置。 |
尺寸 |
定义形状的大小。 |
颜色 |
定义您希望其具有的颜色 c*（这将覆盖您在 SVG 中指定的颜色）。 |
重复-x |
定义形状是否水平重复。该键是可选的，仅当设置为 |
重复y |
定义形状是否垂直重复。该键是可选的，仅当设置为 |
添加选项¶
最后，通过扩展 background_shape_groups_providers 资源，将您的形状添加到网站生成器上可用的形状列表中。
/website_airproof/static/src/builder/background_shapes_option_plugin.js¶import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
export class AirproofBackgroundShapesOptionPlugin extends Plugin {
static id = "airproofBackgroundShapesOption";
resources = {
background_shape_groups_providers: () => ({
airproof: {
label: _t("Airproof"),
subgroups: {
airproof: {
label: _t("Airproof"),
shapes: {
"website_airproof/waves/01": {
selectLabel: _t("Waves 01"),
},
},
},
},
},
}),
};
}
registry.category("website-plugins").add(
AirproofBackgroundShapesOptionPlugin.id,
AirproofBackgroundShapesOptionPlugin
);
注解
将 JavaScript 文件添加到 website.website_builder_assets 包中，以便编辑器加载它。
在您的页面中使用它¶
在 XML 页面中，您可以像其他形状一样使用您的形状。
<section class="..." data-oe-shape-data="{'shape': 'website_airproof/waves/01', 'colors': {'c1': '#BBE1FA'}, 'flip': ['x']}">
<div
class="o_we_shape o_website_airproof_waves_01 o_we_flip_x"
style="background-image: url('/html_editor/shape/website_airproof/waves/01.svg?c1=%23BBE1FA'); background-position: 100% 100%;" />
<div class="container">
<!-- Content -->
</div>
</section>
您还可以使用 data-oe-shape-data 属性重新定义颜色，但这是可选的。
图像形状¶
图像形状是 SVG 文件，您可以将其添加为图像上的剪贴蒙版。有些形状具有可定制的颜色，有些是动画的。
标准¶
有大量默认图像形状可供选择。
用法¶
形状只能应用于之前已在 ir.attachment 记录中声明的图像，因为网站构建器需要重新处理该图像。总而言之，系统将原始图像注入到包含图像和形状的 SVG 文件中。
完全处理后，成形图像如下例所示：
<img
src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/solid/solid_blob_2"
data-shape-colors="#0B8EE6;;;;"
data-mimetype="image/svg+xml"
data-mimetype-before-conversion="image/jpeg"
data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
data-file-name="s_text_image.svg"
data-original-id="590"
data-attachment-id="590" />
img 包含不同的数据属性，允许网站生成器在再次编辑图像时重新处理图像：
属性 |
描述 |
|---|---|
数据形状 |
形状的位置 |
数据形状颜色 |
应用于形状的颜色（最多 5 个）（每个值，即使为空，也用分号分隔） |
数据模拟类型 |
成形图像的模仿类型 |
转换前的数据 mimetype |
原始图像的 Mimetype |
数据原始源 |
原始图像文件的路径 |
数据文件名 |
形状修改后创建的文件的名称（始终使用 |
数据原始 ID |
原始`ir.attachment`的标识符（与上传的图像相关） |
数据附件 ID |
与成形图像相关的 |
调用形状
插入成形图像需要调用具有最少所需属性的处理后的附件，而不仅仅是原始图像。
以下是调用具有彩色元素的形状所需的最低要求的示例：
<img
src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/solid/solid_blob_2"
data-shape-colors="#0B8EE6;;;;"
data-format-mimetype="image/jpeg"
data-file-name="s_text_image.svg"
loading="lazy" />
当使用网站生成器手动应用形状时：
处理原始记录并使用
base64图像更新src属性。保存页面后，base64 图像将移至最终的 SVG（在
data-file-name中指定）。最后，使用以下路径结构更新
src属性：/web/image/<attachment_id>-<attachment_checksum>/<finale_image>.svg以及网站生成器生成的一些数据属性（data-original-id、data-attachment-id、data-mimetype、data-mimetype-before-conversion等）。
但这里有两个问题：
将最终图像转换为
base64格式并不那么容易（因为这不是真正的*人类可读*）。最终
ir.attachment的checksum计算使用算法。
在某种程度上，需要外部工具，但 html_editor 模块为控制器提供了一个有用的路线，可以混合图像形状和图像文件：
@http.route([
'/web_editor/image_shape/<string:img_key>/<module>/<path:filename>',
'/html_editor/image_shape/<string:img_key>/<module>/<path:filename>'],
type='http', auth="public", website=True)
关注 /html_editor 路径，这是 Odoo 18 之前使用的旧 Web 编辑器的“新名称”，并将占位符替换为真实数据：
<img
src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg"
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/solid/solid_blob_2"
data-shape-colors="#0B8EE6;;;;"
data-mimetype="image/svg+xml"
data-mimetype-before-conversion="image/webp"
data-original-src="website_airproof/static/src/img/content/drone-robin.webp"
data-file-name="drone-robin.svg"
data-original-id="560"
data-attachment-id="560" />
小技巧
如果形状在任何版本之前显示默认的 Odoo 颜色（与 data-shape-colors 中定义的颜色相比），请传递具有与 data-shape-colors 中定义的相同转义颜色的调色板参数：
<img
src="/html_editor/image_shape/website_airproof.img_drone_robin/html_builder/solid/solid_blob_2.svg?c1=%230B8EE6" />
c*与data-shape-colors中的位置匹配：c1与#0B8EE6;;;;c2与;#0B8EE6;;;ETC
重要
请记住，只要图像不是使用网站生成器手动保存的，它就不会作为记录存储在数据库中，它是为每个显示页面的访问者实时生成的。因此它会对网站的加载性能产生影响。
颜色¶
图像形状最多可以包含 5 种颜色。由于 SVG 文件包含与 Odoo 默认调色板相关的颜色，因此系统能够映射文件中现有的颜色并匹配图像的 data-shape-colors 属性中调用的颜色。
<img
src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/solid/solid_blob_2"
data-shape-colors="#0B8EE6;;;;"
data-mimetype="image/svg+xml"
data-mimetype-before-conversion="image/jpeg"
data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
data-file-name="s_text_image.svg"
data-original-id="590"
data-attachment-id="590" />
在上面的示例中，颜色 #0B8EE6 被应用为调色板的第一种颜色。考虑到默认调色板中的第一种颜色是 #3AADAA，网站生成器将 #3AADAA 替换为 #0B8EE6。
变形与伸展¶
某些形状可以通过变换进行调整（翻转、旋转）：
<img
src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/geometric/geo_slanted"
data-shape-flip="xy"
data-shape-rotate="90"
data-aspect-ratio="1/1"
data-mimetype="image/svg+xml"
data-mimetype-before-conversion="image/jpeg"
data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
data-file-name="s_text_image.svg"
data-original-id="590"
data-attachment-id="590" />
属性 |
描述 |
|---|---|
数据形状翻转 |
沿 x 轴 ( |
数据形状旋转 |
将形状旋转 90 度（ |
数据纵横比 |
将形状拉伸至图像比例： |
动画片¶
有些形状是动画的并且它们的速度可以调整：
<img
src="..."
class="img img-fluid mx-auto"
alt="..."
data-shape="html_builder/geometric/geo_square_1"
data-shape-animation-speed="2"
data-mimetype="image/svg+xml"
data-mimetype-before-conversion="image/jpeg"
data-original-src="/website/static/src/img/snippets_demo/s_picture.jpg"
data-file-name="s_text_image.svg"
data-original-id="590"
data-attachment-id="590" />
属性 |
描述 |
|---|---|
数据形状动画速度 |
动画速度（范围从 |
风俗¶
创建自定义图像形状非常简单，只需两个步骤：
创建具有特定结构的 SVG 文件
将自定义形状添加到列表中
创建 SVG¶
首先，为您的图像形状创建一个 SVG 文件。
/website_airproof/static/image_shapes/duo/01.svg¶<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800"
height="800">
<defs>
<!-- Mask -->
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none" />
</clipPath>
<!-- Vector used in the mask definition (Clip-path) -->
<path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
</defs>
<!-- Other decorative element around (not used as a mask) -->
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<rect x="0.494"
y="0.325"
width="0.0125"
height="0.35"
rx="0.00625"
ry="0.00625"
fill="#7C6576" />
</svg>
<!-- Preview of the Path declared in the <defs> -->
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey" />
</svg>
<!-- Future image that on wich the mask is applied -->
<image xlink:href="" clip-path="url(#clip-path)">
<!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
<animateMotion dur="1ms" repeatCount="indefinite" />
</image>
</svg>
SVG 文件可以在任何矢量编辑软件中创建，但需要进行一些调整才能与网站生成器正常工作。让我们分解一下上面的例子。
主要SVG
图像形状被包装到单个主 SVG 对象中，并具有显式 width 和 height 属性（以像素为单位）：
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800"
height="800">
...
</svg>
面具
掩码被定义到 <defs> 标记中，以便可重用（即使不是）。它由 2 个元素组成：一个 clip-path 和一个向量（我们形状中的 path）。在这一步，设置到 defs 中的内容不会出现。
<defs>
<!-- Mask -->
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none" />
</clipPath>
<!-- Vector used in the mask definition (Clip-path) -->
<path id="filterPath" d="M0.325,0.75H0.125c-0.069,0-0.125-0.056-0.125-0.125V0.125C0,0.056,
0.056,0,0.125,0h0.2c0.069,0,0.125,0.056,0.125,0.125v0.5c0,0.069-0.056,0.125-0.125,0.125ZM1,
0.875v-0.5c0-0.069-0.056-0.125-0.125-0.125h-0.2c-0.069,0-0.125,0.056-0.125,0.125v0.5c0,
0.069,0.056,0.125,0.125,0.125h0.2c0.069,0,0.125-0.056,0.125-0.125Z" />
</defs>
额外装饰
如果形状包含任何其他装饰元素，它们将被设置到主 SVG 中，但位于 defs 之外
<svg viewBox="0 0 1 1" preserveAspectRatio="none">
<rect
x="0.494"
y="0.325"
width="0.0125"
height="0.35"
rx="0.00625"
ry="0.00625"
fill="#7C6576" />
</svg>
小技巧
主 SVG 具有以像素表示的 width 和 height 属性（本例中为 800），但 viewBox 始终标准化为 0 到 1 之间的值。由于 SVG 是一种可扩展格式，因此无论其渲染大小如何，它都能确保图像清晰。
此装饰具有 fill 颜色，可以使用网站生成器进行编辑：
重要
不要忘记使用来自 Odoo 默认调色板的颜色，使其可由网站构建器进行编辑（如 above 所述）。
预览
然后使用对之前设置的 ìd (filterPath) 的引用在“预览”中渲染蒙版：
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey" />
</svg>
图像
最后，添加带有 clip-path 引用的 image 标记。它将接收您未来的图像（采用 base64 格式）。
<image xlink:href="" clip-path="url(#clip-path)">
<!-- Compatibility hack (Safari, Firefox) for non-animated shapes -->
<animateMotion dur="1ms" repeatCount="indefinite" />
</image>
小技巧
请随意在浏览器中 run this tool 将源 SVG 文件转换为图像形状兼容文件。
将其添加到列表中¶
最后，将自定义形状添加到列表中：
/website_airproof/static/src/website_builder/image_shapes_option_plugin.js¶import { Plugin } from "@html_editor/plugin";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
export class AirproofImageShapesOptionPlugin extends Plugin {
static id = "airproofImageShapesOption";
resources = {
image_shape_groups_providers: () => ({
airproof: {
label: _t("Airproof"),
subgroups: {
airproof_duo: {
label: _t("Duo"),
shapes: {
"website_airproof/duo/01": {
selectLabel: _t("Duo 01"),
transform: true,
togglableRatio: true,
},
},
},
},
},
}),
};
}
registry.category("website-plugins").add(
AirproofImageShapesOptionPlugin.id,
AirproofImageShapesOptionPlugin
);
财产 |
描述 |
|---|---|
选择标签 |
列表中显示的形状的名称 |
转换 |
显示/隐藏变换选项（垂直和水平镜像、左右旋转）。 |
切换比例 |
显示/隐藏拉伸选项。 |
动画 |
指示形状是否包含一些动画 |
图片尺寸 |
设置用于 Devices 的图像比例（例如： |
变换和拉伸选项¶
在您的页面中使用它¶
自定义图像形状现在可以应用于图像，例如，在静态页面中：
<img
src="/html_editor/image_shape/website_airproof.img_drone_robin/website_airproof/duo/01.svg?c2=%230B8EE6"
class="img img-fluid mx-auto"
alt="..."
data-shape="website_airproof/duo/01"
data-shape-colors=";#0B8EE6;;;"
data-format-mimetype="image/webp"
data-file-name="drone-robin.svg"
loading="lazy" />