Theming

پس از این که محیط توسعهٔ شما به‌طور کامل راه‌اندازی شد، می‌توانید شروع به ساخت اسکلت ماژول قالب خود کنید. در این فصل، خواهید آموخت چگونه:

• گزینه‌ها و قالب‌های استاندارد ابزار ساخت وب‌سایت را فعال/غیرفعال کنید.

• رنگ‌ها و فونت‌های مورد استفاده برای طراحی خود را تعریف کنید.

• بیشترین بهره را از متغیرهای Bootstrap ببرید.

• افزودن استایل‌های سفارشی و JavaScript.

ماژول قالب

Odoo با یک قالب پیش‌فرض ارائه می‌شود که ساختار و چیدمان حداقلی فراهم می‌کند. وقتی یک قالب جدید ایجاد می‌کنید، در حال گسترش قالب پیش‌فرض هستید.

به یاد داشته باشید که دایرکتوری حاوی ماژول خود را به آرگومان خط فرمان addons-path هنگام اجرای Odoo در محیط توسعه‌تان اضافه کنید.

نام‌گذاری فنی

اولین گام، ایجاد یک دایرکتوری جدید است.

website_airproof

توجه

آن را با پیشوند website_ بگذارید و تنها از حروف کوچک ASCII، اعداد و خط زیر (underscore) استفاده کنید.

در این مستندات، از Airproof (یک پروژهٔ فرضی) به‌عنوان نمونه استفاده می‌کنیم.

ساختار فایل

قالب‌ها همانند هر ماژول Odoo بسته‌بندی می‌شوند. حتی اگر در حال طراحی یک وب‌سایت ساده هستید، باید قالب آن را به‌صورت یک ماژول بسته‌بندی کنید.

website_airproof
├── data
├── i18n
├── static
│   ├── description
│   ├── fonts
│   ├── lib
│   ├── image_shapes // Shapes for images
│   ├── 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
│       └── website_builder // Options for the Website Builder
├── views
├── __init__.py
└── __manifest__.py

پوشه	توضیحات
data	پیش‌تنظیم‌ها، منوها، صفحات، تصاویر، اشکال، … (*.xml)
i18n	ترجمه‌ها (*.po, *.pot)
lib	کتابخانه‌های خارجی (*.js)
static	دارایی‌های سفارشی (*.jpg, *.gif, *.png, *.svg, *.pdf, *.scss, *.js)
views	نماها و قالب‌های سفارشی (*.xml)

مقداردهی اولیه

یک ماژول Odoo همچنین یک بستهٔ Python با یک فایل __init__.py است که شامل دستورات import برای فایل‌های مختلف Python در ماژول می‌باشد. این فایل فعلاً می‌تواند خالی بماند.

اعلان

یک ماژول Odoo با فایل manifest خود اعلان می‌شود. این فایل یک بستهٔ Python را به‌عنوان یک ماژول Odoo اعلان می‌کند و فراداده‌های (metadata) ماژول را مشخص می‌کند. این فایل باید حداقل شامل فیلد name باشد که همواره الزامی است. معمولاً اطلاعات بسیار بیشتری در آن وجود دارد.

/website_airproof/__manifest__.py

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

فیلد	توضیحات
name	نام قابل‌خواندن توسط انسان برای ماژول (الزامی)
description	توضیحات گسترده‌تر ماژول، با فرمت reStructuredText
category	دستهٔ طبقه‌بندی در Odoo
version	نسخهٔ Odoo که این ماژول هدف قرار داده است
author	نام نویسندهٔ ماژول
license	به‌طور پیش‌فرض، از مجوز LGPL-3 استفاده می‌کنیم. اطلاعات بیشتر در صفحهٔ module manifest.
depends	ماژول‌های Odoo که باید پیش از این یکی بارگذاری شوند، یا به این دلیل که این ماژول از ویژگی‌هایی که آن‌ها ایجاد می‌کنند استفاده می‌کند یا به این دلیل که منابعی را که آن‌ها تعریف می‌کنند تغییر می‌دهد
data	فهرست فایل‌های XML
assets	فهرست فایل‌های SCSS و JS

توجه

