صفحات

در این فصل خواهید آموخت چگونه صفحات ایستا را اعلان کنید.

صفحات پیش‌فرض

در Odoo، وب‌سایت‌ها همراه با چند صفحهٔ ایستای پیش‌فرض (Home، Contact us، 404 و ...) می‌آیند. آن‌ها به این روش ساخته شده‌اند.

/website/data/website_data.xml
<template id="website.homepage" name="Home">
   <t t-call="website.layout"
      pageName.f="homepage">
      <div id="wrap" class="oe_structure oe_empty" />
   </t>
</template>

هر صفحهٔ پیش‌فرض یک قالب با محتوای خود است که در یک رکورد ذخیره شده. به همین دلیل، صفحات سفارشی در یک رکورد ایجاد می‌شوند.

<t-call='website.layout'> چند متغیر دارد که می‌توانند تنظیم شوند:

meta title را تعریف کنید.

<t t-call="website.layout"
   additional_title.translate="My Page Title">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

نکته

از آنجا که t-call پارامترها را می‌پذیرد، این‌ها را می‌توان به‌عنوان متغیر، رشته (*.f) یا رشتهٔ قابل ترجمه (*.translate) منتقل کرد.

meta description را تعریف کنید.

<t t-call="website.layout"
   meta_description.translate="This is the description of the page that will appear on Search
   Engines.">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

یک کلاس CSS را به صفحه اضافه کنید.

<t t-call="website.layout"
   pageName.f="homepage">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

در صورت نیاز، صفحات پیش‌فرض را غیرفعال کنید.

/website_airproof/data/pages/home.xml
<record id="website.homepage" model="ir.ui.view">
    <field name="active" eval="False" />
</record>
/website_airproof/data/pages/contactus.xml
<record id="website.contactus" model="ir.ui.view">
    <field name="active" eval="False" />
</record>

به‌صورت جایگزین، محتوای پیش‌فرض این صفحات را با استفاده از XPath جایگزین کنید.

/website_airproof/data/pages/404.xml
<template id="404" inherit_id="http_routing.404">
   <!-- Change the meta title parameter through the t-call -->
   <xpath position="attributes" expr="//t[@t-call='web.frontend_layout">
      <attribute name="additional_title.translate">404 - Not found</attribute>
   </xpath>
   <!-- Replace the default content -->
   <xpath expr="//*[@id='wrap']" position="replace">
      <div id="wrap" class="oe_structure">
         <!-- Content -->
      </div>
   </xpath>
</template>

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

صفحات قالب

می‌توانید به اندازهٔ دلخواه صفحه به وب‌سایت خود اضافه کنید. به‌جای تعریف یک <template>، یک رکورد page ایجاد کنید.

اعلان

/website_airproof/data/pages/about_us.xml
<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <record id="page_about_us" model="website.page">
      <field name="name">About us</field>
      <field name="is_published" eval="True" />
      <field name="key">website_airproof.page_about_us</field>
      <field name="url">/about-us</field>
      <field name="website_id" eval="1" />
      <field name="type">qweb</field>
      <field name="arch" type="xml">
         <t t-name="website_airproof.page_about_us">
            <t t-call="website.layout">
               <div id="wrap" class="oe_structure">
                  <!-- Content -->
               </div>
            </t>
         </t>
      </field>
   </record>
</odoo>

نکته

برای تنظیم صفحه به‌عنوان صفحهٔ اصلی، فیلد زیر را تنظیم کنید:

<field name="is_homepage" eval="True" />

نکته

Header و footer به‌صورت پیش‌فرض قابل مشاهده هستند اما می‌توانند در صفحات خاص با تنظیم فیلدهای header_visible و/یا footer_visible روی false پنهان شوند. به این روش آن‌ها به‌صورت بصری پنهان هستند اما هنوز در DOM وجود دارند. هر دو می‌توانند دوباره از طریق ابزار ساخت وب‌سایت مانند هر عنصر پنهان زیر یک Visibility Condition نمایش داده شوند.

<field name="header_visible" eval="False" />
<field name="footer_visible" eval="False" />

Header می‌تواند در همهٔ صفحات با فعال کردن این نما پنهان شود (همچنین نگاه کنید: Presets):

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

Multiwebsite و website_id

در یک context ماژول، رکورد ایجاد شده در بالا به‌صورت پیش‌فرض روی هر وب‌سایت موجود در پایگاه‌داده در دسترس است. ترجیح داده می‌شود website_id وب‌سایتی که صفحه در آن قابل دسترسی است را مشخص کنید.

فیلد

توضیحات

name

نام صفحه (خوانا برای انسان).

is_published

تعریف می‌کند که آیا صفحه منتشر شده (برای بازدیدکنندگان قابل مشاهده) است.

key

کلید نما (باید یکتا باشد)

url

مسیر نسبی که صفحه در آن قابل دسترسی است.

type

نوع نما

arch

معماری نما (markup صفحهٔ شما)

با <t t-call="website.layout"> از چیدمان پیش‌فرض صفحهٔ Odoo با کد خود استفاده می‌کنید.

ویژگی noupdate

این ویژگی از بازنویسی داده‌ها جلوگیری می‌کند. می‌توان آن را روی یک تگ data که برخی رکوردها را برای محافظت در بر می‌گیرد یا روی تگ odoo برای محافظت از همهٔ رکوردهای اعلان‌شده در فایل اضافه کرد.

محافظت از همهٔ رکوردهای فایل:

