استفاده از کامپوننتهای Owl در پورتال و وبسایت¶
در این مقاله یاد خواهید گرفت چگونه میتوانید از کامپوننتهای Owl در پورتال و وبسایت بهره ببرید.
نمای کلی¶
برای استفاده از کامپوننتهای Owl در وبسایت یا پورتال، باید چند کار را انجام دهید:
کامپوننت Owl خود را ایجاد کنید و در رجیستری
public_componentsثبت کنیدآن کامپوننت را به باندل
web.assets_frontendاضافه کنیدیک تگ
<owl-component>به یک صفحهٔ وبسایت یا پورتال اضافه کنید تا از کامپوننت استفاده شود
۱. ایجاد کامپوننت 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>
سپس فایل JavaScript آن کامپوننت را در /your_module/static/src/portal_component/your_component.js ایجاد کنید و آن را به رجیستری 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);
همچنین ببینید
۲. افزودن کامپوننت خود به باندل web.assets_frontend¶
باندل web.assets_frontend همان باندل assets است که توسط پورتال و وبسایت استفاده میشود؛ باید کد کامپوننت خود را به این باندل اضافه کنید تا سرویس public components بتواند کامپوننت شما را پیدا و mount کند. در manifest ماژول خود، در بخش assets، یک ورودی برای web.assets_frontend اضافه کنید و فایلهای کامپوننت خود را اضافه کنید:
{
# ...
'assets': {
'web.assets_frontend': [
'your_module/static/src/portal_component/**/*',
],
}
}
همچنین ببینید
۳. افزودن یک تگ <owl-component> به یک صفحه¶
اکنون باید یک تگ <owl-component> اضافه کنیم که بهعنوان هدفی برای mount شدن کامپوننت عمل کند. برای این مثال، آن را مستقیماً با یک 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 از باندل assets خود اضافه کنید:
{
# ...
'data': [
'views/templates.xml',
]
}
و تمام! اگر صفحهٔ اصلی پورتال را باز کنید، باید پیام «Hello, World!» را در بالای صفحه ببینید.
نکات احتیاطی¶
کامپوننتهای Owl کاملاً توسط مرورگر در JavaScript رندر میشوند. این میتواند مشکلاتی ایجاد کند:
جابهجایی چیدمان
ایندکس ضعیفتر توسط موتورهای جستجو
به این دلایل، تنها باید برای موارد استفادهٔ خاص توصیفشده در زیر، از کامپوننتهای Owl در پورتال و وبسایت استفاده کنید.
جابهجایی چیدمان¶
وقتی یک صفحه ابتدا محتوایی را رندر میکند و آن محتوا بعداً در صفحه («جابهجا») میشود، به این جابهجایی چیدمان گفته میشود. هنگام استفاده از کامپوننتهای Owl در پورتال یا وبسایت، تمام HTML پیرامون کامپوننت Owl توسط سرور رندر میشود و اولین چیزی است که به کاربر نمایش داده میشود. هنگامی که JavaScript شروع به اجرا میکند، Owl کامپوننت شما را mount میکند که احتمالاً باعث جابهجایی عناصر اطراف در صفحه میشود. این میتواند تجربهٔ کاربری بدی ایجاد کند: کاربر عنصری را در صفحه میبیند که ابتدا رندر شده و میخواهد با آن تعامل داشته باشد، پس مکاننما یا انگشتش را روی آن عنصر میبرد. درست در همان لحظهٔ کلیک، کامپوننت Owl mount میشود و عنصر مورد نظر جابهجا میشود. کاربر کلیک میکند و در عوض با اپ Owl تعامل میکند.
این میتواند تجربهٔ ناخوشایندی باشد، بنابراین هنگام طراحی صفحه باید مراقب باشید که کامپوننت Owl باعث جابهجایی عناصر نشود. این را میتوان به روشهای مختلفی بهدست آورد، مانند قرار دادن آن زیر همهٔ عناصر موجود، نداشتن عناصر تعاملی دیگر در اطراف، یا رزرو فضای ثابت برای کامپوننت Owl با استفاده از CSS.
همچنین ببینید
ایندکس ضعیفتر توسط موتورهای جستجو¶
وقتی موتورهای جستجو ایندکس محتوای وب خود را میسازند، از خزندههای وب برای یافتن صفحات و تجزیهوتحلیل محتوای آنها استفاده میکنند تا این صفحات را در نتایج جستجوی خود نمایش دهند. اگرچه موتورهای جستجوی مدرن معمولاً قادر به اجرای کد JavaScript هستند و باید بتوانند محتوای رندر شده در JavaScript را ببینند و ایندکس کنند، ممکن است محتوا را به سرعت ایندکس نکنند و صفحه را در نتایج جستجو جریمه کنند.
از آنجا که بیشتر موتورهای جستجو دقیقاً شیوهٔ خزش و ایندکس صفحات وب خود را فاش نمیکنند، همیشه دانستن میزان تأثیری که رندرینگ سمت کلاینت میتواند بر امتیازات موتور جستجو داشته باشد، آسان نیست. اگرچه بعید است این موضوع استراتژی SEO شما را بسازد یا خراب کند، باز هم تنها زمانی باید از کامپوننتهای Owl استفاده کنید که ارزش واقعی نسبت به رندرینگ سمت سرور اضافه کنند.
چه زمانی از کامپوننتهای Owl در پورتال و وبسایت استفاده کنیم¶
همانطور که در بخشهای قبل توضیح داده شد، استفاده از کامپوننت Owl میتواند تجربهٔ کاربر را در صورت بیاحتیاطی کمی کاهش دهد و ممکن است به SEO شما نیز آسیب بزند. پس چه زمانی باید از کامپوننتهای Owl در این مکانها استفاده کنید؟ در اینجا چند راهنمایی کلی آورده میشود.
زمانی که به SEO اهمیت نمیدهید¶
اگر صفحهای نتواند توسط موتورهای جستجو ایندکس شود، زیرا برای عموم در دسترس نیست، مثلاً هر چیزی در پورتال کاربر، عملکرد SEO نگرانی نیست، زیرا خزندههای وب به هر حال نمیتوانند به این صفحات دسترسی پیدا کنند. همچنین چیزهایی هستند که نمیخواهید یا برایتان مهم نیست ایندکس شوند، مانند صفحهای که کاربر میتواند تاریخ و زمان قرار ملاقات را انتخاب کند؛ احتمالاً نمیخواهید موتورهای جستجو تاریخهای ممکن برای قرار ملاقات در یک لحظهٔ خاص را ایندکس کنند.
زمانی که به تعامل قوی نیاز دارید¶
تصمیم به استفاده از Owl یک معاوضه بین معایب پیشگفته و تلاشی است که Owl با تسهیل ساخت تجربههای کاربری تعاملیِ غنی برای شما صرفهجویی میکند. دلیل اصلی استفاده از Owl زمانی است که میخواهید رابطی بسازید که بتواند بهصورت بیدرنگ و بدون نیاز به بارگذاری مجدد صفحه، به ورودیهای کاربر واکنش نشان دهد. اگر عمدتاً میخواهید محتوای ایستا را به کاربر نشان دهید، احتمالاً نباید از کامپوننت Owl استفاده کنید.