Building blocks¶

Building block, còn được gọi là snippet, là cách mà người dùng thiết kế và bố cục các trang. Chúng là những phần tử XML quan trọng trong thiết kế của bạn.

Các building block được phân loại thành bốn nhóm:

Structure blocks: để tạo cấu trúc cơ bản cho website
Feature blocks: để mô tả các tính năng của một sản phẩm hoặc dịch vụ
Dynamic Content blocks: các block có hiệu ứng chuyển động hoặc tương tác với backend
Inner Content blocks: các block được sử dụng bên trong các building block khác

Vào cuối chương này, bạn sẽ có thể tạo các snippet tùy chỉnh và thêm chúng vào một danh mục riêng.

Cấu trúc file¶

Cấu trúc file của layout như sau.

views
├── snippets
│   └── options.xml
│   └── s_snippet_name.xml

Cấu trúc file của các style như sau.

static
├── src
│   └── snippets
│       └── s_snippet_name
│           └── 000.js
│           └── 000.scss
│           └── 000.xml
│           └── options.js

Xem thêm

XML templates of the different snippets

Trang demo

Dữ liệu demo phải được cài đặt để truy cập trang này:

https://your-database.com/website/demo/snippets

Layout¶

Các snippet có thể được người dùng chỉnh sửa bằng Website Builder. Một số class Bootstrap rất quan trọng vì chúng kích hoạt một số tùy chọn của Website Builder.

Wrapper¶

Container chính chuẩn của bất kỳ snippet nào là một section. Bất kỳ phần tử section nào cũng có thể được chỉnh sửa như một khối nội dung mà bạn có thể di chuyển hoặc nhân bản.

<section class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</section>

Đối với các snippet nội dung bên trong (inner content), bất kỳ thẻ HTML nào khác cũng có thể được sử dụng.

<div class="s_snippet_name" data-name="..." data-snippet="...">
    <!-- Content -->
</div>

Thuộc tính	Mô tả
class	Tên class duy nhất cho snippet này
data-name	Được hiển thị trong panel bên phải như tên của snippet. Nếu không tìm thấy, nó sẽ dùng lại giá trị mặc định là Block.
data-snippet	Được hệ thống sử dụng để nhận diện snippet

Hệ thống tự động thêm các thuộc tính data-name và data-snippet trong quá trình kéo thả dựa trên tên của template.

Cảnh báo

Các thuộc tính đó nên được thêm vào một cách cụ thể khi một snippet được khai báo trên một trang theme.

Cảnh báo

Tránh thêm một thẻ section bên trong một thẻ section khác: điều này sẽ kích hoạt các tùy chọn của Website Builder hai lần. Bạn có thể sử dụng các snippet nội dung bên trong (inner content) thay thế.

Mẹo

Để viết nội dung của một trang tĩnh bằng các snippet chuẩn, có hai cách tiếp cận khả thi:

Dựng sẵn các trang tĩnh tùy chỉnh bằng Website Builder: Kéo thả các snippet, sau đó
sao chép/dán code vào file của bạn và dọn dẹp nó.

HOẶC

Viết code trực tiếp cho mọi thứ: Nhưng hãy lưu ý đến khả năng tương thích với Website Builder. Nó
yêu cầu một số class, tên, id, data, v.v. nhất định để hoạt động đúng cách. Một cách làm tốt là tìm kiếm code của các snippet được tạo trong code chuẩn trong các file mã nguồn của Odoo. Hãy lưu ý rằng Website Builder đôi khi thêm class vào các snippet sau khi chúng được thả vào trang.

Phần tử¶

Có một danh sách các "tính năng" mà chúng ta có thể bật/tắt bằng cách sử dụng các class CSS cụ thể.

Kích thước¶

Bất kỳ column Bootstrap lớn nào trực tiếp thuộc về (là con của) một phần tử .row (tuân theo cấu trúc Bootstrap) sẽ được Website Builder kích hoạt để có thể thay đổi kích thước.

.row > .col-lg-*

Thêm padding trên các column và <section>.

