Sitenizde tartışma
Kodu sayfaya yapıştırın — bloğun kabı neredeyse tartışma bloğu orada belirir. Geri kalan her şey bizim çerçevemizin içinde yaşar: sizin işaretlemeniz, stilleriniz ve betikleriniz olduğu gibi kalır.
Kendi sayfanızda deneyin
Hazır kod
<div data-vpvd-thread data-url="https://example.org/article" data-lang="tr" data-theme="auto"> <a href="https://vpvd.io/embed/tr?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Tartışmayı vpvd üzerinde aç</a> </div> <script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>
Okuyucularınız ne görecek
Nereye yapıştırılır
- Statik siteler ve kendi şablonlarınız
- WordPress
- Tilda
- Next.js, Nuxt, React
<div data-vpvd-thread data-url="https://example.org/article" data-lang="tr" data-theme="auto"> <a href="https://vpvd.io/embed/tr?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Tartışmayı vpvd üzerinde aç</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="tr" data-theme="auto">
<a href="https://vpvd.io/embed/tr?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Tartışmayı vpvd üzerinde aç</a>
</div>
);
} Yeniden yüklenmeden değişen sayfalar
// after every client-side transition: window.vpvd.refresh();
Tema ve yazı tipi
Nitelikler
data-url- tartışılan sayfanın adresi. Tartışma ona bağlıdır, bu yüzden bütün okuyucularda aynı olmalı.
data-lang- bloğun dili — aşağıdaki listedeki dillerden biri. Başka bir değer 404 verir: çerçeve diğer dillerde yok.
en— Englishzh-Hans— 简体中文es— Españolar— العربيةru— Русскийvi— Tiếng Việttr— Türkçefa— فارسی
data-theme- blok teması: otomatik (sayfanızdaki gibi), açık ya da koyu.
data-height- çerçeve kendi yüksekliğini bildirene kadar blok için ayırdığımız yükseklik, piksel olarak, örneğin 200. Sonra blok gerçek yüksekliğe uyar; değer 120–2000 arasında kalır. Sayfanızda sıçrama belli oluyorsa bunu yazın: varsayılan olarak 160 piksel ayırıyoruz.
Bir yorum geldiğinde
Liste için yorum sayısı
Kodun yapmadıkları
Gerçekten yerleşti mi
- çerçeve yerinde: yükleyici kapsayıcıdaki yedek bağlantının yerine onu koydu
- yükleyici çalıştı: aşağıdaki değer tanımlı ve sürümü 1
window.vpvd - çerçeve yüksekliğini bildirdi: sayı artık ayrılan 160 değil ve blok başlıkla aynı hizada
// 1
document.querySelector('iframe[data-vpvd-frame]')
// 2
window.vpvd.version
// 3
document.querySelector('iframe[data-vpvd-frame]').style.height Sitenizde katı politika
script-src— bloğun betiği oradan gelirframe-src— başlığın kendisi bizim çerçevemizde görünürchild-src→frame-src— politikanız onu tanımlıyorsa çerçeveleri genel yönerge değil o yönetir: başka bir kaynaktan gelen bir değer sayfadaki bütün çerçeveleri, bizimkini de sessizce kapatır. Adresimizi buraya da yazın — ya da o yönergeyi kaldırın.