Tạo theme

Sau khi môi trường phát triển của bạn đã được thiết lập đầy đủ, bạn có thể bắt đầu xây dựng bộ khung của module theme. Trong chương này, bạn sẽ khám phá cách:

• Bật/tắt các tùy chọn và template tiêu chuẩn của Website Builder.

• Định nghĩa màu sắc và font chữ để sử dụng cho thiết kế của bạn.

• Tận dụng tối đa các biến của Bootstrap.

• Thêm style tùy chỉnh và JavaScript.

Module theme

Odoo đi kèm với một theme mặc định cung cấp cấu trúc và bố cục tối thiểu. Khi bạn tạo một theme mới, bạn đang mở rộng theme mặc định.

Hãy nhớ thêm thư mục chứa module của bạn vào đối số dòng lệnh addons-path khi chạy Odoo trong môi trường phát triển của bạn.

Đặt tên kỹ thuật

Bước đầu tiên là tạo một thư mục mới.

website_airproof

Ghi chú

Thêm tiền tố website_ và chỉ sử dụng ký tự chữ và số ASCII viết thường cùng dấu gạch dưới.

Trong tài liệu này, chúng ta sẽ sử dụng Airproof (một dự án hư cấu) làm ví dụ.

Cấu trúc file

Theme được đóng gói giống như bất kỳ module Odoo nào khác. Ngay cả khi bạn đang thiết kế một website cơ bản, bạn vẫn cần đóng gói theme của nó như một module.

website_airproof
├── data
├── i18n
├── static
│   ├── description
│   ├── fonts
│   ├── lib
│   ├── shapes // Shapes for background
│   └── src
│       ├── img
│       │   ├── content // For those used in the pages of your website
│       │   └── wbuilder // For those used in the builder
│       ├── js
│       ├── scss // Theme specific styles
│       └── snippets // custom snippets
├── views
├── __init__.py
└── __manifest__.py

Thư mục	Mô tả
data	Presets, menu, trang, hình ảnh, hình dạng, … (*.xml)
i18n	Bản dịch (*.po, *.pot)
lib	Thư viện bên ngoài (*.js)
static	Asset tùy chỉnh (*.jpg, *.gif, *.png, *.svg, *.pdf, *.scss, *.js)
views	View và template tùy chỉnh (*.xml)

Khởi tạo

Một module Odoo cũng là một package Python với file __init__.py chứa các câu lệnh import cho nhiều file Python khác nhau trong module. File này hiện có thể để trống.

Khai báo

Một module Odoo được khai báo bằng file manifest. File này khai báo một package Python là một module Odoo và chỉ định metadata của module. File này phải chứa ít nhất trường name, trường luôn bắt buộc. Thông thường nó chứa nhiều thông tin hơn.

/website_airproof/__manifest__.py

{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '17.0.0',
   'author': '...',
   'license': '...',
   'depends': ['website'],
   'data': [
      # ...
   ],
   'assets': {
      # ...
   },
}

Field	Mô tả
name	Tên module dễ đọc (bắt buộc)
description	Mô tả mở rộng của module, ở định dạng reStructuredText
category	Danh mục phân loại trong Odoo
version	Phiên bản Odoo mà module này hướng đến
author	Tên tác giả của module
license	Theo mặc định, chúng ta sử dụng giấy phép LGPL-3. Thông tin thêm tại trang module manifest.
depends	Các module Odoo phải được nạp trước module này, do module này sử dụng các tính năng mà chúng tạo ra hoặc do nó thay đổi các tài nguyên mà chúng định nghĩa
data	Danh sách các file XML
assets	Danh sách các file SCSS và JS

Ghi chú

• Cấu trúc file ở trên chỉ là một gợi ý. Chúng ta có thể thêm bao nhiêu thư mục khác tùy theo nhu cầu của dự án, chẳng hạn như /controllers để chứa các controller hoặc /views/backend cho các view backend, v.v.

• Để tạo một theme website, bạn chỉ cần cài đặt ứng dụng Website. Nếu bạn cần các ứng dụng khác (Blogs, Events, eCommerce, ...), bạn cũng có thể thêm chúng.

• Phiên bản Odoo và số major là bắt buộc. Tuy nhiên, số patch là tùy chọn. Nếu bạn muốn chỉ định phiên bản Odoo yêu cầu để chạy module của mình, bạn nên sử dụng cấu trúc gồm năm đối số, sử dụng hai đối số đầu tiên để chỉ ra phiên bản Odoo hiện tại của bạn (* = 17.0).