class="pt80 pb80"

Ghi chú

pb* và pt* là các class của Odoo dùng để kiểm soát các handler. Giá trị của chúng tăng theo bội số của 8, cho đến mức tối đa là 256 (0, 8, 16, 24, 32, 40, 48, ...).

Bật bộ chọn column (columns selector).

<div class="container s_allow_columns">

Tắt tùy chọn số lượng column.

<div class="row s_nb_column_fixed">

Tắt tùy chọn kích thước cho tất cả các column con.

<div class="row s_col_no_resize">

Tắt tùy chọn kích thước cho một column cụ thể.

<div class="col-lg-* s_col_no_resize">

Màu sắc¶

Thêm nền dựa trên bảng màu cho các cột và <section>.

class="o_cc o_cc*"

Vô hiệu hóa tùy chọn màu nền cho tất cả các cột.

<div class="row s_col_no_bgcolor">

Vô hiệu hóa tùy chọn màu nền của một cột cụ thể.

<div class="col-lg-* s_col_no_bgcolor">

Thêm bộ lọc màu đen với độ mờ 50%.

<section>
    <div class="o_we_bg_filter bg-black-50"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Thêm bộ lọc màu trắng với độ mờ 85%.

<section>
    <div class="o_we_bg_filter bg-white-85"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Thêm bộ lọc màu tùy chỉnh.

<section>
    <div class="o_we_bg_filter" style="background-color: rgba(39, 110, 114, 0.54) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Thêm bộ lọc gradient tùy chỉnh.

<section>
    <div class="o_we_bg_filter" style="background-image: linear-gradient(135deg, rgba(255, 204, 51, 0.5) 0%, rgba(226, 51, 255, 0.5) 100%) !important;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Tính năng¶

Vùng không thể chỉnh sửa¶

Đặt một phần tử thành không thể chỉnh sửa.

<div class="o_not_editable">

Đặt một phần tử thành không thể xóa.

<div class="oe_unremovable">

Nền¶

Thêm hình nền và căn giữa nó.

<div class="oe_img_bg o_bg_img_center" style="background-image: url('...')">

Thêm hiệu ứng parallax.

<section class="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" data-scroll-background-ratio="1">
    <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('...'); background-position: 50% 75%;"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Ghi chú

Có thể thiết lập nền video cho một section. Tham khảo chương "Media" trong tài liệu này.

Làm nổi bật văn bản¶

Làm nổi bật văn bản (text highlight) là các tệp SVG có thể được chèn vào các từ hoặc cụm từ cụ thể để nhấn mạnh chúng. Tính năng này cung cấp các tùy chọn tùy chỉnh về màu sắc và độ dày.

<h2>
   Title with
   <span class="o_text_highlight o_text_highlight_fill" style="--text-highlight-width: 10px !important; --text-highlight-color: #FFFF00;">
      <span class="o_text_highlight_item">
         highlighted text
         <svg fill="none" class="o_text_highlight_svg o_content_no_merge position-absolute overflow-visible top-0 start-0 w-100 h-100 pe-none">
            <!-- SVG path -->
         </svg>
      </span>
   </span>
</h2>

Thuộc tính CSS tùy chỉnh	Mô tả
`--text-highlight-width`	Độ dày của viền SVG
`--text-highlight-color`	Màu của đối tượng SVG

Bố cục Grid¶

Grid Layout là một hệ thống bố cục mạnh mẽ và linh hoạt trong CSS, cho phép người dùng thiết kế các bố cục khối phức tạp một cách dễ dàng.

Cách sử dụng¶

Kích hoạt Grid Layout bằng cách thêm class CSS o_grid_mode vào row. Số hàng trong lưới của bạn được xác định bởi thuộc tính data-row-count. Lưới luôn chứa 12 cột. Khoảng cách lưới, được chỉ định trong thuộc tính style, xác định khoảng cách (rãnh) giữa các hàng và cột.

<div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px">
   <!-- Content -->
</div>

Các mục trong lưới¶

