نقاش على موقعك

جرّبه على صفحتك

أدخل عنوان الصفحة فتحصل على الشيفرة وترى الكتلة هنا مباشرة. المعاينة تستخدم الشيفرة نفسها التي تنسخها: حاوية واحدة وسكربت واحد.

<div data-vpvd-thread data-url="https://example.org/article" data-lang="ar" data-theme="auto">
  <a href="https://vpvd.io/embed/ar?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="ar" data-theme="auto">
  <a href="https://vpvd.io/embed/ar?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="ar" data-theme="auto">
			<a href="https://vpvd.io/embed/ar?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 — إن حدّدتها سياستك، فالإطارات تتبعها هي لا التوجيه العام: قيمة من مصدر آخر تحجب بصمت كل إطارات الصفحة، ومنها إطارنا. اذكر عنواننا هنا أيضًا، أو أزل التوجيه.

إذا لم يعمل السكربت إطلاقًا فسيظل القارئ يرى رابطًا عاديًا إلى النقاش: حاويتنا تحمله من البداية.

أسئلة

شيفرة لصفحتك

المولّد يبني الشيفرة باللغة والمظهر الذي تختاره.

افتح المولّد