在门户和网站上使用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);

参见

Owl组件参考。

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组件预留固定空间。

参见

web.dev上的累积布局偏移

搜索引擎索引效果较差¶

当搜索引擎构建其网页内容索引时，它们使用网络爬虫查找页面并分析其内容，以便在搜索结果中显示这些页面。尽管现代搜索引擎通常能够执行JavaScript代码，并且通常能够查看和索引通过JavaScript渲染的内容，但它们可能无法快速索引这些内容，并可能在搜索结果中对页面进行降权处理。

由于大多数搜索引擎并未公开其抓取和索引网页的具体方式，因此很难确切知道客户端渲染对搜索引擎评分的影响程度。虽然它不太可能彻底破坏您的SEO策略，但您仍应仅在Owl组件比服务器端渲染提供更多实际价值时才使用它。

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

如前几节所述，如果不小心使用Owl组件，可能会稍微降低用户体验，并可能影响您的SEO。那么，您应该在什么情况下选择在这些地方使用Owl组件呢？以下是一些通用指南。

当您不关心SEO时¶

如果某个页面无法被搜索引擎索引，因为它不向公众开放（例如用户门户中的任何内容），那么SEO性能就不是问题，因为网络爬虫无论如何都无法访问这些页面。还有一些内容是您不希望或不需要索引的，例如，如果您希望有一个页面让用户选择约会的日期和时间，您可能不希望搜索引擎索引特定时刻可预约的日期。

当您需要高度交互性时¶

使用Owl是一个权衡，需要在前述缺点与Owl为您节省的精力之间找到平衡，因为它可以轻松构建高度交互的用户体验。使用Owl的主要原因是，当您希望构建一个无需重新加载页面即可实时响应用户输入的界面时。如果您主要想向用户展示静态内容，则可能不应使用Owl组件。

Edit on GitHub