Thêm các mục vào lưới bằng class o_grid_item. Nếu mục lưới chứa hình ảnh, hãy sử dụng class o_grid_item_image.

<div class="row o_grid_mode" data-row-count="13">
   <div class="o_grid_item g-height-* g-col-lg-*" style="grid-area: 2 / 1 / 7 / 8; z-index: 3;">
      <!-- Content -->
   </div>
   <div class="o_grid_item o_grid_item_image g-height-* g-col-lg-*" style="grid-area: 1 / 6 / 9 / 13; z-index: 2;">
      <img src="..." alt="..." >
   </div>
</div>

Kích thước và vị trí của một mục lưới được xác định bởi grid-area, có thể được thiết lập rõ ràng trong thuộc tính style cùng với z-index.

Các class g-height-* và g-col-lg-* được Website Builder tạo ra cho mục đích chỉnh sửa.

Khoảng đệm của mục lưới¶

<div class="row o_grid_mode" data-row-count="13" style="gap: 20px 10px;">
   <div class="o_grid_item g-height-* g-col-lg-*" style="--grid-item-padding-y: 20px; --grid-item-padding-x: 15px; grid-area: 2 / 1 / 7 / 8; z-index: 3;">
      <!-- Content -->
   </div>
</div>

Thuộc tính CSS tùy chỉnh	Mô tả
`--grid-item-padding-y`	Khoảng đệm theo chiều dọc (trục Y)
`--grid-item-padding-x`	Khoảng đệm theo chiều ngang (trục X)

Hệ thống tương thích¶

Khi một snippet có thuộc tính data-vcss, data-vjs và/hoặc data-vxml, điều đó có nghĩa là đây là phiên bản đã được cập nhật: chứ không phải phiên bản gốc.

<section class="s_snippet_name" data-vcss="001" data-vxml="001" data-js="001">
    <!-- Content -->
</section>

Các thuộc tính dữ liệu này cho hệ thống biết phiên bản tệp nào cần tải cho snippet đó (ví dụ: 001.js, 002.scss).

Snippet tùy chỉnh¶

Để tạo một snippet tùy chỉnh, trước tiên hãy tạo template cho snippet. Sau đó, thêm nó vào danh sách và cung cấp nó thông qua Website Builder.

Template¶

Khai báo

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="s_airproof_snippet" name="...">
        <section class="s_airproof_snippet">
            <!-- Content -->
        </section>
    </template>

</odoo>

Cảnh báo

Các thuộc tính data-name và data-snippet phải được chỉ định khi một snippet được khai báo trên một trang theme. Nếu không, snippet sẽ không được Website Builder nhận diện và có thể xảy ra sự cố mỗi khi nâng cấp cơ sở dữ liệu. Ngoài ra, hãy nhớ rằng thuộc tính name được hiển thị là tên của snippet tùy chỉnh của bạn trong phần Blocks của bảng tùy chọn.

Mẹo

Sử dụng các class gốc của Bootstrap càng nhiều càng tốt.
Thêm tiền tố cho tất cả các class tùy chỉnh của bạn.
Sử dụng ký hiệu chữ thường có gạch dưới để đặt tên class, ví dụ: .x_nav, .x_nav_item.
Tránh sử dụng thuộc tính ID trong section của bạn vì nhiều thực thể của một snippet có thể xuất hiện trên toàn trang (thuộc tính ID phải là duy nhất trên một trang).

Thêm snippet tùy chỉnh của bạn vào danh sách các snippet tiêu chuẩn, để người dùng có thể kéo và thả nó vào trang, trực tiếp từ bảng chỉnh sửa.

/website_airproof/views/snippets/options.xml¶

<template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
    <xpath expr="//*[@id='default_snippets']" position="before">
        <t id="x_theme_snippets">
            <div id="x_theme_snippets_category" class="o_panel">
                <div class="o_panel_header">Theme</div>
                <div class="o_panel_body">
                    <t t-snippet="website_airproof.s_airproof_snippet" t-thumbnail="/website_airproof/static/src/img/wbuilder/s_airproof_snippet.svg">
                        <keywords>Snippet</keywords>
                    </t>
                </div>
            </div>
        </t>
    </xpath>
