وب از کدگذاری رنگی سفت و سخت و رندر دو بعدی به عصری از انیمیشن های پیچیده و زیباشناختی و گزینه های رندر سه بعدی تبدیل شده است. علاوه بر این، با فناوری‌های جدید، مانند ابزارها و چارچوب‌های واقعیت مجازی، ادغام شده‌اند تا تجربه کاربر ارزشمند باشد.

در این مقاله، لینک‌های جاسازی شده را در توسعه front-end بهینه می‌کنیم تا مشخصات مورد نظر خود را برآورده کنند.

الهام بخش این مقاله از مشکلی بود که هنگام ایجاد یک سایت نمونه کارها و داشتن مشکلاتی در تعبیه سایت های خارجی با آن مواجه شدم - تا اینکه ابزار کارآمدی برای کمک کشف کردم.

برای درک کامل این آموزش، برخی از پیش نیازها وجود دارد:

آشنایی خوب با جاوا اسکریپت

آشنایی با نصب پکیج React JS و npm.

تسلط به CSS.

بیا شروع کنیم!

مفهوم میکرو لینکینگ

پیوند میکرو مستلزم تعبیه پیوند به یک وب سایت خارجی در یک صفحه وب پیش فرض است. پیوندهای جاسازی شده با ویژگی های پیش فرض “alt href” HTML که معمولاً توسط توسعه دهندگان وب استفاده می شود متفاوت است.

این مفهوم همچنین مستلزم استخراج ابرداده های سایت، اطلاعات و تصاویر مربوطه از پیوند سایت خارجی تعبیه شده است. این به ارائه دانش بیشتر در مورد وب سایت خارجی مورد نظر کمک می کند.

این ویژگی کاملاً جدید نیست زیرا معمولاً در بین پست‌های وبلاگ پیشرفته، سایت‌های پخش ویدیو و سایت‌های تجارت الکترونیک استفاده می‌شود. این ویژگی همچنین توسط صاحبان سایت برای سفارشی کردن نحوه مشاهده اطلاعات سایت آنها هنگام تعبیه در سایت های تبلیغاتی استفاده می شود.

میکرو لینکینگ چگونه کار می کند؟

به طور معمول، جاسازی یک URL با استفاده از کد HTML ساده هیچ پیش نمایش تصویر یا متنی ایجاد نمی کند. با این حال، این مورد برای پیوندهای میکرو صدق نمی کند. این به دلیل استفاده از یک رابط برنامه نویسی کاربردی برای استخراج اطلاعات مربوطه از سایت مورد اشاره و سپس خروجی آن به توسعه دهنده در فرمت JSON برای سفارشی سازی و استفاده آسان رخ می دهد.

بسیاری از خدمات میکرو لینکینگ به صورت تجاری در دسترس هستند. برخی از نمونه‌ها عبارتند از Embedly ، پروتکل Open Graph ، microlink.io و غیره.

مقدمه ای بر بسته میکرولینک

در این آموزش، سایتی ایجاد می کنیم که از یک بسته Node معروف به Microlink برای تولید پیش نمایش استفاده می کند. جزئیات مربوط به سفارشی سازی URL نیز نشان داده خواهد شد.

این سفارشی‌سازی به توسعه‌دهندگان اجازه می‌دهد تا به راحتی پیش‌نمایش‌های پیوند مربوطه را از سایت Microlink استخراج کنند و از دردسر تعامل با رابط وب‌سایت صرف‌نظر کنند.

برای یادگیری بیشتر، کتابخانه یک سایت مستند غنی دارد که می توانید از اینجا به آن دسترسی داشته باشید.

چگونه پروژه خود را راه اندازی کنید

برای ساختن سایت پیش نمایش لینک، از ابزار React Vite استفاده می کنیم. با وارد کردن دستور npm create-vite-app@latest links بلافاصله پوشه ای به نام latest links می چرخد ​​که در ساخت این پروژه از آن استفاده خواهیم کرد.

همچنین بسته microlink باید نصب شود. برای انجام این کار، به خط فرمان بروید و دستور npm i @microlinks/react اجرا کنید.

پروژه نمایشی

اول از همه، ما مولفه عملکردی پیش‌فرض JSX را برای این پروژه ایجاد می‌کنیم.

 function App() { return ( <> </> ) } export default App

در مرحله بعد، کتابخانه microlink نصب شده را وارد و مقداردهی اولیه می کنیم:

 import Microlink from '@microlink/react'

پس از آن، می توانیم بسته را در تابع App مقداردهی اولیه کنیم:

 return ( <> <Microlink url= " https://tobilyn77.hashnode.dev/nodejs-clustering-and-load-balancing-comprehensive-overview " /> </> )

متغیر URL که وارد کردم پیوندی به یک سایت خارجی است که قصد دارم در سایت محلی خود پیش نمایش آن را مشاهده کنم. این را می توان به هر سایتی که می خواهید پیش نمایش کنید تغییر دهید.

در اجرای این، شما باید چیزی شبیه به این را ببینید.

ما با موفقیت یک میکرو پیوند را در برنامه خود راه اندازی کرده ایم. اما این همه چیز نیست، قدرت بسته بسیار زیاد است و سطحی از انعطاف پذیری را در کنترل طرح و اندازه میکرو پیوندها فراهم می کند.

تغییر اندازه

تغییر اندازه به سادگی شامل تنظیم اندازه یا ابعاد یک متغیر برای مطابقت با مشخصات مختلف است. در این مورد، ما اندازه پیوندهای تعبیه شده را تنظیم می کنیم.

 <Microlink url= "https://tobilyn77.hashnode.dev/nodejs-clustering-and-load-balancing-comprehensive-overview" /> <p></p> <Microlink url= "https://tobilyn77.hashnode.dev/nodejs-clustering-and-load-balancing-comprehensive-overview" size="small"/> <p></p> 

کد بالا اندازه میکرو لینکی که قرار است رندر شود را مشخص می کند. اگر اندازه small نشان داده شود، ابعاد میکرو پیوند تغییر می کند. همچنین امکان اندازه های بزرگ و متوسط ​​را فراهم می کند و به طور پیش فرض، اندازه متوسط ​​همان چیزی است که معمولاً زمانی که ابعاد اندازه مشخص نشده است، دیده می شود.

همچنین، تگ microlink self-enclosing امکان استایل CSS را فراهم می کند. این را می توان با گنجاندن متغیر سبک در تگ microlink به دست آورد.

 <Microlink url= "https://tobilyn77.hashnode.dev/nodejs-clustering-and-load-balancing-comprehensive-overview" style= {{color: 'red'}} /> 

همانطور که در کد بالا می بینید، microlink با رنگ قرمز استایل داده شده و در خروجی منعکس شده است. سایر استایل های CSS را نیز می توان اعمال کرد تا به کاربران حس زیبایی به سایت شما بدهد.

نتیجه

با این کار به پایان آموزش رسیدیم. امیدواریم پیش نمایش لینک را از طریق بسته microlink یاد گرفته باشید.

هر گونه سوال یا نظری را در کادر نظرات زیر مطرح کنید. شما همچنین می توانید در وبلاگ من با من تعامل داشته باشید و مقالات دیگر من را در اینجا تحلیل کنید. تا دفعه بعد، به کدنویسی ادامه دهید!

خبرکاو