Thảo luận trên trang của bạn
Dán mã vào trang — khối thảo luận hiện ra ngay chỗ khung chứa của nó. Mọi thứ còn lại nằm trong khung của chúng tôi: đánh dấu, kiểu dáng và mã của bạn giữ nguyên.
Thử trên trang của bạn
Mã sẵn sàng
<div data-vpvd-thread data-url="https://example.org/article" data-lang="vi" data-theme="auto"> <a href="https://vpvd.io/embed/vi?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Mở thảo luận trên vpvd</a> </div> <script src="https://vpvd.io/embed.js" async referrerpolicy="no-referrer"></script>
Độc giả sẽ thấy gì
Dán vào đâu
- Trang tĩnh và mẫu tự viết
- WordPress
- Tilda
- Next.js, Nuxt, React
<div data-vpvd-thread data-url="https://example.org/article" data-lang="vi" data-theme="auto"> <a href="https://vpvd.io/embed/vi?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Mở thảo luận trên 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="vi" data-theme="auto">
<a href="https://vpvd.io/embed/vi?url=https%3A%2F%2Fexample.org%2Farticle&theme=auto" target="_blank" rel="noopener">Mở thảo luận trên vpvd</a>
</div>
);
} Trang đổi mà không tải lại
// after every client-side transition: window.vpvd.refresh();
Giao diện và phông chữ
Thuộc tính
data-url- địa chỉ của trang được thảo luận. Thảo luận gắn với nó, nên địa chỉ phải giống nhau với mọi người đọc.
data-lang- ngôn ngữ của khối — một trong các ngôn ngữ ở danh sách dưới. Giá trị nào khác sẽ trả 404: khung không tồn tại ở ngôn ngữ khác.
en— Englishzh-Hans— 简体中文es— Españolar— العربيةru— Русскийvi— Tiếng Việttr— Türkçefa— فارسی
data-theme- chủ đề khối: tự động (như trên trang của bạn), sáng hoặc tối.
data-height- chiều cao dành sẵn cho khối cho tới khi khung báo chiều cao của nó, tính bằng pixel, ví dụ 200. Sau đó khối khớp với chiều cao thật; giá trị nằm trong khoảng 120–2000. Hãy đặt nếu trang bạn thấy rõ sự nhảy: mặc định chúng tôi dành 160 pixel.
Khi có bình luận mới
Số bình luận cho danh sách
Mã không làm gì
Kiểm tra xem đã nhúng được chưa
- khung đã ở đúng chỗ: trình nạp đã thay liên kết dự phòng trong khung chứa bằng nó
- trình nạp đã chạy: giá trị dưới đã có và phiên bản là 1
window.vpvd - khung đã báo chiều cao: con số không còn là 160 dành sẵn, và khối ăn khớp với mạch thảo luận
// 1
document.querySelector('iframe[data-vpvd-frame]')
// 2
window.vpvd.version
// 3
document.querySelector('iframe[data-vpvd-frame]').style.height Chính sách nghiêm ngặt trên trang của bạn
script-src— mã của khối đến từ đóframe-src— bản thân luồng thảo luận hiện trong khung của chúng tôichild-src→frame-src— nếu chính sách của bạn có đặt nó, khung tuân theo nó chứ không theo chỉ thị chung: một giá trị từ nguồn khác sẽ âm thầm chặn mọi khung trên trang, kể cả khung của chúng tôi. Hãy ghi địa chỉ của chúng tôi vào đây nữa — hoặc bỏ chỉ thị đó.