</template>

Thuộc tính	Mô tả
t-snippet	Template cần sử dụng
t-thumbnail	Đường dẫn đến hình thu nhỏ của snippet
<keywords>	Từ khóa được người dùng nhập vào trường tìm kiếm trong bảng Snippets

Tùy chọn¶

Tùy chọn cho phép người dùng chỉnh sửa giao diện/hành vi của một snippet bằng Website Builder. Bạn có thể tạo các tùy chọn snippet một cách dễ dàng và tự động thêm chúng vào Website Builder.

Xem thêm

Các tùy chọn snippet tiêu chuẩn

Template¶

Có rất nhiều lệnh để thiết lập các tùy chọn của một snippet tùy chỉnh. Các tùy chọn này có thể được tạo trong /website_airproof/views/snippets/s_airproof_snippet.xml.

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <!-- Options -->
   </xpath>
</template>

Sau đó, chèn các tùy chọn khả dụng khác nhau:

/website_airproof/views/snippets/s_airproof_snippet.xml¶

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet">
         <we-select string="Layout">
            <we-button data-select-class="">Default</we-button>
            <we-button data-select-class="s_airproof_snippet_portrait">Portrait</we-button>
            <we-button data-select-class="s_airproof_snippet_square">Square</we-button>
            <we-button data-select-class="s_airproof_snippet_landscape">Landscape</we-button>
         </we-select>
         <we-title>Space</we-title>
         <we-button-group string="Before">
            <we-button data-select-class="mt-0">1</we-button>
            <we-button data-select-class="mt-3">2</we-button>
            <we-button data-select-class="mt-5">3</we-button>
         </we-button-group>
      </div>
   </xpath>
</template>

Nội dung bên trong

Biến một snippet tùy chỉnh thành "nội dung bên trong" (có thể thả vào một khối xây dựng khác) bằng cách mở rộng biến so_content_addition_selector, chứa tất cả các CSS selector tham chiếu đến các khối xây dựng nội dung bên trong hiện có:

/website_airproof/views/snippets/options.xml¶

<template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="//t[@t-set='so_content_addition_selector']" position="after">
      <t t-set="so_content_addition_selector"
         t-value="so_content_addition_selector + ', .s_airproof_snippet'" />
   </xpath>
</template>

Xem thêm

Khai báo snippet "nội dung bên trong" tiêu chuẩn trên kho lưu trữ GitHub của Odoo

Liên kết¶

Các tùy chọn này sử dụng CSS selector (class, thẻ XML, id, v.v.).

data-selector¶

Các tùy chọn được nhóm lại thành các nhóm. Các nhóm có thể có thuộc tính xác định cách các tùy chọn bên trong tương tác với giao diện người dùng.

data-selector liên kết tất cả các tùy chọn trong nhóm với một phần tử cụ thể khớp với giá trị selector (CSS class, ID, v.v.). Tùy chọn sẽ xuất hiện khi selector khớp được chọn.

<div data-selector="section, h1, .custom_class, #custom_id">

Nó có thể được sử dụng kết hợp với các thuộc tính khác như data-target, data-exclude hoặc data-apply-to.

data-target¶

data-target="" cho phép áp dụng tùy chọn cho một phần tử con của data-selector="".

<div
   data-selector=".s_airproof_snippet"
   data-target=".row">

data-exclude¶

data-exclude="" cho phép loại trừ một số selector cụ thể khỏi quy tắc.

Tùy chọn xuất hiện nếu một thẻ <ul> (không có class .navbar-nav) được chọn¶

<div
   data-selector="ul"
   data-exclude=".navbar-nav">

data-drop-in¶

data-drop-in xác định danh sách các phần tử mà snippet có thể được thả vào bên trong.

<div data-selector=".s_airproof_snippet" data-drop-in=".x_custom_location">

data-drop-near¶

data-drop-near xác định danh sách các phần tử mà snippet có thể được thả bên cạnh.