Ví dụ: 17.0.1.0.0 odoo_major.odoo_minor.module_major.module_minor.module_patch

Cảnh báo

Việc tự động bao gồm file bằng ký hiệu ký tự đại diện (vd.: /myfolder/*.scss) không hoạt động trong các database Odoo SaaS. Trong trường hợp này, hãy bao gồm từng file theo cách thủ công trong manifest.

Tùy chọn mặc định

Trước tiên, hãy thử xây dựng theme của bạn bằng cách sử dụng các tùy chọn mặc định của Odoo. Điều này đảm bảo hai điều:

1. Bạn không phát minh lại thứ đã tồn tại sẵn. Ví dụ, vì Odoo đã cung cấp một tùy chọn để thêm đường viền cho footer, bạn không nên tự viết lại đoạn code này. Thay vào đó, hãy bật tùy chọn mặc định trước, rồi mở rộng nó nếu cần.

2. Người dùng vẫn có thể sử dụng tất cả các tính năng của Odoo với theme của bạn. Ví dụ, nếu bạn viết lại đường viền cho footer, bạn có thể làm hỏng tùy chọn mặc định hoặc khiến nó trở nên vô dụng, gây trải nghiệm tồi cho người dùng. Ngoài ra, đoạn code viết lại của bạn có thể không hoạt động tốt bằng tùy chọn mặc định, vì các tính năng khác của Odoo có thể phụ thuộc vào nó.

Mẹo

• Sử dụng bốn khoảng trắng cho mỗi cấp độ thụt lề.

• Không sử dụng ký tự tab.

• Không bao giờ trộn lẫn khoảng trắng và tab.

Xem thêm

Hướng dẫn coding của Odoo

Biến của Odoo

Odoo khai báo nhiều rule CSS, hầu hết có thể tùy chỉnh hoàn toàn bằng cách ghi đè các biến SCSS liên quan. Để làm điều này, hãy tạo file primary_variables.scss và thêm nó vào bundle _assets_primary_variables.

Khai báo

/website_airproof/__manifest__.py

'assets': {
   'web._assets_primary_variables': [
      'website_airproof/static/src/scss/primary_variables.scss',
   ],
},

Bằng cách đọc mã nguồn, bạn có thể dễ dàng nhận ra các biến liên quan đến các tùy chọn.

<we-button title="..."
   data-name="..."
   data-customize-website-views="..."
   data-customize-website-variable="'Sidebar'"
   data-img="..."/>

Ví dụ, các biến này có thể được ghi đè thông qua bảng $o-website-value-palettes.

Toàn cục

Khai báo

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

$o-website-values-palettes: (
   (
      // Templates
      // Colors
      // Fonts
      // Buttons
      // ...
   ),
);

Mẹo

File đó chỉ được chứa các định nghĩa và ghi đè của biến SCSS và mixin.

Xem thêm

Primary variables SCSS

Font chữ

Bạn có thể nhúng bất kỳ font nào vào website của mình. Website Builder sẽ tự động làm cho chúng khả dụng trong bộ chọn font.

Khai báo

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

$o-theme-font-configs: (
   <font-name>: (
      'family': <css font family list>,
      'url' (optional): <related part of Google fonts URL>,
      'properties' (optional): (
         <font-alias>: (
            <website-value-key>: <value>,
            ...,
         ),
      ...,
   )
)

Sử dụng

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

$o-website-values-palettes: (
   (
      'font':                             '<font-name>',
      'headings-font':                    '<font-name>',
      'navbar-font':                      '<font-name>',
      'buttons-font':                     '<font-name>',
   ),
);

Font của Google

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

$o-theme-font-configs: (
   'Poppins': (
      'family':                         ('Poppins', sans-serif),
      'url':                            'Poppins:400,500',
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

Font tùy chỉnh

Trước tiên, hãy tạo một file SCSS riêng để khai báo (các) font tùy chỉnh của bạn.

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/font.scss',
   ],
},

Sau đó, sử dụng rule @font-face để cho phép (các) font tùy chỉnh của bạn được nạp trên website của bạn.

/website_airproof/static/src/scss/font.scss

@font-face {
   font-family: "My Custom Font", Helvetica, Helvetica Neue, Arial, sans-serif;
   font-weight: 400;
   font-style: normal;
   src: url('/fonts/my-custom-font.woff') format('woff'),
        url('/fonts/my-custom-font.woff2') format('woff2');
}

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

$o-theme-font-configs: (
   'Proxima Nova': (
      'family':                         ('Proxima Nova', sans-serif),
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

Mẹo

Bạn nên sử dụng định dạng .woff và/hoặc .woff2 cho font của mình.

Màu sắc

Website Builder dựa trên các bảng màu bao gồm năm màu có tên. Việc định nghĩa các màu này trong theme của bạn giúp đảm bảo tính nhất quán.

Màu sắc	Mô tả
o-color-1	Primary
o-color-2	Secondary
o-color-3	Extra (Light)
o-color-4	Trắng ngà
o-color-5	Đen ngà

Khai báo

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

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-color-1':                    #bedb39,
         'o-color-2':                    #2c3e50,
         'o-color-3':                    #f2f2f2,
         'o-color-4':                    #ffffff,
         'o-color-5':                    #000000,
      ),
   )
);

Thêm bảng màu đã tạo vào danh sách các bảng màu do Website Builder cung cấp.

$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'airproof');

Sử dụng

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

$o-website-values-palettes: (
   (
      'color-palettes-name':              'airproof',
   ),
);

Tổ hợp màu sắc

Dựa trên năm bảng màu đã định nghĩa trước đó, Website Builder tự động tạo ra năm tổ hợp màu, mỗi tổ hợp định nghĩa một màu cho nền, văn bản, tiêu đề, liên kết, nút chính và nút phụ. Các màu này có thể được người dùng tùy chỉnh sau.

Các màu được sử dụng trong một tổ hợp màu có thể truy cập được và có thể ghi đè thông qua $o-color-palettes bằng cách sử dụng một tiền tố cụ thể (o-cc cho color combination).

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

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (

         'o-cc*-bg':                     'o-color-*',
         'o-cc*-text':                   'o-color-*',
         'o-cc*-headings':               'o-color-*',
         'o-cc*-h2':                     'o-color-*',
         'o-cc*-h3':                     'o-color-*',
         'o-cc*-h4':                     'o-color-*',
         'o-cc*-h5':                     'o-color-*',
         'o-cc*-h6':                     'o-color-*',
         'o-cc*-link':                   'o-color-*',
         'o-cc*-btn-primary':            'o-color-*',
         'o-cc*-btn-primary-border':     'o-color-*',
         'o-cc*-btn-secondary':          'o-color-*',
         'o-cc*-btn-secondary-border':   'o-color-*',

      ),
   )
);

Ghi chú

Đối với mỗi o-cc*, hãy thay * bằng chữ số (1 - 5) tương ứng với tổ hợp màu mong muốn.

Màu văn bản mặc định là o-color-5. Nếu nền quá tối, nó sẽ tự động chuyển sang màu o-color-4.

Xem thêm

Color combinations SCSS

Trang demo

Website Builder tự động tạo ra một trang để xem các tổ hợp màu của bảng màu theme: http://localhost:8069/website/demo/color-combinations

Gradient

Bạn cũng có thể định nghĩa gradient cho menu, header, footer và thanh copyright, trực tiếp trong file primary_variables.scss của bạn.

Khai báo

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

$o-website-values-palettes: (
   (
      'menu-gradient': linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%),
      'header-boxed-gradient': [your-gradient],
      'footer-gradient': [your-gradient],
      'copyright-gradient': [your-gradient],
   ),
);

Biến Bootstrap

Odoo tích hợp sẵn Bootstrap theo mặc định. Bạn có thể sử dụng tất cả các biến và mixin của framework này.

Nếu Odoo không cung cấp biến bạn đang tìm kiếm, có thể có một biến Bootstrap cho phép làm điều đó. Thật vậy, tất cả các layout của Odoo đều tuân theo cấu trúc Bootstrap và sử dụng các component Bootstrap hoặc phần mở rộng của chúng. Nếu bạn tùy chỉnh một biến Bootstrap, bạn sẽ thêm một style chung cho toàn bộ website của người dùng.

Sử dụng một file riêng được thêm vào bundle _assets_frontend_helpers để ghi đè các giá trị Bootstrap, không dùng file primary_variables.scss.

Khai báo

/website_airproof/__manifest__.py

'assets': {
   'web._assets_frontend_helpers': [
      ('prepend', 'website_airproof/static/src/scss/bootstrap_overridden.scss'),
   ],
},

Sử dụng

/website_airproof/static/src/scss/bootstrap_overridden.scss

// Typography
$h1-font-size:                 4rem !default;

// Navbar
$navbar-nav-link-padding-x:    1rem!default;

// Buttons + Forms
$input-placeholder-color:      o-color('o-color-1') !default;

// Cards
$card-border-width:            0 !default;

Mẹo

File đó chỉ được chứa các định nghĩa và ghi đè của biến SCSS và mixin.

Cảnh báo

Không ghi đè các biến Bootstrap phụ thuộc vào các biến của Odoo. Nếu không, bạn có thể làm mất khả năng người dùng tùy chỉnh chúng bằng Website Builder.

Khi một tùy chọn được định nghĩa bởi một biến trong primary_variables.scss và bởi một biến Bootstrap, bạn nên luôn ghi đè thông qua các biến chính (primary variables). Chỉ thực hiện qua bootstrap_overridden.scss nếu không có gì tồn tại trong các biến chính.

Xem thêm

Bootstrap overridden SCSS

Trang demo

http://localhost:8069/website/demo/bootstrap

Kích thước font

Odoo có các class CSS về kích thước font để tách biệt style (kích thước font) và ngữ nghĩa (tag và style nói chung). Cả hai logic này có thể được kết hợp để linh hoạt hơn.

Xem thêm

Tài liệu Bootstrap về display headings

Kiểu văn bản

Website Builder của Odoo cho phép chọn một kiểu (style) cho văn bản của bạn. Một số kiểu chỉ liên quan đến tag, như Header, không có class CSS bổ sung. Các kiểu khác kết hợp tag và style được áp dụng trực tiếp lên chúng, như Header 1 Display.

<!-- h1 with display heading sizes -->
<h1 class="display-1">Heading 1 with Display Heading 1 size</h1>
<h1 class="display-2">Heading 1 with Display Heading 2 size</h1>
<h1 class="display-3">Heading 1 with Display Heading 3 size</h1>
<h1 class="display-4">Heading 1 with Display Heading 4 size</h1>

<!-- Lead text - named "Light" in the dropdown -->
<p class="lead">A text typically used as an introduction.</p>

<!-- Small text -->
<p class="o_small">Body text with a smaller size.</p>

Class kích thước

Các class kích thước được thêm vào một tag span mới được tạo bên trong phần tử mục tiêu (xem các ví dụ bên dưới).

Văn bản tiêu đề và nội dung

Giả sử các class này có thể được áp dụng cho bất kỳ phần tử văn bản nào, hãy lấy h2 làm ví dụ bên dưới:

<!-- h2 sized like an h1 -->
<h2><span class="h1-fs">Heading</span></h2>

<!-- h2 sized with other heading sizes -->
<h2><span class="h2-fs">Heading</span></h2>
<h2><span class="h3-fs">Heading</span></h2>
<h2><span class="h4-fs">Heading</span></h2>
<h2><span class="h5-fs">Heading</span></h2>
<h2><span class="h6-fs">Heading</span></h2>

<!-- h2 sized like a normal paragraph (base size, 16px by default) -->
<h2><span class="base-fs">Heading</span></h2>

<!-- h2 sized like a small text (14px by default) -->
<h2><span class="o_small-fs">Heading</span></h2>

Display headings

Nếu cần các tiêu đề lớn hơn, Odoo sử dụng các class Display Headings của Bootstrap, từ display-1 đến 6.

<h2><span class="display-1-fs">Heading</span></h2>
<h2><span class="display-2-fs">Heading</span></h2>
<h2><span class="display-3-fs">Heading</span></h2>
<h2><span class="display-4-fs">Heading</span></h2>

Ghi chú

Website Builder chỉ cho phép người dùng cấu hình các kích thước từ Display 1 đến Display 4. Bạn có thể thiết lập các kích thước còn lại (5 và 6) để sử dụng trong code của mình, nhưng người dùng sẽ không thể sửa đổi chúng trực tiếp trong giao diện Website Builder.

Cài đặt website

Các tùy chọn toàn cục liên quan đến website có thể được thiết lập thông qua bản ghi website theo cấu trúc dưới đây.

Khai báo

/website_airproof/data/website.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <record id="website.default_website" model="website">
      <field name="name">Airproof</field>
      <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo_airproof.png"/>
      <field name="favicon" type="base64" file="website_airproof/static/description/favicon.png" />
      <field name="shop_ppg">18</field>
      <field name="shop_ppr">3</field>
      <field name="cookies_bar" eval="True" />
      <field name="contact_us_button_url">/contact-us</field>
      <field name="social_facebook">https://www.facebook.com/Airproof</field>
      <field name="social_instagram">https://www.instagram.com/airproof</field>
      <field name="social_linkedin">https://www.linkedin.com/company/airproof</field>
      <field name="social_youtube">https://www.youtube.com/c/airproof</field>
   </record>
</odoo>

Field	Mô tả
name	Tên của website (hiển thị trên trình duyệt)
logo	Đường dẫn đến logo (đã được tạo trước đó trong một bản ghi)
favicon	Đường dẫn đến favicon (đã được tạo trước đó trong một bản ghi)
shop_ppg	Số lượng sản phẩm hiển thị trên mỗi trang trong e-commerce
shop_ppr	Số lượng sản phẩm hiển thị trên mỗi hàng (trong một trang) trong e-commerce
cookies_bar	Bật/tắt thanh cookie
contact_us_button_url	URL của trang Contact us (ví dụ, được sử dụng trong các template header tiêu chuẩn).
social_facebook	URL của trang cá nhân Facebook
social_instagram	URL của trang cá nhân Instagram
social_linkedin	URL của trang công ty LinkedIn
social_youtube	URL của kênh YouTube

Ghi chú

website.default_website là tham chiếu mặc định bất cứ khi nào bạn chỉ làm việc với một website duy nhất. Nếu có nhiều website trong database của bạn, bản ghi này sẽ tham chiếu đến trang mặc định (trang đầu tiên).

View

Đối với một số tùy chọn, ngoài biến của Website Builder, bạn còn phải kích hoạt một view cụ thể.

Bằng cách đọc mã nguồn, bạn có thể dễ dàng tìm thấy các template liên quan đến các tùy chọn.

<we-button title="..."
   data-name="..."
   data-customize-website-views="website.template_header_default"
   data-customize-website-variable="'...'"
   data-img="..."/>

<template id="..." inherit_id="..." name="..." active="True"/>
<template id="..." inherit_id="..." name="..." active="False"/>

Xem thêm

Trong những trường hợp như vậy, nên ưu tiên sử dụng cú pháp <template id="..."> thay vì cú pháp <record id="..." model="ir.ui.view"> khi định nghĩa bản ghi trong XML.

Xem template, đặc biệt là về giá trị active.

Presets

Để kích hoạt và vô hiệu hóa các view dưới dạng preset, bạn nên đưa chúng vào file presets.xml.

Sử dụng

/website_airproof/data/presets.xml

<record id="module.view" model="ir.ui.view">
      <field name="active" eval="False"/>
</record>

Example

Thay đổi căn chỉnh ngang của các mục menu

/website_airproof/data/presets.xml

<record id="website.template_header_default_align_center" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

Cùng một logic này cũng có thể được sử dụng cho các ứng dụng Odoo khác.

eCommerce - Hiển thị danh mục sản phẩm

/website_airproof/data/presets.xml

 <record id="website_sale.products_categories" model="ir.ui.view">
    <field name="active" eval="False"/>
 </record>

Portal - Vô hiệu hóa bộ chọn ngôn ngữ

/website_airproof/data/presets.xml

<record id="portal.footer_language_selector" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

Assets

Đối với phần này, chúng ta sẽ tham chiếu đến bundle assets_frontend nằm trong module web. Bundle này chỉ định danh sách các asset được nạp bởi Website Builder, và mục tiêu là thêm các file SCSS và JS của bạn vào bundle này.

Đây là danh sách không đầy đủ các bundle thường được sử dụng cho một website:

Bundle	Mô tả
web._assets_primary_variables	Định nghĩa các biến SCSS chính (màu sắc, font, khoảng cách, v.v.) được sử dụng làm lớp theme chính trên tất cả các bundle. Chủ yếu được sử dụng cho file primary_variables.scss.
web._assets_secondary_variables	Định nghĩa các biến SCSS phụ, phụ thuộc vào và mở rộng các biến chính. Chủ yếu được sử dụng cho file secondary_variables.scss.
web._assets_frontend_helpers	Cung cấp các ghi đè Bootstrap dành riêng cho frontend, cần được đưa vào trước khi biên dịch bất kỳ SCSS frontend nào. Chủ yếu được sử dụng cho file bootstrap_overridden.scss.
web.assets_frontend	Cung cấp các asset cơ bản cần thiết để render và tương tác với frontend của Odoo. Bạn có thể thêm tất cả các file SCSS, JS tùy chỉnh hoặc template QWeb phía client của mình.
website.assets_wysiwyg	Cung cấp các asset được nạp vào ngữ cảnh của trình soạn thảo web, bao gồm các style chế độ chỉnh sửa, phương thức tùy chỉnh cho một building block tùy chỉnh, v.v.
web._assets_bootstrap	Ví dụ, nếu bạn cần mở rộng Bootstrap thông qua Bootstrap Utilities API

Style

Website Builder cùng với Bootstrap rất tốt để định nghĩa các style cơ bản cho website của bạn. Nhưng để thiết kế một thứ gì đó độc đáo, bạn nên tiến thêm một bước. Để làm điều này, bạn có thể dễ dàng thêm bất kỳ file SCSS nào vào theme của mình.

Khai báo

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/theme.scss',
   ],
},

Bạn có thể thoải mái tái sử dụng các biến từ file Bootstrap của mình và các biến được Odoo sử dụng trong file theme.scss của bạn.

Example

/website_airproof/static/src/scss/theme.scss

 blockquote {
   border-radius: $rounded-pill;
   color: o-color('o-color-3');
   font-family: o-website-value('headings-font');
 }

Tính tương tác

Odoo hỗ trợ ba loại file JavaScript khác nhau:

• file JavaScript thuần (không có hệ thống module),

• module JavaScript gốc, và

• module Odoo (sử dụng một hệ thống module tùy chỉnh).

Hầu hết code JavaScript mới của Odoo nên sử dụng hệ thống module JavaScript gốc. Nó đơn giản hơn và mang lại lợi ích về trải nghiệm phát triển tốt hơn nhờ tích hợp tốt hơn với IDE.

Quan trọng

Odoo cần biết những file nào nên được chuyển thành module Odoo và những file nào thì không. Đây là một hệ thống tùy chọn (opt-in): Odoo xem xét dòng đầu tiên của một file JavaScript và kiểm tra xem nó có chứa chuỗi @odoo-module hay không. Nếu có, file đó sẽ tự động được chuyển đổi thành một module Odoo.

/** @odoo-module **/

Khai báo

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/js/theme.js',
   ],
},

