Khu nhà

Khối xây dựng, còn được gọi là đoạn mã, là cách người dùng thiết kế và bố cục trang. Chúng là các phần tử XML quan trọng trong thiết kế của bạn.

Các khối xây dựng được phân thành bốn loại:

  1. Khối cấu trúc: để cung cấp cấu trúc cơ bản cho trang web

  2. Khối tính năng: để mô tả các tính năng của sản phẩm hoặc dịch vụ

  3. Khối nội dung động: khối hoạt hình hoặc tương tác với phần phụ trợ

  4. Khối nội dung bên trong: khối được sử dụng bên trong các khối xây dựng khác

Trong chương này, bạn sẽ tìm hiểu cách tạo các khối và tùy chọn xây dựng tùy chỉnh.

Cấu trúc tập tin

Cấu trúc tập tin của bố cục như sau.

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

Cấu trúc tệp của kiểu như sau.

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

Xem thêm

Mẫu XML của các đoạn mã khác nhau

Trang demo

http://localhost:8069/website/demo/snippets

Cách trình bày

Người dùng có thể chỉnh sửa các đoạn mã bằng cách sử dụng Trình tạo trang web. Một số lớp Bootstrap rất quan trọng vì chúng kích hoạt một số tùy chọn Trình tạo trang web.

Vỏ bánh

Vùng chứa chính tiêu chuẩn của bất kỳ đoạn mã nào là phần. Bất kỳ thành phần phần nào cũng có thể được chỉnh sửa giống như một khối nội dung mà bạn có thể di chuyển hoặc sao chép.

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

Đối với các đoạn nội dung bên trong, có thể sử dụng bất kỳ thẻ HTML nào khác.

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

Thuộc tính

Sự miêu tả

lớp học

Tên lớp duy nhất cho đoạn mã này

tên dữ liệu

Hiển thị ở bảng bên phải là tên của đoạn trích. Nếu không tìm thấy, nó sẽ rơi trở lại Chặn.

đoạn dữ liệu

Được hệ thống sử dụng để xác định đoạn mã

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

Cảnh báo

Những thuộc tính đó phải được thêm cụ thể khi đoạn mã được khai báo trên trang chủ đề.

Cảnh báo

Tránh thêm thẻ section bên trong thẻ section khác: điều này sẽ kích hoạt hai lần tùy chọn của Trình tạo trang web. Thay vào đó, bạn có thể sử dụng đoạn nội dung bên trong.

Cột

Bất kỳ cột Bootstrap lớn nào trực tiếp đi xuống từ phần tử .row (tôn trọng cấu trúc Bootstrap) sẽ được Trình tạo trang web kích hoạt để làm cho chúng có thể thay đổi kích thước.

.row > .col-lg-*

Thêm phần đệm vào các cột và phần.

class="pt80 pb80"

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

class="o_cc o_cc*"

Làm cho một phần tử không thể chỉnh sửa được.

<div class="o_not_editable">

Bật bộ chọn cột.

<div class="container s_allow_columns">

Vô hiệu hóa tùy chọn cột.

<div class="row s_nb_column_fixed">

Tắt tùy chọn kích thước của tất cả các cột con.

<div class="row s_col_no_resize">

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

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

Tắt tùy chọn màu nền cho tất cả các cột.

<div class="row s_col_no_bgcolor">

Tắt tùy chọn màu nền của một cột.

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

Thêm hiệu ứng thị sai.

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

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ờ là 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>

Kiểu dáng

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

Khi một đoạn mã có thuộc tính data-vcss hoặc data-vjs, điều đó có nghĩa đó là phiên bản cập nhật chứ không phải phiên bản gốc.

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

Các thuộc tính data-vcss và data-js cho hệ thống biết phiên bản tệp nào sẽ tải cho đoạn mã đó (ví dụ: 001.js, 002.scss).

Phong tục

Tạo nội dung của đoạn trích.

Tuyên ngôn

/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 khai báo đoạn mã trên trang chủ đề.

Mẹo

  • Sử dụng các lớp gốc Bootstrap càng nhiều càng tốt.

  • Tiền tố tất cả các lớp tùy chỉnh của bạn.

  • Sử dụng ký hiệu gạch dưới chữ thường để đặt tên cho các lớp, ví dụ: .x_nav, .x_nav_item.

  • Tránh sử dụng thẻ ID.

