Trang

Trong chương này, bạn sẽ học cách khai báo các trang tĩnh.

Trang mặc định

Trong Odoo, các website đi kèm với một vài trang tĩnh mặc định (Trang chủ, Liên hệ, 404, ...). Chúng được xây dựng theo cách sau.

/website/data/website_data.xml

<template id="website.homepage" name="Home">
   <t t-call="website.layout">
      <t t-set="pageName" t-value="'homepage'"/>
      <div id="wrap" class="oe_structure oe_empty" />
   </t>
</template>

Mỗi trang mặc định là một template với nội dung riêng được lưu vào một record. Đây là lý do tại sao custom pages are created within a record.

<t -call='website.layout'> có một số biến có thể được thiết lập:

Xác định meta title.

<t t-set="additional_title">My Page Title</t>

Mẹo

t-set ở đây không truyền giá trị vào thuộc tính t-value hoặc t-valuef. Đây là vì mục đích dịch thuật. Nội dung của t-value hoặc t-valuef không được xuất ra rõ ràng để dịch. Bên cạnh đó, vì được viết bằng XML, một chuỗi nằm giữa thẻ mở và thẻ đóng được xem là có thể dịch được theo mặc định.

Example

Ví dụ đúng:

<t t-set="additional_title">My title</t>

Ví dụ sai:

<t t-set="additional_title" t-valuef="My title"/>

Xác định meta description.

<t t-set="meta_description">This is the description of the page that will appear on Search
Engines.</t>

Thêm một class CSS vào trang.

<t t-set="pageName" t-valuef="..."/>

Ẩn header.

<t t-set="no_header" t-value="true"/>

Ẩn footer.

<t t-set="no_footer" t-value="true"/>

Nếu cần, hãy vô hiệu hóa các trang mặc định.

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

Ngoài ra, bạn có thể thay thế nội dung mặc định của các trang này bằng cách sử dụng XPath.

/website_airproof/data/pages/404.xml

<template id="404" inherit_id="http_routing.404">
    <xpath expr="//*[@id='wrap']" position="replace">
        <t t-set="additional_title">404 - Not found</t>

        <div id="wrap" class="oe_structure">
            <!-- Content -->
        </div>
    </xpath>
</template>

Xem thêm

• Tài liệu Odoo về SEO

Trang theme

Bạn có thể thêm bao nhiêu trang tùy thích vào website của mình. Thay vì xác định một <template>, hãy tạo một đối tượng trang.

Khai báo

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

Multiwebsite và website_id

Trong ngữ cảnh module, record được tạo ở trên sẽ khả dụng, theo mặc định, trên mọi website có trong database. Nên chỉ định website_id của website nơi trang sẽ có thể tìm thấy.

Field	Mô tả
name	Tên trang (dễ đọc đối với con người).
is_published	Xác định trang có được xuất bản hay không (hiển thị cho khách truy cập).
key	Key của view (phải là duy nhất)
url	Đường dẫn tương đối để có thể truy cập trang.
type	Loại view
arch	Kiến trúc của view (markup của trang bạn)

Với <t t-call="website.layout">, bạn sử dụng layout trang mặc định của Odoo cùng với code của bạn.

Thuộc tính noupdate

Thuộc tính này ngăn việc ghi đè dữ liệu. Nó có thể được thêm vào thẻ data bao quanh một số record cần bảo vệ, hoặc vào thẻ odoo`tag để bảo vệ tất cả các record được khai báo trong file.

Bảo vệ tất cả các record trong file:

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

Bảo vệ các record cụ thể trong file:

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

Trường hợp sử dụng

Có một số trang tĩnh được tạo trong module. Module này đã được cài đặt trên database và người dùng cuối đã cập nhật một số trang trong đó. Một số bản sửa lỗi cần được áp dụng cho các trang tĩnh trong khi tránh mất bất kỳ thay đổi nào do người dùng cuối thực hiện.

Vấn đề

Trong trường hợp cập nhật module trên database, mọi record được khai báo trong module sẽ ghi đè lên các record đã tồn tại trong database, ngay cả khi người dùng cuối đã thay đổi một số record này.

Giải pháp

Bằng cách bao bọc record (hoặc tất cả các record được khai báo trong file) trong thẻ <data noupdate="1"></data>, record được khai báo sẽ được tạo ra ở lần cài đặt module đầu tiên nhưng không được cập nhật sau khi cập nhật module.

What happens if the record has been manually deleted (e.g.: a menu item) ?

Hệ thống phát hiện rằng record này không tồn tại và sẽ tạo lại nó.

Is this method only valid on static page records?

Tất nhiên là không. Về mặt kỹ thuật, nó có thể sử dụng cho mọi loại record.

Header overlay

Làm cho nền của header trong suốt và nằm đè lên trên nội dung của trang.

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

Ghi chú

Để tạo nội dung cho một trang tĩnh, hãy sử dụng cách làm của Odoo để nội dung vẫn có thể chỉnh sửa được bằng Website Builder. Xin lưu ý rằng Odoo tận dụng framework Bootstrap (5.1.3).

Tìm các class và thành phần khả dụng:

• Bootstrap cheat sheet

• Bootstrap documentation

Template trang

Tạo các template trang tĩnh dựng sẵn khả dụng từ cửa sổ hộp thoại Trang mới.

Khai báo

Các template trang phải được xác định trong __manifest__.py của module thông qua new_page_templates và new_page_template_templates.xml:

/website_airproof/__manifest__.py

{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '17.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']
   }
}

Template

Sau đó bạn phải tạo template bằng cách sử dụng một quy ước đặt tên cụ thể dựa trên hệ thống phân cấp trong __manifest__.py. Trong trường hợp này, tên là new_page_template_sections_airproof_faq. Các khối xây dựng được gọi trong template này hoàn toàn giống với các khối tiêu chuẩn, ngoại trừ khối đầu tiên đã được điều chỉnh "ngay tại chỗ".

Tạo một instance mới của s_text_block tiêu chuẩn (thuộc tính primary rất quan trọng) và áp dụng một số điều chỉnh:

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

Khởi tạo mỗi khối xây dựng (đã được sửa đổi hay chưa) cho template trang:

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

Sau đó, hãy tạo template trang của bạn với một số t-snippet-call bên trong #wrap như đã giải thích ở trên:

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

Sau khi template trang được tạo, hãy tạo một nhóm tùy chỉnh và thêm nó vào các nhóm hiện có. Bạn có thể tìm bên dưới danh sách các nhóm hiện có:

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

Đừng ngần ngại thêm các nhóm tùy chỉnh vào danh sách:

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

Xem thêm

Go further by altering the building blocks of a custom template