在门户和网站上使用 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 注册表中：

/** @odoo-module */
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 资源包是门户和网站使用的资源包，您需要将组件的代码添加到该资源包中，以便公共组件服务能够找到您的组件并将其挂载。在模块的清单文件中，在资源部分添加对 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性能就不是关注的重点，因为网络爬虫本来也无法访问这些页面。还有一些内容你可能不希望或不关心被索引，例如如果你想要一个页面让用户选择预约的日期和时间，你可能不希望搜索引擎索引在特定时刻可以预约的日期。

当你需要强大的交互性时

使用 Owl 是一个权衡，权衡的是之前提到的缺点以及 Owl 通过使构建丰富交互式用户体验变得简单而为你节省的努力。使用 Owl 的主要原因是当你希望构建一个能够实时响应用户输入而无需重新加载页面的界面时。如果你主要是想向用户展示静态内容，那么你可能不应该使用 Owl 组件。