Thêm đoạn mã tùy chỉnh của bạn vào danh sách đoạn mã mặc định để người dùng có thể kéo và thả đoạn mã đó trên 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="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

Sự miêu tả

đoạn chữ t

Mẫu để sử dụng

hình thu nhỏ t

Đường dẫn đến hình thu nhỏ của đoạn trích

Tùy chọn

Các tùy chọn cho phép người dùng chỉnh sửa giao diện của đoạn trích bằng Trình tạo trang web. Bạn có thể dễ dàng tạo các tùy chọn đoạn mã và tự động thêm chúng vào Trình tạo trang web.

Thuộc tính nhóm

Các tùy chọn được gói trong nhóm. Các nhóm có thể có các thuộc tính xác định cách các tùy chọn đi kèm 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 có trong nhóm với một phần tử cụ thể. Nó có thể được sử dụng kết hợp với data-target và data-exclude.

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

data-js liên kết các phương thức JavaScript tùy chỉnh.

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

data-drop-in xác định danh sách các thành phần mà đoạn mã có thể được thả vào.

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

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

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

Tùy chọn SCSS

Các tùy chọn có thể áp dụng các lớp CSS tiêu chuẩn hoặc tùy chỉnh cho đoạn mã. Tùy thuộc vào phương pháp bạn chọn, giao diện người dùng sẽ hoạt động khác nhau.

data-select-class="..."

Thêm data-select-class trong cùng một nhóm xác định danh sách các lớp mà người dùng có thể áp dụng. Mỗi lần chỉ có thể kích hoạt một tùy chọn.

/website_airproof/views/snippets/options.xml
<template id="snippet_options" inherit_id="website.snippet_options" name="...">
    <xpath expr="." position="inside">

        <div data-selector="h1, h2, h3, h4, h5, h6">
            <we-select string="Headings">
                <we-button data-select-class="">Default</we-button>
                <we-button data-select-class="x_custom_class_01">01</we-button>
                <we-button data-select-class="x_custom_class_02">02</we-button>
            </we-select>
        </div>

    </xpath>
</template>

Xem thêm

Mẫu XML của các đoạn mã khác nhau

Tùy chọn JavaScript

Thuộc tính data-js có thể được gán cho một nhóm tùy chọn để xác định một phương thức tùy chỉnh.

/** @odoo-module */

import options from 'web_editor.snippets.options';

options.registry.CustomMethodName = options.Class.extend({
    //
});

Trình tạo trang web cung cấp một số sự kiện mà bạn có thể sử dụng để kích hoạt các chức năng tùy chỉnh của mình.

Sự kiện

Sự miêu tả

bắt đầu

Xảy ra khi nhà xuất bản chọn đoạn mã lần đầu tiên trong phiên chỉnh sửa hoặc khi đoạn mã được kéo và thả trên trang.

vào trọng tâm

Xảy ra mỗi khi người dùng chọn đoạn mã hoặc khi đoạn mã được kéo và thả trên trang.

trênBlur

Xảy ra khi một đoạn mã bị mất tiêu điểm.

onClone

Xảy ra ngay sau khi một đoạn mã được sao chép.

onRemove

Xảy ra ngay trước khi đoạn trích bị xóa.

onBuilt

Xảy ra ngay sau khi đoạn mã được kéo và thả trên 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 nhà xuất bản lưu trang.

Mẫu nội dung động

Theo mặc định, khối Nội dung động có một số mẫu có sẵn trong Trình tạo trang web. Bạn cũng có thể thêm mẫu của riêng bạn vào danh sách.

Bài đăng trên blog

/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

Sự miêu tả

id

ID của mẫu. Phải bắt đầu bằng dynamic_filter_template_blog_post_

tên

Tên mẫu có thể đọc được

Các sản phẩm

/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

Sự miêu tả

id

ID của mẫu. Phải bắt đầu bằng dynamic_filter_template_product_product_

tên

Tên mẫu có thể đọc được

dữ liệu-số-của-phần tử

Số lượng sản phẩm trên mỗi slide trên máy tính để bàn

dữ liệu-số-của-phần tử-sm

Số lượng sản phẩm trên mỗi slide trên thiết bị di động

dữ liệu-số-phần tử-tìm nạp

Tổng số lượng sản phẩm được lấy

Sự kiện

/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

Sự miêu tả

id

ID của mẫu. Phải bắt đầu bằng dynamic_filter_template_event_event_

tên

Tên mẫu có thể đọc được