在门户和网站上使用 Owl 组件¶
在本文中，您将学习如何在门户和网站上利用 Owl 组件。
概述¶
要在网站或门户上使用 Owl 组件，您需要执行以下操作：
创建您的 Owl 组件并将其注册到
public_components注册表中将该组件添加到
web.assets_frontend包中在网站或门户页面中添加
<owl-component>标签以使用组件
1. Creating the Owl component¶
为了简单起见，让我们从一个非常直接的组件开始，它只渲染 “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);
另请参阅
2. Adding your component to the web.assets_frontend bundle¶
web.assets_frontend 包是门户和网站使用的资源包，您需要将组件的代码添加到该包中，以便公共组件服务能够找到并挂载您的组件。在模块的清单文件中，在资产部分，为 web.assets_frontend 添加一个条目，并添加组件的文件：
{
# ...
'assets': {
'web.assets_frontend': [
'your_module/static/src/portal_component/**/*',
],
}
}
另请参阅
3. Adding an <owl-component> tag to a page¶
现在我们需要添加一个 <owl-component> 标签，它将作为组件挂载的目标。为了这个示例，我们将通过 xpath 直接将其添加到门户的主页上，位置在 /your_module/views/templates.xml 中。
<?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': {
'views/templates.xml',
}
}
就这样！如果您打开门户的主页，您应该会在页面顶部看到消息 “Hello, World!”。
注意事项¶
Owl 组件完全由浏览器在 JavaScript 中渲染。这可能会导致一些问题：
Layout shift
搜索引擎索引效果较差
出于这些原因，您应仅在门户和网站上针对以下描述的特定用例使用 Owl 组件。
Layout shift¶
当页面最初渲染内容时，如果该内容随后在页面内移动（“偏移”），这种现象被称为布局偏移。在门户或网站中使用 Owl 组件时，所有围绕 Owl 组件的 HTML 都是由服务器渲染的，并且是用户首先看到的内容。当 JavaScript 开始运行时，Owl 会挂载你的组件，这可能会导致周围的元素在页面上移动。这可能会导致糟糕的用户体验：用户看到页面上最初渲染的元素，并希望与之交互，因此他们将光标或手指移动到该元素上方。就在他们即将点击时，Owl 组件被挂载，他们想要交互的元素被移动了。结果，他们点击并交互的是 Owl 应用，而不是原本的目标元素。
这可能是一种令人沮丧的体验，因此在设计页面时应小心，确保 Owl 组件不会移动周围的元素。这可以通过多种方式实现，例如将其定位在所有现有元素的下方、周围没有其他交互元素，或使用 CSS 为 Owl 组件预留固定空间。
搜索引擎索引效果较差¶
当搜索引擎构建其网络内容索引时，它们使用网络爬虫来查找页面并分析其内容，以便在搜索结果中展示这些页面。尽管现代搜索引擎通常能够执行 JavaScript 代码，并且通常应该能够查看和索引通过 JavaScript 渲染的内容，但它们可能不会像索引静态内容那样快速索引这些内容，并可能在搜索结果中对页面进行惩罚。
由于大多数搜索引擎不会透露它们抓取和索引网页的确切方式，因此并不总是容易知道客户端渲染对您的搜索引擎评分的影响程度。虽然这不太可能决定您的SEO策略的成败，但您仍应仅在Owl组件相较于服务器端渲染能带来实际价值时使用它们。
何时在门户和网站上使用 Owl 组件¶
如前几节所述，如果不小心使用 Owl 组件，可能会稍微降低用户体验，也可能影响 SEO。那么在这些地方何时应选择使用 Owl 组件呢？以下是一些通用指南。
当你不关心SEO时¶
如果某个页面无法被搜索引擎索引，因为它对公众不可用，例如用户门户中的任何内容，SEO 性能就不是问题，因为网络爬虫无论如何都无法访问这些页面。还有一些你不想或不在乎索引的内容，例如，如果你有一个页面，用户可以在其中选择预约的日期和时间，你可能不希望搜索引擎索引在特定时刻可以预约的日期。
当你需要强大的交互性时¶
决定使用 Owl 是在前面提到的缺点与 Owl 通过简化构建丰富交互式用户体验所节省的努力之间做出的权衡。使用 Owl 的主要原因是当你想要构建一个能够实时响应用户输入而无需重新加载页面的界面时。如果你主要想向用户展示静态内容，那么你可能不应该使用 Owl 组件。