チャプター2 - ウェブサイトを構築

ページを作成

テーマが設定されましたので、コンテンツの作成に進みましょう。

まず、最初のテーマページであるホームページから始めましょう。今のところ、ページ内のコンテンツとして「こんにちは」と表示するだけです。

ちなみに

デフォルトのホームページを無効にする必要があります。

関連項目

deactivate a default page と :ref:`start a new page <website_themes/pages/theme_pages> ` の方法についてのリファレンスドキュメントを参照してください。

Solutions

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

メディアを追加

ウェブサイトに追加する特定の画像をクライアントが再利用できるようにしたい場合 画像ライブラリに追加する必要があります

テストを行うには、ドローンの画像をライブラリに追加するように宣言します。ドローンの画像は にあります。

関連項目

See reference documentation on how to add a media.

Website Builder に移動し、 logo をダブルクリックすると、ドローン画像がライブラリ内に表示されます。

Solutions

この課題を完了するには、次のようにする必要があります:

1. PNGを正しい画像フォルダに入れてください。

2. images.xml ファイルを作成します。サンプルモジュールの images.xml ファイルから必要な情報をすべて見つけることができます。

3. :file:`__manifest__.py`でファイルを宣言します。

Building Blocksを追加

さあ、実際の作業に入りましょう。ページにコンテンツを追加し始めましょう。

Odoo のウェブサイトでは、Building Blocks を使ってページのコンテンツを作成します。 Website Builder でユーザが編集可能なスニペットと比較できます。スニペットの標準的なメインコンテナは section です。

防護設計に基づいて、ホームページに以下の要素を追加してください。

• Big boxes を使って、3つのボックスを作ってください。

  • このセクションでは、将来のユーザーが Website Builder で編集できないようにします。

  • 3つのボックスの背景画像に不透明度フィルタを付けます。

• タイトルとアイコンを含む別のセクションを作成します。

image と icons を使用できます。

関連項目

See reference documentation on how to write standard snippets.

ちなみに

ビルディングブロックを作成するために必要なコードを決定するには:

• ウェブサイトビルダーを介してテストページを作成します。

  興味のあるBuilding Blockをドラッグ&ドロップして、適切なデザインを適用します。

  メニューの Editor HTML/SCSS で生成されたコードを使用します。

• 元のBuilding Blockコードは、Odoo : odoo/addons/website/views/snippets/**.xml にもあります。

Solutions

home.xml の解決策を見つけます。

ナビゲーション

今のところ、クライアントはデフォルトのヘッダーで問題ありませんが、いくつかのナビゲーション調整を要求しています。

クライアントは以下の変更を要求しています:

• ホームページとショップへのリンクを削除します。

• 将来の「私たちについて」ページへのリンクを追加します。

• デフォルトのブログアイテムをドロップダウンに置き換えて、異なるブログを表示します：「最新ニュース」と「チュートリアル」。

• 異なる製品を表示するためにメガメニュー「防水ドローン」を追加します。

関連項目

• 元のメガメニューテンプレートコードは Odoo にあります: odoo/addons/website/views/snippets/s_mega_menu_**.xml

• ナビゲーション を変更する方法についてのリファレンスドキュメントを参照してください。

ちなみに

• ブログアプリがインストールされていることを確認し、バックエンドに2つの異なるブログを作成します。

• バックエンドから異なる製品を作成します。これらの product pictures を使用できます。

Solutions

menu.xml の解決策を見つけます。