形状¶

あなたのウェブサイトに個性を加えたいと思えば形は便利である。

この章では、標準およびカスタムの背景と画像の形状を追加する方法を学びます。

背景の形状¶

背景の形状は、異なるセクションに装飾的な背景として追加できるSVGファイルです。それぞれの形状にはカスタマイズ可能な色があり、そのうちのいくつかはアニメーション化されています。

警告

Odoo のデフォルトの図形は、Odoo デフォルトのカラーパレットマップを参照として使用します。これにより、色は変更されるたびに自動的に新しいパレットに適応されます。

default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}

標準¶

デフォルトの背景図形の大規模な選択が可能です。

使用

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
     </div>
</section>

data-oe-shape-data は SVG ファイルの場所、繰り返しやフリップオプションなどの形状に関する情報を含む JSON オブジェクトです。

例えば、X軸やY軸を使えば、**図形を水平方向または垂直方向に反転**できます。

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06','flip':[x,y]}">
    <div class="o_we_shape o_we_flip_x o_we_flip_y o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

色のマッピング¶

また、現在のマップで色を切り替えるか、最初のマップを変更せずに別のマップを作成することによって、シェイプのデフォルトの色マッピングを変更することもできます。

色のマッピングを切り替える¶

まず、次のような形を使用できます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
            <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z"/>
        </svg>
        <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
            <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z"/>
        </svg>
    </defs>
    <svg>
        <use xlink:href="#zigs06_top"/>
        <use xlink:href="#zigs06_bottom"/>
    </svg>
</svg>

ここでは、Odooのデフォルトカラーパレットの5色と4色に対応する`#383E45`と`#FFFFFF`を使用します。

このシェイプは SCSI で次のように宣言されています:

/website_airproof/static/src/scss/primary_variables.scss¶

'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),

黒っぽい色は上部(c5)で、下部とその中間では、形は単純に透明です。

`key: value`カップルで`colors`マップを書き換えます。

カラーパレットの参照とカスタムカラー

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))

あるいは参照してください

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: 1));

c4 (white) は c3 (white) に、c5 (black) は c1 (white) に置き換えられます。

結果

追加の色マッピングを追加¶

追加のカラーマッピングを追加することで、オリジナルを維持しながら、シェイプのテンプレートにカラーバリアントを追加することができます。

/website_airproof/static/src/scss/boostrap_overridden.scss¶

$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Zigs/06', 'second', (4: 3, 5: 1));

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06 o_second_extra_shape_mapping"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

カスタム¶

場合によっては、1つまたは複数のカスタムシェイプを作成する必要があります。

まず、図形のためにSVGファイルを作成する必要があります。

/website_airproof/static/shapes/hexagons/01.svg¶

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="86" height="100">
    <polygon points="0 25, 43 0, 86 25, 86 75, 43 100, 0 75" style="fill: #3AADAA;"/>
</svg>

Make sure to use colors from the default Odoo palette for your shape (as explained above).

default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}

添付ファイル¶

シェイプファイルを宣言します。

/website_airproof/data/shapes.xml¶

<record id="shape_hexagon_01" model="ir.attachment">
    <field name="name">01.svg</field>
    <field name="datas" type="base64" file="website_airproof/static/shapes/hexagons/01.svg"/>
    <field name="url">/web_editor/shape/illustration/hexagons/01.svg</field>
    <field name="public" eval="True"/>
</record>

フィールド	説明
名前（name）	図形の名前
datas	形状へのパス
URL	Webエディタであなたの形状の場所を指定します。ファイルは自動的にWebサイトビルダーによって`/web_editor/shape/イラストレーション`に複製されます。
パブリック	シェイプを後で編集できるようにします。

SCSS¶

図形のスタイルを定義します。

/website_airproof/static/src/scss/primary_variables.scss¶

$o-bg-shapes: map-merge($o-bg-shapes,
    (
        'illustration': map-merge(
            map-get($o-bg-shapes, 'illustration') or (),
            (
                'hexagons/01': ('position': center center, 'size': auto 100%, 'colors': (1), 'repeat-x': true, 'repeat-y': true),
            ),
        ),
    )
);

キー	説明
ファイルの場所	`hexagons/01`は、`shapes`フォルダ内のファイルの場所に対応します。
位置	図形の位置を指定します。
サイズ	図形のサイズを指定します。
色	持たせたい色 c* を指定します(SVGで指定した色を上書きします)。
リピート-x	シェイプが水平方向に繰り返されるかどうかを定義します。このキーはオプションで、`true` に設定する場合にのみ定義する必要があります。
繰り返し y	シェイプが垂直方向に繰り返されるかどうかを定義します。このキーはオプションで、`true` に設定する場合にのみ定義する必要があります。

オプションを追加¶

最後に、ウェブサイトビルダーで利用可能な図形の一覧に図形を追加します。

/website_airproof/views/snippets/options.xml¶

<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Airproof - Shapes">
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/header[hasclass('o_pager_nav')]//*[hasclass('o_pager_nav_btn')][last()]" position="after">
      <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="x_wd_scroll_bgshapes_aiproof">
         <span class="w-100">Airproof</span>
      </button>
   </xpath>
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/div[hasclass('o_pager_container')]" position="inside">
      <div class="x_scroll_bgshapes_klingspor">
         <we-title>Airproof</we-title>
         <we-select-page string="Airproof">
            <we-button data-shape="illustration/airproof/01" data-select-label="Airproof 01"/>
         </we-select-page>
      </div>
   </xpath>
</template>

あなたのページにそれを使用¶

XML ページでは、図形を他のページと同じように使用することができます。

<section class="..." data-oe-shape-data="{'shape': 'illustration/airproof/01', 'colors': 'c4': '#8595A2', 'c5': 'rgba(0, 255, 0)'}">
    <div class="o_we_shape o_illustration_airproof_01"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

data-oe-shape-data 属性 を使用して色を再定義することもできますが、これはオプションです。