Розділ 2 – Створіть свій вебсайт

Створити сторінку

Тепер, коли тему налаштовано, перейдемо до створення контенту.

Перш за все, почніть зі створення вашої першої сторінки теми: головної сторінки. Поки що вкажіть на сторінці лише “Привіт”.

Порада

Вам потрібно буде деактивувати домашню сторінку за замовчуванням.

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

Див. довідкову документацію щодо того, як деактивувати сторінку за замовчуванням та як створити нову сторінку.

/website_airproof/__manifest__.py
'data': [
   # Pages
   'data/pages/home.xml',
]
/website_airproof/data/pages/home.xml
<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <!-- Deactivate default homepage -->
   <record id="website.homepage" model="ir.ui.view">
      <field name="active" eval="False"/>
   </record>
   <!-- Home -->
   <record id="page_home" model="website.page">
      <field name="name">Home</field>
      <field name="is_published" eval="True"/>
      <field name="key">website_airproof.page_home</field>
      <field name="url">/</field>
      <field name="type">qweb</field>
      <field name="arch" type="xml">
         <t t-name="website_airproof.page_home">
            <t t-call="website.layout">
               <!-- Title -->
               <t t-set="additional_title">One step beyond the horizon | Airproof</t>
               <!-- Content -->
               <div id="wrap" class="oe_structure">
                  <p>Hello</p>
               </div>
            </t>
         </t>
      </field>
   </record>
</odoo>

Додати медіафайл

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

Щоб виконати тест, оголосіть зображення дрона, щоб додати його до бібліотеки. Ви знайдете зображення дрона тут.

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

Див. довідкову документацію щодо того, як додати медіафайл.

Перейдіть до Конструктор веб-сайтів, двічі клацніть на logo, і ви побачите зображення дрона в бібліотеці.

Щоб виконати цю вправу, вам потрібно:

  1. Помістіть ваш PNG-файл у відповідну папку зображень.

  2. Створіть файл images.xml. Ви можете знайти всю необхідну інформацію у файлі images.xml з нашого прикладу модуля.

  3. Оголосіть свій файл у __manifest__.py.

Додати будівельні блоки

А тепер перейдемо до справжньої роботи. Почнемо додавати контент на сторінки.

На вебсайті Odoo ми створюємо вміст сторінки за допомогою будівельних блоків. Їх можна порівняти з фрагментами, які користувач може редагувати в Конструкторі вебсайтів. Стандартним основним контейнером для будь-якого фрагмента є section.

Виходячи з дизайну Airproof, додайте такі елементи на головну сторінку:

  • Створіть розділ із 3 блоків, використовуючи будівельний блок Великі блоки.

    • Ви ж не хочете, щоб майбутній користувач міг редагувати цей розділ через Конструктор веб-сайтів.

    • Накладіть фільтр непрозорості на фонове зображення 3 коробок.

  • Створіть ще один розділ, що містить заголовок та значки.

Ви можете використовувати ці зображення та іконки.

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

Див. довідкову документацію щодо того, як створити стандартні фрагменти.

Airproof будівельні блоки.

Порада

Щоб визначити код, необхідний для створення ваших будівельних блоків:

  • Створіть тестову сторінку за допомогою конструктора веб-сайтів.
    Перетягніть потрібний вам будівельний блок і застосуйте правильний дизайн.
    Використайте код, згенерований за допомогою Editor HTML/SCSS у меню.

  • Ви також можете знайти оригінальний код будівельних блоків в Odoo: odoo/addons/website/views/snippets/**.xml.

Знайдіть рішення в нашому прикладі Airproof на home.xml.