وب سایت های ایستا محتوا را از طریق مجموعه ای از پیش تعریف شده از فایل های HTML، CSS و جاوا اسکریپت ارائه می کنند و آنها را برای بسیاری انتخابی ساده و اقتصادی می کند.
علیرغم ماهیت ثابت آنها، سایت های استاتیک را می توان با عناصر محتوای پویا برای تقویت تعامل کاربر تقویت کرد. ادغام بخش نظرات به بازدیدکنندگان این امکان را می دهد که نظرات خود را بیان کنند، بازخورد بدهند، یا سؤالاتی در مورد محتوا یا خدمات شما مطرح کنند.
این افزونه تعامل جامعه را تقویت می کند و شما را قادر می سازد با مخاطبان خود ارتباط برقرار کنید و پیشنهادات خود را بر اساس بازخورد آنها اصلاح کنید. این آموزش اضافه کردن یک بخش نظر به یک سایت ثابت میزبانی شده در میزبانی سایت ایستا Kinsta را نشان می دهد.
یک سایت استاتیک اولیه در Kinsta راه اندازی کنید
این آموزش از الگوی Docusaurus ایجاد شده در حساب Kinsta GitHub استفاده می کند. Docusaurus یک مولد سایت ایستا محبوب است که از React، یکی از برترین کتابخانه های جاوا اسکریپت، به عنوان کتابخانه UI برای ایجاد صفحه استفاده می کند.
برای راه اندازی این سایت در Kinsta مراحل زیر را دنبال کنید:
- برای استفاده از الگوی Docusaurus، کلیک کنید از این الگو > ایجاد یک مخزن جدید استفاده کنید.
- با اجرای دستور زیر مخزن را در ماشین محلی خود کلون کنید:
https://github.com/kinsta/hello-world-docusaurus.git - برای مشاهده داشبورد MyKinsta خود وارد شوید یا یک حساب ایجاد کنید.
- Kinsta را با ارائه دهنده Git خود مجاز کنید.
- کلیک سایت های استاتیک در نوار کناری سمت چپ، سپس کلیک کنید اضافه کردن سایت.
- مخزن و شاخه ای که می خواهید از آن مستقر شوید را انتخاب کنید.
- یک نام منحصر به فرد به سایت خود اختصاص دهید.
- تنظیمات ساخت را در قالب زیر اضافه کنید:
- دستور ساخت:
npm run build - نسخه Node: 18.16.20
- دایرکتوری انتشار: ساختن
- دستور ساخت:
- در نهایت کلیک کنید سایت ایجاد کنید.
پس از استقرار موفقیت آمیز سایت خود، می توانید از URL فهرست شده به عنوان دامنه در سایت مستقر شده خود بازدید کنید بررسی اجمالی برگه
یک حساب Disqus ایجاد کنید
Disqus ابزارهایی را برای افزایش تعامل از طریق ادغام اجتماعی، ابزارهای تعدیل و تجزیه و تحلیل ارائه می دهد. از گفتگوهای آنلاین از طریق نظرات پشتیبانی می کند. برای استفاده از Disqus مراحل زیر را دنبال کنید:
- یک حساب Disqus ایجاد کنید.
- اطلاعات مورد نیاز برای فرآیند ثبت نام را پر کنید.
- پس از ثبت نام، را انتخاب کنید من می خواهم Disqus را در سایت خود نصب کنم.
- سایت خود را با Disqus ثبت کنید. در حین ثبت نام، یک نام کوتاه و یک دسته برای سایت خود انتخاب کنید. یک سازمان به طور خودکار فهرستی حاوی سایت جدید شما و هر سایت دیگری که در آینده ایجاد می کنید ایجاد می کند.
- یک طرح Disqus برای سازمان خود انتخاب کنید. Disqus برنامه های اشتراک مختلفی از جمله Plus، Pro و Business را ارائه می دهد. برای این نسخه ی نمایشی، می توانید طرح پایه را انتخاب کنید که شامل ویژگی های اصلی مانند افزونه نظرات، فیلتر پیشرفته هرزنامه، ابزارهای تعدیل و تجزیه و تحلیل اولیه است.
Disqus را با سایت استاتیک خود در Kinsta ادغام کنید
مرحله بعدی ادغام قطعه کد Disqus در مولد سایت استاتیک شما است.
- پس از ثبت نام سایت خود کلیک کنید من پلتفرم خود را در لیست نمی بینم، به صورت دستی با Universal Code نصب کنید.
جاسازی کد Disqus به صورت دستی با Universal Code. صفحه نمایش داده شده حاوی یک قطعه کد جاوا اسکریپت در قسمتی است که دارای برچسب است کد زیر را در جایی که می خواهید Disqus بارگذاری شود قرار دهید. از آنجایی که سایت استاتیک یک برنامه React است، باید این قطعه کد را برای کار با React تغییر دهید.
- یک پوشه به نام ایجاد کنید گفتگو درون src/components پوشه
- از کد زیر در داخل خود استفاده کنید index.js فایل. حتما تعویض کنید
https://your_shortname_placeholder.disqus.com/embed.jsبا نشانی اینترنتی که در کد جهانی دریافت کردید:import React, { useEffect } from 'react'; const DisqusComments = () => { useEffect(() => { const disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; // Load Disqus script dynamically (function () { const d = document; const s = d.createElement('script'); s.src="https://your_shortname_placeholder.disqus.com/embed.js"; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); // Cleanup Disqus on component unmount return () => { const disqusThread = document.getElementById('disqus_thread'); if (disqusThread) { disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid interference with other components } }; }, ()); // Run this effect only once on component mount return ( <div> <div> id="disqus_thread"></div> <noscript>Please enable JavaScript to view the <a> href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> ); }; export default DisqusComments;را
disqus_configتابع دو متغیر را تعریف می کند:this.page.url– این متغیر روی تنظیم شده استPAGE_URL، که باید آن را با URL متعارف صفحه جایگزین کنید. Disqus از این URL برای شناسایی صفحه خاصی که نظرات در آن تعلق دارند استفاده می کند.this.page.identifier– این متغیر روی تنظیم شده استPAGE_IDENTIFIER، که باید آن را با یک شناسه منحصر به فرد برای صفحه جایگزین کنید. این شناسه به Disqus اجازه می‌دهد بین صفحاتی با URL یکسان تمایز قائل شود و نظرات را با صفحه صحیح مرتبط کند.
- می توانید این کامپوننت را به صفحه ای که می خواهید قسمت نظرات Disqus را نمایش دهید وارد کنید.
import DisqusComments from '@site/src/components/Disqus'; - سپس، بخش نظرات Disqus را به صفحه فرود اضافه کنید، عبارت import زیر را وارد کنید index.js در داخل src/pages دایرکتوری و استفاده کنید
DisqusCommentsبر این اساس:export default function Home() { const {siteConfig} = useDocusaurusContext(); return ( <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />"> <HomepageHeader /> <main> <HomepageFeatures /> <DisqusComments/> </main> </Layout> ); } - این تغییرات را در مخزن خود انجام دهید تا در سایت استاتیک میزبان Kinsta خود منعکس شود:
git add . git commit -m "Adding Disqus Comments" git push -u origin master
اگر کلیک کردید استقرار خودکار در commit فعال است هنگام استقرار سایت استاتیک خود، انجام تغییرات جدید به طور خودکار یک استقرار در MyKinsta را آغاز می کند. در غیر این صورت، تغییرات را به صورت دستی اجرا کنید.
تبریک – شما یک سایت ثابت با استفاده از میزبانی سایت استاتیک Kinsta ایجاد کرده اید و یک بخش نظرات را با استفاده از Disqus یکپارچه کرده اید!
ممکن است بخواهید آن را اصلاح کنید DisqusComments جزء برای اطمینان از بارگیری بخش نظرات همانطور که در نظر گرفته شده است.
نحوه سفارشی سازی بخش نظرات
شما می توانید بخش نظرات را در سایت استاتیک خود با تغییر ظاهر آن، اجرای واکنش ها، انجام تعدیل نظرات و موارد دیگر سفارشی کنید. برخی از گزینه های سفارشی سازی موجود در Disqus شامل موارد زیر است.
تم را سفارشی کنید
برای سفارشی کردن موضوع نظرات Disqus خود، به داشبورد Disqus بروید، کلیک کنید عمومی از تنظیمات را انتخاب کنید و گزینه های مناسب را از قسمت انتخاب کنید طرح رنگی و تایپ فیس کرکره ها
واکنش ها را در سایت خود فعال کنید
با فعال کردن Reactions در سایت خود می توانید تعامل مخاطبان خود را افزایش دهید. این واکنش ها را با توجه به ترجیحات خود سفارشی کنید.
برای فعال کردن این ویژگی، به مسیر بروید تنظیمات برگه در داشبورد Disqus. انتخاب کنید واکنش ها. سپس، کلیک کنید Reactions را در سایت خود فعال کنید.
سایت خود را به روز کنید. گزینه واکنش ها ظاهر می شود.
آواتارهای کامنت
شما می توانید یک آواتار کامنت گذار پیش فرض را برای کاربران آپلود کنید، تا آنها احساس کنند بخشی از جامعه هستند.
برای فعال کردن این ویژگی، به داشبورد Disqus بروید، کلیک کنید عمومی از تنظیمات را برگه، و یک تصویر را از آن آپلود کنید آواتار پیش فرض کامنتگر.
دسته بندی نظرات
سفارشی‌سازی را اضافه کنید تا کاربران بتوانند نظرات را بر اساس مرتب کنند قدیمی ترها در اولویت، جدیدترین اول، یا بهترین اول. کلیک انجمن در تب تنظیمات از داشبورد Disqus و ترتیب را از قسمت انتخاب کنید مرتب سازی پیش فرض کشویی
نحوه تعدیل نظرات
برای تعدیل نظرات در Disqus، از پانل مدیریت Disqus در نوار پیمایش بالای داشبورد Disqus خود استفاده کنید. این ابزار یک نمای سریع از نظرات انجمن شما و وضعیت آنها (تأیید شده، در انتظار، و غیره) ارائه می دهد.
همچنین می توانید قوانین تعدیل را از طریق پیکربندی کنید اعتدال منو، که در صفحه ناوبری سمت چپ در زیر موجود است تنظیمات برگه داشبورد Disqus.
در مرحله بعد، اسناد آنها را برای مراحل و ویژگی‌های کلیدی بررسی کنید تا به شما در مدیریت و تعدیل نظرات در Disqus کمک کند.
به بازدیدکنندگان اجازه نظر دادن بدهید
برای اینکه به کاربران مهمان اجازه دهید در سایت شما نظر بدهند، این را بررسی کنید نظر مهمان چک باکس، سپس کلیک کنید صرفه جویی. این نظرات تا زمانی که ناظر آنها را از داشبورد نظارت Disqus تأیید نکند در حالت تعلیق باقی می مانند.
نظرات را به عنوان هرزنامه تأیید، حذف و علامت گذاری کنید
پانل تعدیل به شما امکان می دهد با بررسی چندین نظر، اقدامات انبوه (تأیید، حذف و علامت گذاری نظرات به عنوان هرزنامه) را انجام دهید. از طرف دیگر، می‌توانید آنها را به‌صورت جداگانه در نمای بازشده دیدگاه تعدیل کنید.
هنگامی که این تنظیم را فعال کردید، ناظر باید نظرات را قبل از نمایش آنها تأیید کند.
خلاصه
این آموزش به شما آموزش می دهد که چگونه یک بخش نظر به سایت استاتیک خود اضافه کنید. به غیر از Docusaurus، می‌توانید Disqus را در هر SSG دیگری مانند VuePress، Gatsby و غیره پیاده‌سازی کنید.
میزبانی سایت استاتیک Kinsta به شما امکان می دهد فایل های غیر پویا از پیش ساخته شده خود را به راحتی مستقر کنید. برای کشف مزایای میزبانی سایت استاتیک خود در Kinsta و ادغام ویژگی هایی مانند بخش نظرات، میزبانی سایت استاتیک Kinsta را بررسی کنید.
آیا تا به حال Disqus یا هر سرویس نظردهی دیگری را در سایت استاتیک خود پیاده سازی کرده اید؟ تجربیات خود را در بخش نظرات زیر به اشتراک بگذارید.
جرمی هولکامب
کینستا
ویرایشگر محتوا و بازاریابی در Kinsta، توسعه دهنده وب وردپرس و نویسنده محتوا. خارج از همه چیز وردپرس، من از ساحل، گلف و فیلم لذت می برم. من هم مشکلات قد بلندها دارم ;).