页面¶

本章将介绍如何声明静态页面。

默认页面¶

在 Odoo 中，网站自带几个默认的静态页面（首页、联系我们、404……）。它们的构建方式如下。

/website/data/website_data.xml¶

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

每个默认页面都是一个模板，其自身内容保存在一条记录中。这就是为什么，自定义页面是在记录中创建的。

<t-call='website.layout'> 包含一些可以设置的变量：

定义 meta 标题。

<t t-call="website.layout"
   additional_title.translate="My Page Title">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

小技巧

由于 t-call 接受参数，这些参数可以以变量、字符串（*.f）或可翻译字符串（*.translate）的形式传递。

定义 meta 描述。

<t t-call="website.layout"
   meta_description.translate="This is the description of the page that will appear on Search
   Engines.">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

为页面添加 CSS 类。

<t t-call="website.layout"
   pageName.f="homepage">
   <div id="wrap" class="oe_structure oe_empty" />
</t>

如有需要，可停用默认页面。

/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">
   <!-- Change the meta title parameter through the t-call -->
   <xpath position="attributes" expr="//t[@t-call='web.frontend_layout">
      <attribute name="additional_title.translate">404 - Not found</attribute>
   </xpath>
   <!-- Replace the default content -->
   <xpath expr="//*[@id='wrap']" position="replace">
      <div id="wrap" class="oe_structure">
         <!-- Content -->
      </div>
   </xpath>
</template>

主题页面¶

你可以向网站中添加任意数量的页面。不要定义 <template>，而应创建一条页面记录。

声明

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

小技巧

要将该页面设为首页，请设置以下字段：

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

小技巧

页眉和页脚默认可见，但可以通过将 header_visible 和/或 footer_visible 字段设为 false，在特定页面上隐藏它们。这样它们在视觉上被隐藏，但仍存在于 DOM 中。通过网站构建器，可以像处理隐藏在可见性条件下的任何隐藏元素一样，将两者重新显示出来。

<field name="header_visible" eval="False" />
<field name="footer_visible" eval="False" />

通过启用此视图，可以在所有页面上隐藏页眉（另见：预设）：

/website_airproof/data/presets.xml¶

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

多网站与 website_id

在模块上下文中，上面创建的记录默认在数据库中每个可用网站上均可用。最好指定该页面可被找到的网站的 website_id。

字段	说明
name	页面名称（便于阅读的文本）。
`is_published`	定义页面是否发布（对访客可见）。
`key`	视图键（必须唯一）
`url`	可访问该页面的相对路径。
`type`	视图类型
`arch`	视图架构（页面的标记结构）

使用 <t t-call="website.layout"> 即可将你的代码套用到 Odoo 默认页面布局中。

`noupdate` 属性¶

此属性可防止数据被覆盖。它可以添加在包裹待保护记录的 data 标签上，也可以添加在 odoo tag` 上，以保护文件中声明的所有记录。

保护文件中的所有记录：

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

当然不是。从技术上讲，它可用于任何类型的记录。

页眉叠加¶

使页眉背景透明，并浮在页面内容之上。

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

注解

要创建静态页面的内容，请遵循 Odoo 的做法，以便内容保持可由网站构建器编辑。请注意，Odoo 使用了 Bootstrap 框架（5.3）。

查看可用的类和组件：

页面模板¶

创建预设的静态页面模板，可在“新建页面”对话框中使用。

声明

页面模板必须在模块的 __manifest__.py 中通过 new_page_templates 和 new_page_template_templates.xml 定义：

/website_airproof/__manifest__.py¶

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

模板

然后，你需要基于 __manifest__.py 中的层级关系，按照特定的命名约定创建模板。在本例中，名称为 new_page_template_sections_airproof_faq。此模板中调用的构建块与标准构建块完全相同，只有第一个是“即时”调整过的。

创建标准 s_text_block 的新实例（primary 属性很重要），并做一些调整：

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

为页面模板实例化每个构建块（无论是否修改）：

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

然后，如上所述，在 #wrap 中使用若干 t-snippet-call 来创建页面模板：

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

页面模板创建完成后，创建一个自定义组并将其添加到现有组中。现有组的列表如下：

/website/views/new_page_template_templates.xml¶

<template id="new_page_template_groups">
   <div id="about_us">About Us</div>
   <div id="services">Services</div>
   <div id="pricing">Pricing</div>
   <div id="portfolio">Portfolio</div>
   <div id="contact_us">Contact Us</div>
   <div id="utility">Utility</div>
</template>

你可以随时向列表中添加自定义组：

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

页面¶

默认页面¶

主题页面¶

noupdate 属性¶

页眉叠加¶

页面模板¶

`noupdate` 属性¶