Theming

Після того, як ваше середовище розробки буде повністю налаштоване, ви можете розпочати створення каркасу вашого модуля теми. У цьому розділі ви дізнаєтеся, як:

  • Увімкнути/вимкнути стандартні опції та шаблони Конструктора веб-сайтів.

  • Визначте кольори та шрифти, які використовуватимуться для вашого дизайну.

  • Отримайте максимум від змінних Bootstrap.

  • Додайте власні стилі та JavaScript.

Модуль теми

Odoo постачається зі стандартною темою, яка забезпечує мінімальну структуру та макет. Коли ви створюєте нову тему, ви розширюєте стандартну тему.

Не забудьте додати каталог, що містить ваш модуль, до аргументу командного рядка addons-path під час запуску Odoo у вашому середовищі розробки.

Технічне найменування

Перший крок – створення нового каталогу.

website_airproof

Примітка

Додайте префікс website_ та використовуйте лише малі буквено-цифрові символи ASCII та символи підкреслення.

У цій документації ми використовуватимемо Airproof (вигаданий проект) як приклад.

Структура файлу

Теми упаковані як будь-який модуль Odoo. Навіть якщо ви розробляєте простий веб-сайт, вам потрібно упакувати його тему як модуль.

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

Папка

Опис

data

Пресети, меню, сторінки, зображення, фігури тощо (*.xml)

i18n

Переклади (*.po, *.pot)

lib

Зовнішні бібліотеки (*.js)

static

Користувацькі ресурси (*.jpg, *.gif, *.png, *.svg, *.pdf, *.scss, *.js)

views

Користувацькі представлення та шаблони (*.xml)

Initialization

Модуль Odoo також є пакетом Python з файлом __init__.py, що містить інструкції з імпорту різних файлів Python у модулі. Цей файл поки що може залишатися порожнім.

Декларація

Модуль Odoo оголошується у файлі маніфесту. Цей файл оголошує пакет Python як модуль Odoo і визначає метадані модуля. Він повинен містити принаймні поле name, яке завжди є обов’язковим. Зазвичай він містить набагато більше інформації.

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

Поле

Опис

name

Назва модуля, зрозуміла людині (обов’язково)

description

Розширений опис модуля у reStructuredText

category

Категорія класифікації в Odoo

version

Версія Odoo, до якої звертається цей модуль

author

Ім’я автора модуля

license

За замовчуванням ми використовуємо ліцензію LGPL-3. Більше інформації на сторінці маніфест модуля.

depends

Модулі Odoo мають бути завантажені перед цим, або тому, що цей модуль використовує створені ними функції, або тому, що він змінює ресурси, які вони визначають.

data

Список XML-файлів

assets

Список файлів SCSS та JS

Примітка

  • Наведена вище структура файлів є лише рекомендацією. Ми можемо додати в проект стільки інших папок, скільки потрібно, наприклад, /controllers для включення контролерів або /views/backend для представлень бекенду тощо.

  • Щоб створити тему веб-сайту, вам потрібно лише встановити додаток Веб-сайт. Якщо вам потрібні інші застосунки (блоги, події, електронна комерція тощо), ви також можете їх додати.

  • Версія Odoo та основний номер є обов’язковими. Однак, номер патчу не є обов’язковим. Якщо ви хочете вказати необхідну версію Odoo для запуску вашого модуля, вам слід використовувати структуру з п’яти аргументів, використовуючи перші два аргументи для вказівки поточної версії Odoo (* = 17.0).

Версіонування модулів

Приклад: 17.0.1.0.0 odoo_major.odoo_minor.module_major.module_minor.module_patch

Попередження

