在门户和网站上使用 Owl 组件¶

本文将介绍如何在门户和网站上利用 Owl 组件。

概述¶

要在网站或门户上使用 Owl 组件，您需要完成以下几项工作：

创建 Owl 组件并将其注册到 public_components 注册表中
将该组件添加到 web.assets_frontend 资源包中
在网站或门户页面上添加 <owl-component> 标签以使用该组件

1. 创建 Owl 组件¶

为简单起见，我们先从一个仅渲染“Hello, World!”的简单组件开始。这样我们就能一眼看出设置是否正常工作。

首先，在 /your_module/static/src/portal_component/your_component.xml 中创建模板。

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.YourComponent">
        Hello, World!
    </t>
</templates>

然后在 /your_module/static/src/portal_component/your_component.js 中为该组件创建 JavaScript 文件，并将其添加到 public_components 注册表中：

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry"

export class YourComponent extends Component {
    static template = "your_module.YourComponent";
    static props = {};
}

registry.category("public_components").add("your_module.YourComponent", YourComponent);

2. 将组件添加到 `web.assets_frontend` 资源包¶

web.assets_frontend 资源包是门户和网站所使用的资源包，您需要将组件的代码添加到该资源包中，以便公共组件服务能够找到并挂载您的组件。在模块的清单文件中，在 assets 部分为 web.assets_frontend 添加一个条目，并添加组件的文件：

{
    # ...
    'assets': {
        'web.assets_frontend': [
            'your_module/static/src/portal_component/**/*',
        ],
    }
}

3. 向页面添加 `<owl-component>` 标签¶

现在我们需要添加一个 <owl-component> 标签，作为要挂载的组件的目标位置。为便于演示，我们将通过 /your_module/views/templates.xml 中的 xpath 直接将其添加到门户首页。

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="your_module.portal_my_home" inherit_id="portal.portal_my_home">
        <xpath expr="//*[hasclass('o_portal_my_home')]" position="before">
            <owl-component name="your_module.YourComponent" />
        </xpath>
    </template>
</odoo>

不要忘记将此文件添加到资源包的 data 部分：

{
    # ...
    'data': [
        'views/templates.xml',
    ]
}

就是这样！如果您打开门户的首页，应该会在页面顶部看到“Hello, World!”消息。

注意事项¶

Owl 组件完全由浏览器在 JavaScript 中渲染。这可能导致一些问题：

布局偏移
搜索引擎的索引效果较差

出于这些原因，您只应在下面描述的特定用例中在门户和网站上使用 Owl 组件。

布局偏移¶

当页面最初渲染内容，而该内容随后在页面中移动（“偏移”）时，这被称为布局偏移。在门户或网站中使用 Owl 组件时，Owl 组件周围的所有 HTML 都由服务器渲染，并且是首先显示给用户的内容。当 JavaScript 开始运行时，Owl 会挂载您的组件，这很可能导致周围的元素在页面上移动。这可能导致糟糕的用户体验：用户在页面上看到一个最初渲染的元素并希望与其交互，于是他们将光标或手指移到该元素上方。就在他们即将点击时，Owl 组件被挂载，他们想要交互的元素被移动了。结果他们点击并交互的是 Owl 应用。

这可能是一种令人沮丧的体验，因此在设计页面时，您应注意不要让 Owl 组件移动周围的元素。这可以通过多种方式实现，例如将其定位在所有其他现有元素下方、周围不放其他可交互元素，或使用 CSS 为 Owl 组件预留固定空间。

搜索引擎的索引效果较差¶

当搜索引擎为网络内容建立索引时，它们使用网络爬虫来查找页面并分析其内容，以便在搜索结果中显示这些页面。虽然现代搜索引擎通常能够执行 JavaScript 代码，一般也能够查看和索引用 JavaScript 渲染的内容，但它们可能不会那么快地索引这些内容，并会在搜索结果中降低该页面的排名。

由于大多数搜索引擎不会透露其抓取和索引网页的确切方式，因此并不总能轻易了解客户端渲染对搜索引擎评分的影响程度。虽然这不太可能决定您的 SEO 策略的成败，但您仍应仅在 Owl 组件相比服务器端渲染能带来真正价值时才使用它。

何时在门户和网站上使用 Owl 组件¶

如前几节所述，如果不加以注意，使用 Owl 组件可能会略微降低用户体验，也可能妨碍您的 SEO。那么，在什么情况下应选择在这些位置使用 Owl 组件？以下是一些一般性指导原则。

当您不关心 SEO 时¶

如果某个页面因为不向公众开放而无法被搜索引擎索引，例如用户门户中的任何内容，那么 SEO 表现就无需担心，因为网络爬虫无论如何都无法访问这些页面。此外，有些内容您也不希望或不在意被索引，例如，如果您希望有一个页面让用户选择预约的日期和时间，您可能不希望搜索引擎索引在特定时刻可以预约的日期。

当您需要强交互性时¶

是否使用 Owl 是在前面提到的缺点与 Owl 通过简化构建丰富交互式用户体验所节省的工作量之间的权衡。使用 Owl 的主要原因是您希望构建一个能够实时响应用户输入而无需重新加载页面的界面。如果您主要想向用户展示静态内容，那么可能不应使用 Owl 组件。