在您的网站上讨论

在你的页面上试一下

填上页面地址——立刻得到代码，也立刻在下面看到这个块。预览用的就是你要复制的那段代码：一个容器和一个脚本。

<div data-vpvd-thread data-url="https://example.org/article" data-lang="zh-Hans" data-theme="auto">
  <a href="https://vpvd.io/embed/zh-Hans?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="zh-Hans" data-theme="auto">
  <a href="https://vpvd.io/embed/zh-Hans?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="zh-Hans" data-theme="auto">
			<a href="https://vpvd.io/embed/zh-Hans?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 — 如果你的策略里写了它，管住框的就是它而不是那条通用指令：来自别的来源的一个值会安静地挡掉页面上所有框，包括我们的。把我们地址也写进这条——或者把它删掉。

如果脚本完全没能运行，读者仍然会看到一个通往讨论的普通链接：我们的容器从一开始就把它放在里面。

常见问题

给您的页面的代码

生成器会按您选择的语言和主题拼出代码。

打开生成器