• ساختار فایل بالا تنها یک پیشنهاد است. می‌توانیم به تعداد مورد نیاز پوشه‌های دیگری به پروژه اضافه کنیم، مانند /controllers برای قرار دادن کنترل‌گرها یا /views/backend برای نماهای backend و غیره.

• برای ایجاد یک قالب وب‌سایت، تنها کافی است اپلیکیشن وب‌سایت را نصب کنید. اگر به اپلیکیشن‌های دیگری (وبلاگ‌ها، رویدادها، تجارت الکترونیک، ...) نیاز دارید، می‌توانید آن‌ها را نیز اضافه کنید.

• نسخهٔ Odoo و شمارهٔ major الزامی هستند. با این حال، شمارهٔ patch اختیاری است. اگر می‌خواهید نسخهٔ موردنیاز Odoo برای اجرای ماژول خود را مشخص کنید، باید از ساختار پنج‌آرگومانی استفاده کنید و از دو آرگومان اول برای نشان دادن نسخهٔ فعلی Odoo (* = 19.0) بهره ببرید.

مثال: 19.0.1.0.0 odoo_major.odoo_minor.module_major.module_minor.module_patch

هشدار

گنجاندن خودکار فایل با استفاده از نمادهای wildcard (ex.: /myfolder/*.scss) در پایگاه‌داده‌های Odoo SaaS کار نمی‌کند. در این صورت، هر فایل را به‌صورت دستی در manifest قرار دهید.

گزینه‌های پیش‌فرض

ابتدا تلاش کنید قالب خود را با استفاده از گزینه‌های پیش‌فرض Odoo بسازید. این کار دو مورد را تضمین می‌کند:

1. چیزی را که از پیش وجود دارد دوباره اختراع نکنید. برای مثال، چون Odoo گزینه‌ای برای افزودن کادر (border) به فوتر فراهم می‌کند، نباید خودتان آن را از نو کدنویسی کنید. در عوض، ابتدا گزینهٔ پیش‌فرض را فعال کنید و در صورت نیاز آن را گسترش دهید.

2. کاربر همچنان می‌تواند از تمام ویژگی‌های Odoo همراه با قالب شما استفاده کند. برای مثال، اگر کادر فوتر را از نو کدنویسی کنید، ممکن است گزینهٔ پیش‌فرض را خراب کنید یا آن را بی‌فایده سازید و تجربهٔ بدی برای کاربر فراهم آورید. همچنین، کدنویسی مجدد شما ممکن است به‌خوبی گزینهٔ پیش‌فرض کار نکند، چرا که سایر ویژگی‌های Odoo ممکن است به آن متکی باشند.

نکته

• از چهار فاصله (space) به ازای هر سطح تورفتگی استفاده کنید.

• از tab استفاده نکنید.

• هرگز space و tab را با هم مخلوط نکنید.

همچنین ببینید

راهنمای کدنویسی Odoo

متغیرهای Odoo

Odoo قوانین CSS بسیاری را اعلان می‌کند که اغلب آن‌ها با override کردن متغیرهای SCSS مرتبط، کاملاً قابل سفارشی‌سازی هستند. برای این کار، یک فایل primary_variables.scss ایجاد کنید و آن را به bundle با نام _assets_primary_variables اضافه کنید.

اعلان

/website_airproof/__manifest__.py

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

با خواندن کد منبع، متغیرهای مرتبط با گزینه‌ها به‌راحتی قابل تشخیص هستند.

<BuilderSelectItem
   id="'...'"
   title.translate="..."
   actionParam="[
      {
         action: 'websiteConfig',
         actionParam: {
             views: [...],
             vars: { 'header-template': 'sidebar' },
             checkVars: false,
         }
      }
   ]">
   <Img src="'/website_airproof/static/src/img/wbuilder/template-header-opt.svg'" class="'mw-100'" />
</BuilderSelectItem>

این متغیرها را می‌توان برای مثال از طریق نگاشت $o-website-value-palettes override کرد.

سراسری

اعلان

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

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

نکته

آن فایل باید تنها شامل تعریف‌ها و override‌های متغیرهای SCSS و mixin‌ها باشد.

همچنین ببینید

متغیرهای اصلی SCSS

فونت‌ها

می‌توانید هر فونتی را در وب‌سایت خود جاسازی کنید. ابزار ساخت وب‌سایت به‌طور خودکار آن‌ها را در انتخاب‌گر فونت در دسترس قرار می‌دهد.

اعلان

/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

/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/fonts.scss',
   ],
},

سپس، از قاعدهٔ @font-face استفاده کنید تا اجازه دهید فونت(های) سفارشی شما در وب‌سایت‌تان بارگذاری شوند.

/website_airproof/static/src/scss/fonts.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 استفاده کنید.

رنگ‌ها

ابزار ساخت وب‌سایت بر پالت‌هایی متشکل از پنج رنگ نام‌گذاری‌شده تکیه دارد. تعریف این رنگ‌ها در قالب شما، یکپارچگی آن را تضمین می‌کند.

رنگ	توضیحات
o-color-1	Primary
o-color-2	Secondary
o-color-3	اضافی (روشن)
o-color-4	سفیدمایل
o-color-5	سیاه‌مایل

اعلان

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

ترکیب‌های رنگ

بر اساس پنج پالت رنگ که پیش‌تر تعریف شده‌اند، ابزار ساخت وب‌سایت به‌طور خودکار پنج ترکیب رنگ تولید می‌کند که هر یک، رنگی را برای پس‌زمینه، متن، عناوین، لینک‌ها، دکمه‌های اصلی و دکمه‌های ثانویه تعریف می‌کند. این رنگ‌ها می‌توانند بعداً توسط کاربر سفارشی شوند.

رنگ‌های استفاده‌شده در یک ترکیب رنگ در دسترس هستند و می‌توانند از طریق $o-color-palettes با استفاده از یک پیشوند خاص (o-cc برای color combination) override شوند.

/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*، * را با رقم (۱ تا ۵) متناظر با ترکیب رنگ موردنظر جایگزین کنید.

رنگ پیش‌فرض متن o-color-5 است. اگر پس‌زمینه بیش از حد تیره باشد، به‌طور خودکار به رنگ o-color-4 تغییر می‌کند.

همچنین ببینید

ترکیب‌های رنگ SCSS

صفحهٔ دمو

ابزار ساخت وب‌سایت به‌طور خودکار صفحه‌ای برای مشاهدهٔ ترکیب‌های رنگ پالت رنگی قالب تولید می‌کند: http://localhost:8069/website/demo/color-combinations

گرادیان‌ها

همچنین می‌توانید gradient‌ها را برای منو، هدر، فوتر و نوار حق نشر مستقیماً در فایل 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 است. می‌توانید از همهٔ متغیرها و mixin‌های این فریم‌ورک استفاده کنید.

اگر Odoo متغیری را که به دنبال آن هستید فراهم نکرده باشد، احتمالاً متغیری در Bootstrap وجود دارد که این امکان را می‌دهد. در واقع همهٔ چیدمان‌های Odoo از ساختارهای Bootstrap پیروی می‌کنند و از کامپوننت‌های Bootstrap یا گسترش‌های آن‌ها استفاده می‌کنند. اگر یک متغیر Bootstrap را سفارشی کنید، یک استایل عمومی برای کل وب‌سایت کاربر اضافه می‌کنید.

از یک فایل اختصاصی اضافه‌شده به bundle _assets_frontend_helpers برای override کردن مقادیر 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;

نکته

آن فایل باید تنها شامل تعریف‌ها و override‌های متغیرهای SCSS و mixin‌ها باشد.

هشدار

متغیرهای Bootstrap که به متغیرهای Odoo وابسته‌اند را override نکنید. در غیر این صورت، ممکن است امکان سفارشی‌سازی آن‌ها توسط کاربر از طریق ابزار ساخت وب‌سایت را از بین ببرید.

وقتی یک گزینه هم با متغیری در primary_variables.scss و هم با یک متغیر Bootstrap تعریف می‌شود، باید همواره override را از طریق متغیرهای اصلی (primary variables) انجام دهید. تنها زمانی این کار را از طریق bootstrap_overridden.scss انجام دهید که چیزی در متغیرهای اصلی وجود نداشته باشد.

همچنین ببینید

SCSS تغییریافتهٔ Bootstrap

صفحهٔ دمو

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

اندازه‌های فونت

Odoo کلاس‌های CSS مربوط به اندازهٔ فونت دارد تا استایل (اندازه‌های فونت) و معنا (تگ و استایل‌ها به‌طور کلی) را از هم جدا کند. هر دو منطق می‌توانند برای انعطاف‌پذیری بیشتر با هم ترکیب شوند.

همچنین ببینید

مستندات Bootstrap دربارهٔ display headings

سبک متن

ابزار ساخت وب‌سایت Odoo اجازه می‌دهد سبکی را برای متن خود انتخاب کنید. برخی فقط مربوط به تگ هستند، مانند Header که هیچ کلاس CSS اضافه‌ای ندارد. برخی دیگر تگ و استایل را به‌طور مستقیم روی خودشان اعمال می‌کنند، مانند 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>

کلاس‌های Sizing

کلاس‌های sizing روی یک تگ span که به‌تازگی درون عنصر هدف ایجاد شده است افزوده می‌شوند (نمونه‌های زیر را ببینید).

Heading و متن body

با فرض اینکه این کلاس‌ها می‌توانند روی هر عنصر متنی اعمال شوند، 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>

Display headings

اگر به عنوان‌های بزرگ‌تر نیاز باشد، Odoo از کلاس‌های Display Headings در 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>

توجه

ابزار ساخت وب‌سایت تنها به کاربر اجازه می‌دهد اندازه‌ها از Display 1 تا Display 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="shop_gap">16px</field>
      <field name="shop_opt_products_design_classes">
            o_wsale_products_opt_layout_catalog
            o_wsale_products_opt_design_cards
            o_wsale_products_opt_name_color_regular
            o_wsale_products_opt_thumb_cover
            o_wsale_products_opt_img_hover_zoom_out_light
            o_wsale_products_opt_has_cta
            o_wsale_products_opt_actions_onhover
            o_wsale_products_opt_wishlist_fixed
            o_wsale_products_opt_cc
            o_wsale_products_opt_cc1
            o_wsale_products_opt_rounded_2
            o_wsale_products_opt_actions_promote
            o_wsale_products_opt_actions_subtle
            o_wsale_products_opt_name_weight_bold
      </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>

همچنین ببینید

مدل وب‌سایت از اپلیکیشن تجارت الکترونیک:

• فیلدهایی با پیشوند shop_ مربوط به پیکربندی صفحهٔ /shop هستند؛

• فیلدهایی با پیشوند product_page_ مربوط به پیکربندی صفحهٔ محصول هستند؛

• کلاس‌های "Cards Design" مشترک بین صفحهٔ /shop و snippet محصولات پویا.

فیلد	توضیحات
name	نام وب‌سایت (که در مرورگر نمایش داده می‌شود)
logo	مسیر لوگو (که پیش‌تر در یک رکورد ایجاد شده است)
favicon	مسیر favicon (که پیش‌تر در یک رکورد ایجاد شده است)
shop_ppg	تعداد محصولات نمایش‌داده‌شده در هر صفحه در تجارت الکترونیک
shop_ppr	تعداد محصولات نمایش‌داده‌شده در هر سطر (در یک صفحه) در تجارت الکترونیک
shop_gap	مقدار gutter که برای جداسازی آیتم‌های شبکهٔ محصول به‌کار می‌رود
shop_opt_products_design_classes	فهرست کلاس‌های CSS مرتبط با گزینه‌های Product Design.
cookies_bar	فعال/غیرفعال کردن نوار کوکی‌ها
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 هرگاه با تنها یک وب‌سایت کار می‌کنید، مرجع پیش‌فرض است. اگر در پایگاه‌دادهٔ شما چند وب‌سایت وجود داشته باشد، این رکورد به سایت پیش‌فرض (اولین مورد) ارجاع می‌دهد.

نماها

برای برخی گزینه‌ها، علاوه بر متغیر ابزار ساخت وب‌سایت، باید یک نمای خاص را نیز فعال کنید.

با خواندن کد منبع، قالب‌های مرتبط با گزینه‌ها به‌راحتی یافت می‌شوند.

<BuilderContext action="'websiteConfig'">
   <BuilderRow label.translate="...">
      <BuilderCheckbox actionParam="{views: ['website.show_website_info']}" />
   </BuilderRow>
</BuilderContext>

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

همچنین ببینید

در چنین مواردی، هنگام تعریف رکورد در XML باید نحو <template id="..."> بر نحو <record id="..." model="ir.ui.view"> ترجیح داده شود.

به template مراجعه کنید، به‌ویژه دربارهٔ مقدار active.

پیش‌تنظیم‌ها

برای فعال و غیرفعال کردن نماها به‌عنوان پیش‌تنظیم‌ها، باید آن‌ها را درون فایل 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>

Portal - غیرفعال کردن انتخاب‌گر زبان

/website_airproof/data/presets.xml

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

assetها

برای این بخش، به bundle با نام assets_frontend که در ماژول web قرار دارد ارجاع می‌دهیم. این bundle فهرست asset‌های بارگذاری‌شده در frontend وب‌سایت (صفحات عمومی) را مشخص می‌کند و هدف، افزودن فایل‌های SCSS و JS شما به این bundle است. ابزار ساخت وب‌سایت از bundle‌های خاص خود استفاده می‌کند (برای مثال: website.website_builder_assets و website.assets_wysiwyg).

این یک فهرست غیرکامل از 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	می‌توانید تمام فایل‌های سفارشی SCSS، JS یا QWeb JS خود را اضافه کنید
website.website_builder_assets	فایل‌های JS خود را که به رفتارهای گزینه‌های ابزار ساخت وب‌سایت مربوط هستند اضافه کنید (برای مثال، یک متد سفارشی برای building block سفارشی شما)
web._assets_bootstrap_frontend	برای مثال، اگر نیاز دارید Bootstrap را از طریق Bootstrap Utilities API گسترش دهید

سبک‌ها

ابزار ساخت وب‌سایت همراه با 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');
 }

تعامل‌پذیری

Odoo از سه نوع مختلف فایل JavaScript پشتیبانی می‌کند:

• فایل‌های JavaScript ساده (بدون سیستم ماژول)،

• ماژول native JavaScript، و

• ماژول‌های Odoo (با استفاده از یک سیستم ماژول سفارشی).

اکثر کدهای جدید JavaScript در Odoo باید از سیستم native JavaScript module استفاده کنند. این سیستم ساده‌تر است و مزیت تجربهٔ توسعه‌دهندهٔ بهتر همراه با یکپارچگی بهتر با IDE را به ارمغان می‌آورد.

اعلان

/website_airproof/__manifest__.py

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

توجه

اگر می‌خواهید فایل‌هایی از یک کتابخانهٔ خارجی را قرار دهید، می‌توانید آن‌ها را در پوشهٔ /lib ماژول خود اضافه کنید.

نکته

• از یک linter استفاده کنید (ESLint, ...).

• همواره کتابخانه‌های JavaScript به‌صورت minified اضافه کنید

• روی عناصری که با JavaScript هدف قرار می‌دهید، از کلاس‌های CSS با پیشوند js_ استفاده کنید.

• متغیرها و توابع باید camelCased (myVariable) باشند به‌جای snake_cased (my_variable).

• کلاس‌های JavaScript از PascalCase (MyClass) استفاده می‌کنند.

• نام متغیر را event نگذارید؛ به‌جای آن از ev استفاده کنید. این کار برای پرهیز از باگ‌ها در مرورگرهای غیر Chrome است، چرا که Chrome به‌طور خودکار یک متغیر سراسری event اختصاص می‌دهد (پس اگر متغیر event را بدون اعلان استفاده کنید، در Chrome به‌درستی کار خواهد کرد، اما در سایر مرورگرها از کار می‌افتد).

• از مقایسهٔ سخت‌گیرانه (strict) استفاده کنید (=== به‌جای ==).

• برای همهٔ رشته‌ها از دابل‌کوتیشن (double quotes) استفاده کنید (مانند "Hello", ".x_nav_item").

• اگر از توابع استاندارد native JS استفاده می‌کنید (start()، willStart()، cleanForSave()، و غیره)، مطمئن شوید پیاده‌سازی والد (parent) را فراخوانی می‌کنید (برای مثال، super.start(...arguments)؛ بررسی کنید که آیا این کار در کد استاندارد لازم است).

همچنین ببینید

• راهنمای کدنویسی JavaScript در Odoo

• مرور فریم‌ورک JavaScript در Odoo

• گفت‌وگوی Odoo Experience: بهترین شیوه‌ها برای استفاده از ابزار ساخت وب‌سایت همانند یک طراح حرفه‌ای