Ghi chú

Nếu bạn muốn bao gồm các file từ một thư viện bên ngoài, bạn có thể thêm chúng vào thư mục /lib của module.

Mẹo

• Sử dụng một linter (JSHint, ...).

• Luôn thêm các thư viện JavaScript đã được rút gọn (minified).

• Thêm 'use strict'; ở đầu mỗi module kiểu cũ (điều này tự động đối với các module kiểu mới).

• Sử dụng các class CSS có tiền tố js_ cho các phần tử mà bạn nhắm mục tiêu bằng JavaScript.

• Biến và hàm nên viết theo kiểu camelCase (myVariable) thay vì snake_case (my_variable).

• Không đặt tên một biến là event; hãy dùng ev thay thế. Điều này nhằm tránh lỗi trên các trình duyệt không phải Chrome, vì Chrome tự động gán một biến toàn cục event (vì vậy nếu bạn sử dụng biến event mà không khai báo nó, code sẽ chạy tốt trên Chrome nhưng bị lỗi trên mọi trình duyệt khác).

• Sử dụng so sánh nghiêm ngặt (=== thay vì ==).

• Sử dụng dấu ngoặc kép cho tất cả các chuỗi văn bản (chẳng hạn như "Hello") và dấu ngoặc đơn cho tất cả các chuỗi khác, chẳng hạn như một selector CSS .x_nav_item.

• Nếu bạn đang sử dụng các hàm JS tiêu chuẩn gốc (start(), willStart(), cleanForSave(), v.v.), hãy đảm bảo bạn gọi this._super.apply(this, arguments); (kiểm tra xem điều này có cần thiết trong code tiêu chuẩn hay không).

Xem thêm

• Hướng dẫn coding JavaScript của Odoo

• Tổng quan về framework JavaScript của Odoo

• Odoo Experience Talk: 10 mẹo để nâng tầm thiết kế website của bạn!