ページ

この章では、静的ページを宣言する方法を学びます。

デフォルトのページ

Odooでは、ウェブサイトにはいくつかのデフォルトの固定ページがあります (Home, Contact us, 404, ...)。

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

各デフォルトページは、独自のコンテンツがレコードに保存されたテンプレートです。 これが、 :ref:`カスタム ページがレコード <website_themes/pages/theme_pages> ` 内に作成される理由です。

`<t-call='website.layout'>`にはいくつかの変数があります。

メタタイトルを定義します。

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

ちなみに

ここでは t-set は値を t-value または t-valuef 属性に渡しません。これは翻訳目的のためです。 `t-value`または`t-value`の内容は、明示的に翻訳のためにエクスポートされません。 また、XML で記述されているため、開始タグと終了タグの間にある文字列はデフォルトで翻訳可能であると見なされます。

Example

良い例:

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

不正な例:

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

メタの説明を定義します。

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

ページに CSS クラスを追加します。

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

ヘッダを隠す。

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

フッターを非表示にする

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

必要に応じて、既定のページを無効にします。

/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">
    <xpath expr="//*[@id='wrap']" position="replace">
        <t t-set="additional_title" t-value="'404 - Not found'"/>

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

関連項目

• Odoo SEO

テーマページ

ウェブサイトにページを追加することができます。`<template>`を定義する代わりに、ページオブジェクトを作成します。

宣言

/website_airproof/data/pages/about_us.xml

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

マルチウェブサイトと website_id

モジュールコンテキストでは、上記で作成されたレコードは、デフォルトで、データベースで利用可能なすべてのウェブサイトで使用できます。 ページを見つけられるウェブサイトの website_id を指定することをお勧めします。

フィールド	説明
名前（name）	ページ名 (human-readable)
is_published	ページが公開されるかどうかを定義します (訪問者に表示されます)。
キー	View key (must be unique)
URL	ページに到達可能な相対パスです。
タイプ	表示タイプ
アーチ	アーキテクチャの表示 (ページのマークアップ)

`<t t-call="website.layout">`では、Odooデフォルトのページレイアウトをコードで使用します。

noupdate 属性

この属性はデータの上書きを防ぎます。 保護するために、またはファイルに宣言されたすべてのレコードを保護するために、 data タグに追加することができます。

ファイルのすべての記録を保護:

<?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>`タグに折り返すことで、 宣言されたレコードは最初のモジュールインストール時に作成されますが、モジュールの更新後には更新されません。

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

システムは、このレコードが存在しないことを検出し、それを再作成します。

Is this method only valid on static page records?

もちろんそうではありません技術的にあらゆる種類のレコードに使えます

Header overlay

ヘッダーの背景を透明にし、ページコンテンツの上に立たせます。

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

注釈

静的ページのコンテンツを作成するには、Website Builder によって編集可能な状態を維持するために、Odoo の方法を使用します。 OdooはBootstrapフレームワーク(5.1.3)を利用していますのでご注意ください。

利用可能なクラスとコンポーネントを見つけます。

• Bootstrapチートシート

• Bootstrap documentation

ページテンプレート

「新規ページ」ダイアログ・ウィンドウから使用できるプリセットの静的ページ・テンプレートを作成します。

宣言

ページテンプレートは new_page_templates を介してモジュールの __manifest__.py に定義する必要があります。

/website_airproof/__manifest__.py

{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '18.0.0.0',
   'author': '...',
   'license': '...',
   'depends': ['website'],
   'data': [
      # ...
   ],
   'assets': {
      # ...
   },
   'new_page_templates': {
      'airproof': {
         'faq': ['s_airproof_text_block_h1', 's_title', 's_faq_collapse', 's_call_to_action']
   }
}

テンプレート

次に、 __manifest__に階層に基づいて特定の命名規則を使用してテンプレートを作成する必要があります。 y この場合、名前は new_page_template_sections_airproof_faq です。 このテンプレートで呼び出される構成要素は、"飛行中"に適応された最初のものを除いて、標準のものとまったく同じです。

標準の s_text_block (primary 属性は重要です) の新しいインスタンスを作成し、いくつかのアダプテーションを適用します。

/website_airproof/views/new_page_template_template.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>

ページテンプレートのそれぞれのBuilding Blockをインスタンス化します(変更されたかどうか)

/website_airproof/views/new_page_template_template.xml

<template id="new_page_template_s_airproof_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"/>

上記のように、'#wrap' 内にいくつかの t-snippet-call を使ってページテンプレートを作成します。

/website_airproof/views/new_page_template_template.xml

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

ページテンプレートが作成されると、既存のグループに追加できます。既存のグループのリストの下にあります:

/website/views/new_page_template_template.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_template.xml

<template id="new_pages_template_groups" inherit_id="website.new_pages_template_groups" name="Airproof - New Page Template Groups">
   <xpath expr="//div[@id='custom']" position="after">
      <div id="airproof">Airproof</div>
   </xpath>
</template>

関連項目

Go further by altering the building blocks of a custom template