布局

在本章中，您将学习如何：

• 创建自定义标题。

• 创建自定义页脚。

• 修改标准模板。

• 添加版权部分。

• 提升您的网站的响应能力。

默认

Odoo页面结合了跨页面和独特元素。跨页面元素在每个页面上都是相同的，而独特元素只与特定页面相关。默认情况下，页面有两个跨页面元素，即页眉和页脚，以及一个包含该页面特定内容的独特主要元素。

<div id="wrapwrap">
   <header/>
      <main>
         <div id="wrap" class="oe_structure">
            <!-- Page Content -->
         </div>
      </main>
   <footer/>
</div>

任何Odoo XML文件都以编码规范开始。之后，您必须在 <odoo> 标签内编写您的代码。

<?xml version="1.0" encoding="utf-8" ?>
<odoo>
   ...
</odoo>

注解

使用准确的文件名对于快速通过所有模块查找信息非常重要。文件名应只包含小写字母数字和下划线。

始终在文件末尾添加一个空行。这可以通过配置您的IDE来自动完成。

XPath

XPath（XML路径语言）是一种表达式语言，可以轻松地在XML文档中导航元素和属性。XPath用于扩展标准的Odoo模板。

视图的编码方式如下。

<template id="..." inherit_id="..." name="...">
   <!-- Content -->
</template>

属性	描述
编号	修改视图的ID
继承的ID	标准视图的ID
名称	修改视图的可读名称

对于每个XPath，您需要修改两个属性： expression 和 position 。

Example

/website_airproof/views/website_templates.xml

<template id="layout" inherit_id="website.layout" name="Welcome Message">
   <xpath expr="//header" position="before">
      <!-- Content -->
   </xpath>
</template>

这个XPath在页面内容之前添加了一个欢迎消息。

警告

替换默认元素属性时要小心。由于您的主题扩展了默认主题，您的更改将优先于任何未来的Odoo更新。

注解

• 每次创建新的模板或记录时，您都应该更新您的模块。

• 继承视图的*XML ID*应该使用与原始记录相同的*ID*。这有助于一目了然地找到所有的继承。由于最终的*XML ID*是由创建它们的模块前缀的，所以不会有重叠。

表达式

XPath使用路径表达式来选择XML文档中的节点。选择器用于在表达式中定位正确的元素。下面列出了最常用的选择器。

后代选择器	描述
/	从根节点选择。
//	选择与选择匹配的当前节点在文档中的位置无关的节点。

属性选择器	描述
*	选择任何XML标签。 * 可以被一个特定的标签替换，如果选择需要更精确。
*[@id=”id”]	选择一个特定的ID。
*[hasclass(“class”)]	选择一个特定的类。
*[@name=”name”]	选择具有特定名称的标签。
*[@t-call=”t-call”]	选择一个特定的t-call。

位置

位置定义了代码在模板中的放置位置。可能的值如下所示：

位置	描述
替换	使用XPath内容替换目标节点。
内部	在目标节点内添加XPath内容。
之前	在目标节点之前添加XPath内容。
在之后	在目标节点之后添加XPath内容。
属性	在属性内添加XPath内容。

Example

这个XPath在 <header> 的直接子节点 <nav> 之前添加了一个 <div> 。

<xpath expr="//header/nav" position="before">
   <div>Some content before the header</div>
</xpath>

这个XPath在头部的class属性中添加了 x_airproof_header 。您还需要定义一个 separator 属性，在您添加的class之前添加一个空格。

<xpath expr="//header" position="attributes">
   <attribute name="class" add="x_airproof_header" separator=" "/>
</xpath>

这个XPath在头部的class属性中移除了 x_airproof_header 。在这种情况下，您不需要使用 separator 属性。

<xpath expr="//header" position="attributes">
   <attribute name="class" remove="x_airproof_header" />
</xpath>

此 XPath 移除第一个具有 .breadcrumb 类的元素。

<xpath expr="//*[hasclass('breadcrumb')]" position="replace"/>

此 XPath 在 <ul> 元素的最后一个子元素后添加了一个额外的 <li> 元素。

<xpath expr="//ul" position="inside">
   <li>Last element of the list</li>
</xpath>

另请参阅

您可以在这个 cheat sheet 中找到有关XPath的更多信息。

QWeb

QWeb是Odoo使用的主要模板引擎。它是一个XML模板引擎，主要用于生成HTML片段和页面。

另请参阅

QWeb模板文档.

背景

您可以将颜色或图像定义为您网站的背景。

颜色

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

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-cc1-bg':                     'o-color-5',
         'o-cc5-bg':                     'o-color-1',
      ),
    )
);

图片/图案

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

$o-website-values-palettes: (
   (
      'body-image': '/website_airproof/static/src/img/background-lines.svg',
      'body-image-type': 'image' or 'pattern'
   )
);

标题

默认情况下，页眉包含一个响应式导航菜单和公司的标志。您可以轻松添加新元素或创建自己的模板。

标准

启用一个默认的标题模板。

重要

不要忘记，您可能需要先禁用活动的页眉模板。

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

$o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);

/website_airproof/data/presets.xml

<record id="website.template_header_contact" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

自定义

创建您自己的模板并将其添加到列表中。

重要

不要忘记，您可能需要先禁用活动的页眉模板。

选项

使用以下代码在网站构建器上为您的新自定义标题添加选项。

/website_airproof/data/presets.xml

<template id="template_header_opt" inherit_id="website.snippet_options" name="Header Template - Option">
   <xpath expr="//we-select[@data-variable='header-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.header"
         data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

属性	描述
data-customize-website-views	启用模板
data-customize-website-variable	变量的名称
data-img	在网站构建器上的模板选择中显示的自定义模板缩略图

