گفتوگو در سایت شما

روی صفحهٔ خودت امتحانش کن

نشانی صفحه را بنویس — هم کد را میگیری، هم همانجا بلوک را میبینی. پیشنمایش همان قطعهای است که کپی میکنی: یک ظرف و یک اسکریپت.

<div data-vpvd-thread data-url="https://example.org/article" data-lang="fa" data-theme="auto">
  <a href="https://vpvd.io/embed/fa?url=https%3A%2F%2Fexample.org%2Farticle&amp;theme=auto" target="_blank" rel="noopener">گفتوگو را در vpvd باز کن</a>
</div>
<script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>

سایت پیش از راهاندازی بسته است: موضوع را میتوان ناشناس خواند، اما ورود هنوز کار نمیکند — خواننده در صفحهٔ شما دکمهای میبیند که فعلاً به جایی نمیرسد. ورود در روز راهاندازی باز میشود.

کجا بچسبانم

کد همهجا یکی است؛ تفاوت فقط در جای قرار گرفتن آن است.

• سایتهای ایستا و قالبهای خودت همانجا که گفتوگو باید در صفحه باشد: در قالب مقاله یا نوشته.
• WordPress بلوک کد سفارشی در ویرایشگر نوشته، یا ابزارک کد در نوار کنار. بعضی ویرایشگرها هنگام ذخیره برچسب اسکریپت را میاندازند — صفحهٔ منتشرشده را باز کن و ببین بلوک سر جایش هست.
• Tilda بلوکی که کد خودت را میگذارد، از بخش «دیگر»: قطعه را کامل و همراه برچسب اسکریپت بچسبان.
• Next.js, Nuxt, React اسکریپت یک بار در قالب سایت بارگذاری میشود، و مؤلفه ظرف را میگذارد و هنگام برداشته شدن، بلوک را هم برمیدارد — وگرنه با تغییر مسیر، قاب قبلی داخل ظرف میماند.

<div data-vpvd-thread data-url="https://example.org/article" data-lang="fa" data-theme="auto">
  <a href="https://vpvd.io/embed/fa?url=https%3A%2F%2Fexample.org%2Farticle&amp;theme=auto" target="_blank" rel="noopener">گفتوگو را در vpvd باز کن</a>
</div>
<script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>

Next.js, Nuxt, React

// components/VpvdThread.tsx — one page's discussion. Load the script once in the layout:
// <Script src="https://vpvd.io/embed.js" strategy="afterInteractive" />
'use client';
import { useEffect, useRef } from 'react';

export default function VpvdThread() {
	const box = useRef<HTMLDivElement>(null);
	useEffect(() => {
		const el = box.current;
		const vpvd = (window as any).vpvd;
		if (el && vpvd) vpvd.mount(el);
		return () => { if (el && vpvd) vpvd.destroy(el); };
	}, []);
	return (
		<div ref={box} data-vpvd-thread data-url="https://example.org/article" data-lang="fa" data-theme="auto">
			<a href="https://vpvd.io/embed/fa?url=https%3A%2F%2Fexample.org%2Farticle&amp;theme=auto" target="_blank" rel="noopener">گفتوگو را در vpvd باز کن</a>
		</div>
	);
}

صفحههایی که بدون بارگذاری دوباره عوض میشوند

React, Vue, Svelte, Nuxt: برچسب اسکریپت در نشانهگذاری شما میماند و تغییر صفحه را تاب نمیآورد: ظرف همانجا که بلوک بود خالی میماند. اسکریپت را یک بار در قالب سایت بارگذاری کنید و پس از هر گذر، بهروزرسانی زیر را صدا بزنید: با همان کدی که در بارگذاری اول اجرا میشود روی همه ظرفهای صفحه میرود.

// after every client-side transition:
window.vpvd.refresh();

پوسته و قلم

پوسته را صریح بگذار — روشن، تاریک یا خودکار — و ظاهر را با متغیرهایی روی ظرف به سایت خودت نزدیک کن: قلم، اندازه، فاصلهٔ خطوط، رنگ تأکید و گردی گوشهها.

data-theme, --vpvd-font, --vpvd-font-size, --vpvd-line-height, --vpvd-accent, --vpvd-radius