<div data-selector=".s_airproof_snippet_card" data-drop-near=".card">

data-js¶

data-js liên kết với một phương thức JavaScript tùy chỉnh.

<div data-selector=".s_airproof_snippet" data-js="CustomMethodName">

Bố cục & trường¶

`<we-title>`¶

Thêm tiêu đề giữa các tùy chọn để phân loại chúng.

<we-title>Option subtitle 1</we-title>

`<we-row>`¶

Tạo một hàng trong đó các phần tử được hiển thị cạnh nhau.

<we-row string="My option">
   <we-select>...</we-select>
   <we-button-group>...</we-button-group>
</we-row>

Ví dụ hoàn hảo cho trường hợp này là hàng Animation:

Nhóm các trường tùy chọn khác nhau vào cùng một hàng.

`<we-button>`¶

Thẻ này được sử dụng bên trong <we-select> và <we-button-group>.

<we-button-group string="Before">
   <we-button data-select-class="mt-0">1</we-button>
   <we-button data-select-class="mt-3">2</we-button>
   <we-button data-select-class="mt-5">3</we-button>
</we-button-group>

Thêm data-select-class="" để chỉ định class nào sẽ được thêm vào phần tử mục tiêu khi lựa chọn này được chọn. Như bất kỳ node XML nào, việc thêm các thuộc tính khác cho phép cải thiện kiểu dáng và/hoặc trải nghiệm người dùng.

<we-button
   class="fa fa-fw fa-angle-double-right"
   title="Move to last"
   data-position="last" />

`<we-select>`¶

Định dạng tùy chọn thành một danh sách thả xuống. Thêm string="" để chỉ định tên trường.

<we-select string="Layout">...</we-select>

`<we-button-group>`¶

Định dạng tùy chọn thành các nút nằm cạnh nhau.

<we-button-group string="Before">...</we-button-group>

`<we-checkbox>`¶

Định dạng tùy chọn thành một công tắc bật/tắt.

<we-checkbox
   string="Tooltip"
   data-select-class="s_airproof_snippet_tooltip" />

`<we-range>`¶

Định dạng tùy chọn thành một thanh trượt.

<we-range
   string="Images Spacing"
   data-select-class="o_spc-none|o_spc-small|o_spc-medium|o_spc-big" />

Mỗi bước của phạm vi được phân tách bằng dấu |. Ở đây, mỗi tên class tương ứng với một bước.

`<we-input>`¶

Định dạng tùy chọn thành một trường văn bản.

data-unit, data-save-unit và data-step là các thuộc tính tùy chọn¶

<we-input
   string="Speed"
   data-unit="s"
   data-save-unit="ms"
   data-step="0.1" />

<we-input> đi kèm với các thuộc tính tùy chọn đặc biệt hữu ích trong một số trường hợp cụ thể:

Thuộc tính	Mô tả
`data-unit`	Hiển thị đơn vị đo lường mong đợi.
`data-save-unit`	Đặt đơn vị đo lường mà giá trị do người dùng nhập sẽ được chuyển đổi và lưu lại.
`data-step`	Đặt giá trị số mà trường có thể tăng lên.

`<we-colorpicker>`¶

Định dạng tùy chọn thành một màu/gradient để lựa chọn.

<we-colorpicker
   string="Color filter"
   data-select-style="true"
   data-css-property="background-color"
   data-color-prefix="bg-"
   data-apply-to=".s_map_color_filter" />

Thuộc tính	Mô tả
`data-select-style`	Tham chiếu đến phương thức JavaScript `selectStyle`. Khớp giá trị của thuộc tính `style=""` được áp dụng trên mục tiêu để đánh dấu đúng lựa chọn tùy chọn.
`data-css-property`	Xác định thuộc tính CSS được nhắm đến bởi bộ chọn màu.
`data-color-prefix`	Xác định tiền tố được áp dụng cho class CSS được trả về.
`data-apply-to`	Đặt phần tử mà màu sắc được áp dụng lên.

Phương thức¶