现在您必须明确指定您要在Odoo SASS变量中使用自定义模板。

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

$o-website-values-palettes: (
   (
      'header-template': 'airproof',
   ),
);

布局

/website_airproof/views/website_templates.xml

<record id="header" model="ir.ui.view">
   <field name="name">Airproof Header</field>
   <field name="type">qweb</field>
   <field name="key">website_airproof.header</field>
   <field name="inherit_id" ref="website.layout"/>
   <field name="mode">extension</field>
   <field name="arch" type="xml">
      <xpath expr="//header//nav" position="replace">
         <!-- Static Content -->
         <!-- Components -->
         <!-- Editable areas -->
      </xpath>
   </field>
</record>

组件

在您的自定义头部中，您可以使用 QWeb 的 t-call 指令调用多个子模板：

标志

<t t-call="website.placeholder_header_brand">
   <t t-set="_link_class" t-valuef="..."/>
</t>

不要忘记将您的网站标志记录在数据库中。

/website_airproof/data/images.xml

<record id="website.default_website" model="website">
   <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo.png"/>
</record>

菜单

<t t-foreach="website.menu_id.child_id" t-as="submenu">
   <t t-call="website.submenu">
      <t t-set="item_class" t-valuef="nav-item"/>
      <t t-set="link_class" t-valuef="nav-link"/>
   </t>
</t>

登录

<t t-call="portal.placeholder_user_sign_in">
   <t t-set="_item_class" t-valuef="nav-item"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
</t>

用户下拉菜单

<t t-call="portal.user_dropdown">
   <t t-set="_user_name" t-value="true"/>
   <t t-set="_icon" t-value="false"/>
   <t t-set="_avatar" t-value="false"/>
   <t t-set="_item_class" t-valuef="nav-item dropdown"/>
   <t t-set="_link_class" t-valuef="nav-link"/>
   <t t-set="_dropdown_menu_class" t-valuef="..."/>
</t>

语言选择器

<t t-call="website.placeholder_header_language_selector">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

呼吁行动

<t t-call="website.placeholder_header_call_to_action">
   <t t-set="_div_classes" t-valuef="..."/>
</t>

导航栏切换器

<t t-call="website.navbar_toggler">
   <t t-set="_toggler_class" t-valuef="..."/>
</t>

另请参阅

您可以添加 header overlay 来将页眉放置在页面内容上方。 每个页面都需要单独完成此操作。

页脚

默认情况下，页脚包含一些静态内容的部分。您可以轻松地添加新元素或创建自己的模板。

标准

启用一个默认的页脚模板。不要忘记，您可能需要先禁用当前的页脚模板。

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

$o-website-values-palettes: (
   (
      'header-template': 'Contact',
   ),
);

/website_airproof/data/presets.xml

<record id="website.template_header_contact" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

自定义

创建您自己的模板并将其添加到列表中。不要忘记您可能需要先禁用活动的页脚模板。

选项

/website_airproof/data/presets.xml

<template id="template_header_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
   <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
      <we-button title="airproof"
         data-customize-website-views="website_airproof.footer"
         data-customize-website-variable="'airproof'"
         data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
   </xpath>
</template>

声明

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

$o-website-values-palettes: (
   (
      'footer-template': 'airproof',
   ),
);

布局

/website_airproof/views/website_templates.xml

<record id="footer" model="ir.ui.view">
   <field name="name">Airproof Footer</field>
   <field name="type">qweb</field>
   <field name="key">website_airproof.footer</field>
   <field name="inherit_id" ref="website.layout"/>
   <field name="mode">extension</field>
   <field name="arch" type="xml">
      <xpath expr="//div[@id='footer']" position="replace">
         <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
            <!-- Content -->
         </div>
      </xpath>
   </field>
</record>

版权

目前只有一个版权栏模板可用。

要替换内容或修改其结构，您可以将自己的代码添加到以下XPath中。

/website_airproof/views/website_templates.xml

<template id="copyright" inherit_id="website.layout">
   <xpath expr="//div[hasclass('o_footer_copyright')]" position="replace">
      <div class="o_footer_copyright" data-name="Copyright">
         <!-- Content -->
      </div>
   </xpath>
</template>

拖放区域

不需要定义页面的完整布局，您可以创建构建块（片段）并让用户选择在何处拖放它们，从而自己创建页面布局。我们称之为 模块化设计 。

您可以定义一个用户可以用片段填充的空白区域。

<div id="oe_structure_layout_01" class="oe_structure"/>

类	描述
oe_structure	为用户定义一个拖放区域。
oe_structure_solo	只能在此区域放置一个片段。

您还可以使用您的内容填充现有的拖放区域。

<template id="oe_structure_layout_01" inherit_id="..." name="...">
   <xpath expr="//*[@id='oe_structure_layout_01']" position="replace">
      <div id="oe_structure_layout_01" class="oe_structure oe_structure_solo">
         <!-- Content -->
      </div>
   </xpath>
</template>

响应式

您可以在下面找到一些提示，以帮助您使您的网站具有响应式设计。

引导程序

另请参阅

• Bootstrap响应式断点文档

• Bootstrap文档中的display属性

字体大小

截至v4.3.0，Bootstrap提供了启用响应式字体大小的选项，允许文本在设备和视口大小之间更自然地缩放。通过将 $enable-responsive-font-sizes Sass变量更改为true来启用它们。

另请参阅

响应式字体大小 GitHub

网站构建器

在移动设备上隐藏特定的 <section>。

<section class="d-none d-md-block">
   <!-- Content -->
</section>

在移动设备上隐藏 <col>。

<section>
   <div class="container">
      <div class="row d-flex align-items-stretch">
         <div class="col-lg-4 d-none d-md-block">
            <!-- Content -->
         </div>
      </div>
   </div>
</section>