Автоматичне включення файлів за допомогою шаблонів підстановки (наприклад: /myfolder/*.scss) не працює в базах даних Odoo SaaS. У цьому випадку додайте кожен файл вручну до маніфесту.

Параметри за замовчуванням

Спочатку спробуйте створити свою тему, використовуючи параметри Odoo за замовчуванням. Це гарантує дві речі:

  1. Ви не винаходите заново те, що вже існує. Наприклад, оскільки Odoo надає опцію додавання рамки до нижнього колонтитула, вам не слід перекодувати її самостійно. Натомість спочатку увімкніть опцію за замовчуванням, а потім розширте її, якщо потрібно.

  2. Користувач все ще може використовувати всі функції Odoo з вашою темою. Наприклад, якщо ви перекодуєте рамку нижнього колонтитула, ви можете порушити роботу опції за замовчуванням або зробити її непридатною для використання, що призведе до неприємних ситуацій для користувача. Крім того, ваша перекодована версія може працювати не так добре, як опція за замовчуванням, оскільки інші функції Odoo можуть залежати від неї.

Порада

  • Використовуйте чотири пробіли на кожен рівень відступу.

  • Не використовуйте табуляцію.

  • Ніколи не змішуйте пробіли та табуляцію.

Перегляньте також

Odoo coding guidelines

Змінні Odoo

Odoo оголошує багато правил CSS, більшість з яких повністю налаштовуються шляхом перевизначення пов’язаних змінних SCSS. Для цього створіть файл primary_variables.scss та додайте його до пакета _assets_primary_variables.

Декларація

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

Читаючи вихідний код, легко помітити змінні, пов’язані з опціями.

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

Ці змінні можна перевизначити, наприклад, за допомогою карти $o-website-value-palettes.

Global

Декларація

/website_airproof/static/src/scss/primary_variables.scss
$o-website-values-palettes: (
   (
      // Templates
      // Colors
      // Fonts
      // Buttons
      // ...
   ),
);

Порада

Цей файл повинен містити лише визначення та перевизначення змінних і міксинів SCSS.

Перегляньте також

Primary variables SCSS

Fonts

Ви можете вбудувати будь-який шрифт на свій вебсайт. Конструктор вебсайтів автоматично робить їх доступними у селекторі шрифтів.

Декларація

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

Використання

/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>',
   ),
);
Google fonts
/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,
         ),
      ),
   ),
);
Спеціальні шрифти

Спочатку створіть спеціальний SCSS-файл для оголошення ваших власних шрифтів.

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

Потім скористайтеся правилом @font-face, щоб дозволити завантаження власних шрифтів на ваш вебсайт.

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

Порада

Рекомендується використовувати формат .woff та/або .woff2 для ваших шрифтів.

Кольори

Конструктор веб-сайтів використовує палітри, що складаються з п’яти іменованих кольорів. Визначення цих кольорів у вашій темі забезпечує її узгодженість.

Color

Опис

o-color-1

Primary

o-color-2

Secondary

o-color-3

Extra (Light)

o-color-4

Whitish

o-color-5

Blackish
Кольори теми

Декларація

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

Додайте створену палітру до списку палітр, що пропонуються Конструктором веб-сайтів.

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

Використання

/website_airproof/static/src/scss/primary_variables.scss
$o-website-values-palettes: (
   (
      'color-palettes-name':              'airproof',
   ),
);
Кольори теми Airproof

Колірна комбінація

На основі попередньо визначених п’яти кольорових палітр, Конструктор веб-сайтів автоматично генерує п’ять колірних комбінацій, кожна з яких визначає колір для фону, тексту, заголовків, посилань, основних та додаткових кнопок. Ці кольори можуть бути налаштовані користувачем пізніше.

Кольори теми

Кольори, що використовуються в колірній комбінації, доступні та можуть бути перевизначені через $o-color-palettes з використанням спеціального префікса (o-cc для 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-*',

      ),
   )
);

Примітка

Для кожного символу o-cc* замініть * цифрою (1 - 5), що відповідає бажаній комбінації кольорів.

Колір тексту за замовчуванням - o-color-5. Якщо фон занадто темний, він автоматично зміниться на колір o-color-4.

Перегляньте також

Color combinations SCSS

Демо-сторінка

Конструктор веб-сайтів автоматично генерує сторінку для перегляду комбінацій кольорів палітри теми: http://localhost:8069/website/demo/color-combinations

Градієнти

Ви також можете визначити градієнти для меню, заголовка, нижнього колонтитула та панелі авторських прав безпосередньо у вашому файлі primary_variables.scss.

Декларація

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

Змінні Bootstrap

Odoo за замовчуванням включає Bootstrap. Ви можете використовувати всі змінні та міксини фреймворку.

Якщо Odoo не надає потрібної вам змінної, можливо, існує змінна Bootstrap, яка дозволяє це зробити. Дійсно, всі макети Odoo враховують структури Bootstrap та використовують компоненти Bootstrap або їхні розширення. Якщо ви налаштовуєте змінну Bootstrap, ви додаєте загальний стиль для всього веб-сайту користувача.

Використовуйте спеціальний файл, доданий до пакета _assets_frontend_helpers, для перевизначення значень Bootstrap, а не файл primary_variables.scss.

Декларація

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

Використання

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

Порада

Цей файл повинен містити лише визначення та перевизначення змінних і міксинів SCSS.

Попередження

Не перевизначайте змінні Bootstrap, які залежать від змінних Odoo. В іншому випадку ви можете позбавити користувача можливості налаштувати їх за допомогою Конструктора веб-сайтів.

Коли опція визначена змінною в primary_variables.scss та змінною Boostrap, завжди слід перевизначати її через первинні змінні. Робіть це через bootstrap_overridden.scss, лише якщо в первинних змінних нічого немає.

Перегляньте також

Bootstrap overridden SCSS

Демо-сторінка

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

Розміри шрифтів

Odoo має класи розмірів шрифтів CSS для розділення стилю (розміри шрифтів) та семантики (теги та стилі загалом). Обидві логіки можна поєднувати для більшої гнучкості.

Перегляньте також

Bootstrap documentation about display headings

Стиль тексту

Конструктор веб-сайтів Odoo дозволяє вибрати стиль для вашого тексту. Деякі з них пов’язані лише з тегами, як-от Заголовок без додаткового класу CSS. Інші поєднують теги та стилі, що застосовуються безпосередньо до них, як-от Відображення заголовка 1.

Стилі заголовків 
<!-- 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>
Класи розмірів

Класи розмірів додаються до щойно створеного тегу span всередині цільового елемента (див. приклади нижче).

Класи розмірів
Заголовок і основний текст

Припускаючи, що ці класи можна застосувати до будь-якого текстового елемента, розглянемо h2 як приклад нижче:

<!-- 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>
Відображати заголовки

Якщо потрібні більші заголовки, Odoo використовує класи заголовків відображення Bootstrap, від display-1 до 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>

Примітка

Конструктор веб-сайтів дозволяє користувачеві налаштовувати лише розміри від Дисплей 1 до Дисплей 4. Ви можете встановити інші розміри (5 та 6) для використання у своєму коді, але користувач не зможе змінювати їх безпосередньо в інтерфейсі Конструктора веб-сайтів.

Налаштування веб-сайту

Глобальні параметри, пов’язані з веб-сайтом, можна налаштувати через запис веб-сайту, дотримуючись наведеної нижче структури.

Декларація

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

Поле

Опис

name

Назва веб-сайту (відображається у браузері)

logo

Шлях до логотипу (раніше створеного в записі)

favicon

Шлях до фавіконки (раніше створеної в записі)

shop_ppg

Кількість товарів, що відображаються на сторінці в інтернет-магазині

shop_ppr

Кількість товарів, що відображаються в рядках (на сторінці) в електронній комерції

cookies_bar

Увімкнути/вимкнути панель файлів cookie

contact_us_button_url

URL-адреса сторінки Contact us (наприклад, використовується у стандартних шаблонах заголовків).

social_facebook

URL-адреса профілю у Facebook

social_instagram

URL-адреса профілю в Instagram

social_linkedin

URL-адреса профілю компанії в LinkedIn

social_youtube

URL-адреса каналу YouTube

Примітка

website.default_website – це посилання за замовчуванням, коли ви працюєте лише з одним вебсайтом. Якщо у вашій базі даних є кілька вебсайтів, цей запис посилатиметься на сайт за замовчуванням (перший).

Представлення

Для деяких опцій, окрім змінної Конструкт веб-сайту, також потрібно активувати певний вигляд.

Читаючи вихідний код, легко знайти шаблони, пов’язані з опціями.

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

Перегляньте також

У таких випадках синтаксису <template id="..."> слід надавати перевагу над синтаксисом <record id="..." model="ir.ui.view"> під час визначення запису в XML.

Див. template, особливо щодо значення active.

Presets

Щоб активувати та деактивувати подання як пресетів, вам слід включити їх у файл presets.xml.

Використання

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

Example

Зміна горизонтального вирівнювання елементів меню

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

Таку ж логіку можна використовувати й для інших програм Odoo.

Електронна комерція – відображення категорій товарів

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

Портал – Вимкнути вибір мови

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

Assets

У цій частині ми будемо використовувати пакет assets_frontend, розташований у веб-модулі. Цей пакет визначає список ресурсів, що завантажуються конструктором веб-сайтів, а метою є додавання ваших SCSS- та JS-файлів до пакету.

Це неповний список часто використовуваних пакетів для веб-сайту:

Bundle

Опис

web._assets_primary_variables

В основному використовується для файлу primary_variables.scss

web._assets_secondary_variables

В основному використовується для файлу secondary_variables.scss

web._assets_frontend_helpers

В основному використовується для файлу bootstrap_overridden.scss

web.assets_frontend

Ви можете додати всі власні JS-файли SCSS, JS або QWeb

website.assets_wysiwyg

Додайте свої JS-файли, пов’язані з поведінкою опцій Конструктора веб-сайтів (наприклад, спеціальний метод для вашого спеціального будівельного блоку)

website.assets_wysiwyg

Якщо вам потрібно розширити Boostrap через API Bootstrap Utilities, наприклад

Стилі

Конструктор веб-сайтів разом із Bootstrap чудово підходять для визначення основних стилів вашого веб-сайту. Але щоб створити щось унікальне, вам слід піти далі. Для цього ви можете легко додати будь-який SCSS-файл до своєї теми.

Декларація

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

Ви можете повторно використовувати змінні з вашого файлу Bootstrap та ті, що використовуються Odoo у вашому файлі theme.scss.

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');
 }

Interactivity

Odoo підтримує три різні типи файлів JavaScript:

Більшість нових кодів Odoo JavaScript повинні використовувати вбудовану систему модулів JavaScript. Це простіше та забезпечує кращий досвід розробника завдяки кращій інтеграції з IDE.

Важливо

Odoo потрібно знати, які файли слід перетворювати на Модулі Odoo, а які ні. Це система з підпискою: Odoo переглядає перший рядок JavaScript-файлу та перевіряє, чи містить він рядок @odoo-module. Якщо так, він автоматично перетворюється на модуль Odoo.

/** @odoo-module **/

Декларація

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

Примітка

Якщо ви хочете додати файли із зовнішньої бібліотеки, ви можете додати їх до папки /lib вашого модуля.

Порада

  • Використовуйте лінтер (JSHint, …).

  • Ніколи не додавайте мінімізовані бібліотеки JavaScript.

  • Додайте 'use strict'; на початку кожного модуля старого стилю (це автоматично для модулів нового стилю).

  • Використовуйте CSS-класи з префіксом js_ для елементів, на які ви орієнтуєтесь за допомогою JavaScript.

  • Змінні та функції повинні мати регістр camelCased (myVariable) замість snake_cased (my_variable).

  • Не називайте змінну event; використовуйте замість цього ev. Це зроблено для того, щоб уникнути помилок у браузерах, відмінних від Chrome, оскільки Chrome магічним чином призначає глобальну змінну event (тому, якщо ви використовуєте змінну event без її оголошення, вона працюватиме нормально в Chrome, але призведе до аварійного завершення роботи в усіх інших браузерах).

  • Використовуйте суворі порівняння (=== замість ==).

  • Використовуйте подвійні лапки для всіх текстових рядків (наприклад, "Hello") та одинарні лапки для всіх інших рядків, таких як селектор CSS .x_nav_item.

  • Якщо ви використовуєте нативні стандартні JS-функції (start(), willStart(), cleanForSave() тощо), переконайтеся, що ви викликаєте this._super.apply(this, arguments); (перевірте, чи це необхідно у стандартному коді).

Перегляньте також