با «خودکار» بلوک پوستهٔ صفحهٔ تو را برمیدارد — همان که در سایتت روشن میکنی یا تنظیم سامانهٔ خواننده — و قلم و اندازه و گردی را از خود ظرف. اگر چیزی پیدا نکند، ظاهر خودمان میماند.

ویژگیها

data-url

نشانی صفحهای که دربارهاش گفتوگو میشود. گفتوگو به آن گره خورده است، پس باید برای همه خوانندگان یکسان باشد.

data-lang

زبان بلوک — یکی از زبانهای فهرست زیر. هر مقدار دیگری خطای 404 میدهد: کادر به زبانهای دیگر وجود ندارد.

• en — English
• zh-Hans — 简体中文
• es — Español
• ar — العربية
• ru — Русский
• vi — Tiếng Việt
• tr — Türkçe
• fa — فارسی

data-theme

تم بلوک: خودکار (مانند صفحهٔ شما)، روشن یا تیره.

data-height

ارتفاعی که تا اعلام ارتفاع کادر برای بلوک رزرو میکنیم، به پیکسل، مثلاً 200. بعد از آن بلوک با ارتفاع واقعی همتراز میشود و مقدار میان 120 و 2000 میماند. اگر پرش در صفحهتان پیداست آن را بگذارید: بهطور پیشفرض 160 پیکسل رزرو میکنیم.

وقتی دیدگاهی می‌رسد

این ویژگی را اضافه کنید تا بلوک به صفحهٔ شما خبر دهد دیدگاهی رسیده است. در رویداد یک واژه است و هیچ چیز دربارهٔ خواننده:

data-events="on" → vpvd:commented

شمار دیدگاه‌ها برای یک فهرست

فهرست مقاله‌ها به عدد نیاز دارد نه به بلوک: این درخواست شمار پاسخ‌های یک صفحه را برمی‌گرداند (صفر اگر کسی درباره‌اش بحث نکرده باشد). برای صفحهٔ شما باز است، کوکی نمی‌خواهد و چیزی از خواننده نمی‌داند:

GET /api/nodes/count?url=…

کاری که کد نمیکند

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

بررسی کنید که جا افتاده

صفحه را در مرورگر باز کنید و خطوط زیر را در کنسول اجرا کنید: یک خط، یک پاسخ.

1. کادر سر جایش است: بارگذار جای پیوند پشتیبان در ظرف را با آن عوض کرده
2. بارگذار کار کرده: مقدار زیر تعریف شده و نسخهاش 1 است window.vpvd
3. کادر ارتفاعش را اعلام کرده: عدد دیگر همان 160 رزروشده نیست و بلوک با گفتوگو همتراز شده

// 1
document.querySelector('iframe[data-vpvd-frame]')
// 2
window.vpvd.version
// 3
document.querySelector('iframe[data-vpvd-frame]').style.height

خودکار و از مرورگری بدون پنجره (Firefox) بررسی میکنید؟ مقدارهای صفحه به اسکریپت شما دیده نمیشود: در جهانی جدا اجرا میشود و فقط نشانهگذاری صفحه را با آن شریک است. نشانهها را از جهان اصلی بخوانید: اسکریپت خودتان را در سند بگذارید و پاسخ را از یک ویژگی بگیرید.

سیاست سختگیرانه در سایت شما

نشانی ما (https://vpvd.io) را در دستورهایی که بلوک را میآورند مجاز کنید:

• script-src — اسکریپت بلوک از آنجا میآید
• frame-src — خود گفتوگو داخل قاب ما نشان داده میشود
• child-src → frame-src — اگر سیاستتان آن را تعیین کرده باشد، کادرها از آن پیروی میکنند نه از فرمان عمومی: مقداری از منبعی دیگر بیصدا همه کادرهای صفحه، از جمله کادر ما، را میبندد. نشانی ما را اینجا هم بنویسید یا آن فرمان را بردارید.

اگر اسکریپت اصلاً اجرا نشود، خواننده همچنان یک پیوند ساده به گفتوگو میبیند: ظرف ما آن را از همان آغاز در خود دارد.

پرسشها

کد برای صفحه شما

سازنده کد را با زبان و پوستهای که انتخاب میکنید میسازد.

باز کردن سازنده