第 2 章 - 构建您的网站

创建页面

既然主题已经设置好，让我们继续创建内容。

首先，开始创建您的第一个主题页面：主页。目前，仅在页面中显示“Hello”作为内容。

小技巧

您需要停用默认主页。

参见

请参阅关于如何 停用默认页面 以及如何 开始新页面 的参考文档。

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

添加媒体

如果您希望客户能够重复使用您将在网站上添加的某些图片，必须将这些图片添加到图片库中。

要进行测试，请声明无人机图片以将其添加到库中。您可以在 此处 找到无人机图片。

参见

请参阅关于如何 添加媒体 的参考文档。

转到 网站构建器 ，双击 徽标 ，您将在库中看到无人机图片。

要完成此练习，您需要：

  1. 将您的 PNG 文件放在正确的图片文件夹中。

  2. 创建您的 images.xml 文件。您可以从我们的示例模块中的 images.xml 文件中找到所有必要信息。

  3. 在 __manifest__.py 中声明您的文件。

添加构建块

现在，让我们进入实际工作。开始向页面添加内容。

在 Odoo 网站中，我们使用构建块创建页面内容。这些可以比作用户在网站构建器中可编辑的代码片段。任何代码片段的标准主容器是 section 。

基于 Airproof 设计，将以下元素添加到主页：

  • 使用 大盒子 构建块创建一个包含 3 个盒子的部分。

    • 对于此部分，您不希望未来用户能够通过网站构建器编辑它。

    • 在 3 个盒子的背景图片上放置不透明度滤镜。

  • 使用网格系统创建另一个包含标题和图标的区域。

您可以使用这些 图片 和 图标 。

参见

请参阅关于如何 编写标准构建块 以及如何使用 网格布局 的参考文档。

Airproof 构建块列布局。 Airproof 构建块网格布局。

小技巧

要确定创建构建块所需的代码：

  • 通过网站构建器创建测试页面。
    拖放您感兴趣的构建块并应用正确的设计。
    使用通过菜单中的 HTML/SCSS 编辑器 生成的代码。

  • 您还可以在 Odoo 中找到原始构建块代码： odoo/addons/website/views/snippets/**.xml 。

在我们的 Airproof 示例中的 home.xml 上找到解决方案。