Bên cạnh các tùy chọn liên kết cho phép chọn, nhắm mục tiêu hoặc loại trừ một phần tử. Các trường tùy chọn có một số thuộc tính dữ liệu hữu ích tham chiếu đến các phương thức JavaScript tiêu chuẩn.

Ví dụ, data-select-class tham chiếu đến phương thức JavaScript có tên selectClass.

Phương thức tích hợp sẵn¶

Lựa chọn¶

Có một số phương thức tích hợp sẵn khả dụng. Chúng có thể được gọi bằng cách sử dụng thuộc tính dữ liệu liên quan trực tiếp trong template XML.

Thuộc tính dữ liệu	Mô tả
`data-select-class`	Cho phép chọn một và chỉ một class trong tập hợp các class tùy chọn và đặt nó vào snippet liên quan.
`data-select-data-attribute` + `data-attribute-name`	Cho phép chọn một giá trị và đặt nó vào snippet liên quan dưới dạng thuộc tính. Tên thuộc tính được cung cấp bởi thuộc tính `data-attribute-name`.
`data-select-property` + `data-property-name`	Cho phép chọn một giá trị và đặt nó vào snippet liên quan dưới dạng property. Tên thuộc tính được cung cấp bởi thuộc tính `data-property-name`.
`data-select-style` + `data-css-property`	Cho phép chọn một giá trị và đặt nó vào snippet liên quan dưới dạng kiểu CSS. Tên thuộc tính được cung cấp bởi thuộc tính `data-css-property`.
`data-select-color-combination`	Cho phép chọn một bảng màu. Chỉ dành cho `<we-colorpicker>`

Sự kiện¶

Cũng có các phương thức tích hợp sẵn được liên kết trực tiếp với các sự kiện mà Website Builder lắng nghe:

Tên	Mô tả
start	Xảy ra khi người xuất bản chọn snippet lần đầu tiên trong một phiên chỉnh sửa hoặc khi snippet được kéo và thả vào trang.
destroy	Xảy ra sau khi người xuất bản đã lưu trang.
onFocus	Xảy ra mỗi khi snippet được người dùng chọn hoặc khi snippet được kéo và thả vào trang.
onBlur	Xảy ra khi một snippet mất tiêu điểm.
onClone	Xảy ra ngay sau khi một snippet được nhân bản.
onRemove	Xảy ra ngay trước khi snippet bị xóa.
onBuilt	Xảy ra ngay sau khi snippet được kéo và thả vào một vùng thả. Khi sự kiện này được kích hoạt, nội dung đã được chèn vào trang.
cleanForSave	Xảy ra trước khi người xuất bản lưu trang.

Xem thêm

Phương thức tùy chỉnh¶

Để tạo các phương thức JavaScript tùy chỉnh, cần tạo một liên kết giữa nhóm tùy chọn và các phương thức tùy chỉnh. Để làm điều này, cần tạo một class JavaScript và gọi nó trong template XML bằng data-js.

Thêm thuộc tính data-js vào nhóm tùy chọn của bạn:

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet" data-js="airproofSnippet">
         // Options
      </div>
   </xpath>
</template>

Sau đó, class có thể được tạo trong một tệp JavaScript:

/website_airproof/static/src/s_airproof_snippet/options.js¶

/** @odoo-module */

import options from 'web_editor.snippets.options';

const AirproofSnippet = options.Class.extend({
   // Built-in method example
   start: function() {
      //...
   }
   // Custom method example
   customMethodName: function() {
      //...
   }
});

options.registry.AirproofSnippet = AirproofSnippet;

export default AirproofSnippet;

Cuối cùng, phương thức tùy chỉnh có thể được gọi trên tùy chọn tùy chỉnh của bạn thông qua template XML:

<template id="s_airproof_snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
   <xpath expr="." position="inside">
      <div data-selector=".s_airproof_snippet" data-js="airproofSnippet">
         <we-checkbox data-custom-method-name="" />
      </div>
   </xpath>
</template>

Template Dynamic Content¶

