第 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="is_homepage" eval="True" />
      <field name="key">website_airproof.page_home</field>
      <field name="url">/</field>
      <field name="type">qweb</field>
      <field name="website_id" eval="1"/>
      <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 中查找解决方案。