Hình dạng¶

Hình dạng rất tiện lợi nếu bạn muốn thêm cá tính cho website của mình.

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

Hình dạng nền¶

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

Cảnh báo

Các hình dạng mặc định của Odoo sử dụng bảng màu (palette map) mặc định của Odoo làm tham chiếu. Nhờ đó, màu sắc sẽ tự động thích ứng với bảng màu mới mỗi khi bảng màu thay đổi:

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

Tiêu chuẩn¶

Có sẵn nhiều lựa chọn hình dạng 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à một đối tượng JSON chứa thông tin về hình dạng của bạn, chẳng hạn như vị trí của file SVG, các tùy chọn lặp lại (repeat) và lật (flip), v.v.

Ví dụ, bạn có thể lật hình dạng theo chiều ngang hoặc chiều dọc bằng cách sử dụng trục X hoặc Y như sau:

<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 bằng cách hoán đổi màu trong bảng ánh xạ hiện tại hoặc tạo một bảng ánh xạ thay thế mà không sửa đổi bảng ban đầu.

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

Đầu tiên, chúng ta có thể sử dụng một hình dạng như sau:

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

Ở đây, chúng ta sử dụng #383E45 và #FFFFFF, tương ứng với màu thứ 5 và thứ 4 trong bảng màu mặc định của Odoo.

Hình dạng được khai báo như sau trong SCSS:

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

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

Màu đen được sử dụng ở phía trên (c5), màu sáng (c4) ở phía dưới, và ở giữa, hình dạng chỉ đơn giản là trong suốt.

Chúng ta sẽ viết lại bảng colors với một số cặp key: value:

Với tham chiếu bảng màu và màu tùy chỉnh

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

Hoặc chỉ với các tham chiếu

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

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

c4 (trắng) sẽ được thay thế bằng c3 (trắng ngà) và c5 (đen) bằng c1 (trắng).

Kết quả

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

Việc thêm ánh xạ màu bổ sung cho phép bạn thêm một biến thể màu vào template của hình dạng 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>

Tùy chỉnh¶

Đô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 một file 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 các màu từ bảng màu mặc định của Odoo cho hình dạng của bạn (như đã giải thích ở trên).

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

Tệp đính kèm¶

Khai báo file 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>

Field	Mô tả
name	Tên của hình dạng
datas	Đường dẫn đến hình dạng
url	Vị trí của hình dạng trong trình soạn thảo web. File này sẽ tự động được nhân bản vào `/web_editor/shape/illustration` bởi Website Builder.
public	Giúp hình dạng khả dụng để chỉnh sửa sau này.

SCSS¶

Định nghĩa các style cho 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),
            ),
        ),
    )
);

Khóa	Mô tả
Vị trí file	`hexagons/01` tương ứng với vị trí file của bạn trong thư mục `shapes`.
position	Định nghĩa vị trí của hình dạng của bạn.
size	Định nghĩa kích thước của hình dạng của bạn.
colors	Định nghĩa màu c* mà bạn muốn hình dạng có (điều này sẽ ghi đè lên màu bạn đã chỉ định trong file SVG).
repeat-x	Định nghĩa 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 định nghĩa nếu đặt thành `true`.
repeat-y	Định nghĩa 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 định nghĩa nếu đặt thành `true`.

Thêm tùy chọn¶

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 khả dụng trên Website Builder.

/website_airproof/views/snippets/options.xml¶

<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Airproof - Shapes">
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/header[hasclass('o_pager_nav')]//*[hasclass('o_pager_nav_btn')][last()]" position="after">
      <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="x_scroll_bgshapes_airproof">
         <span class="w-100">Airproof</span>
      </button>
   </xpath>
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/div[hasclass('o_pager_container')]" position="inside">
      <div class="x_scroll_bgshapes_airproof">
         <we-title>Airproof</we-title>
         <we-select-page string="Airproof">
            <we-button data-shape="illustration/airproof/01" data-select-label="Airproof 01"/>
         </we-select-page>
      </div>
   </xpath>
</template>

Sử dụng trong trang của bạn¶

Trong các trang XML của bạn, bạn có thể sử dụng hình dạng của mình theo cách tương tự như các hình dạng khác.

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

Bạn cũng có thể định nghĩa lại màu sắc bằng thuộc tính data-oe-shape-data, nhưng điều này là tùy chọn.