Hình dạng¶

Hình dạng rất hữu ích nếu bạn muốn thêm cá tính vào trang web của mình.

Trong chương này, bạn sẽ tìm hiểu cách thêm hình nền và hình ảnh tiêu chuẩn và tùy chỉnh.

Hình nền¶

Hình nền là các tệp SVG mà bạn có thể thêm làm nền trang trí trong các phần khác nhau của mình. Mỗi hình dạng có một hoặc một số màu có thể tùy chỉnh và một số màu trong số đó có màu động.

Tiêu chuẩn¶

Có sẵn nhiều lựa chọn hình nền mặc định.

Sử dụng

<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 là vị trí hình dạng của bạn.

Lật hình theo chiều ngang hoặc chiều dọc bằng cách sử dụng trục X hoặc 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>

Ánh xạ màu sắc¶

Bạn cũng có thể thay đổi ánh xạ màu mặc định của hình dạng của mình.

Chuyển đổi màu sắc ánh xạ¶

Đầu tiên, đặt màu c* (ở đây 4).

Sau đó, màu thay thế (ở đây là 3). Những màu thay thế này cũng có phạm vi từ 1 đến 5:

1 = màu nền của màu đặt trước 1 (o-cc1).
2 = màu nền của màu đặt trước 2 (o-cc2).
3 = màu nền của màu đặt trước 3 (o-cc3).
4 = màu nền của màu đặt trước 4 (o-cc4).
5 = màu nền của màu đặt trước 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));

Thêm ánh xạ màu bổ sung¶

Việc thêm ánh xạ màu bổ sung cho phép bạn thêm biến thể màu vào mẫu của hình trong khi vẫn giữ nguyên bản gốc.

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

Phong tục¶

Đôi khi, thiết kế của bạn có thể yêu cầu tạo một hoặc nhiều hình dạng tùy chỉnh.

Trước tiên, bạn cần tạo tệp SVG cho hình dạng của mình.

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

Đảm bảo sử dụng màu từ bảng màu mặc định của SoOn cho hình dạng của bạn.

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

Khai báo tập tin hình dạng của bạn.

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

Cánh đồng	Sự miêu tả
tên	Tên của hình dạng
dữ liệu	Đường dẫn đến hình dạng
địa chỉ	...
công cộng	Làm cho hình dạng có sẵn để chỉnh sửa sau này.

Xác định phong cách của hình dạng của bạn.

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

Chìa khóa	Sự miêu tả
Vị trí tập tin	`hexagons/01` tương ứng với vị trí tệp của bạn trong thư mục `shapes`.
chức vụ	Xác định vị trí của hình dạng của bạn.
kích cỡ	Xác định kích thước của hình dạng của bạn.
màu sắc	Xác định màu c* mà bạn muốn nó có (điều này sẽ ghi đè màu bạn đã chỉ định trong SVG).
lặp lại-x	Xác định xem hình dạng có được lặp lại theo chiều ngang hay không. Khóa này là tùy chọn và chỉ cần được xác định nếu được đặt thành `true`.
lặp lại-y	Xác định xem hình dạng có được lặp lại theo chiều dọc hay không. Khóa này là tùy chọn và chỉ cần được xác định nếu được đặt thành `true`.

Cuối cùng, thêm hình dạng của bạn vào danh sách các hình dạng có sẵn trên Trình tạo trang web.

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

Bây giờ, hình dạng tùy chỉnh của bạn có thể được sử dụng giống như hình dạng tiêu chuẩn.

Hình dạng hình ảnh¶

Hình dạng hình ảnh là các tệp SVG mà bạn có thể thêm làm mặt nạ cắt trên hình ảnh của mình. Một số hình dạng có màu sắc có thể tùy chỉnh và một số hình dạng có hình động.

Tiêu chuẩn¶

Có sẵn nhiều lựa chọn về hình dạng hình ảnh mặc định.

Sử dụng

<img src="..."
    class="img img-fluid mx-auto"
    alt="..."
    data-shape="web_editor/solid/blob_2_solid_str"
    data-shape-colors="#35979C;;;;"
>

Thuộc tính	Sự miêu tả
hình dạng dữ liệu	Vị trí của hình dạng
màu sắc hình dạng dữ liệu	Màu sắc được áp dụng cho hình dạng

Cảnh báo

Đôi khi, hình dạng hình ảnh của bạn có thể không được áp dụng sau khi bạn thêm các thay đổi. Để khắc phục sự cố, hãy mở Trình tạo trang web và lưu trang để buộc tải hình dạng.