Theo mặc định, các khối Dynamic Content có một số template khả dụng trong Website Builder. Các template tùy chỉnh cũng có thể được tự động thêm vào danh sách bằng cách sử dụng cùng quy ước đặt tên cho thuộc tính id của template.

Gọi template¶

Snippet động được chọn sẽ thay thế placeholder <div class="dynamic_snippet_template"/> bằng template phù hợp dựa trên data-template-key và class CSS tùy chỉnh:

<section
   data-snippet="s_blog_posts"
   data-name="Blog Posts"
   class="s_blog_post_airproof s_dynamic_snippet_blog_posts s_blog_posts_effect_marley s_dynamic pb32 o_cc o_cc2 o_dynamic_empty"
   data-template-key="website_airproof.dynamic_filter_template_blog_post_airproof"
   data-filter-by-blog-id="-1"
   data-number-of-records="3"
   data-number-of-elements="3"
>
   <div class="container o_not_editable">
      <div class="css_non_editable_mode_hidden">
            <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
               Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.<br/>
            </div>
      </div>
      <div class="dynamic_snippet_template"/>
   </div>
</section>

Ví dụ¶

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_blog_post_airproof" name="...">
   <div t-foreach="records" t-as="data" class="s_blog_posts_post">
      <t t-set="record" t-value="data['_record']"/>
      <!-- Content -->
   </div>
</template>

Thuộc tính	Mô tả
id	ID của template. Phải bắt đầu bằng `dynamic_filter_template_blog_post_`
name	Tên dễ đọc của template

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_product_product_airproof" name="...">
   <t t-foreach="records" t-as="data" data-number-of-elements="4" data-number-of-elements-sm="1" data-number-of-elements-fetch="8">
      <t t-set="record" t-value="data['_record']"/>
      <!-- Content -->
   </t>
</template>

Thuộc tính	Mô tả
id	ID của template. Phải bắt đầu bằng `dynamic_filter_template_product_product_`
name	Tên dễ đọc của template
data-number-of-elements	Số lượng sản phẩm trên mỗi slide trên desktop
data-number-of-elements-sm	Số lượng sản phẩm trên mỗi slide trên di động
data-number-of-elements-fetch	Tổng số lượng sản phẩm được tải về

/website_airproof/views/snippets/options.xml¶

<template id="dynamic_filter_template_event_event_airproof" name="...">
   <div t-foreach="records" t-as="data" class="s_events_event">
      <t t-set="record" t-value="data['_record']._set_tz_context()"/>
      <!-- Content -->
   </div>
</template>

Thuộc tính	Mô tả
id	ID của template. Phải bắt đầu bằng `dynamic_filter_template_event_event_`
name	Tên dễ đọc của template

Building blocks¶

Cấu trúc file¶

Layout¶

Wrapper¶

Phần tử¶

Kích thước¶

Màu sắc¶

Tính năng¶

Vùng không thể chỉnh sửa¶

Nền¶

Làm nổi bật văn bản¶

Bố cục Grid¶

Cách sử dụng¶

Các mục trong lưới¶

Khoảng đệm của mục lưới¶

Hệ thống tương thích¶

Snippet tùy chỉnh¶

Template¶

Tùy chọn¶

Template¶

Liên kết¶

data-selector¶

data-target¶

data-exclude¶

data-drop-in¶

data-drop-near¶

data-js¶

Bố cục & trường¶

<we-title>¶

<we-row>¶

<we-button>¶

<we-select>¶

<we-button-group>¶

<we-checkbox>¶

<we-range>¶

<we-input>¶

<we-colorpicker>¶

Phương thức¶

Phương thức tích hợp sẵn¶

Lựa chọn¶

Sự kiện¶

Phương thức tùy chỉnh¶

Template Dynamic Content¶

Gọi template¶

Ví dụ¶

`<we-title>`¶

`<we-row>`¶

`<we-button>`¶

`<we-select>`¶

`<we-button-group>`¶

`<we-checkbox>`¶

`<we-range>`¶

`<we-input>`¶

`<we-colorpicker>`¶