在门户和网站上使用 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 包是门户和网站使用的资产包，您需要将组件的代码添加到该包中，以便公共组件服务可以找到您的组件并安装它。在模块清单的资产部分中，添加 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': [
'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 组件。