第 2 章 - 构建您的网站

创建页面

现在主题已经设置好了，让我们继续创建内容。

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

小技巧

您需要停用默认主页。

其他资料

请参阅有关如何 desactivate a default page 和如何 start a new page 的参考文档。

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

添加媒体

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

要进行测试，请声明无人机图像以将其添加到库中。您将找到 drone picture here。

其他资料

请参阅有关如何 add a media 的参考文档。

转到:guilabel:Website Builder，双击:guilabel:logo，您将在库中看到无人机图像。

要完成此练习，您需要：

  1. 将您的 PNG 放入正确的图像文件夹中。

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

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

添加构建块

现在，让我们开始真正的工作。开始向页面添加内容。

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

基于Airproof设计，在首页添加以下元素：

  • 使用 Big boxes 构建块创建一个包含 3 个框的部分。

    • 对于此部分，您不希望未来的用户能够通过网站生成器对其进行编辑。

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

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

您可以使用 images 和 icons。

其他资料

请参阅有关如何 write standard building blocks 以及如何使用 grid layout 的参考文档。

密封积木柱布局。 密封积木网格布局。

小技巧

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

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

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

在 home.xml 上的密封示例中找到解决方案。