<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <record id="menu_company" model="website.menu">
      <!-- Fields -->
   </record>
   <record id="menu_faq" model="website.menu">
      <!-- Fields -->
   </record>
</odoo>

محافظت از رکوردهای خاص در فایل:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <record id="menu_company" model="website.menu">
      <!-- Fields -->
   </record>

   <data noupdate="1">
      <record id="menu_faq" model="website.menu">
         <!-- Fields -->
      </record>
      <record id="menu_legal" model="website.menu">
         <!-- Fields -->
      </record>
   </data>
</odoo>

کاربرد

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

مشکل

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

راه‌حل

با قرار دادن رکورد (یا همهٔ رکوردهای اعلان‌شده در فایل) داخل یک تگ <data noupdate="1"></data>، رکورد اعلان‌شده در اولین نصب ماژول ایجاد می‌شود اما پس از به‌روزرسانی ماژول به‌روزرسانی نمی‌شود.

سیستم تشخیص می‌دهد که این رکورد وجود ندارد و آن را دوباره ایجاد خواهد کرد.

البته نه. از نظر فنی برای هر نوع رکورد قابل استفاده است.

Header overlay

پس‌زمینهٔ header را شفاف کنید و آن را بالای محتوای صفحه قرار دهید.

<field name="header_overlay" eval="True"/>
Header overlay

توجه

برای ایجاد محتوای یک صفحهٔ ایستا، از روش Odoo برای انجام کارها استفاده کنید تا قابل ویرایش توسط ابزار ساخت وب‌سایت باقی بماند. لطفاً توجه داشته باشید که Odoo از فریم‌ورک Bootstrap (5.3) بهره می‌برد.

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

قالب‌های صفحه

قالب‌های صفحهٔ ایستای preset را در دسترس از پنجرهٔ dialog New Page ایجاد کنید.

اعلان

قالب‌های صفحه باید در __manifest__.py ماژول از طریق new_page_templates و new_page_template_templates.xml تعریف شوند:

/website_airproof/__manifest__.py
{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '19.0.0.0',
   'author': '...',
   'license': '...',
   'depends': ['website'],
   'data': [
      # ...
      'views/new_page_template_templates.xml'
   ],
   'assets': {
      # ...
   },
   'new_page_templates': {
      'airproof': {
         'faq': ['s_airproof_text_block_h1', 's_title', 's_faq_collapse', 's_call_to_action']
   }
}

قالب‌ها

سپس باید قالب را با استفاده از یک قاعدهٔ نام‌گذاری خاص بر اساس سلسله‌مراتب در __manifest__.py ایجاد کنید. در این مورد، نام new_page_template_sections_airproof_faq است. بلوک‌های سازندهٔ فراخوانی‌شده در این قالب دقیقاً مانند بلوک‌های استاندارد هستند به‌جز اولی که «بلادرنگ» تطبیق داده شده است.

یک نمونهٔ جدید از s_text_block استاندارد ایجاد کنید (ویژگی primary مهم است) و برخی تطبیقات را اعمال کنید:

/website_airproof/views/new_page_template_templates.xml
<template id="s_airproof_text_block_h1" inherit_id="website.s_text_block" primary="True">
   <xpath expr="//div[hasclass('container')]|//div[hasclass('o_container_small')]" position="replace">
      <div class="container s_allow_columns">
            <h1 class="display-1">FAQ - Help</h1>
      </div>
   </xpath>
</template>

هر بلوک سازنده (تغییریافته یا نه) را برای قالب صفحه نمونه‌سازی کنید:

/website_airproof/views/new_page_template_templates.xml
<template id="new_page_template_airproof_faq_s_text_block_h1" inherit_id="website_airproof.s_airproof_text_block_h1" primary="True" />
<template id="new_page_template_airproof_faq_s_title" inherit_id="website.s_title" primary="True" />
<template id="new_page_template_airproof_faq_s_faq_collapse" inherit_id="website.s_faq_collapse" primary="True" />
<template id="new_page_template_airproof_faq_s_call_to_action" inherit_id="website.s_call_to_action" primary="True" />

سپس، قالب صفحهٔ خود را با برخی t-snippet-call داخل یک #wrap همان‌طور که در بالا توضیح داده شد، ایجاد کنید:

/website_airproof/views/new_page_template_templates.xml
<template id="new_page_template_sections_airproof_faq" name="Airproof - New Page Template FAQ">
   <div id="wrap">
      <t t-snippet-call="website_airproof.new_page_template_airproof_faq_s_text_block_h1" />
      <t t-snippet-call="website_airproof.new_page_template_airproof_faq_s_title" />
      <t t-snippet-call="website_airproof.new_page_template_airproof_faq_s_faq_collapse" />
      <t t-snippet-call="website_airproof.new_page_template_airproof_faq_s_call_to_action" />
   </div>
</template>

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

/website/views/new_page_template_templates.xml
<template id="new_page_template_groups">
   <div id="basic">Basic</div>
   <div id="about">About</div>
   <div id="landing">Landing Pages</div>
   <div id="gallery">Gallery</div>
   <div id="services">Services</div>
   <div id="pricing">Pricing Plans</div>
   <div id="team">Team</div>
</template>

در صورت تمایل گروه‌های سفارشی را به فهرست اضافه کنید:

/website_airproof/views/new_page_template_templates.xml
<template id="new_page_template_groups" inherit_id="website.new_page_template_groups" name="Airproof - New Page Template Groups">
   <xpath expr="//div[@id='custom']" position="after">
      <div id="airproof">Airproof</div>
   </xpath>
</template>
فهرست قالب‌های صفحه ایستای موجود